@charset "UTF-8";

.logo-marka { height: 36px; width: auto; display: block; }
[data-theme="dark"] .logo-marka.wg-motywu { content: url('../../assets/img/logo-biale.webp'); }

.ico { font-style: normal; line-height: 0; vertical-align: -0.12em; display: inline-block; }
.ico:not(:only-child) { margin-right: 0.45em; }
.ico::before { line-height: 0; }
button .ico, a .ico { color: inherit; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --granat: #17183B;         
  --granat-jasny: #24265A;   
  --niebieski-ciemny: #204EB8;
  --zolty: #FFC83D;          
  --lawenda: #D4D5F0;        
  --lawenda-ciemna: #C9CAE8;
  --szary-marki: #9A9CB8;    
  --font-tekst: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-naglowek: 'Outfit', 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --zielen-gleboka: #1F7A35;
  --zielen-pastel:  #9AD2A6;
  --zielen-tlo: rgba(53, 166, 77, 0.10);

  --primary: #2463E9;      
  --primary-dark: #204EB8;
  --verde:   #1F7A35;      
  --rosso:   #DB2727;      
  --marka-zielony:   #35A64D;
  --marka-czerwony:  #DB2727;
  --marka-niebieski: #2463E9;
  --srednie: #2463E9;  
  --bianco:  #FFFFFF;
  --crema:   #F3F5FB;  
  --oro:     #17183B;  
  --na-akcencie: #FFFFFF;
  --przycisk: var(--oro);
  --na-przycisku: var(--na-akcencie);
  --fokus: #2463E9;    
  --strzalka-granatowa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317183B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6.5l5.5 5.5-5.5 5.5'/%3E%3C/svg%3E");
  --strzalka-zolta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC83D' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6.5l5.5 5.5-5.5 5.5'/%3E%3C/svg%3E");
  --przycisk-kolko: #FFC83D;
  --przycisk-kolko-strzalka: var(--strzalka-granatowa);
  --oko-granatowe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317183B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12s3.5-6.5 9.5-6.5 9.5 6.5 9.5 6.5-3.5 6.5-9.5 6.5S2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --oko-zolte: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC83D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12s3.5-6.5 9.5-6.5 9.5 6.5 9.5 6.5-3.5 6.5-9.5 6.5S2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --testo:   #17183B;  
  --grigio:  #4A4B6B;  
  --card-bg: #FFFFFF;
  --shadow:  0 1px 2px rgba(23, 24, 59, 0.05);
  --shadow-hover: 0 14px 30px -16px rgba(23, 24, 59, 0.35);
  --radius:  22px;
  --transition: 0.3s cubic-bezier(.4,0,.2,1);

  --border:       #E3E4EF; 
  --border-2:     #D4D5F0; 
  --bg-soft:      #ECEDF6; 
  --muted-light:  #9A9CB8; 
  --muted-dark:   #2E3055; 
  --border-warm:      #E3E4EF; 
  --border-warm-soft: #EDEEF6; 
  --border-warm-dash: #9A9CB8; 
  --border-warm-2:    #EDEEF6; 
  --bg-error-soft:   #FBE6E6; 
  --bg-error-soft2:  #F8D9D9; 
  --ai-wstawka-znak: #B81E1E;
  --bg-success-soft: #E4F3E7; 
  --bg-warn-soft:    #E6EDFC; 
  --bg-amber-soft:   #EEEFF5; 
  --bg-info-soft:    #E6EDFC; 
  --pigulka-tlo:   rgba(23, 24, 59, 0.72);
  --pigulka-tekst: #FFFFFF;
  --pigulka-cicha: rgba(23, 24, 59, 0.07);
  --kratka-linia:    #E3E6F2; 
  --tekst-neutralny: #6B6D8A; 
  --bg-highlight:    #FFF4D6;
  --bg-gold-soft:    #FFF6DC; 
  --bg-success-grad-a: #EEF8F0; 
  --bg-success-grad-b: #E4F3E7; 
  --chart-latwe: #35A64D; 
  --audio-tile-bg: #EEEDFB; 
  --audio-tile-border: #C9CAE8;
  --wordmap-latwe-border:   #A8DBB3; 
  --wordmap-srednie-border: #A9C1F5;
  --wordmap-trudne-border:  #F0A9A9;
  --krawedz-kafla: #CBD0E1;
  --fokus-pierscien: rgba(36, 99, 233, 0.14);
  --czerwien-tekst: #B81E1E;
  --strzalka-szara: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8DAA' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6.5l5.5 5.5-5.5 5.5'/%3E%3C/svg%3E");
  --zaslona: rgba(23, 24, 59, 0.62);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --zielen-gleboka: #1F7A35;
    --zielen-pastel:  #9AD2A6;
    --zielen-tlo: rgba(76, 194, 102, 0.16);
    --primary: #5B90F5;
    --primary-dark: #4F82F0;
    --verde:   #8BDDA0;
    --rosso:   #FF6B6B;
    --marka-czerwony:  #EF4444;
    --marka-niebieski: #3B82F6;
    --srednie: #5B90F5;
    --bianco:  #1F1F1F;
    --crema:   #171717;
    --oro:     #FFC83D;
    --na-akcencie: #17183B;
    --fokus: #FFC83D;
    --przycisk-kolko: #17183B;
    --przycisk-kolko-strzalka: var(--strzalka-zolta);
    --testo:   #D4D4D4;
    --grigio:  #9D9D9D;
    --card-bg: #1F1F1F;
    --shadow:  0 4px 24px rgba(0,0,0,0.35);
    --shadow-hover: 0 14px 34px -14px rgba(0,0,0,0.7);

    --border:       #303030;
    --border-2:     #454545;
    --bg-soft:      #262626;
    --muted-light:  #8A8A8A;
    --muted-dark:   #BDBDBD;
    --border-warm:      #303030;
    --border-warm-soft: #262626;
    --border-warm-dash: #454545;
    --border-warm-2:    #262626;
    --bg-error-soft:   #3A1620;
    --bg-error-soft2:  #451B26;
    --ai-wstawka-znak: #FCA5A5;
    --bg-success-soft: #15331F;
    --bg-warn-soft:    #16254F;
    --bg-amber-soft:   #2A2A2A;
    --bg-info-soft:    #16254F;
    --pigulka-tlo:   rgba(212, 212, 212, 0.16);
    --pigulka-tekst: #D4D4D4;
    --pigulka-cicha: rgba(212, 212, 212, 0.10);
    --kratka-linia:    #2A2A2A;
    --tekst-neutralny: #9D9D9D;
    --bg-highlight:    rgba(255, 200, 61, 0.14);
    --bg-gold-soft:    rgba(255, 200, 61, 0.12);
    --bg-success-grad-a: #15331F;
    --bg-success-grad-b: #13301D;
    --chart-latwe: #4CC266;
    --audio-tile-bg: #2B2A55;
    --audio-tile-border: #7B77C7;
    --wordmap-latwe-border:   #2D6B3C;
    --wordmap-srednie-border: #2B4A8F;
    --wordmap-trudne-border:  #7A2E36;
    --krawedz-kafla: #454545;
    --fokus-pierscien: rgba(91, 144, 245, 0.22);
    --czerwien-tekst: #FCA5A5;
    --strzalka-szara: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6.5l5.5 5.5-5.5 5.5'/%3E%3C/svg%3E");
    --zaslona: rgba(0, 0, 0, 0.62);
  }
}
:root[data-theme="dark"] {
  --zielen-gleboka: #1F7A35;
  --zielen-pastel:  #9AD2A6;
  --zielen-tlo: rgba(76, 194, 102, 0.16);
  --primary: #5B90F5;
  --primary-dark: #4F82F0;
  --verde:   #8BDDA0;
  --rosso:   #FF6B6B;
  --marka-czerwony:  #EF4444;
  --marka-niebieski: #3B82F6;
  --srednie: #5B90F5;
  --bianco:  #1F1F1F;
  --crema:   #171717;
  --oro:     #FFC83D;
  --na-akcencie: #17183B;
  --fokus: #FFC83D;
  --przycisk-kolko: #17183B;
  --przycisk-kolko-strzalka: var(--strzalka-zolta);
  --testo:   #D4D4D4;
  --grigio:  #9D9D9D;
  --card-bg: #1F1F1F;
  --shadow:  0 4px 24px rgba(0,0,0,0.35);
  --shadow-hover: 0 14px 34px -14px rgba(0,0,0,0.7);

  --border:       #303030;
  --border-2:     #454545;
  --bg-soft:      #262626;
  --muted-light:  #8A8A8A;
  --muted-dark:   #BDBDBD;
  --border-warm:      #303030;
  --border-warm-soft: #262626;
  --border-warm-dash: #454545;
  --border-warm-2:    #262626;
  --bg-error-soft:   #3A1620;
  --bg-error-soft2:  #451B26;
  --ai-wstawka-znak: #FCA5A5;
  --bg-success-soft: #15331F;
  --bg-warn-soft:    #16254F;
  --bg-amber-soft:   #2A2A2A;
  --bg-info-soft:    #16254F;
  --pigulka-tlo:   rgba(212, 212, 212, 0.16);
  --pigulka-tekst: #D4D4D4;
  --pigulka-cicha: rgba(212, 212, 212, 0.10);
  --kratka-linia:    #2A2A2A;
  --tekst-neutralny: #9D9D9D;
  --bg-highlight:    rgba(255, 200, 61, 0.14);
  --bg-gold-soft:    rgba(255, 200, 61, 0.12);
  --bg-success-grad-a: #15331F;
  --bg-success-grad-b: #13301D;
  --chart-latwe: #4CC266;
  --audio-tile-bg: #2B2A55;
  --audio-tile-border: #7B77C7;
  --wordmap-latwe-border:   #2D6B3C;
  --wordmap-srednie-border: #2B4A8F;
  --wordmap-trudne-border:  #7A2E36;
  --krawedz-kafla: #454545;
  --fokus-pierscien: rgba(91, 144, 245, 0.22);
  --czerwien-tekst: #FCA5A5;
  --strzalka-szara: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6.5l5.5 5.5-5.5 5.5'/%3E%3C/svg%3E");
  --zaslona: rgba(0, 0, 0, 0.62);
}
html { color-scheme: light dark; }
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

body {
  font-family: var(--font-tekst);
  font-weight: 500;
  background: var(--crema);
  color: var(--testo);
  min-height: 100vh;
  overflow-wrap: break-word;
}

.app-header { transition: transform 0.22s ease; }
body.naglowek-schowany .app-header { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .app-header { transition: none; } }

body { touch-action: manipulation; }

@media (hover: none) and (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea, select, [contenteditable="true"] { font-size: 16px !important; }
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-x: none;
}
@supports (padding: env(safe-area-inset-left)) {
  .header-inner {
    padding-left:  max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
  }
  .cookie-baner {
    padding-left:  max(22px, env(safe-area-inset-left));
    padding-right: max(22px, env(safe-area-inset-right));
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
h1, h2, h3, .card-title, .btn, .header-title, .card-word, .card-word-back,
.mode-tab, .settings-title, .count, .leaderboard-time, .stat-num {
  font-weight: 700;
}
:where(button, input, select, textarea):not(.auth-screen *) { font-family: inherit; }
:where(h1, h2, h3, .card-word, .card-word-back, .settings-title, .count, .stat-num):not(.auth-screen *) {
  font-family: var(--font-naglowek);
  font-weight: 800;
  letter-spacing: -0.01em;
}
:focus-visible { outline-color: var(--fokus); }

.app-header {
  background: var(--crema);
  color: var(--testo);
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--border-warm-soft);
}
.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.header-title {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-title span { font-size: 2rem; }
.header-actions { display: flex; align-items: center; gap: 10px; }

.header-lang { position: relative; display: flex; align-items: center; gap: 2px; }
.header-lang-caret {
  background: var(--border); border: none; border-radius: 6px;
  color: var(--testo); font-size: 0.7rem; cursor: pointer; padding: 2px 4px;
  line-height: 1; opacity: 0.85;
}
.header-lang-caret:hover { opacity: 1; background: var(--border-2); }
.header-lang-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 200;
  background: var(--card-bg); border: 1px solid var(--border-warm-soft);
  border-radius: 12px; box-shadow: var(--shadow-hover);
  min-width: 170px; padding: 6px; font-size: 0.8rem; font-weight: 600;
}
.header-lang-item {
  display: flex; align-items: center; gap: 7px; padding: 7px 10px;
  border-radius: 8px; cursor: pointer; color: var(--testo);
}
.header-lang-item:hover { background: var(--crema); }
.header-lang-item > span:first-of-type { flex: 1; }
.header-lang-ile {
  font-size: 0.72rem; font-weight: 800; color: var(--grigio);
  background: var(--crema); border-radius: 999px; padding: 2px 7px; white-space: nowrap;
}
.header-lang-item.active .header-lang-ile { background: var(--card-bg); }
.header-lang-kosz {
  border: none; background: transparent; color: var(--grigio); cursor: pointer;
  padding: 2px 4px; border-radius: 6px; opacity: 0; transition: var(--transition);
  display: inline-flex; align-items: center;
}
.header-lang-item:hover .header-lang-kosz { opacity: 1; }
.header-lang-kosz:hover { color: var(--rosso); background: var(--bg-error-soft); }
@media (hover: none) { .header-lang-kosz { opacity: 0.55; } }
.header-lang-kosz .ico { margin: 0; font-size: 0.78rem; }

.usun-jezyk-lista {
  list-style: none; margin: 0 0 16px; padding: 12px 14px;
  background: var(--bg-error-soft); border-radius: 10px;
  font-size: 0.84rem; line-height: 1.9; color: var(--testo);
}
.usun-jezyk-lista li { display: flex; justify-content: space-between; gap: 12px; }
.usun-jezyk-lista li b { font-weight: 800; }

.cmty-kartka {
  background:
    linear-gradient(var(--kratka-linia, rgba(120,140,170,0.13)) 1px, transparent 1px) 0 0 / 100% 26px,
    linear-gradient(90deg, var(--kratka-linia, rgba(120,140,170,0.13)) 1px, transparent 1px) 0 0 / 26px 100%;
  background-color: var(--card-bg);
  border: 1px solid var(--border-warm); border-radius: 12px;
  padding: 14px 16px 14px 22px; position: relative; overflow: hidden;
}
.cmty-kartka::before {
  content: ''; position: absolute; left: 14px; top: 0; bottom: 0; width: 1px;
  background: color-mix(in srgb, var(--rosso) 32%, transparent);
}
.cmty-kartka-zdanie {
  font-size: 0.9rem; line-height: 26px; color: var(--testo); font-weight: 600;
  padding-left: 10px;   
}
.cmty-kartka-wiecej {
  font-size: 0.78rem; line-height: 26px; color: var(--grigio); font-style: italic; padding-left: 10px;
}
.cmty-kartka-legenda {
  display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center;
  font-size: 0.72rem; color: var(--grigio); margin-top: 8px;
}

.paczka-pasek-trybu {
  display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap;
  padding: 8px 12px; margin-bottom: 12px; border-radius: 12px;
  background: var(--bg-gold-soft);
  border: 1px solid var(--border-warm); border-left: 4px solid var(--verde);
  font-size: 0.82rem; font-weight: 600; color: var(--testo);
}
.ppt-ikona {
  flex: none; width: 27px; height: 27px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card-bg); border: 1px solid var(--border-warm);
  color: var(--verde); font-size: 0.85rem;
}
.ppt-ikona .ico { margin: 0; }
.ppt-tresc { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ppt-tytul {
  font-weight: 600; color: var(--muted-dark);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ppt-tytul b { font-weight: 800; color: var(--testo); }
.ppt-tresc b { font-weight: 800; }
.ppt-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 3px 9px;
  font-size: 0.74rem; font-weight: 700; color: var(--grigio);
}
.ppt-umiesz { display: inline-flex; align-items: center; gap: 6px; }
.ppt-umiesz-tor {
  width: 52px; height: 5px; border-radius: 999px; background: var(--border);
  overflow: hidden; display: inline-block;
}
.ppt-umiesz-tor i { display: block; height: 100%; border-radius: 999px; background: var(--marka-zielony); }
.ppt-wyjscie {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  border: 1px solid var(--border-2); background: var(--card-bg); color: var(--testo);
  border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 0.78rem; font-weight: 700;
  transition: var(--transition);
}
.ppt-wyjscie:hover { border-color: var(--rosso); color: var(--rosso); }
.ppt-wyjscie .ico { margin: 0; }
.ppt-plan {
  flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  padding-top: 7px; margin-top: 1px; border-top: 1px solid var(--border-warm);
  font-size: 0.72rem; font-weight: 600; color: var(--grigio);
}
.ppt-plan > span:not(.ppt-plan-zasada) {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 999px;
  background: var(--card-bg); border: 1px solid var(--border-warm);
}
.ppt-plan .ico { margin: 0; }
.ppt-plan b { font-weight: 800; color: var(--testo); font-variant-numeric: tabular-nums; }
.ppt-plan > span.ppt-cel-gotowy { color: var(--verde); border-color: var(--verde); }
.ppt-plan > span.ppt-premia { color: #B45309; border-color: #F59E0B; }
.ppt-plan-zasada {
  order: -1; flex-basis: 100%; font-weight: 500; font-size: 0.71rem;
  color: var(--muted-light);
}
.ppt-akcje { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
@media (max-width: 720px) {
  .ppt-akcje { margin-left: 0; }
}
.ppt-akcja {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  border: 1px solid var(--border-2); background: var(--card-bg); color: var(--testo);
  border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 0.78rem; font-weight: 700;
  transition: var(--transition);
}
.ppt-akcja:hover { border-color: var(--zielen-gleboka); color: var(--zielen-gleboka); }
.ppt-akcja.aktywna { background: var(--zielen-gleboka); border-color: var(--zielen-gleboka); color: #fff; }
.ppt-akcja.aktywna:hover { color: #fff; opacity: 0.9; }
.ppt-akcja .ico { margin: 0; }
.ppt-akcja-ile { opacity: 0.7; font-weight: 800; }
.wordmap-paczka-graj {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  border: none; border-radius: 999px; padding: 5px 13px;
  background: var(--zielen-gleboka); color: #fff; font: inherit; font-size: 0.76rem; font-weight: 800;
  transition: var(--transition);
}
.wordmap-paczka-graj:hover { filter: brightness(1.08); transform: translateY(-1px); }

.odmiana-btn {
  position: absolute; top: 14px; right: 54px; z-index: 3;
  border: none; background: transparent; cursor: pointer;
  font-size: 1.05rem; line-height: 1; padding: 4px; border-radius: 8px;
  opacity: 0.45; transition: var(--transition);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.odmiana-btn:hover { opacity: 1; transform: scale(1.15); }

.odmiana-naglowek {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 1.15rem; font-weight: 800; margin-bottom: 14px;
}
.odmiana-czas { margin-bottom: 16px; }
.odmiana-czas-nazwa { font-size: 0.9rem; font-weight: 800; color: var(--testo); }
.odmiana-czas-opis { font-size: 0.76rem; color: var(--grigio); line-height: 1.5; margin-bottom: 8px; }
.odmiana-formy { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px 16px; margin-bottom: 8px; }
@media (max-width: 520px) { .odmiana-formy { grid-template-columns: 1fr; } }
.odmiana-forma { display: flex; gap: 8px; font-size: 0.84rem; padding: 3px 0; border-bottom: 1px dashed var(--border-warm-soft); }
.odmiana-forma-osoba { color: var(--grigio); min-width: 62px; }
.odmiana-forma-tekst { font-weight: 800; color: var(--testo); }
.odmiana-przyklad {
  font-size: 0.78rem; line-height: 1.6; padding: 8px 12px; border-radius: 8px;
  background: var(--crema); color: var(--testo);
}
.odmiana-przyklad i { color: var(--grigio); font-style: normal; }

.odm-karta {
  border: 1px solid var(--border-warm); border-radius: 16px;
  padding: 22px 20px; text-align: center; margin-bottom: 6px;
  font-size: 1.12rem; font-weight: 700; line-height: 1.7; color: var(--testo);
}
.odm-tlum-nad {
  border: 1px solid var(--border-warm); border-bottom: none;
  border-radius: 16px 16px 0 0; margin-bottom: -1px;
  padding: 11px 18px 9px; background: var(--bg-soft);
  text-align: center; font-size: 0.88rem; font-weight: 700; line-height: 1.5; color: var(--grigio);
}
.odm-karta.z-tlumaczeniem { border-top-left-radius: 0; border-top-right-radius: 0; }

.odm-luka {
  display: inline-block; min-width: 66px; padding: 0 6px;
  border-bottom: 2px solid var(--oro); color: var(--primary); font-weight: 800;
}
.odm-luka.pusta { color: var(--muted-light); }
.odm-luka.dobra { color: var(--zielen-gleboka); border-bottom-color: var(--zielen-gleboka); }
.odm-luka.zla   { color: var(--rosso);          border-bottom-color: var(--rosso); }

.odm-bezok { font-size: 0.74rem; font-weight: 700; color: var(--grigio); text-align: center; margin-bottom: 10px; }

.rodz-haslo { text-align: center; font-size: 1.7rem; font-weight: 800; color: var(--testo); margin-bottom: 4px; }
.rodz-luka {
  display: inline-block; min-width: 52px; margin-right: 8px;
  border-bottom: 3px solid var(--oro); color: var(--primary);
}
.rodz-luka.pusta { user-select: none; }
.rodz-tlum { text-align: center; font-size: 0.8rem; color: var(--grigio); margin-bottom: 18px; }
.rodz-zdanie { text-align: center; font-size: 1.3rem; font-weight: 700; line-height: 1.6; color: var(--testo); max-width: 560px; margin: 0 auto 6px; }
.rodz-zdanie .rodz-luka { margin: 0 2px; }
.rodz-opcje { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.rodz-opcja {
  min-width: 84px; padding: 14px 18px; border-radius: 14px; cursor: pointer;
  border: 2px solid var(--border-warm); background: var(--card-bg);
  font: inherit; font-size: 1.25rem; font-weight: 800; color: var(--primary);
  transition: var(--transition);
}
.rodz-opcja:hover { border-color: var(--oro); transform: translateY(-2px); }
.rodz-opcje.zablokowane .rodz-opcja { cursor: default; transform: none; }
.rodz-opcja.klaw-wybor, .pf-btn.klaw-wybor, .intruz-opcja.klaw-wybor,
.quiz-slowo-opcja.klaw-wybor, .game-tile.klaw-wybor, .quiz-kafel.klaw-wybor {
  outline: 3px solid var(--oro); outline-offset: 3px; transform: translateY(-2px);
}
.zablokowane .klaw-wybor { outline: none; }
.mini-exam-card .bez-audio-btn.klaw-wybor,
.mini-exam-card .quiz-glosnik.klaw-wybor,
.mini-exam-card .quiz-mik.klaw-wybor,
.mini-exam-card .quiz-sprawdz.klaw-wybor {
  outline: 3px solid var(--oro); outline-offset: 3px;
}
.rodz-opcja.poprawna { border-color: var(--zielen-gleboka); color: var(--zielen-gleboka); background: var(--bg-success-soft); }
.rodz-opcja.bledna   { border-color: var(--rosso); color: var(--rosso); background: var(--bg-error-soft); }

.pf-para { text-align: center; margin-bottom: 6px; }
.pf-slowo { font-size: 1.5rem; font-weight: 800; color: var(--testo); }
.pf-tlum { font-size: 1.5rem; font-weight: 800; color: var(--primary); }
.pf-czas { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; margin: 18px 0; }
.pf-czas-fill { height: 100%; width: 100%; border-radius: 999px; background: var(--oro); transform-origin: left; }
.pf-czas.leci .pf-czas-fill { animation: pfOdliczanie var(--pf-czas, 3s) linear forwards; }
.pf-czas.leci.pauza .pf-czas-fill { animation-play-state: paused; }
@keyframes pfOdliczanie { from { transform: scaleX(1); } to { transform: scaleX(0); } }

.combo-licznik {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 13px;
  border-radius: 999px; font-weight: 900; font-size: 0.95rem; line-height: 1;
  background: var(--bg-soft); color: var(--testo);
  border: 2px solid var(--border-2);
  transition: background 0.4s, color 0.4s, border-color 0.4s, box-shadow 0.4s;
}
.combo-licznik .combo-znak { display: inline-flex; align-items: center; }
.combo-licznik .combo-znak svg { display: block; }
.combo-licznik .combo-mnoznik {
  font-size: 0.72rem; font-weight: 900; padding: 2px 7px; border-radius: 999px;
  background: color-mix(in srgb, currentColor 14%, transparent);
}
.combo-licznik.combo-t1 {
  background: linear-gradient(135deg, #DBEAFE, #BFDBFE); color: #1D4ED8; border-color: #60A5FA;
  box-shadow: 0 0 14px rgba(59, 130, 246, 0.35);
}
.combo-licznik.combo-t2 {
  background: linear-gradient(135deg, #EDE9FE, #DDD6FE); color: #6D28D9; border-color: #A78BFA;
  box-shadow: 0 0 18px rgba(139, 92, 246, 0.45);
}
.combo-licznik.combo-t3 {
  background: linear-gradient(135deg, #FEF3C7, #FDE68A, #FCA5A5); color: #B45309; border-color: #F59E0B;
  box-shadow: 0 0 24px rgba(245, 158, 11, 0.65);
}
.combo-licznik.combo-t3 .combo-znak { animation: comboKorona 0.55s ease-in-out infinite; }
@keyframes comboKorona { 0%, 100% { transform: scale(1) rotate(-4deg); } 50% { transform: scale(1.25) rotate(5deg); } }
@keyframes comboPuls { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
.combo-licznik.puls { animation: comboPuls 0.3s ease; }
@keyframes comboProg {
  0% { transform: scale(0.7) rotate(-8deg); }
  45% { transform: scale(1.55) rotate(4deg); }
  70% { transform: scale(0.92) rotate(-2deg); }
  100% { transform: scale(1) rotate(0); }
}
.combo-licznik.prog { animation: comboProg 0.55s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes comboPek {
  0% { transform: scale(1); filter: none; }
  25% { transform: scale(1.15) rotate(3deg); background: #FEE2E2; border-color: #EF4444; color: #B91C1C; }
  55% { transform: scale(0.9) rotate(-6deg); opacity: 0.8; }
  100% { transform: scale(0.3) rotate(12deg); opacity: 0; }
}
.combo-licznik.combo-pek { animation: comboPek 0.6s ease forwards; }
.combo-baner {
  position: fixed; inset: 0; z-index: 99985; display: flex;
  align-items: center; justify-content: center; pointer-events: none;
}
.combo-baner-tekst {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  font-size: clamp(2.6rem, 9vw, 5.4rem); font-weight: 900; letter-spacing: 0.04em;
  background-clip: text; -webkit-background-clip: text; color: transparent;
  animation: comboBanerZycie 1.1s cubic-bezier(.25, 1.2, .4, 1) forwards;
  will-change: transform, opacity;
}
.combo-baner-tekst::before {
  content: ''; position: absolute; inset: -30% -14%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, var(--combo-blask, rgba(245, 158, 11, 0.4)), transparent 72%);
}
.combo-baner-tekst.t1 { background-image: linear-gradient(135deg, #60A5FA, #2563EB); --combo-blask: rgba(59, 130, 246, 0.38); }
.combo-baner-tekst.t2 { background-image: linear-gradient(135deg, #C4B5FD, #7C3AED); --combo-blask: rgba(139, 92, 246, 0.4); }
.combo-baner-tekst.t3 { background-image: linear-gradient(135deg, #FDE68A, #F59E0B, #EF4444); --combo-blask: rgba(245, 158, 11, 0.45); }
@keyframes comboBanerZycie {
  0%   { transform: scale(0.35); opacity: 0; }
  16%  { transform: scale(1.18); opacity: 1; }
  28%  { transform: scale(1); }
  74%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.08) translateY(-34px); opacity: 0; }
}
.combo-baner-tekst .blysk {
  text-align: center; padding: 8px 4px 4px;
  display: inline-flex; align-items: center;
  animation: comboBanerBlysk 0.4s ease-in-out infinite alternate;
}
.combo-baner-tekst .blysk svg { display: block; width: 0.8em; height: auto; }
.combo-baner-tekst .blysk.lustro { transform: scaleX(-1); }
.combo-baner-tekst.t1 .blysk { color: #3B82F6; }
.combo-baner-tekst.t2 .blysk { color: #8B5CF6; }
.combo-baner-tekst.t3 .blysk { color: #F59E0B; }
@keyframes comboBanerBlysk { from { scale: 1; rotate: -7deg; } to { scale: 1.22; rotate: 7deg; } }
.combo-plomyk {
  position: absolute; left: 50%; top: 58%; pointer-events: none;
  animation: comboPlomyk 1s ease-out forwards; opacity: 0;
  will-change: transform, opacity;   
}
.combo-plomyk svg { display: block; color: #F59E0B; }
.combo-baner.t1 .combo-plomyk svg { color: #60A5FA; }
.combo-baner.t2 .combo-plomyk svg { color: #A78BFA; }
.combo-baner.t3 .combo-plomyk svg { color: #FBBF24; }
@keyframes comboPlomyk {
  0%   { transform: translate(var(--p-x0, 0), 0) scale(0.5) rotate(0); opacity: 1; }
  100% { transform: translate(var(--p-x), -140px) scale(1.25) rotate(240deg); opacity: 0; }
}

.combo-fala {
  position: fixed; border-radius: 50%; pointer-events: none; z-index: 99980;
  border: 3px solid var(--combo-fala-kolor, #F59E0B);
  animation: comboFala 0.7s ease-out forwards;
}
@keyframes comboFala {
  0% { transform: scale(0.2); opacity: 0.9; }
  100% { transform: scale(3.2); opacity: 0; }
}
body { transition: background-color 0.9s ease; }
body.combo-t1, body.combo-t2, body.combo-t3 {
  background-attachment: fixed;
  background-size: 360px 280px;
  background-color: var(--combo-tlo);
  background-image: var(--combo-zamki);
  animation: comboZamkiDryf 120s linear infinite;
}
@keyframes comboZamkiDryf {
  from { background-position: 0 0; }
  to   { background-position: 360px 280px; }
}
@media (prefers-reduced-motion: reduce) {
  body.combo-t1, body.combo-t2, body.combo-t3 { animation: none; }
}
body.combo-t1 {
  --combo-tlo: color-mix(in srgb, var(--combo-akcent, #3B82F6) 6%, var(--crema));
  --combo-zamki: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 280'%3E%3Cg fill='%2360A5FA' fill-opacity='0.09' fill-rule='evenodd'%3E%3Cpath d='M30 92V62h3v-5h4v5h3v-5h4v5h3v30h18V72h3v-4h4v4h4v-4h4v4h3v20zM65 92V62h3v-5h4v5h3v-5h4v5h3v30zM53 92v-8a4 4 0 018 0v8z'/%3E%3Cpath d='M262 190v-46h4v-6h5v6h4v-6h5v6h4v46zM272 152v-16h2l8 4-8 4h-2z'/%3E%3Cpath d='M120 252v-22h4v-4h4v4h4v-4h4v4h4v8h14v-6h3v-3h3v3h3v-3h3v3h3v6h14v-8h4v-4h4v4h4v-4h4v4h4v22zM158 252v-7a4 4 0 018 0v7z'/%3E%3C/g%3E%3C/svg%3E");
}
body.combo-t2 {
  --combo-tlo: color-mix(in srgb, var(--combo-akcent, #8B5CF6) 7%, var(--crema));
  --combo-zamki: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 280'%3E%3Cg fill='%23A78BFA' fill-opacity='0.11' fill-rule='evenodd'%3E%3Cpath d='M30 92V62h3v-5h4v5h3v-5h4v5h3v30h18V72h3v-4h4v4h4v-4h4v4h3v20zM65 92V62h3v-5h4v5h3v-5h4v5h3v30zM53 92v-8a4 4 0 018 0v8z'/%3E%3Cpath d='M262 190v-46h4v-6h5v6h4v-6h5v6h4v46zM272 152v-16h2l8 4-8 4h-2z'/%3E%3Cpath d='M120 252v-22h4v-4h4v4h4v-4h4v4h4v8h14v-6h3v-3h3v3h3v-3h3v3h3v6h14v-8h4v-4h4v4h4v-4h4v4h4v22zM158 252v-7a4 4 0 018 0v7z'/%3E%3C/g%3E%3C/svg%3E");
}
body.combo-t3 {
  --combo-tlo: color-mix(in srgb, var(--combo-akcent, #F59E0B) 8%, var(--crema));
  --combo-zamki: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 280'%3E%3Cg fill='%23F59E0B' fill-opacity='0.13' fill-rule='evenodd'%3E%3Cpath d='M30 92V62h3v-5h4v5h3v-5h4v5h3v30h18V72h3v-4h4v4h4v-4h4v4h3v20zM65 92V62h3v-5h4v5h3v-5h4v5h3v30zM53 92v-8a4 4 0 018 0v8z'/%3E%3Cpath d='M262 190v-46h4v-6h5v6h4v-6h5v6h4v46zM272 152v-16h2l8 4-8 4h-2z'/%3E%3Cpath d='M120 252v-22h4v-4h4v4h4v-4h4v4h4v8h14v-6h3v-3h3v3h3v-3h3v3h3v6h14v-8h4v-4h4v4h4v-4h4v4h4v22zM158 252v-7a4 4 0 018 0v7z'/%3E%3C/g%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.combo-t1 {
    --combo-tlo: color-mix(in srgb, var(--combo-akcent, #3B82F6) 16%, var(--crema));
    --combo-zamki: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 280'%3E%3Cg fill='%2393C5FD' fill-opacity='0.12' fill-rule='evenodd'%3E%3Cpath d='M30 92V62h3v-5h4v5h3v-5h4v5h3v30h18V72h3v-4h4v4h4v-4h4v4h3v20zM65 92V62h3v-5h4v5h3v-5h4v5h3v30zM53 92v-8a4 4 0 018 0v8z'/%3E%3Cpath d='M262 190v-46h4v-6h5v6h4v-6h5v6h4v46zM272 152v-16h2l8 4-8 4h-2z'/%3E%3Cpath d='M120 252v-22h4v-4h4v4h4v-4h4v4h4v8h14v-6h3v-3h3v3h3v-3h3v3h3v6h14v-8h4v-4h4v4h4v-4h4v4h4v22zM158 252v-7a4 4 0 018 0v7z'/%3E%3C/g%3E%3C/svg%3E");
  }
  :root:not([data-theme="light"]) body.combo-t2 {
    --combo-tlo: color-mix(in srgb, var(--combo-akcent, #8B5CF6) 18%, var(--crema));
    --combo-zamki: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 280'%3E%3Cg fill='%23C4B5FD' fill-opacity='0.14' fill-rule='evenodd'%3E%3Cpath d='M30 92V62h3v-5h4v5h3v-5h4v5h3v30h18V72h3v-4h4v4h4v-4h4v4h3v20zM65 92V62h3v-5h4v5h3v-5h4v5h3v30zM53 92v-8a4 4 0 018 0v8z'/%3E%3Cpath d='M262 190v-46h4v-6h5v6h4v-6h5v6h4v46zM272 152v-16h2l8 4-8 4h-2z'/%3E%3Cpath d='M120 252v-22h4v-4h4v4h4v-4h4v4h4v8h14v-6h3v-3h3v3h3v-3h3v3h3v6h14v-8h4v-4h4v4h4v-4h4v4h4v22zM158 252v-7a4 4 0 018 0v7z'/%3E%3C/g%3E%3C/svg%3E");
  }
  :root:not([data-theme="light"]) body.combo-t3 {
    --combo-tlo: color-mix(in srgb, var(--combo-akcent, #F59E0B) 15%, var(--crema));
    --combo-zamki: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 280'%3E%3Cg fill='%23FCD34D' fill-opacity='0.15' fill-rule='evenodd'%3E%3Cpath d='M30 92V62h3v-5h4v5h3v-5h4v5h3v30h18V72h3v-4h4v4h4v-4h4v4h3v20zM65 92V62h3v-5h4v5h3v-5h4v5h3v30zM53 92v-8a4 4 0 018 0v8z'/%3E%3Cpath d='M262 190v-46h4v-6h5v6h4v-6h5v6h4v46zM272 152v-16h2l8 4-8 4h-2z'/%3E%3Cpath d='M120 252v-22h4v-4h4v4h4v-4h4v4h4v8h14v-6h3v-3h3v3h3v-3h3v3h3v6h14v-8h4v-4h4v4h4v-4h4v4h4v22zM158 252v-7a4 4 0 018 0v7z'/%3E%3C/g%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"] body.combo-t1 {
  --combo-tlo: color-mix(in srgb, var(--combo-akcent, #3B82F6) 16%, var(--crema));
  --combo-zamki: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 280'%3E%3Cg fill='%2393C5FD' fill-opacity='0.12' fill-rule='evenodd'%3E%3Cpath d='M30 92V62h3v-5h4v5h3v-5h4v5h3v30h18V72h3v-4h4v4h4v-4h4v4h3v20zM65 92V62h3v-5h4v5h3v-5h4v5h3v30zM53 92v-8a4 4 0 018 0v8z'/%3E%3Cpath d='M262 190v-46h4v-6h5v6h4v-6h5v6h4v46zM272 152v-16h2l8 4-8 4h-2z'/%3E%3Cpath d='M120 252v-22h4v-4h4v4h4v-4h4v4h4v8h14v-6h3v-3h3v3h3v-3h3v3h3v6h14v-8h4v-4h4v4h4v-4h4v4h4v22zM158 252v-7a4 4 0 018 0v7z'/%3E%3C/g%3E%3C/svg%3E");
}
:root[data-theme="dark"] body.combo-t2 {
  --combo-tlo: color-mix(in srgb, var(--combo-akcent, #8B5CF6) 18%, var(--crema));
  --combo-zamki: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 280'%3E%3Cg fill='%23C4B5FD' fill-opacity='0.14' fill-rule='evenodd'%3E%3Cpath d='M30 92V62h3v-5h4v5h3v-5h4v5h3v30h18V72h3v-4h4v4h4v-4h4v4h3v20zM65 92V62h3v-5h4v5h3v-5h4v5h3v30zM53 92v-8a4 4 0 018 0v8z'/%3E%3Cpath d='M262 190v-46h4v-6h5v6h4v-6h5v6h4v46zM272 152v-16h2l8 4-8 4h-2z'/%3E%3Cpath d='M120 252v-22h4v-4h4v4h4v-4h4v4h4v8h14v-6h3v-3h3v3h3v-3h3v3h3v6h14v-8h4v-4h4v4h4v-4h4v4h4v22zM158 252v-7a4 4 0 018 0v7z'/%3E%3C/g%3E%3C/svg%3E");
}
:root[data-theme="dark"] body.combo-t3 {
  --combo-tlo: color-mix(in srgb, var(--combo-akcent, #F59E0B) 15%, var(--crema));
  --combo-zamki: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 280'%3E%3Cg fill='%23FCD34D' fill-opacity='0.15' fill-rule='evenodd'%3E%3Cpath d='M30 92V62h3v-5h4v5h3v-5h4v5h3v30h18V72h3v-4h4v4h4v-4h4v4h3v20zM65 92V62h3v-5h4v5h3v-5h4v5h3v30zM53 92v-8a4 4 0 018 0v8z'/%3E%3Cpath d='M262 190v-46h4v-6h5v6h4v-6h5v6h4v46zM272 152v-16h2l8 4-8 4h-2z'/%3E%3Cpath d='M120 252v-22h4v-4h4v4h4v-4h4v4h4v8h14v-6h3v-3h3v3h3v-3h3v3h3v6h14v-8h4v-4h4v4h4v-4h4v4h4v22zM158 252v-7a4 4 0 018 0v7z'/%3E%3C/g%3E%3C/svg%3E");
}

@keyframes awansWibracja {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  15% { transform: translate(calc(-6px * var(--wib-sila, 1)), calc(1px * var(--wib-sila, 1))) rotate(calc(-0.5deg * var(--wib-sila, 1))); }
  30% { transform: translate(calc(5px * var(--wib-sila, 1)), calc(-1px * var(--wib-sila, 1))) rotate(calc(0.4deg * var(--wib-sila, 1))); }
  45% { transform: translate(calc(-4px * var(--wib-sila, 1)), calc(1px * var(--wib-sila, 1))) rotate(calc(-0.3deg * var(--wib-sila, 1))); }
  60% { transform: translate(calc(3px * var(--wib-sila, 1)), 0) rotate(calc(0.2deg * var(--wib-sila, 1))); }
  78% { transform: translate(calc(-2px * var(--wib-sila, 1)), 0) rotate(0); }
}
.awans-wibracja { animation: awansWibracja 0.5s ease; }
.konfetti-scena { position: fixed; width: 0; height: 0; z-index: 99990; pointer-events: none; }
.konfetti-kawalek {
  position: absolute; width: 9px; height: 14px; border-radius: 2px; opacity: 0;
  animation: konfettiLot var(--k-czas, 1.1s) cubic-bezier(.2, .5, .4, 1) forwards;
}
@keyframes konfettiLot {
  0%   { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; }
  55%  { transform: translate(calc(var(--k-dx) * 0.7), var(--k-wznos)) rotate(var(--k-obrot)) scale(1); opacity: 1; }
  100% { transform: translate(var(--k-dx), var(--k-spad)) rotate(calc(var(--k-obrot) * 2)) scale(0.7); opacity: 0; }
}

.polmetek {
  position: absolute; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; border-radius: var(--radius);
  background: var(--card-bg);
  box-shadow: inset 0 0 0 2px var(--verde);
  overflow: hidden;
}
.polmetek.hidden { display: none !important; }
.polmetek::before {
  content: ''; position: absolute; inset: -40%;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--verde) 24%, transparent) 0, transparent 55%);
  animation: polmetekPoswiata 2.4s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes polmetekPoswiata { from { transform: scale(0.9); opacity: 0.7; } to { transform: scale(1.1); opacity: 1; } }
.polmetek-tresc { position: relative; text-align: center; max-width: 460px; }
.polmetek.wjazd .polmetek-tresc { animation: polmetekWjazd 0.55s cubic-bezier(0.22, 1.4, 0.36, 1); }
@keyframes polmetekWjazd { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
.polmetek-pct {
  font-size: clamp(3.6rem, 12vw, 6rem); font-weight: 900; line-height: 1; color: var(--verde);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  text-shadow: 0 6px 24px color-mix(in srgb, var(--verde) 35%, transparent);
}
.polmetek-tytul { font-size: 1.35rem; font-weight: 800; margin-top: 10px; }
.polmetek-opis { font-size: 0.95rem; color: var(--grigio); line-height: 1.55; margin-top: 8px; }
.polmetek-akcje { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.polmetek-btn { margin: 0; font-size: 1.05rem; padding: 12px 26px; }
.polmetek-hint { font-size: 0.74rem; color: var(--muted-light); margin-top: 10px; }
.polmetek { --plansza-tlo: var(--card-bg); }
.polmetek.polowa { --plansza-tlo: #2463E9; }
.polmetek.rekord { --plansza-tlo: var(--zolty); }
.polmetek.combo { --plansza-tlo: var(--nak-kolor, #2463E9); }
.polmetek.brawo, .polmetek.cel-slowek { --plansza-tlo: var(--zolty); }
.polmetek.cel-slowek.koniec { --plansza-tlo: #35A64D; }
.polmetek.zamrozona .polmetek-btn, .polmetek.zamrozona .cs-nie { pointer-events: none; }
.polmetek.zamrozona .polmetek-btn { position: relative; overflow: hidden; }
.polmetek.zamrozona .polmetek-btn::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: color-mix(in srgb, var(--plansza-tlo) 58%, transparent);
  transform-origin: right center;
  animation: planszaOdmrazanie var(--zamrozenie-ms, 1s) linear forwards;
}
@keyframes planszaOdmrazanie { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.polmetek.zamrozona .cs-nie { opacity: 0.4; }
.polmetek-staty {
  margin: 14px auto 0; text-align: left; max-width: 400px;
  background: var(--bg-soft); border: 1px solid var(--border-2); border-radius: 14px;
  padding: 10px 14px; font-size: 0.86rem; line-height: 1.5;
}
.polmetek-staty.hidden { display: none; }
.polmetek-staty .ps-suma { color: var(--grigio); font-weight: 600; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.polmetek-staty .ps-naglowek { font-weight: 800; margin: 8px 0 3px; }
.polmetek-staty .ps-czysto { margin-top: 6px; color: var(--verde); font-weight: 700; display: flex; gap: 6px; align-items: center; }
.polmetek-staty ol { margin: 0; padding-left: 20px; }
.polmetek-staty li { margin: 2px 0; }
.polmetek-staty li small { color: var(--grigio); }
.polmetek-staty li span { color: var(--rosso); font-weight: 700; white-space: nowrap; margin-left: 4px; }

.polmetek.cel-slowek { --cs-akcent: #D97706; box-shadow: inset 0 0 0 2px var(--cs-akcent);
  align-items: flex-start; overflow-y: auto; padding: 28px 24px 22px; }
.polmetek.cel-slowek::before { inset: 0; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--cs-akcent) 22%, transparent) 0, transparent 55%); }
.polmetek.cel-slowek .polmetek-tresc { max-width: 580px; width: 100%; margin: auto 0; }
.polmetek.cel-slowek.koniec .cs-karty { margin: 12px 0 4px; gap: 10px 8px; }
.polmetek.cel-slowek.koniec .cs-karta { width: 140px; min-height: 0; padding: 12px 8px 8px; }
.polmetek.cel-slowek .cs-glowny {
  --polka-kolor: var(--verde);
  margin-bottom: 4px;
  transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--polka-kolor) 62%, black),
              0 8px 12px color-mix(in srgb, var(--polka-kolor) 18%, transparent);
}
.polmetek.cel-slowek .cs-glowny:hover {
  transform: none;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--polka-kolor) 62%, black),
              0 8px 12px color-mix(in srgb, var(--polka-kolor) 18%, transparent);
}
.polmetek.cel-slowek .cs-glowny:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--polka-kolor) 62%, black),
              0 2px 4px color-mix(in srgb, var(--polka-kolor) 18%, transparent);
}
.polmetek.cel-slowek.huk .polmetek-tresc { animation: csHuk 0.18s ease-out; }
@keyframes csHuk { 0% { transform: none; } 30% { transform: translate(-3px, 2px); } 60% { transform: translate(3px, -1px); } 100% { transform: none; } }
.cs-ikona { font-size: 2.1rem; line-height: 1; color: var(--cs-akcent); }
.cs-karty { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 10px; margin: 18px 0 6px; }
.cs-karta {
  --i: 0;
  width: 156px; min-height: 92px; padding: 14px 10px 10px; box-sizing: border-box; position: relative;
  background: var(--bg-soft); border: 1px solid var(--border-2); border-radius: 14px; text-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  animation: csWjazd 0.55s cubic-bezier(0.22, 1.5, 0.36, 1) both;
  animation-delay: calc(var(--i) * 170ms);
}
.cs-karta.zaliczone { border-color: var(--verde); box-shadow: inset 0 0 0 2px var(--verde), 0 6px 18px rgba(0, 0, 0, 0.08); }
.cs-karta .cs-slowo { font-weight: 800; font-size: 1.05rem; line-height: 1.2; word-break: break-word; }
.cs-karta .cs-tlum { color: var(--grigio); font-size: 0.86rem; margin-top: 4px; line-height: 1.3; word-break: break-word; }
.cs-karta .cs-poziom {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  font-size: 0.64rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  background: var(--card-bg); border: 1px solid var(--border-2); color: var(--grigio);
}
.cs-karta .cs-poziom.latwe   { color: var(--verde); border-color: var(--verde); }
.cs-karta .cs-poziom.srednie { color: var(--cs-akcent); border-color: var(--cs-akcent); }
.cs-karta .cs-poziom.trudne  { color: var(--rosso); border-color: var(--rosso); }
.cs-karta .cs-fajka { position: absolute; top: 6px; right: 8px; color: var(--verde); font-size: 1rem; }
@keyframes csWjazd {
  0%   { transform: translateX(-140%) rotate(-14deg) scale(0.7); opacity: 0; }
  60%  { transform: translateX(6%) rotate(3deg) scale(1.06); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
.cs-nie { background: none; border: 0; color: var(--muted-light); font-size: 0.8rem; margin-top: 8px; cursor: pointer;
  text-decoration: underline dotted; padding: 4px 8px; font-family: inherit; }
.polmetek.cel-slowek .cs-glowny, .cs-nie { transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease, opacity 0.25s ease; }
.cs-nie:hover { color: var(--grigio); }
.cs-nie.hidden { display: none; }
.quiz-cel-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 700;
  color: #D97706; background: color-mix(in srgb, #D97706 12%, transparent); border-radius: 999px;
  padding: 3px 10px; margin: -14px 0 14px; }
.quiz-cel-chip.hidden { display: none; }
.quiz-premium-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--oro); background: var(--bg-gold-soft);
  border: 1px solid color-mix(in srgb, var(--oro) 35%, transparent); border-radius: 999px;
  padding: 3px 10px; margin: -14px 0 14px 8px; line-height: 1.3; font-family: inherit; }
.quiz-premium-chip.hidden { display: none; }
button.quiz-premium-chip { cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 700; }
button.quiz-premium-chip:hover { background: color-mix(in srgb, var(--oro) 20%, transparent); }
button.quiz-premium-chip:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
.quiz-zajawka-pasek { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; text-align: left;
  margin: 14px 0 2px; padding: 12px 14px; border-radius: 14px; background: var(--bg-gold-soft);
  border: 1px solid color-mix(in srgb, var(--oro) 30%, transparent); }
.quiz-zajawka-pasek > .ico { font-size: 1.3rem; color: var(--oro); margin-right: 0; }
.qzp-tekst { flex: 1 1 200px; display: flex; flex-direction: column; gap: 3px; font-size: 0.85rem; color: var(--testo); }
.qzp-tekst b { font-weight: 800; }
.quiz-zajawka-pasek .qzp-cta { width: auto; flex: 0 0 auto; margin: 0; padding: 8px 16px; font-size: 0.85rem; }
.csh-wiersz { border: 1px solid var(--border-2); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; background: var(--bg-soft); }
.csh-naglowek { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.9rem; }
.csh-status { font-size: 0.68rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--card-bg); border: 1px solid var(--border-2); color: var(--grigio); text-transform: uppercase; letter-spacing: 0.03em; }
.csh-status.ukonczony { color: var(--verde); border-color: var(--verde); }
.csh-status.aktywny { color: #D97706; border-color: #D97706; }
.csh-pct { margin-left: auto; font-weight: 800; font-size: 0.82rem; color: var(--grigio); }
.csh-pasek { height: 6px; border-radius: 999px; background: var(--card-bg); border: 1px solid var(--border-2); margin: 8px 0; overflow: hidden; }
.csh-pasek > div { height: 100%; background: var(--marka-zielony); border-radius: 999px; transition: width 0.4s; }
.csh-slowka { display: flex; flex-wrap: wrap; gap: 6px; }
.csh-slowo { font-size: 0.8rem; padding: 3px 9px; border-radius: 999px; background: var(--card-bg); border: 1px solid var(--border-2); color: var(--grigio); }
.csh-slowo b { color: var(--testo); }
.csh-slowo.ok { border-color: var(--verde); }
.csh-slowo.ok .ico { color: var(--verde); }
.csh-slowo.brak { opacity: 0.55; text-decoration: line-through; }
.csh-btn { width: auto; margin: 10px 0 0; font-size: 0.85rem; padding: 7px 14px; }
@media (max-width: 600px) { .cs-karta { width: calc(50% - 5px); } }
@media (prefers-reduced-motion: reduce) { .cs-karta { animation: none; } .polmetek.cel-slowek.huk .polmetek-tresc { animation: none; } }
.polmetek.rekord { background: color-mix(in srgb, #F59E0B 16%, var(--card-bg)); box-shadow: inset 0 0 0 3px #F59E0B; }
.polmetek.rekord::before { background: radial-gradient(circle at 50% 45%, rgba(245, 158, 11, 0.38) 0, transparent 55%); }
.polmetek.rekord::after {
  content: ''; position: absolute; inset: -60%;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(245, 158, 11, 0.18) 0deg 10deg, transparent 10deg 30deg);
  animation: rekordPromienie 16s linear infinite; pointer-events: none;
}
@keyframes rekordPromienie { to { transform: rotate(360deg); } }
.polmetek.rekord .polmetek-tresc { z-index: 1; }
.polmetek.rekord .polmetek-pct {
  color: #F59E0B; text-shadow: 0 6px 24px rgba(245, 158, 11, 0.5);
  animation: rekordPuls 0.8s ease-in-out infinite alternate;
}
@keyframes rekordPuls { from { transform: scale(1); } to { transform: scale(1.07); } }
.rekord-blysk { position: absolute; inset: 0; z-index: 2; background: #fff; pointer-events: none; animation: rekordBlysk 0.75s ease-out forwards; }
@keyframes rekordBlysk { from { opacity: 0.9; } to { opacity: 0; } }
.rekord-piorun {
  position: absolute; top: 50%; z-index: 1; width: 46px; height: 62px; margin-top: -31px;
  color: var(--nak-kolor, #F59E0B); pointer-events: none; animation: rekordPiorun 0.7s ease-in-out infinite alternate;
}
.rekord-piorun svg { width: 100%; height: 100%; }
.rekord-piorun.lewy { left: 5%; }
.rekord-piorun.prawy { right: 5%; transform: scaleX(-1); }
@keyframes rekordPiorun { from { opacity: 0.45; } to { opacity: 1; } }
@media (max-width: 600px) { .rekord-piorun { top: 34%; width: 34px; height: 46px; margin-top: -23px; } }

.polmetek.combo { background: color-mix(in srgb, var(--nak-kolor, #8B5CF6) 14%, var(--card-bg)); box-shadow: inset 0 0 0 3px var(--nak-kolor, #8B5CF6); }
.polmetek.combo::before { background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--nak-kolor, #8B5CF6) 32%, transparent) 0, transparent 55%); }
.polmetek.combo .polmetek-pct { color: var(--nak-kolor, #8B5CF6); text-shadow: 0 6px 24px color-mix(in srgb, var(--nak-kolor, #8B5CF6) 45%, transparent); }
.polmetek.auto .polmetek-tresc::after {
  content: ''; display: block; height: 4px; width: 56%; margin: 14px auto 0; border-radius: 999px;
  background: var(--nak-kolor, var(--verde)); transform-origin: left center;
  animation: polmetekOdliczanie var(--auto-ms, 5s) linear forwards;
}
@keyframes polmetekOdliczanie { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@keyframes trzesienieZiemi {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  10% { transform: translate(-10px, 5px) rotate(-0.7deg); }
  20% { transform: translate(9px, -6px) rotate(0.6deg); }
  30% { transform: translate(-8px, 4px) rotate(-0.5deg); }
  40% { transform: translate(8px, -4px) rotate(0.4deg); }
  50% { transform: translate(-6px, 4px) rotate(-0.3deg); }
  60% { transform: translate(5px, -2px) rotate(0.25deg); }
  70% { transform: translate(-4px, 2px) rotate(-0.15deg); }
  80% { transform: translate(2px, -1px) rotate(0.1deg); }
  90% { transform: translate(-1px, 1px) rotate(0); }
}
.trzesienie-ziemi { animation: trzesienieZiemi 0.9s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@media (prefers-reduced-motion: reduce) {
  .trzesienie-ziemi, .polmetek::before, .polmetek.wjazd .polmetek-tresc,
  .polmetek.rekord::after, .polmetek.rekord .polmetek-pct, .rekord-piorun, .rekord-blysk { animation: none; }
}

.anagram-karta { text-align: center; }
.anagram-odliczanie {
  font-size: 4.6rem; font-weight: 900; color: var(--primary); padding: 38px 0;
  line-height: 1;
}
.anagram-odliczanie.puls, .anagram-odliczanie { animation: anagramPuls 0.7s ease; }
@keyframes anagramPuls { 0% { transform: scale(1.35); opacity: 0.35; } 70% { transform: scale(1); opacity: 1; } }
.anagram-litery {
  display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap;
  margin: 8px 0 4px;
}
.anagram-litera {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 44px; padding: 0 7px; background: var(--bg-soft);
  border: 1px solid var(--border-2); border-radius: 11px;
  font-size: 1.35rem; font-weight: 800;
}
.anagram-przedrostek { font-size: 1.2rem; font-weight: 800; color: var(--grigio); margin-right: 5px; }
.anagram-definicja { font-size: 1.35rem; font-weight: 800; margin: 4px 0 2px; }
.anagram-litera.klik { cursor: pointer; font: inherit; font-size: 1.35rem; font-weight: 800; transition: var(--transition); }
.anagram-litera.klik:hover { transform: translateY(-2px); border-color: var(--primary); }
.anagram-litera.zuzyta { visibility: hidden; }
.anagram-litera.klaw-wybor { outline: 3px solid var(--oro); outline-offset: 3px; }
.anagram-litera.ulozona { background: var(--bg-success-soft); border-color: var(--verde); }
.anagram-odpowiedz { min-height: 48px; margin-top: 2px; }
.anagram-slot {
  display: inline-flex; min-width: 34px; height: 44px;
  border: 2px dashed var(--border-2); border-radius: 11px; background: transparent;
}
.pf-przyciski.zamrozone { pointer-events: none; }

.intruz-siatka { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 420px) { .intruz-siatka { grid-template-columns: 1fr; } }
.intruz-opcja {
  padding: 18px 12px; border-radius: 14px; cursor: pointer;
  border: 2px solid var(--border-warm); background: var(--card-bg);
  font: inherit; font-size: 1.05rem; font-weight: 700; color: var(--testo);
  transition: var(--transition);
}
.intruz-opcja:hover { border-color: var(--oro); transform: translateY(-2px); }
.intruz-siatka.zablokowane .intruz-opcja { cursor: default; transform: none; }
.intruz-opcja.poprawna { border-color: var(--zielen-gleboka); background: var(--bg-success-soft); }
.intruz-opcja.bledna   { border-color: var(--rosso); background: var(--bg-error-soft); }
.intruz-opcja small { display: block; font-size: 0.72rem; font-weight: 600; color: var(--grigio); margin-top: 3px; }

.bez-audio-btn {
  display: block; margin: 8px auto 0; cursor: pointer;
  border: none; background: transparent; color: var(--grigio);
  font: inherit; font-size: 0.74rem; font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px; padding: 4px 8px; border-radius: 8px;
}
.bez-audio-btn:hover { color: var(--testo); background: var(--crema); text-decoration: none; }
.mini-exam-input-row .quiz-nie-wiem { margin-top: 0; }

.metoda-panel {
  overflow: hidden; max-height: 0; opacity: 0;
  transition: max-height 0.3s cubic-bezier(.22,1,.36,1), opacity 0.22s ease;
}
.metoda-panel.otwarty { opacity: 1; }
.metoda-panel:not(.otwarty) { visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .metoda-panel { transition: none; } }


.odmiana-podpowiedz { font-size: 0.72rem; color: var(--grigio); margin-top: 8px; }


.mail-status {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 0.7rem; font-weight: 800; white-space: nowrap;
}
.mail-status.ok   { background: var(--bg-success-soft); color: var(--zielen-gleboka); }
.mail-status.blad { background: var(--bg-error-soft);   color: var(--rosso); }
.mail-status.lokalnie { background: var(--bg-warning-soft, #FEF3C7); color: #92400E; }
.mail-rodzaj { font-size: 0.72rem; font-weight: 700; color: var(--grigio); }
.mail-blad { display: block; font-size: 0.72rem; color: var(--rosso); margin-top: 2px; }

.usun-jezyk-lista li.zostaje { color: var(--grigio); font-size: 0.78rem; border-top: 1px solid var(--border-2); margin-top: 6px; padding-top: 6px; }
.header-lang-item.active { background: var(--bg-gold-soft); color: var(--testo); cursor: default; }
.header-lang-divider { height: 1px; background: var(--border-warm-soft); margin: 6px 4px; }
.header-lang-add {
  display: flex; align-items: center; gap: 7px; padding: 7px 10px;
  border-radius: 8px; cursor: pointer; color: var(--testo); font-size: 0.8rem;
  white-space: nowrap;
}
.header-lang-add:hover { background: var(--crema); }
.header-lang-picker {
  max-height: 200px; overflow-y: auto; margin: 3px -1px -1px;
}
.header-lang-menu span { font-size: inherit; }

.mode-tabs {
  display: flex;
  gap: 6px;
  background: var(--bg-soft);
  padding: 5px;
  border-radius: 50px;
}
.mode-tab {
  padding: 8px 20px;
  border-radius: 50px;
  border: none;
  background: transparent;
  color: var(--grigio);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.mode-tab:hover { background: var(--border); color: var(--testo); }
.mode-tab.locked { opacity: 0.55; cursor: not-allowed; }
.mode-tab.locked:hover { background: transparent; color: var(--grigio); }
.mode-tab.locked::after { content: ' 🔒'; }
.mode-tab.active { background: var(--oro); color: var(--na-akcencie); box-shadow: 0 2px 10px color-mix(in srgb, var(--oro) 34%, transparent); }
.mode-tab.active:hover { background: var(--oro); color: var(--na-akcencie); }

.auth-screen {
  position: relative; z-index: 3000;
  background: var(--lp-tlo);
  --lp-max: 1200px;
  --lp-granat: #17183B;
  --lp-granat-2: #24265A;      
  --lp-granat-kreska: #2E3068; 
  --lp-niebieski: #2463E9;
  --lp-niebieski-2: #204EB8;
  --lp-zolty: #FFC83D;
  --lp-czerwony: #DB2727;
  --lp-zielony: #35A64D;
  --lp-lawenda: #C9CAE8;       
  --lp-font: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lp-font-nag: 'Outfit', 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lp-pion: clamp(64px, 7.2vw, 104px);  
  --lp-tlo: #FFFFFF;
  --lp-tlo-2: #F3F5FB;
  --lp-karta: #FFFFFF;
  --lp-tekst: #17183B;
  --lp-tekst-2: #4A4B6B;
  --lp-tekst-3: #6B6D8A;
  --lp-linia: #E3E4EF;
  --lp-szary: #9A9CB8;
  --lp-mocna: #17183B;          
  --lp-akcent-tekst: #204EB8;   
  --lp-obwodka-granat: transparent;
  --lp-cta-tlo: #17183B; --lp-cta-tekst: #FFFFFF; --lp-cta-kolko: #FFC83D; --lp-cta-strzalka: #17183B;
  --lp-tag-tlo: #D9F0DE; --lp-tag-tekst: #1F7A35;
  --lp-cien-karty: 0 22px 40px -26px rgba(23, 24, 59, 0.5);
  --lp-marker-pas: #FFC83D; --lp-marker-tekst: currentColor;
  --lp-cien-filmu: rgba(23, 24, 59, 0.45);
  --lp-linia-mocna: #D5D7E6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .auth-screen {
    --lp-tlo: #171717; --lp-tlo-2: #121212; --lp-karta: #1F1F1F;
    --lp-tekst: #D4D4D4; --lp-tekst-2: #BDBDBD; --lp-tekst-3: #9D9D9D;
    --lp-linia: #303030; --lp-szary: #6B6B6B; --lp-mocna: #D4D4D4; --lp-akcent-tekst: #FFC83D;
    --lp-obwodka-granat: #2E3068;
    --lp-cta-tlo: #FFC83D; --lp-cta-tekst: #17183B; --lp-cta-kolko: #17183B; --lp-cta-strzalka: #FFC83D;
    --lp-tag-tlo: rgba(53, 166, 77, 0.22); --lp-tag-tekst: #8CD9A0;
    --lp-cien-karty: 0 22px 40px -26px rgba(0, 0, 0, 0.9);
    --lp-marker-pas: transparent; --lp-marker-tekst: #FFC83D;
    --lp-cien-filmu: rgba(0, 0, 0, 0.85);
    --lp-linia-mocna: #454545;
  }
}
:root[data-theme="dark"] .auth-screen {
  --lp-tlo: #171717; --lp-tlo-2: #121212; --lp-karta: #1F1F1F;
  --lp-tekst: #D4D4D4; --lp-tekst-2: #BDBDBD; --lp-tekst-3: #9D9D9D;
  --lp-linia: #303030; --lp-szary: #6B6B6B; --lp-mocna: #D4D4D4; --lp-akcent-tekst: #FFC83D;
  --lp-obwodka-granat: #2E3068;
  --lp-cta-tlo: #FFC83D; --lp-cta-tekst: #17183B; --lp-cta-kolko: #17183B; --lp-cta-strzalka: #FFC83D;
  --lp-tag-tlo: rgba(53, 166, 77, 0.22); --lp-tag-tekst: #8CD9A0;
  --lp-cien-karty: 0 22px 40px -26px rgba(0, 0, 0, 0.9);
  --lp-marker-pas: transparent; --lp-marker-tekst: #FFC83D;
  --lp-cien-filmu: rgba(0, 0, 0, 0.85);
  --lp-linia-mocna: #454545;
}

html.lp-ruch :is(.lp-sek-glowa, .lp-tryb, .lp-upusc, .lp-krok, .lp-art, .lp-art-wszystkie, .lp-zestaw2, .lp-nowosci-info, .lp-plan, .lp-faq-poz):not(.lp-widoczne) {
  opacity: 0;
  transform: translateY(18px);
}
html.lp-ruch :is(.lp-sek-glowa, .lp-tryb, .lp-upusc, .lp-krok, .lp-art, .lp-art-wszystkie, .lp-zestaw2, .lp-nowosci-info, .lp-plan, .lp-faq-poz) {
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(.22,1,.36,1), box-shadow 0.2s ease;
}
html.lp-ruch :is(.lp-tryby-siatka, .lp-metoda-kroki, .lp-art-siatka, .lp-zestawy2, .lp-cennik) > :nth-child(2) { transition-delay: 0.07s; }
html.lp-ruch :is(.lp-tryby-siatka, .lp-metoda-kroki, .lp-art-siatka, .lp-zestawy2, .lp-cennik) > :nth-child(3) { transition-delay: 0.14s; }
html.lp-ruch :is(.lp-tryby-siatka, .lp-metoda-kroki, .lp-art-siatka, .lp-zestawy2, .lp-cennik) > :nth-child(n+4) { transition-delay: 0.21s; }
html.lp-ruch :is(.lp-art, .lp-zestaw2) { position: relative; }
html.lp-ruch :is(.lp-art, .lp-zestaw2)::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0; transition: opacity 0.25s ease;
  background: radial-gradient(190px circle at var(--mx, 50%) var(--my, 50%),
              color-mix(in srgb, var(--lp-niebieski) 11%, transparent), transparent 68%);
}
html.lp-ruch :is(.lp-art, .lp-zestaw2).lp-swiatlo::after { opacity: 1; }

html { scroll-padding-top: 84px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.lp-header, .lp-sek { font-family: var(--lp-font); color: var(--lp-tekst); }
.lp-kontener { width: min(var(--lp-max), 100% - 48px); margin-inline: auto; }
.lp-sek-srodek { display: flex; flex-direction: column; gap: 40px; padding-block: var(--lp-pion); }
.lp-sek--biala { background: var(--lp-tlo); }
.lp-sek--szara { background: var(--lp-tlo-2); }
.lp-sek--granat { background: var(--lp-granat); color: #FFFFFF; }
.lp-sek--zolta { background: var(--lp-zolty); color: var(--lp-granat); }

.lp-h1, .lp-h2 {
  margin: 0; font-family: var(--lp-font-nag); font-weight: 800; text-wrap: balance;
}
.lp-h2 { font-size: clamp(2.1rem, 1.2rem + 2.6vw, 3.25rem); line-height: 1.02; letter-spacing: -0.03em; color: inherit; }
.lp-h2--duzy { font-size: clamp(2.3rem, 1.2rem + 3.2vw, 3.75rem); line-height: 1; }
.lp-sek-glowa { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.lp-tryby .lp-sek-glowa > .lp-h2 { max-width: 40rem; }
.lp-sek-glowa--srodek { justify-content: center; text-align: center; }
.lp-sek-glowa--kolumna { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 22px; }
.lp-sek-glowa-tekst { display: flex; flex-direction: column; gap: 14px; max-width: 44rem; }
.lp-sek-opis { margin: 0; max-width: 26rem; font-size: 17px; font-weight: 500; line-height: 1.55; color: var(--lp-tekst-2); }
.lp-sek-glowa-tekst .lp-sek-opis { max-width: none; }
.lp-pigulka {
  align-self: flex-start; display: inline-flex; align-items: center;
  min-height: 28px; padding: 0 12px; border-radius: 999px;
  background: #FFFFFF; color: var(--lp-granat); font-size: 13px; font-weight: 800; line-height: 1;
}
.lp-flaga-svg { border-radius: 4px; display: block; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); }
.lp-strzalka { display: block; }
[dir="rtl"] .lp-strzalka { transform: scaleX(-1); }

.lp-cta {
  --cta-tlo: var(--lp-cta-tlo); --cta-tekst: var(--lp-cta-tekst);
  --cta-kolko: var(--lp-cta-kolko); --cta-strzalka: var(--lp-cta-strzalka);
  --cta-wys: 58px; --cta-kolko-r: 44px; --cta-font: 17px;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: var(--cta-wys); padding-block: 0; padding-inline: 26px 7px; box-sizing: border-box;
  border: 0; border-radius: 999px; background: var(--cta-tlo); color: var(--cta-tekst);
  font-family: var(--lp-font); font-size: var(--cta-font); font-weight: 800; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.lp-cta:hover { color: var(--cta-tekst); transform: translateY(-1px); box-shadow: 0 12px 26px -12px rgba(23, 24, 59, 0.6); }
.lp-cta:focus-visible { outline: 3px solid var(--lp-niebieski); outline-offset: 3px; }
.lp-cta-kolko {
  width: var(--cta-kolko-r); height: var(--cta-kolko-r); flex: none; border-radius: 999px;
  background: var(--cta-kolko); color: var(--cta-strzalka);
  display: flex; align-items: center; justify-content: center; transition: transform 0.18s ease;
}
.lp-cta:hover .lp-cta-kolko { transform: translateX(3px); }
[dir="rtl"] .lp-cta:hover .lp-cta-kolko { transform: translateX(-3px); }
.lp-cta--granat-stala { --cta-tlo: #17183B; --cta-tekst: #FFFFFF; --cta-kolko: #FFC83D; --cta-strzalka: #17183B; }
.lp-cta--zolta   { --cta-tlo: #FFC83D; --cta-tekst: #17183B; --cta-kolko: #17183B; --cta-strzalka: #FFC83D; }
.lp-cta--zielona { --cta-tlo: #35A64D; --cta-tekst: #17183B; --cta-kolko: #17183B; --cta-strzalka: #35A64D; }
.lp-cta--duza    { --cta-wys: 62px; --cta-kolko-r: 48px; --cta-font: 18px; }
.lp-cta--srednia { --cta-wys: 56px; --cta-kolko-r: 42px; --cta-font: 16px; }
.lp-cta--mala    { --cta-wys: 52px; --cta-kolko-r: 38px; --cta-font: 15px; }

.lp-btn-kontur {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px;
  background: transparent; box-shadow: inset 0 0 0 2px var(--lp-mocna); color: var(--lp-tekst);
  font-family: var(--lp-font); font-size: 15px; font-weight: 800; line-height: 1.2;
  white-space: nowrap; cursor: pointer; transition: background 0.15s ease;
}
.lp-btn-kontur:hover { background: color-mix(in srgb, var(--lp-mocna) 8%, transparent); }
.lp-btn-szary {
  min-height: 48px; padding: 0 20px; border: 0; border-radius: 999px;
  background: var(--lp-tlo-2); box-shadow: inset 0 0 0 1.5px var(--lp-linia); color: var(--lp-tekst);
  font-family: var(--lp-font); font-size: 15px; font-weight: 800; line-height: 1.2; cursor: pointer;
  transition: box-shadow 0.15s ease;
}
.lp-btn-szary:hover { box-shadow: inset 0 0 0 1.5px var(--lp-mocna); }
:is(.lp-btn-kontur, .lp-btn-szary, .lp-nav a, .lp-nav button, .lp-link-dalej, .lp-art, .lp-zestaw2, .lp-art-wszystkie):focus-visible {
  outline: 3px solid var(--lp-niebieski); outline-offset: 3px;
}

.lp-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--lp-tlo); box-shadow: 0 1px 0 var(--lp-linia);
}
.lp-header-inner {
  width: min(var(--lp-max), 100% - 48px); margin-inline: auto; min-height: 84px;
  display: flex; align-items: center; gap: 40px;
}
.lp-header-marka { display: flex; flex-shrink: 0; }
.lp-header-logo { height: 41px; width: auto; display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lp-header-logo { content: url('../../assets/img/logo-biale.webp'); }
}
.lp-nav { display: flex; align-items: center; gap: 28px; }
.lp-nav a, .lp-nav button {
  padding: 10px 4px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  font-family: var(--lp-font); font-size: 15px; font-weight: 700; line-height: 1.2;
  color: var(--lp-tekst); text-decoration: none; white-space: nowrap;
}
.lp-nav a:hover, .lp-nav button:hover { color: var(--lp-akcent-tekst); }
.lp-header-akcje { margin-inline-start: auto; display: flex; align-items: center; gap: 12px; }
.lp-header-narzedzia, .lp-header-konto { display: flex; align-items: center; gap: 12px; }
.lp-header .lp-header-theme {
  width: 44px; height: 44px; font-size: 1.05rem; color: var(--lp-tekst);
  background: var(--lp-karta); border: 0; box-shadow: 0 0 0 1.5px var(--lp-linia);
}
.lp-header .lp-header-theme:hover { background: var(--lp-tlo-2); }
.lp-header .lp-header-theme:focus-visible { outline: 3px solid var(--lp-niebieski); outline-offset: 3px; }
.lp-lang-picker { margin-bottom: 0; }
.lp-lang-picker .lang-picker-btn {
  width: auto; min-height: 44px; padding-block: 0; padding-inline: 10px 14px; gap: 8px;
  border: 0; border-radius: 999px; background: var(--lp-karta); box-shadow: 0 0 0 1.5px var(--lp-linia);
  font-family: var(--lp-font); font-size: 14px; font-weight: 700; color: var(--lp-tekst);
}
.lp-lang-picker .lang-picker-btn:hover { box-shadow: 0 0 0 1.5px var(--lp-mocna); }
.lp-lang-picker .lang-picker-btn:focus-visible { outline: 3px solid var(--lp-niebieski); outline-offset: 3px; }
.lp-lang-picker .lang-picker-flag .lp-flaga-svg { width: 24px; height: 16px; }
.lp-lang-picker .lang-picker-name { flex: none; }
.lp-lang-picker .lang-picker-caret { display: flex; color: var(--lp-tekst); }
.lp-lang-picker .lang-picker-list {
  left: auto; right: auto; inset-inline-end: 0; min-width: 220px; max-height: 60vh;
  background: var(--lp-karta); border: 1px solid var(--lp-linia);
  font-family: var(--lp-font); color: var(--lp-tekst);
}
.lp-lang-picker a.lang-picker-opt { color: inherit; text-decoration: none; }
.lp-lang-picker a.lang-picker-opt:focus-visible { outline: 3px solid var(--lp-niebieski); outline-offset: -3px; }
.lp-lang-picker .lang-picker-opt:hover { background: var(--lp-tlo-2); }
.lp-lang-picker .lang-picker-opt.aktywny { font-weight: 800; }
.lp-wroc-do-apki { display: none; }
body.podglad-glownej .lp-wroc-do-apki { display: inline-flex; }
body.podglad-glownej .lp-header-zaloguj,
body.podglad-glownej .lp-header-cta { display: none; }
body.podglad-glownej .rank-rail,
body.podglad-glownej .rank-wypustka,
body.podglad-glownej .ad-rail { display: none; }
html.lp-jezyk-w-drodze body { opacity: .45; transition: opacity .25s ease; pointer-events: none; }

.lp-hero { --lp-hero-dol: 64px; background: var(--lp-tlo); color: var(--lp-tekst); overflow: hidden; }
.lp-hero-uklad { display: flex; flex-direction: column; gap: 44px; padding: 56px 0 var(--lp-hero-dol); }
.lp-hero-tekst {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; row-gap: 22px;
  grid-template-areas: "h1 opis" "h1 nota" "akcje akcje"; min-width: 0;
}
.lp-hero-tekst > .lp-h1 { grid-area: h1; align-self: end; }
.lp-hero-tekst[data-nad] { grid-template-areas: "nad opis" "h1 opis" "h1 nota" "akcje akcje"; }
.lp-hero-tekst > .lp-hero-nad {
  grid-area: nad; justify-self: start; margin: 0 0 -8px;
  font-family: var(--lp-font); font-size: 14px; font-weight: 800; line-height: 1.35; letter-spacing: 0.08em;
  text-transform: uppercase; text-wrap: balance; color: var(--lp-akcent-tekst);
}
.lp-hero-tekst > .lp-hero-opis { grid-area: opis; align-self: end; }
.lp-hero-tekst > .lp-hero-akcje { grid-area: akcje; }
.lp-hero-tekst > .lp-hero-nota-wiersz { grid-area: nota; align-self: start; margin-top: -10px; }
.lp-h1 { font-size: clamp(2.6rem, 1.2rem + 4.9vw, 5rem); line-height: 0.96; letter-spacing: -0.035em; color: #FFFFFF; }
.lp-hero-opis { margin: 0; max-width: 34rem; font-size: 19px; font-weight: 500; line-height: 1.55; padding-bottom: 6px; color: var(--lp-tekst-2); }
.lp-hero .lp-h1 { font-size: clamp(2.6rem, 1.15rem + 3.7vw, 4.05rem); line-height: 0.98; color: var(--lp-tekst); }
.lp-h1-marker {
  background-image: linear-gradient(transparent 62%, var(--lp-marker-pas) 62%, var(--lp-marker-pas) 90%, transparent 90%);
  color: var(--lp-marker-tekst); padding-inline: 4px; margin-inline: -4px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.lp-hero-akcje { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 2px; }
.lp-hero .lp-cta:focus-visible, .lp-hero-przyklad:focus-visible { outline: 3px solid var(--lp-niebieski); outline-offset: 4px; }
.lp-hero-przyklad {
  display: inline-flex; align-items: center; gap: 12px; min-height: 62px;
  padding-block: 8px; padding-inline: 16px 24px; box-sizing: border-box; border: 0; border-radius: 999px;
  background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--lp-tekst) 22%, transparent); color: var(--lp-tekst);
  font-family: var(--lp-font); font-size: 16px; font-weight: 800; line-height: 1.25;
  text-align: start; text-decoration: none; cursor: pointer; transition: background 0.15s ease, box-shadow 0.15s ease;
}
.lp-hero-przyklad:hover { color: var(--lp-tekst); background: color-mix(in srgb, var(--lp-tekst) 5%, transparent); box-shadow: inset 0 0 0 1.5px var(--lp-mocna); }
.lp-hero-przyklad-ikona { flex: none; display: block; }
.lp-hero-nota-wiersz { display: flex; align-items: flex-start; gap: 10px; }
.lp-hero-nota-znak { flex: none; display: block; }
.lp-hero-nota { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--lp-tekst-3); }

.lp-hero-film { position: relative; min-width: 0; width: min(100%, calc((100svh - 132px) * 16 / 9)); margin-inline: auto; }
.lp-hero-film { isolation: isolate; }
.lp-hero-film::after { content: ""; position: absolute; z-index: -1; top: 50%; bottom: calc(-1 * var(--lp-hero-dol));
  left: 50%; width: 100vw; transform: translateX(-50%); background: var(--lp-tlo-2); pointer-events: none; }
.lp-hero-film .fp { z-index: 1; border-radius: 30px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--lp-tekst) 7%, transparent), 0 44px 80px -36px var(--lp-cien-filmu); }
.fp {
  --fp-granat: #17183B; --fp-niebieski: #2463E9; --fp-zolty: #FFC83D; --fp-czerwony: #DB2727;
  --fp-zielony: #35A64D; --fp-tlo: #F3F5FB; --fp-bialy: #FFFFFF; --fp-lawenda: #C9CAE8;
  --fp-font: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fp-font-nag: 'Outfit', 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fp-u: calc(100cqw / 1280);
  position: relative; width: 100%; aspect-ratio: 16 / 9; container-type: inline-size;
  border-radius: 28px; overflow: hidden; isolation: isolate; contain: layout paint;
  background: var(--fp-granat); color: var(--fp-bialy); font-family: var(--fp-font);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.22), 0 30px 60px -20px rgba(10, 12, 40, 0.55),
    0 40px 80px -36px rgba(8, 14, 60, 0.85);
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.fp-plotno { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; overflow: hidden;
  transform: scale(var(--fp-k, 1)); transform-origin: 0 0; cursor: pointer; }
.fp-sceny, .fp-scena, .fp-scena-tlo, .fp-scena-tresc, .fp-kamera-okno, .fp-kamera { position: absolute; inset: 0; }
.fp-sceny { perspective: 1500px; perspective-origin: 50% 0%; }
.fp-scena { perspective: 1400px; perspective-origin: 50% 45%; contain: layout paint style; }
.fp-pierscien { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; pointer-events: none; opacity: 0; overflow: visible; }
.fp-scena-tlo { overflow: hidden; }
.fp-blask { position: absolute; left: -12%; top: -45%; width: 70%; height: 125%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.07) 55%, transparent); }
.fp-winieta { position: absolute; inset: 0;
  background: radial-gradient(120% 115% at 30% 22%, transparent 52%, rgba(8, 10, 40, 0.30)); }
.fp-scena-tresc { transform-origin: 50% 50%; }
.fp-kamera { transform-origin: 68.75% 50%; }

.fp-plakat { position: absolute; inset: 0; z-index: 20; text-align: center; }
.fp:not(.fp-plakat-przejety) .fp-plakat {
  background: radial-gradient(120% 90% at 30% 10%, #2A2C66 0%, var(--fp-granat) 60%);
}
.fp-plakat-logo { position: absolute; left: calc(var(--fp-u) * 460); top: calc(var(--fp-u) * 132);
  width: calc(var(--fp-u) * 360); height: auto; display: block; }
.fp-plakat-zdanie { position: absolute; left: calc(var(--fp-u) * 160); top: calc(var(--fp-u) * 250);
  width: calc(var(--fp-u) * 960); height: calc(var(--fp-u) * 150); display: flex; align-items: center; justify-content: center;
  margin: 0; font-family: var(--fp-font-nag); font-weight: 800;
  font-size: calc(var(--fp-u) * var(--fp-zd, 72)); line-height: 1.04; letter-spacing: -0.025em; color: var(--fp-bialy); text-wrap: balance; }
.fp-plakat-tryby { position: absolute; left: 0; right: 0; top: calc(var(--fp-u) * 426); display: flex; justify-content: center;
  gap: calc(var(--fp-u) * 18); pointer-events: none; }
.fp-plakat-tryb { width: calc(var(--fp-u) * 50); height: calc(var(--fp-u) * 50); border-radius: 999px; flex: none;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.8); }
.fp-plakat-tryb svg { width: calc(var(--fp-u) * 24); height: calc(var(--fp-u) * 24); display: block; }
.fp-plakat-cta { position: absolute; left: 50%; top: calc(var(--fp-u) * 508); transform: translateX(-50%);
  display: inline-flex; align-items: center; justify-content: space-between; gap: calc(var(--fp-u) * 24);
  height: calc(var(--fp-u) * 80); padding: 0 calc(var(--fp-u) * 8) 0 calc(var(--fp-u) * 34); box-sizing: border-box;
  border: 0; border-radius: 999px; background: var(--fp-zolty); color: var(--fp-granat);
  font-family: var(--fp-font); font-size: calc(var(--fp-u) * 25); font-weight: 800; line-height: 1.2;
  white-space: nowrap; cursor: pointer; }
.fp-plakat-cta-kolko { width: calc(var(--fp-u) * 64); height: calc(var(--fp-u) * 64); flex: none; border-radius: 999px;
  background: var(--fp-granat); color: var(--fp-zolty); display: flex; align-items: center; justify-content: center; }
.fp-plakat-cta-kolko svg { width: calc(var(--fp-u) * 28); height: calc(var(--fp-u) * 28); display: block; }
.fp-plakat-cta::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 48px); height: max(100%, 44px);
  transform: translate(-50%, -50%); border-radius: 999px; }
.fp-plakat-cta:hover { box-shadow: 0 12px 26px -12px rgba(0, 0, 0, 0.6); }
.fp-plakat-cta:focus-visible, .fp-ster:focus-visible, .fp-rozdzial:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }

.fp-sterowanie { display: none; }
.fp[data-silnik] .fp-sterowanie { display: block; }
.fp.fp-klatki .fp-sterowanie { display: none; }
.fp.fp-klatki { border-radius: 0; box-shadow: none; }
.fp-przyciski { position: absolute; left: 14px; right: 14px; bottom: 16px; z-index: 30; display: flex; gap: 8px;
  align-items: center; pointer-events: none; }
.fp-przyciski > .fp-ster { opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
.fp:hover .fp-przyciski > .fp-ster, .fp:focus-within .fp-przyciski > .fp-ster, .fp[data-stan="pauza"] .fp-przyciski > .fp-ster,
.fp[data-stan="koniec"] .fp-przyciski > .fp-ster { opacity: 1; pointer-events: auto; }
@media (hover: none) { .fp .fp-przyciski > .fp-ster { opacity: 1; pointer-events: auto; } }
.fp-przyciski > .fp-ster-dzwiek[aria-pressed="false"], .fp-przyciski > .fp-ster-dzwiek[data-laduje] { opacity: 1; pointer-events: auto; }
.fp-ster.fp-ster-dzwiek { position: relative; width: auto; min-width: 40px; padding: 0 10px; box-sizing: border-box;
  transition: opacity 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; }
.fp-ster-napis { display: block; order: -1; max-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  opacity: 0; margin-inline-end: 0; font-family: var(--fp-font); font-size: 14px; font-weight: 800; line-height: 40px;
  letter-spacing: 0.01em; color: #FFFFFF;
  transition: max-width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease, margin 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.fp.fp-dzwiek-napis .fp-ster-dzwiek { background: rgba(23, 24, 59, 0.9); box-shadow: 0 0 0 1.5px var(--fp-zolty), 0 10px 24px -12px rgba(0, 0, 0, 0.8); }
.fp.fp-dzwiek-napis .fp-ster-dzwiek .fp-ster-napis { max-width: min(240px, calc(100cqw - 150px)); opacity: 1; margin-inline: 6px 8px; }
.fp.fp-dzwiek-napis .fp-ster-dzwiek svg { color: var(--fp-zolty); }
.fp-ster-dzwiek[data-laduje] { box-shadow: 0 0 0 2px var(--fp-zolty); transition-delay: 0.2s; }
.fp-ster-dzwiek[data-laduje] .fp-i-dzwiek { animation: fp-dzwiek-laduje 0.9s ease-in-out 0.2s infinite alternate; }
@keyframes fp-dzwiek-laduje { from { opacity: 1; } to { opacity: 0.35; } }
.fp-ster { width: 40px; height: 40px; border: 0; border-radius: 999px; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  background: rgba(23, 24, 59, 0.74); color: #FFFFFF; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16); }
.fp-ster:hover { background: rgba(23, 24, 59, 0.92); }
.fp-ster[hidden] { display: none; }
.fp-ster-dzwiek { margin-inline-start: auto; }
.fp-ster svg { display: none; }
.fp-ster[data-ikona="graj"] .fp-i-graj, .fp-ster[data-ikona="pauza"] .fp-i-pauza,
.fp-ster[data-ikona="od-nowa"] .fp-i-od-nowa, .fp-ster[data-fp-od-nowa] .fp-i-od-nowa,
.fp-ster[data-ikona="dzwiek"] .fp-i-dzwiek, .fp-ster[data-ikona="cisza"] .fp-i-cisza { display: block; }
.fp[data-stan="koniec"] [data-fp-od-nowa] { display: none; }
.fp-postep { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; z-index: 31; cursor: pointer; }
.fp-postep-tor { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, 0.22); }
.fp-postep-wypelnienie { position: absolute; inset: 0; background: var(--fp-zolty); transform-origin: 0 50%; transform: scaleX(0); }
.fp-rozdzialy { position: absolute; inset: 0; pointer-events: none; }
.fp-rozdzial { position: absolute; bottom: -3px; width: 10px; height: 10px; margin-left: -5px; padding: 0; border: 0;
  border-radius: 999px; background: #FFFFFF; box-shadow: 0 0 0 2px var(--fp-granat); cursor: pointer;
  pointer-events: auto; opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; }
.fp:hover .fp-rozdzial, .fp:focus-within .fp-rozdzial, .fp[data-stan="pauza"] .fp-rozdzial { opacity: 1; }
.fp-rozdzial:hover { transform: scale(1.35); }
@media (hover: none) { .fp .fp-rozdzial { opacity: 1; } }
.fp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
  .fp-przyciski > .fp-ster, .fp-rozdzial, .fp-ster.fp-ster-dzwiek, .fp-ster-napis { transition: none; }
  .fp-ster-dzwiek[data-laduje] .fp-i-dzwiek { animation: none; opacity: 0.55; }
}
.fp.fp-ogranicz .fp-przyciski > .fp-ster, .fp.fp-ogranicz .fp-ster.fp-ster-dzwiek, .fp.fp-ogranicz .fp-ster-napis { transition: none; }
.fp.fp-ogranicz .fp-ster-dzwiek[data-laduje] .fp-i-dzwiek { animation: none; opacity: 0.55; }
.fp-wideo-el { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover;
  background: var(--fp-granat); cursor: pointer; }
.fp[data-odtwarzacz] .fp-sterowanie { display: block; }
.fp-wideo .fp-plakat { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
.fp-wideo.fp-plakat-schowany .fp-plakat { opacity: 0; visibility: hidden; transition: opacity 0.45s ease, visibility 0s linear 0.45s; }
.fp-wideo[data-odtwarzacz]:not([data-zagral]) .fp-plakat { cursor: pointer; }
.fp-wideo:not([data-zagral]) [data-fp-od-nowa] { display: none; }
.fp-ster.fp-ster-graj { width: auto; min-width: 40px; padding: 0 10px; box-sizing: border-box;
  transition: opacity 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; }
.fp-ster-graj .fp-ster-napis { order: 1; }
.fp-wideo[data-stan="pauza"]:not([data-zagral]) .fp-ster-graj { background: rgba(23, 24, 59, 0.9);
  box-shadow: 0 0 0 1.5px var(--fp-zolty), 0 10px 24px -12px rgba(0, 0, 0, 0.8); }
.fp-wideo[data-stan="pauza"]:not([data-zagral]) .fp-ster-graj .fp-ster-napis { max-width: min(240px, calc(100cqw - 150px));
  opacity: 1; margin-inline: 8px 6px; }
.fp-wideo[data-stan="pauza"]:not([data-zagral]) .fp-ster-graj svg { color: var(--fp-zolty); }
@media (prefers-reduced-motion: reduce) {
  .fp-wideo .fp-plakat, .fp-wideo.fp-plakat-schowany .fp-plakat, .fp-ster.fp-ster-graj { transition: none; }
}
@container (max-width: 560px) {
  .fp-przyciski { left: 8px; right: 8px; bottom: 9px; gap: 6px; }
  .fp-ster { width: 30px; height: 30px; }
  .fp-ster svg { width: 15px; height: 15px; }
  .fp-ster.fp-ster-dzwiek, .fp-ster.fp-ster-graj { min-width: 30px; padding: 0 7px; }
  .fp-ster-napis { font-size: 12px; line-height: 30px; }
  .fp-wideo [data-fp-od-nowa] { display: none; }
  .fp-postep { height: 10px; }
  .fp-postep-tor { height: 3px; }
  .fp-rozdzial { width: 8px; height: 8px; margin-left: -4px; bottom: -2.5px; }
}
.lp-liczby { background: var(--lp-tlo-2); color: var(--lp-tekst); }
.lp-liczby-uklad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding: 44px 0 52px; border-bottom: 1px solid var(--lp-linia-mocna); }
.lp-liczba { display: flex; align-items: center; gap: 18px; }
.lp-liczba + .lp-liczba { border-inline-start: 1px solid var(--lp-linia-mocna); padding-inline-start: 32px; }
.lp-liczba-ile {
  font-family: var(--lp-font-nag); font-size: 56px; font-weight: 800; line-height: 1;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lp-liczba-co { max-width: 15rem; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--lp-tekst-2); }

.lp-tryby .lp-sek-srodek { gap: 44px; padding-bottom: calc(var(--lp-pion) + 6px); }
.lp-tryby-siatka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.lp-tryb {
  --lp-tryb-obrys: #FFFFFF;
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 28px; background: var(--lp-czerwony); color: #FFFFFF;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lp-tryb:hover { transform: translateY(-4px); box-shadow: var(--lp-cien-karty); }
.lp-tryb--niebieski { background: var(--lp-niebieski); }
.lp-tryb--zielony   { background: var(--lp-zielony); color: #17183B; --lp-tryb-obrys: #17183B; }
.lp-tryb--zolty     { background: var(--lp-zolty);   color: #17183B; --lp-tryb-obrys: #17183B; }
.lp-tryb--granat    { background: var(--lp-granat); box-shadow: inset 0 0 0 1.5px var(--lp-obwodka-granat); }
.lp-tryb-ilu { display: block; width: 200px; height: 200px; margin: 22px auto 0; }
.lp-tryb-tresc { display: flex; flex-direction: column; gap: 10px; padding: 8px 28px 30px; }
.lp-tryb-tytul { margin: 0; font-family: var(--lp-font-nag); font-size: 26px; font-weight: 800; line-height: 1.1; }
.lp-tryb-akcja {
  padding: 0; border: 0; background: none; cursor: pointer; text-align: inherit;
  font: inherit; color: inherit; text-decoration: none;
}
.lp-tryb-akcja:hover { color: inherit; }
.lp-tryb-akcja::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 28px; }
.lp-tryb-akcja:focus-visible { outline: none; }
.lp-tryb-akcja:focus-visible::after { outline: 3px solid var(--lp-tryb-obrys); outline-offset: -6px; }
.lp-tryb-opis { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.5; }

.lp-upusc {
  display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 28px;
  border: 2px dashed var(--lp-szary); background: var(--lp-karta); color: var(--lp-tekst);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.lp-upusc.dragover { border-color: var(--lp-niebieski); background: color-mix(in srgb, var(--lp-niebieski) 9%, var(--lp-karta)); }
.lp-upusc-ikona {
  width: 64px; height: 64px; border-radius: 20px; background: var(--lp-zolty); color: #17183B;
  display: flex; align-items: center; justify-content: center;
}
.lp-upusc-tytul { margin: 0; font-family: var(--lp-font-nag); font-size: 26px; font-weight: 800; line-height: 1.1; }
.lp-upusc-opis { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--lp-tekst-2); }
.lp-upusc-przyciski { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; padding-top: 6px; }

.lp-metoda-uklad {
  display: grid; grid-template-columns: 470px minmax(0, 1fr); gap: 64px; align-items: center;
  padding-block: calc(var(--lp-pion) + 6px);
}
.lp-metoda-lewa { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.lp-metoda-znak {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 0.45em;
  min-height: 32px; padding: 6px 14px; box-sizing: border-box; border-radius: 999px;
  background: var(--lp-zolty); color: #17183B;
  font-size: 13px; font-weight: 800; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase;
}
.lp-metoda-opis { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.6; color: var(--lp-lawenda); }
.lp-stos { position: relative; width: 470px; max-width: 100%; height: 330px; margin-top: 22px; }
.lp-stos-karta {
  --k: #2463E9; --k-tlo: #E6EDFC; --k-tekst: #FFFFFF;
  position: absolute; width: 240px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 12px; padding: 16px;
  border-radius: 26px; border: 3px solid var(--k); background: #FFFFFF; color: #17183B;
  box-shadow: 0 26px 50px -28px rgba(0, 0, 0, 0.8);
}
.lp-stos-karta--srednie { inset-inline-start: 0;     top: 0;     z-index: 1; transform: rotate(-7deg); }
.lp-stos-karta--latwe   { inset-inline-start: 228px; top: 24px;  z-index: 2; transform: rotate(6deg);
                          --k: #35A64D; --k-tlo: #E4F3E7; --k-tekst: #17183B; }
.lp-stos-karta--trudne  { inset-inline-start: 112px; top: 150px; z-index: 3; transform: rotate(-2deg);
                          --k: #DB2727; --k-tlo: #FBE6E6; --k-tekst: #FFFFFF; }
.lp-stos-poziom {
  align-self: flex-end; display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px;
  border-radius: 999px; background: var(--k); color: var(--k-tekst);
  font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase;
}
.lp-stos-slowo { font-family: var(--lp-font-nag); font-size: 28px; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; text-align: center; }
.lp-stos-zdanie {
  padding: 10px 14px; border-radius: 12px; border-inline-start: 4px solid var(--k); background: var(--k-tlo);
  font-size: 14px; font-weight: 500; font-style: italic; line-height: 1.4;
}
.lp-metoda-kroki { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.lp-krok { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 24px; background: var(--lp-granat-2); }
.lp-krok-ikona { width: 48px; height: 48px; border-radius: 15px; display: flex; align-items: center; justify-content: center; }
.lp-krok-ikona--zolta     { background: var(--lp-zolty);     color: #17183B; }
.lp-krok-ikona--czerwona  { background: var(--lp-czerwony);  color: #FFFFFF; }
.lp-krok-ikona--zielona   { background: var(--lp-zielony);   color: #17183B; }
.lp-krok-ikona--niebieska { background: var(--lp-niebieski); color: #FFFFFF; }
.lp-krok-tytul { margin: 0; font-family: var(--lp-font-nag); font-size: 23px; font-weight: 800; line-height: 1.15; color: #FFFFFF; }
.lp-krok-opis { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.55; color: var(--lp-lawenda); }

.lp-link-dalej {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  font-size: 16px; font-weight: 800; color: var(--lp-tekst); text-decoration: none; white-space: nowrap;
}
.lp-link-dalej:hover { color: var(--lp-tekst); text-decoration: underline; text-underline-offset: 4px; }
.lp-link-dalej-strzalka {
  flex: none; width: 32px; height: 32px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--lp-cta-tlo); color: var(--lp-cta-tekst); transition: transform 0.18s ease;
}
.lp-link-dalej-strzalka .lp-strzalka { width: 18px; height: 18px; }
.lp-link-dalej:hover .lp-link-dalej-strzalka { transform: translateX(3px); }
[dir="rtl"] .lp-link-dalej:hover .lp-link-dalej-strzalka { transform: translateX(-3px); }
.lp-art-siatka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.lp-art-siatka--2 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.lp-art {
  display: flex; flex-direction: column; overflow: hidden; border-radius: 28px;
  background: var(--lp-karta); color: var(--lp-tekst); text-decoration: none;
  box-shadow: 0 0 0 1.5px var(--lp-linia);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lp-art:hover { color: var(--lp-tekst); transform: translateY(-4px); box-shadow: 0 0 0 1.5px var(--lp-mocna), var(--lp-cien-karty); }
.lp-art-foto {
  aspect-ratio: 16 / 10; overflow: hidden; background: var(--lp-linia);
  display: flex; align-items: center; justify-content: center;
}
.lp-art-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-art-bezfoto { font-size: 2rem; opacity: 0.45; }
.lp-art-tresc { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 22px 24px 26px; }
.lp-art-tag {
  align-self: flex-start; display: inline-flex; align-items: center; min-height: 26px; padding: 0 11px;
  border-radius: 999px; background: var(--lp-tag-tlo); color: var(--lp-tag-tekst);
  font-size: 12.5px; font-weight: 800; line-height: 1;
}
.lp-art-tytul { margin: 0; font-family: var(--lp-font-nag); font-size: 25px; font-weight: 800; line-height: 1.12; text-wrap: balance; }
.lp-art-opis { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.55; color: var(--lp-tekst-2); }
.lp-art-meta { margin-top: auto; font-size: 13px; font-weight: 700; color: var(--lp-tekst-3); }
.lp-art-wszystkie {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;
  min-height: 320px; padding: 26px; box-sizing: border-box; overflow: hidden; border-radius: 28px;
  background: var(--lp-niebieski); color: #FFFFFF; text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lp-art-wszystkie:hover { color: #FFFFFF; transform: translateY(-4px); box-shadow: var(--lp-cien-karty); }
.lp-art-wszystkie-ilu { position: absolute; top: -6px; inset-inline-end: -24px; width: 250px; height: 250px; pointer-events: none; }
.lp-art-wszystkie-tytul { position: relative; font-family: var(--lp-font-nag); font-size: 34px; font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; }
.lp-art-wszystkie-opis { position: relative; font-size: 15px; font-weight: 500; line-height: 1.55; }
.lp-kolko {
  position: relative; align-self: flex-start; width: 52px; height: 52px; margin-top: 6px; border-radius: 999px;
  background: var(--lp-zolty); color: #17183B; display: flex; align-items: center; justify-content: center;
}

.lp-zestawy2 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.lp-zestaw2 {
  display: flex; flex-direction: column; overflow: hidden; border-radius: 26px;
  background: var(--lp-karta); color: var(--lp-tekst); text-decoration: none;
  box-shadow: 0 0 0 1.5px var(--lp-linia);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lp-zestaw2:hover { color: var(--lp-tekst); transform: translateY(-4px); box-shadow: 0 0 0 1.5px var(--lp-mocna), var(--lp-cien-karty); }
.lp-zestaw2--duzy { grid-row: span 2; }
.lp-zestaw2-foto { position: relative; height: 132px; overflow: hidden; background: var(--lp-linia); flex: none; }
.lp-zestaw2--duzy .lp-zestaw2-foto { flex: 1; height: auto; min-height: 360px; }
.lp-zestaw2-foto img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-zestaw2-swieze {
  position: absolute; top: 16px; inset-inline-start: 16px;
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px;
  background: var(--lp-zolty); color: #17183B; font-size: 13px; font-weight: 800; line-height: 1;
}
.lp-zestaw2-opis { display: flex; align-items: center; gap: 12px; padding: 12px 16px 14px; }
.lp-zestaw2--duzy .lp-zestaw2-opis { padding: 18px 22px 20px; }
.lp-zestaw2-teksty { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lp-zestaw2-tytul {
  margin: 0; font-family: var(--lp-font-nag); font-size: 18px; font-weight: 800; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp-zestaw2--duzy .lp-zestaw2-tytul { font-size: 24px; white-space: normal; }
.lp-zestaw2-meta { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--lp-tekst-3); }
.lp-nowosci-info {
  display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 22px;
  border-radius: 26px; background: var(--lp-karta); box-shadow: 0 0 0 1.5px var(--lp-linia);
}
.lp-nowosci-info-ikona {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 14px; background: var(--lp-zielony); color: #17183B;
  display: flex; align-items: center; justify-content: center;
}
.lp-nowosci-info-tekst { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--lp-tekst-2); }
.lp-nowosci-info-tekst strong { color: var(--lp-tekst); font-weight: 800; }
.lp-zestawy2--3 .lp-nowosci-info { grid-column: span 2; }
.lp-zestawy2--2 .lp-zestaw2--duzy, .lp-zestawy2--1 .lp-zestaw2--duzy { grid-row: auto; }
.lp-zestawy2--1 { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }

.lp-jezyki-uklad {
  display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 56px; align-items: center;
  padding-block: calc(var(--lp-pion) - 8px);
}
.lp-jezyki-uklad--film { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.lp-jezyki-ilu { display: block; width: 400px; max-width: 100%; height: auto; aspect-ratio: 1; }
.lp-jezyki-film { position: relative; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; background: #000; }
.lp-jezyki-film iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.lp-jezyki-tresc { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.lp-jezyki-opis { margin: 0; max-width: 36rem; font-size: 18px; font-weight: 600; line-height: 1.5; }
.lp-flagi { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.lp-flaga {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
  padding-block: 0; padding-inline: 10px 16px; box-sizing: border-box; border: 0; border-radius: 999px;
  background: #FFFFFF; color: #17183B; font-family: var(--lp-font); font-size: 15px; font-weight: 700;
  white-space: nowrap; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lp-flaga:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px #17183B; }
.lp-flaga:focus-visible { outline: 3px solid #17183B; outline-offset: 3px; }
.lp-flaga .lp-flaga-svg { width: 26px; height: 17px; }
.lp-swiat { margin: 6px 0 0; font-size: 15px; font-weight: 700; line-height: 1.4; }

.lp-cennik { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.lp-plan {
  position: relative; display: flex; flex-direction: column; gap: 22px; padding: 36px;
  border-radius: 32px; overflow: hidden;
}
.lp-plan > :not(.lp-plan-ilu) { position: relative; }
.lp-plan--darmowy { background: var(--lp-karta); color: var(--lp-tekst); box-shadow: 0 0 0 1.5px var(--lp-linia); }
.lp-plan--premium { background: var(--lp-granat); color: #FFFFFF; box-shadow: inset 0 0 0 1.5px var(--lp-obwodka-granat); }
.lp-plan-ilu { position: absolute; top: -6px; inset-inline-end: -10px; width: 200px; height: 200px; pointer-events: none; }
.lp-plan-nazwa {
  margin: 0; font-family: var(--lp-font); font-size: 14px; font-weight: 800; line-height: 1.2;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--lp-tekst-2);
}
.lp-plan--premium .lp-plan-nazwa { color: var(--lp-zolty); }
.lp-plan-cena { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.lp-plan-kwota { font-family: var(--lp-font-nag); font-size: 72px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; white-space: nowrap; }
.lp-plan--premium .lp-plan-kwota { color: var(--lp-zolty); }
.lp-plan-okres { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--lp-tekst-2); }
.lp-plan--premium .lp-plan-okres { color: #FFFFFF; }
.lp-plan-cena-blok { display: flex; flex-direction: column; gap: 6px; }
.lp-plan-opcje { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--lp-lawenda); }
.lp-plan-lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.lp-plan-lista li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; font-weight: 600; line-height: 1.45; }
.lp-ptaszek {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 999px; background: var(--lp-zielony); color: #17183B;
  display: flex; align-items: center; justify-content: center;
}
.lp-plan--premium .lp-ptaszek { background: var(--lp-zolty); }
.lp-plan-stopka { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 8px; }

.lp-opinie .lp-sek-glowa { margin-bottom: 0; }
.lp-opinie-suma { margin: 14px 0 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; text-align: center; }
.lp-opinie-gwiazdki, .lp-opinia-gwiazdki { display: inline-flex; gap: 2px; }
.lp-gwiazdka { fill: var(--lp-linia); stroke: none; }
.lp-gwiazdka.pelna { fill: var(--lp-zolty); stroke: #17183B; stroke-width: 1.4; stroke-linejoin: round; }
.lp-opinie-suma .lp-gwiazdka { width: 24px; height: 24px; }
.lp-opinie-srednia { font-family: var(--lp-font-nag); font-size: 22px; font-weight: 800; color: var(--lp-tekst); }
.lp-opinie-liczba { font-size: 16px; font-weight: 700; color: var(--lp-tekst-2); }
.lp-opinie-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.lp-opinia {
  margin: 0; padding: 22px 22px 20px; border-radius: 22px; background: var(--lp-karta); box-shadow: 0 0 0 1.5px var(--lp-linia);
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.lp-opinia-tresc {
  margin: 0; font-size: 16px; font-weight: 500; line-height: 1.6; color: var(--lp-tekst); white-space: pre-line; overflow-wrap: anywhere;
}
.lp-opinia-podpis { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 14px; font-weight: 800; color: var(--lp-tekst); }
.lp-opinia-podpis span { overflow-wrap: anywhere; }
.lp-opinia-podpis time { font-weight: 600; color: var(--lp-tekst-3); }
.lp-opinie-weryfikacja { max-width: 46rem; margin: 26px auto 0; text-align: center; font-size: 14px; font-weight: 600; line-height: 1.6; color: var(--lp-tekst-2); }
@media (max-width: 1100px) { .lp-opinie-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .lp-opinie-lista { grid-template-columns: minmax(0, 1fr); } .lp-opinia { padding: 18px 18px 16px; } }

.lp-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; align-items: start; }
.lp-faq-kolumna { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lp-faq-poz { border-radius: 22px; background: var(--lp-karta); box-shadow: 0 0 0 1.5px var(--lp-linia); }
.lp-faq-poz[open] { box-shadow: 0 0 0 2px var(--lp-mocna); }
.lp-faq-poz summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px;
  padding-block: 14px; padding-inline: 22px 16px; box-sizing: border-box; border-radius: 22px;
  list-style: none; cursor: pointer; font-size: 17px; font-weight: 800; line-height: 1.35; color: var(--lp-tekst);
}
.lp-faq-poz summary::-webkit-details-marker { display: none; }
.lp-faq-poz summary::marker { content: ''; }
.lp-faq-poz summary:focus-visible { outline: 3px solid var(--lp-niebieski); outline-offset: 3px; }
.lp-faq-plus {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 999px; background: var(--lp-zolty); color: #17183B;
  display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease;
}
.lp-faq-poz[open] .lp-faq-plus { transform: rotate(45deg); }
.lp-faq-poz p { margin: 0; padding: 0 22px 20px; font-size: 16px; font-weight: 500; line-height: 1.6; color: var(--lp-tekst-2); }

.lp-final-sek .lp-kontener { padding-bottom: var(--lp-pion); }
.lp-final {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: center;
  padding: 56px 64px; border-radius: 40px; overflow: hidden;
  background: var(--lp-zielony); color: #17183B;
}
.lp-final-tekst { display: flex; flex-direction: column; align-items: flex-start; gap: 36px; min-width: 0; }
.lp-final .lp-h2 { color: #17183B; }
.lp-final .lp-cta:focus-visible { outline-color: #17183B; }
.lp-final-ilu { width: 340px; height: 340px; margin: -24px 0 -56px; justify-self: end; }

body:has(#authScreen:not(.hidden)) > .app-stopka {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 26px;
  margin-top: 0; padding: 48px max(24px, calc((100% - 1200px) / 2)) 44px;
  border-top: 0; background: #17183B; color: #C9CAE8; text-align: start;
  font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 13px; font-weight: 600;
}
body:has(#authScreen:not(.hidden)) > .app-stopka::before {
  content: ''; order: -1; width: 172px; height: 41px; margin-inline-end: auto;
  background: url('../../assets/img/logo-biale.webp') center / contain no-repeat;
}
body:has(#authScreen:not(.hidden)) > .app-stopka a { order: 0; color: #FFFFFF; font-size: 14px; font-weight: 700; }
body:has(#authScreen:not(.hidden)) > .app-stopka a:hover { color: #FFC83D; }
body:has(#authScreen:not(.hidden)) > .app-stopka::after {
  content: ''; order: 1; flex-basis: 100%; height: 1px; margin: 14px 0 10px; background: #2E3068;
}
body:has(#authScreen:not(.hidden)) > .app-stopka > span:first-child { order: 2; flex: 1 1 auto; }
body:has(#authScreen:not(.hidden)) > .app-stopka .app-stopka-marka {
  order: 3; flex-basis: auto; margin: 0; color: #C9CAE8; font-weight: 600;
}

.lp-reklama { max-width: var(--lp-max); margin: 0 auto; padding: 32px 20px; }
.lp-reklama:has(ins.adsbygoogle:not([data-ad-status="filled"])) { display: none; }
.lp-reklama-etykieta {
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--lp-tekst-3); margin-bottom: 6px; text-align: center;
}

.lp-modal {
  position: fixed; inset: 0; z-index: 4200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(15, 23, 42, 0.68);
  overflow-y: auto;
}
.lp-modal .auth-card { margin: auto; }

.lp-modal-zamknij {
  position: absolute; top: 14px; inset-inline-end: 14px;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border-warm); background: var(--card-bg); color: var(--grigio);
  font-size: 1rem; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.lp-modal-zamknij:hover { color: var(--testo); border-color: var(--border-2); }

.lp-google { margin-top: 6px; min-height: 44px; display: flex; justify-content: center; }
.lp-google-lub {
  display: flex; align-items: center; gap: 12px; margin: 16px 0 12px;
  font-size: 0.78rem; color: var(--muted-light);
}
.lp-google-lub::before, .lp-google-lub::after {
  content: ''; flex: 1; height: 1px; background: var(--border-warm);
}
.lp-google-zgoda { margin-top: 10px; font-size: 0.74rem; line-height: 1.45; color: var(--muted-light); text-align: center; }
.lp-google-zgoda a { color: var(--grigio); font-weight: 600; }
.potwierdz-kodem { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.potwierdz-kodem.hidden { display: none; }
.potwierdz-kodem-opis { font-size: 0.82rem; color: var(--grigio); line-height: 1.55; margin: 0 0 4px; }
.potwierdz-kodem .btn { width: 100%; }
.btn-google {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 240px; max-width: 400px; height: 40px; padding: 0 12px; box-sizing: border-box;
  border-radius: 20px; border: 1px solid #747775; background: #FFFFFF; color: #1F1F1F;
  font-family: 'Roboto', 'Segoe UI', Arial, sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0.25px;
  text-decoration: none; cursor: pointer; transition: background 0.15s ease, box-shadow 0.15s ease;
}
.btn-google:hover { background: #F2F2F2; box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15); }
.btn-google:focus-visible { outline: 2px solid #4285F4; outline-offset: 2px; }
.btn-google .btn-google-logo { flex-shrink: 0; display: block; }
:root[data-theme="dark"] .btn-google { background: #131314; border-color: #8E918F; color: #E3E3E3; }
:root[data-theme="dark"] .btn-google:hover { background: #1F1F20; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-google { background: #131314; border-color: #8E918F; color: #E3E3E3; }
  :root:not([data-theme="light"]) .btn-google:hover { background: #1F1F20; }
}

@media (max-width: 1320px) {
  .lp-header-inner { gap: 28px; }
  .lp-nav { gap: 20px; }
  .lp-lang-picker .lang-picker-name { display: none; }
}
@media (max-width: 1250px) {
  .lp-plan-ilu { width: 160px; height: 160px; }
  .lp-plan--premium .lp-plan-cena-blok { max-width: calc(100% - 140px); }
}
@media (max-width: 1120px) {
  .lp-nav { display: none; }
  .lp-hero { --lp-hero-dol: 56px; }
  .lp-hero-uklad { gap: 36px; padding: 40px 0 var(--lp-hero-dol); }
  .lp-hero-tekst { grid-template-columns: minmax(0, 1fr); grid-template-areas: "h1" "opis" "akcje" "nota"; row-gap: 20px; }
  .lp-hero-tekst[data-nad] { grid-template-areas: "nad" "h1" "opis" "akcje" "nota"; }
  .lp-hero-opis { padding-bottom: 0; max-width: 40rem; }
  .lp-hero-tekst > .lp-hero-nota-wiersz { margin-top: 0; }
  .lp-metoda-uklad { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .lp-metoda-lewa { display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 40px; align-items: center; }
  .lp-stos { margin-top: 0; }
  .lp-liczba { flex-direction: column; align-items: flex-start; gap: 8px; }
  .lp-liczba-ile { font-size: 56px; }
}
@media (max-width: 980px) {
  .lp-tryby-siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-metoda-lewa { grid-template-columns: minmax(0, 1fr); }
  .lp-stos { justify-self: center; }
  .lp-art-siatka, .lp-art-siatka--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-art-siatka .lp-art-wszystkie { grid-column: 1 / -1; min-height: 240px; padding-inline-end: 250px; }
  .lp-art-siatka--2 .lp-art-wszystkie { grid-column: auto; min-height: 320px; padding-inline-end: 26px; }
  .lp-zestawy2, .lp-zestawy2--1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-zestaw2--duzy { grid-row: auto; grid-column: 1 / -1; }
  .lp-zestaw2--duzy .lp-zestaw2-foto { min-height: 300px; }
  .lp-zestawy2--3 .lp-nowosci-info { grid-column: auto; }
  .lp-jezyki-uklad, .lp-jezyki-uklad--film { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .lp-jezyki-ilu { width: 260px; justify-self: center; }
  .lp-cennik, .lp-faq { grid-template-columns: minmax(0, 1fr); }
  .lp-final { grid-template-columns: minmax(0, 1fr) 260px; padding: 44px 40px; gap: 24px; }
  .lp-final-ilu { width: 260px; height: 260px; margin: -20px 0 -44px; }
}
@media (max-width: 860px) {
  .lp-sek-glowa { flex-direction: column; align-items: flex-start; gap: 16px; }
  .lp-sek-glowa--srodek { align-items: center; }
  .lp-sek-opis { max-width: 40rem; }
  .lp-liczby-uklad { grid-template-columns: max-content minmax(0, 1fr); column-gap: 18px; row-gap: 14px; align-items: center; padding: 30px 0; }
  .lp-liczba { display: contents; }
  .lp-liczba-ile { font-size: 52px; }
  .lp-liczba-co { max-width: none; }
  .lp-metoda-kroki { grid-template-columns: minmax(0, 1fr); }
  .lp-final { grid-template-columns: minmax(0, 1fr); text-align: start; }
  .lp-final-ilu { order: -1; width: 200px; height: 200px; margin: -8px 0 -16px; justify-self: center; }
  body:has(#authScreen:not(.hidden)) > .app-stopka { justify-content: flex-start; gap: 10px 20px; padding: 40px 20px 36px; }
  body:has(#authScreen:not(.hidden)) > .app-stopka::before { flex-basis: 100%; margin: 0 0 8px; background-position: left center; }
  [dir="rtl"] body:has(#authScreen:not(.hidden)) > .app-stopka::before { background-position: right center; }
  body:has(#authScreen:not(.hidden)) > .app-stopka > span:first-child,
  body:has(#authScreen:not(.hidden)) > .app-stopka .app-stopka-marka { flex-basis: 100%; }
}
@media (max-width: 640px) {
  .auth-screen { --lp-pion: 60px; }
  html:has(#authScreen:not(.hidden)) { scroll-padding-top: 120px; }
  .lp-kontener, .lp-header-inner { width: min(var(--lp-max), 100% - 32px); }
  .lp-header-inner { flex-wrap: wrap; gap: 10px 8px; min-height: 0; padding: 10px 0 12px; }
  .lp-header-logo { height: 30px; }
  .lp-header-akcje { display: contents; }
  .lp-header-narzedzia { margin-inline-start: auto; gap: 8px; }
  .lp-header-konto { flex-basis: 100%; gap: 8px; }
  .lp-header .lp-header-theme { width: 40px; height: 40px; }
  .lp-lang-picker .lang-picker-btn { min-height: 40px; padding-inline: 9px 10px; }
  .lp-header-konto .lp-btn-kontur { min-height: 44px; padding: 0 16px; font-size: 14px; }
  .lp-header-konto .lp-cta { flex: 1; --cta-wys: 44px; --cta-kolko-r: 34px; --cta-font: 14px; padding-inline-start: 18px; gap: 10px; }
  .lp-hero { --lp-hero-dol: 40px; }
  .lp-hero-uklad { padding: 32px 0 var(--lp-hero-dol); gap: 28px; }
  .lp-hero-tekst { row-gap: 18px; }
  .lp-hero-tekst > .lp-hero-nad { font-size: 13px; margin-bottom: -6px; }
  .lp-hero-opis { font-size: 17px; }
  .lp-hero-akcje { flex-direction: column; align-items: stretch; width: 100%; margin-top: 0; gap: 10px; }
  .lp-hero-akcje .lp-cta, .lp-hero-przyklad { width: 100%; }
  .lp-hero-przyklad { min-height: 56px; font-size: 15px; }
  .lp-hero-film .fp { border-radius: 18px; }
  .lp-liczba-ile { font-size: 44px; }
  .lp-liczba-co { font-size: 15px; }
  .lp-tryby-siatka { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .lp-tryb-ilu { width: 160px; height: 160px; margin-top: 16px; }
  .lp-tryb-tresc { padding: 6px 22px 24px; }
  .lp-tryb-tytul, .lp-upusc-tytul { font-size: 23px; }
  .lp-tryb-opis, .lp-upusc-opis { font-size: 15px; }
  .lp-upusc { padding: 22px; }
  .lp-metoda-uklad { gap: 36px; }
  .lp-metoda-opis { font-size: 16px; }
  .lp-stos { zoom: 0.72; }
  .lp-krok { padding: 20px; }
  .lp-krok-tytul { font-size: 21px; }
  .lp-art-siatka, .lp-art-siatka--2 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .lp-art-siatka .lp-art-wszystkie, .lp-art-siatka--2 .lp-art-wszystkie {
    grid-column: auto; min-height: 0; padding: 168px 22px 24px;
  }
  .lp-art-tytul { font-size: 22px; }
  .lp-art-wszystkie-tytul { font-size: 30px; }
  .lp-art-wszystkie-ilu { width: 180px; height: 180px; top: -4px; inset-inline-end: -6px; }
  .lp-zestawy2, .lp-zestawy2--1 { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .lp-zestaw2--duzy { grid-column: auto; }
  .lp-zestaw2--duzy .lp-zestaw2-foto { min-height: 240px; }
  .lp-zestaw2-foto { height: 150px; }
  .lp-zestaw2--duzy .lp-zestaw2-tytul { font-size: 21px; }
  .lp-jezyki-ilu { width: 220px; }
  .lp-jezyki-opis { font-size: 16px; }
  .lp-flagi { gap: 8px; }
  .lp-flaga { min-height: 40px; font-size: 14px; padding-inline: 9px 13px; }
  .lp-plan { padding: 26px 22px; gap: 18px; border-radius: 26px; }
  .lp-plan-ilu { width: 130px; height: 130px; top: -4px; inset-inline-end: -8px; }
  .lp-plan-kwota { font-size: 56px; }
  .lp-plan-lista li { font-size: 15px; }
  .lp-plan-stopka .lp-cta { width: 100%; white-space: normal; text-align: start; }
  .lp-faq-poz summary { font-size: 16px; padding-inline: 18px 12px; }
  .lp-faq-poz p { padding: 0 18px 18px; font-size: 15px; }
  .lp-final { padding: 32px 22px 30px; border-radius: 28px; gap: 12px; }
  .lp-final-tekst { gap: 24px; }
  .lp-final-tekst .lp-cta { width: 100%; }
  .lp-final-ilu { width: 170px; height: 170px; }
}
@media (max-width: 380px) {
  .lp-stos { zoom: 0.66; }
  .lp-header-logo { height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-cta:hover, .lp-tryb:hover, .lp-art:hover, .lp-art-wszystkie:hover, .lp-zestaw2:hover,
  .lp-flaga:hover { transform: none; }
  .lp-cta:hover .lp-cta-kolko, .lp-link-dalej:hover .lp-link-dalej-strzalka { transform: none; }
  .lp-faq-plus { transition: none; }
}
.auth-card {
  position: relative; z-index: 3;
  background: var(--card-bg);
  border-radius: 24px;
  width: 100%; max-width: 380px;
  padding: 32px 28px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.35);
}
.auth-brand { text-align: center; margin-bottom: 24px; }
.auth-logo { height: 55px; margin: 0 auto 6px; max-width: 100%; }
.auth-subtitle { font-size: 0.85rem; color: var(--grigio); margin-top: 2px; }
.auth-input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: 2px solid var(--border-warm);
  background: var(--crema);
  font-size: 0.95rem;
  font-family: inherit;
  margin-bottom: 12px;
  outline: none;
  transition: var(--transition);
}
.auth-input:focus { border-color: var(--oro); }
.auth-label { display: block; font-size: 0.8rem; color: var(--grigio); margin: -4px 0 8px 2px; }
.auth-info {
  font-size: 0.78rem; color: var(--muted-dark); line-height: 1.55; margin: 0 0 12px;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; padding: 10px 13px;
}

.onboarding-overlay {
  position: fixed; inset: 0; z-index: 300; background: rgba(2,6,23,0.88);
  display: flex; align-items: center; justify-content: center; padding: 22px;
}
.onboarding-karta {
  background: var(--card-bg); border-radius: 22px; padding: 30px 28px; max-width: 460px;
  width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-hover); text-align: center;
}
.onboarding-krok { font-size: 0.72rem; font-weight: 800; color: var(--oro); letter-spacing: 0.08em; text-transform: uppercase; }
.onboarding-karta h2 { font-size: 1.3rem; margin: 8px 0 8px; }
.onboarding-karta p { font-size: 0.88rem; color: var(--grigio); line-height: 1.6; margin: 0 0 18px; }
.onboarding-uwaga {
  font-size: 0.76rem; color: var(--muted-dark); background: var(--bg-warn-soft);
  border-radius: 12px; padding: 10px 13px; margin: 0 0 18px; line-height: 1.5;
}
.onboarding-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-bottom: 20px; }
.onboarding-jezyk {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer;
  border: 2px solid var(--border); border-radius: 14px; background: var(--card-bg);
  font-family: inherit; font-size: 0.85rem; font-weight: 700; color: var(--testo);
  transition: var(--transition); text-align: left;
}
.onboarding-jezyk:hover { border-color: var(--border-2); transform: translateY(-1px); }
.onboarding-jezyk.wybrany { border-color: var(--oro); background: var(--bg-highlight); }
.onboarding-jezyk.polecany { border-color: var(--oro); box-shadow: 0 0 0 3px color-mix(in srgb, var(--oro) 18%, transparent); }
.onboarding-podpowiedz {
  font-size: 0.78rem; color: var(--muted-dark); background: var(--bg-info-soft);
  border-radius: 12px; padding: 10px 13px; margin: 0 0 14px; line-height: 1.5;
}
.onboarding-jezyk svg, .onboarding-jezyk img { flex-shrink: 0; }

.start-overlay {
  position: fixed; inset: 0; z-index: 3200; background: var(--crema);
  display: flex; flex-direction: column; overflow-y: auto;
}
.start-top {
  position: sticky; top: 0; z-index: 2; flex-shrink: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px 12px; background: var(--crema);
}
.start-wyjscie {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: none; background: transparent; color: var(--grigio);
  font-size: 1.1rem; line-height: 1; font-family: inherit; transition: var(--transition);
}
.start-wyjscie:hover { background: var(--bg-soft); color: var(--testo); }
.start-wyjscie svg { display: block; width: 18px; height: 18px; margin: auto; }
[dir="rtl"] .start-wyjscie svg { transform: scaleX(-1); }
.start-pasek {
  flex: 1; height: 14px; border-radius: 999px; overflow: hidden;
  background: var(--bg-soft); border: 1px solid var(--border);
}
.start-pasek-fill {
  height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--zielen-gleboka), var(--zielen-pastel));
  transition: width 0.55s cubic-bezier(.4,0,.2,1);
}
.start-krok-etykieta {
  flex-shrink: 0; font-size: 0.72rem; font-weight: 800; color: var(--grigio);
  letter-spacing: 0.04em; white-space: nowrap;
}
.start-scena { flex: 1; display: flex; justify-content: center; padding: 8px 18px 40px; }
.start-panel { width: 100%; max-width: 560px; text-align: center; animation: startWejdz 0.32s cubic-bezier(.4,0,.2,1); }
@keyframes startWejdz { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .start-panel { animation: none; } }

.start-h { font-size: 1.42rem; font-weight: 800; color: var(--testo); margin: 10px 0 6px; line-height: 1.3; }
.start-p  { font-size: 0.9rem; color: var(--grigio); line-height: 1.6; margin: 0 0 20px; }
.start-blad { background: var(--bg-error-soft); color: var(--rosso); border-radius: 10px; padding: 9px 12px; font-size: 0.82rem; margin: 0 0 14px; }


.start-cele { display: grid; gap: 10px; margin-bottom: 22px; }
.start-cel {
  display: flex; align-items: center; gap: 13px; padding: 14px 16px; cursor: pointer;
  border: 2px solid var(--border); border-radius: 16px; background: var(--card-bg);
  font-family: inherit; color: var(--testo);
  transition: var(--transition); text-align: left; position: relative;
}
.start-cel:hover { border-color: var(--border-2); transform: translateY(-2px); }
.start-cel.wybrany { border-color: var(--oro); background: var(--bg-highlight); }
.start-cel-ico { font-size: 1.6rem; line-height: 1; flex-shrink: 0; }
.start-cel-tresc { min-width: 0; }
.start-cel-tresc b { font-size: 0.94rem; font-weight: 700; line-height: 1.4; }
.start-cel-ptak { margin-left: auto; color: var(--oro); font-weight: 900; font-size: 1.1rem; opacity: 0; transition: var(--transition); flex-shrink: 0; }
.start-cel.wybrany .start-cel-ptak { opacity: 1; }

.start-cta {
  width: 100%; padding: 15px 20px; border: none; border-radius: 999px; cursor: pointer;
  background: var(--oro); color: var(--na-akcencie);
  font-family: inherit; font-size: 1rem; font-weight: 800; letter-spacing: 0.01em;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--oro) 65%, black);
  transition: transform 0.08s ease, box-shadow 0.08s ease, opacity var(--transition);
}
.start-cta:hover:not(:disabled) { transform: translateY(1px); box-shadow: 0 3px 0 color-mix(in srgb, var(--oro) 65%, black); }
.start-cta:active:not(:disabled)  { transform: translateY(4px); box-shadow: none; }
.start-cta:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.start-link { display: block; margin: 16px auto 0; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 0.84rem; font-weight: 700; color: var(--grigio); }
.start-link:hover { color: var(--oro); text-decoration: underline; }

.start-panel .flip-container { margin-top: 6px; }


.start-form { text-align: left; margin-bottom: 4px; }
.start-form .auth-input { margin-bottom: 10px; }

@media (max-width: 560px) {
  .start-scena { padding: 8px 14px 32px; }
  .start-h { font-size: 1.24rem; }
  .start-krok-etykieta { display: none; } 
}
.start-scena-in { width: 100%; max-width: 560px; }

.start-overlay[data-kolor] {
  --lk-niebieski: #2463E9;
  --lk-niebieski-ciemny: #204EB8;
  --lk-zolty: #FFC83D;
  --lk-granat: #17183B;
  --lk-bialy: #FFFFFF;
  --lk-kolumna: 1040px;
  --lk-tlo: var(--lk-niebieski);
  --lk-tekst: var(--lk-bialy);
  --lk-tor: rgba(255, 255, 255, 0.3);
  --lk-fokus: var(--lk-zolty);
  background: var(--lk-tlo); color: var(--lk-tekst);
  overflow-x: hidden;
}
.start-overlay[data-kolor="zolty"] {
  --lk-tlo: var(--lk-zolty);
  --lk-tekst: var(--lk-granat);
  --lk-tor: rgba(23, 24, 59, 0.2);
  --lk-fokus: var(--lk-granat);
}
.start-overlay[data-kolor="zielony"] {
  --lk-tlo: #35A64D;
  --lk-tekst: var(--lk-granat);
  --lk-tor: rgba(23, 24, 59, 0.2);
  --lk-fokus: var(--lk-granat);
}
.start-overlay[data-kolor] .start-top {
  background: var(--lk-tlo);
  padding: 16px max(20px, calc((100% - var(--lk-kolumna)) / 2)) 6px;
}
.start-overlay[data-kolor] .start-wyjscie,
.start-overlay[data-kolor] .start-krok-etykieta { display: none; }
.start-overlay[data-kolor] .start-pasek { height: 6px; border: none; background: var(--lk-tor); }
.start-overlay[data-kolor] .start-pasek-fill { background: var(--lk-tekst); }
.start-overlay[data-kolor] .start-scena { padding: 12px 20px 0; }
.start-overlay[data-kolor] .start-scena-in { max-width: var(--lk-kolumna); }
.start-panel.lk-panel {
  max-width: none; text-align: start; color: var(--lk-tekst);
  display: flex; flex-direction: column; gap: 18px; padding-bottom: 40px;
}
.start-panel.lk-panel-cele { padding-bottom: 0; }
.lk-panel :is(button, a):focus-visible { outline: 3px solid var(--lk-fokus); outline-offset: 3px; }

.lk-gora {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "lewa . ui prawa"; align-items: center; gap: 12px;
}
.lk-gora-lewa { grid-area: lewa; display: flex; align-items: center; gap: 12px; }
.lk-gora .lk-ui { grid-area: ui; }
.lk-gora .lk-prawa { grid-area: prawa; }
.lk-kolo {
  flex: none; width: 44px; height: 44px; padding: 0; border: none; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--lk-granat); color: var(--lk-bialy); transition: transform 0.15s ease;
}
.lk-kolo svg { width: 22px; height: 22px; }
[dir="rtl"] .lk-kolo-wstecz svg { transform: scaleX(-1); }
.lk-logo {
  flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--lk-bialy);
  display: inline-flex; align-items: center; justify-content: center;
}
.lk-logo img { width: 32px; height: 32px; display: block; }
.lk-pigulka {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: 100%;
  padding: 0 18px; border: none; border-radius: 999px; cursor: pointer;
  background: var(--lk-bialy); color: var(--lk-granat);
  font-family: var(--font-tekst); font-size: 15px; font-weight: 700; line-height: 1.2; white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lk-pigulka.z-flaga { padding-inline-start: 8px; }
.lk-ui {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; max-width: 100%;
  padding-block: 6px; padding-inline: 8px 16px; border: none; border-radius: 999px; cursor: pointer;
  background: var(--lk-niebieski-ciemny); color: var(--lk-bialy); text-align: start;
  font-family: var(--font-tekst); font-size: 14px; font-weight: 600; line-height: 1.2;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lk-ui-tekst { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-ui-zmien { flex: none; color: var(--lk-zolty); font-weight: 800; }
.lk-flaga-kolo {
  flex: none; width: 30px; height: 30px; border-radius: 999px; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1.5px rgba(23, 24, 59, 0.16);
}
.lk-pigulka .lk-flaga-kolo { width: 28px; height: 28px; }
.lk-ui .lk-flaga-kolo { box-shadow: 0 0 0 2px var(--lk-bialy); }
.lk-flaga-kolo .flag-icon { flex: none; width: 150%; height: 100%; border-radius: 0; box-shadow: none; }

.lk-glowa { position: relative; margin-top: 2px; }
.lk-ilustracja {
  position: absolute; top: -6px; inset-inline-end: -28px; width: min(204px, 52vw); height: auto;
  pointer-events: none; user-select: none;
}
.lk-krok2 .lk-ilustracja { top: -24px; inset-inline-end: -40px; width: min(212px, 54vw); }
.lk-glowa-tekst {
  position: relative; width: 232px; max-width: calc(100% - 110px); min-height: 190px;
  display: flex; flex-direction: column; gap: 10px;
}
.lk-krok2 .lk-glowa-tekst { min-height: 180px; }
.lk-glowa.bez-ilustracji .lk-glowa-tekst { width: auto; max-width: none; min-height: 0; }
.lk-nadtytul { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.3; }
.lk-tytul {
  margin: 0; color: inherit; font-family: var(--font-naglowek); font-weight: 800;
  font-size: min(40px, 10.3vw); line-height: 1.02; letter-spacing: -0.02em;
}
.lk-tytul:focus { outline: none; }
.lk-opis { margin: 16px 0 0; max-width: 340px; color: inherit; font-size: 15px; font-weight: 500; line-height: 1.5; }

.lk-siatka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
.lk-kafel {
  position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 58px;
  padding-block: 10px; padding-inline: 14px 12px; border: none; border-radius: 18px; cursor: pointer;
  background: var(--lk-bialy); color: var(--lk-granat); text-align: start;
  font-family: var(--font-tekst); font-size: 16px; font-weight: 700; line-height: 1.25;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.lk-kafel.wybrany { background: var(--lk-granat); color: var(--lk-bialy); }
.lk-kafel-nazwa { flex: 1; min-width: 0; overflow-wrap: break-word; }
.lk-flaga {
  flex: none; display: inline-flex; border-radius: 5px; overflow: hidden;
  box-shadow: 0 0 0 1.5px rgba(23, 24, 59, 0.16);
}
.lk-flaga .flag-icon { width: 30px; height: 20px; border-radius: 0; box-shadow: none; }
.lk-znak {
  flex: none; width: 26px; height: 26px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--lk-zolty); color: var(--lk-granat);
}
.lk-znak svg { width: 15px; height: 15px; }
.lk-notka {
  display: flex; align-items: flex-start; gap: 10px; max-width: 640px; padding: 12px 14px; border-radius: 16px;
  background: #FFF6DC; color: var(--lk-granat); font-size: 14px; font-weight: 500; line-height: 1.5;
}
.lk-notka svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: #8A5A00; }
.lk-notka strong { font-weight: 800; }

.lk-kafel-cel { flex-direction: column; align-items: flex-start; gap: 10px; min-height: 164px; padding: 14px; border-radius: 20px; }
.lk-kafel-cel .lk-znak { position: absolute; top: 12px; inset-inline-end: 12px; }
.lk-cel-ikona {
  flex: none; width: 44px; height: 44px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
}
.lk-cel-ikona svg { width: 28px; height: 28px; }
.lk-cel-tytul { font-family: var(--font-naglowek); font-size: 19px; font-weight: 800; line-height: 1.1; padding-inline-end: 28px; }
.lk-cel-opis { font-size: 13px; font-weight: 500; line-height: 1.38; color: #4A4B6B; }
.lk-kafel-cel.wybrany .lk-cel-opis { color: #D4D5F0; }
.lk-kafel[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.lk-stopka {
  position: sticky; bottom: 0; z-index: 1; margin: 0 -20px;
  padding: 12px 20px max(22px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 10px; background: var(--lk-tlo);
}
.lk-licznik { font-size: 14px; font-weight: 700; line-height: 1.3; text-align: center; color: var(--lk-tekst); }
.lk-stopka .btn-strzalka { margin-top: 0; min-height: 58px; font-size: 17px; padding-block: 6px; padding-inline: 24px 6px; }
.lk-stopka .btn-strzalka::after { margin-left: 0; margin-inline-start: auto; }
.lk-stopka .btn:disabled:hover { box-shadow: none; }

.lk-krok3 .lk-ilustracja { top: -18px; inset-inline-end: -34px; }
.lk-krok3 .lk-glowa-tekst { min-height: 180px; }
.lk-poziomy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 4px; }
.lk-kafel-poziom { gap: 14px; min-height: 78px; padding-block: 12px; padding-inline: 14px 12px; border-radius: 20px; }
.lk-cefr {
  flex: none; width: 54px; height: 54px; border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-naglowek); font-size: 22px; font-weight: 800; line-height: 1;
}
.lk-kafel-poziom.wybrany .lk-cefr-b2 { box-shadow: 0 0 0 2px var(--lk-bialy); }
.lk-poziom-tresc { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lk-poziom-nazwa { font-family: var(--font-naglowek); font-size: 18px; font-weight: 800; line-height: 1.15; overflow-wrap: break-word; }
.lk-poziom-opis { font-size: 13px; font-weight: 500; line-height: 1.38; color: #4A4B6B; }
.lk-kafel-poziom.wybrany .lk-poziom-opis { color: #D4D5F0; }

.start-overlay[data-kolor="czerwony"] {
  --lk-tlo: #DB2727;
  --lk-tekst: var(--lk-bialy);
  --lk-tor: rgba(255, 255, 255, 0.3);
  --lk-fokus: var(--lk-zolty);
}
.lk-konto-uklad { display: flex; flex-direction: column; gap: 14px; }
.lk-konto-pods {
  display: flex; align-items: center; gap: 12px; padding: 12px 6px 12px 14px; border-radius: 20px;
  background: var(--lk-granat); color: var(--lk-bialy);
}
.lk-konto-pods .lk-flaga-kolo { width: 36px; height: 36px; box-shadow: 0 0 0 2px var(--lk-bialy); }
.lk-konto-pods-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lk-konto-pods-jezyk { font-family: var(--font-naglowek); font-size: 18px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.lk-konto-cefr {
  display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 24px; margin-inline-start: 6px;
  padding: 0 6px; border-radius: 8px; vertical-align: 2px; font-size: 13px; font-weight: 800; line-height: 1;
}
.lk-konto-cefr-b2 { box-shadow: 0 0 0 1.5px var(--lk-bialy); }
.lk-konto-pods-cele { font-size: 13px; font-weight: 500; line-height: 1.38; color: #D4D5F0; overflow-wrap: anywhere; }
.lk-konto-zmien {
  flex: none; width: 44px; height: 44px; padding: 0; border: none; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--lk-zolty); font-size: 18px;
}
.lk-konto-zmien .ico { margin: 0; line-height: 1; }
.lk-konto-zmien:hover { background: rgba(255, 255, 255, 0.1); }
.lk-konto-karta {
  display: flex; flex-direction: column; padding: 22px 18px; border-radius: 24px; background: #FFFFFF; color: #17183B;
  box-shadow: 0 24px 48px -30px rgba(23, 24, 59, 0.55);
}
.lk-konto-karta .start-form { margin-bottom: 2px; }
.lk-konto-karta .auth-input {
  min-height: 50px; margin-bottom: 10px; border: 1.5px solid #D9DCEB; border-radius: 14px;
  background: #F3F5FB; color: #17183B; font-family: var(--font-tekst); font-size: 15px;
}
.lk-konto-karta .auth-input::placeholder { color: #6B6C8A; opacity: 1; }
.lk-konto-karta .auth-input:focus { border-color: #2463E9; background: #FFFFFF; }
.lk-konto-karta .auth-consent { margin: 4px 0 12px; color: #4A4B6B; }
.lk-konto-karta .auth-consent-wszystko { margin-top: 8px; color: #17183B; }
.lk-konto-karta .auth-consent-mala { color: #6B6C8A; }
.lk-konto-karta .auth-consent input { accent-color: #2463E9; }
.lk-konto-karta .auth-consent a { color: #17183B; text-decoration: underline; }
.lk-konto-karta .auth-wymagane { color: #DB2727; }
.lk-konto-karta .start-blad { background: #FDECEC; color: #B91E1E; }
.lk-konto-karta .lk-konto-cta { width: 100%; margin-top: 4px; min-height: 58px; font-size: 17px; padding-block: 6px; padding-inline: 24px 6px; }
.lk-konto-karta .lk-konto-cta::after { margin-left: 0; margin-inline-start: auto; }
.lk-konto-karta .lk-konto-cta:disabled { opacity: 0.7; cursor: progress; }
.lk-konto-karta .lp-google-lub { color: #6B6C8A; }
.lk-konto-karta .lp-google-lub::before, .lk-konto-karta .lp-google-lub::after { background: #E3E6F0; }
.lk-konto-karta .lp-google-zgoda { color: #6B6C8A; }
.start-overlay .lk-konto-karta a.btn-google { background: #FFFFFF; border-color: #747775; color: #1F1F1F; }
.start-overlay .lk-konto-karta a.btn-google:hover { background: #F2F2F2; }
.lk-konto-nota {
  display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 20px;
  background: var(--lk-zolty); color: var(--lk-granat);
}
.lk-konto-nota-znak {
  flex: none; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--lk-bialy); color: var(--lk-granat); font-size: 20px;
}
.lk-konto-nota-znak .ico { margin: 0; line-height: 1; }
.lk-konto-nota p { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.45; }
@media (max-width: 720px) {
  .lk-konto .lk-ilustracja { top: -4px; inset-inline-end: -8px; width: min(140px, 36vw); }
  .lk-konto .lk-glowa-tekst { width: auto; max-width: calc(100% - min(140px, 36vw)); }
}

@media (hover: hover) {
  .lk-kolo:hover { transform: scale(1.06); }
  .lk-pigulka:hover, .lk-ui:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -14px rgba(23, 24, 59, 0.75); }
  .lk-kafel:not([aria-disabled="true"]):hover { transform: translateY(-2px); box-shadow: 0 14px 26px -18px rgba(23, 24, 59, 0.8); }
}
.lk-kafel:not([aria-disabled="true"]):active { transform: scale(0.98); }
@media (prefers-reduced-motion: reduce) {
  .lk-kolo, .lk-pigulka, .lk-ui, .lk-kafel { transition: none; }
  .lk-kolo:hover, .lk-pigulka:hover, .lk-ui:hover, .lk-kafel:hover, .lk-kafel:active { transform: none; }
}
@media (max-width: 720px) {
  .lk-gora.z-ui { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "lewa . prawa" "ui ui ui"; }
  .lk-gora.z-ui .lk-ui { justify-self: start; }
}
@media (max-width: 359px) {
  .lk-siatka { grid-template-columns: minmax(0, 1fr); }
  .lk-kafel-cel { min-height: 0; }
}
@media (min-width: 721px) {
  .start-overlay[data-kolor] .start-scena { padding-top: 20px; }
  .start-panel.lk-panel { gap: 22px; }
  .lk-glowa {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "tekst ilu" "opis ilu"; column-gap: 40px; margin-top: 0;
  }
  .lk-glowa.bez-ilustracji { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tekst" "opis"; }
  .lk-ilustracja, .lk-krok2 .lk-ilustracja {
    position: static; grid-area: ilu; align-self: center; width: clamp(200px, 18vw, 260px);
  }
  .lk-glowa-tekst, .lk-krok2 .lk-glowa-tekst {
    grid-area: tekst; align-self: end; width: auto; max-width: none; min-height: 0; gap: 14px;
  }
  .lk-nadtytul { font-size: 14px; }
  .lk-tytul { font-size: clamp(44px, 4.6vw, 64px); max-width: 13em; text-wrap: balance; }
  .lk-opis { grid-area: opis; align-self: start; max-width: 560px; font-size: 17px; }
  .lk-siatka { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
  .lk-siatka-cele { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
  .lk-kafel-cel { min-height: 164px; padding: 16px; }
  .lk-cel-tytul { font-size: 21px; }
  .lk-cel-opis { font-size: 14px; }
  .lk-stopka { margin: 0; padding: 16px 0 24px; flex-direction: row; align-items: center; justify-content: flex-end; gap: 20px; }
  .lk-licznik { text-align: end; }
  .lk-stopka .btn-strzalka { width: auto; min-width: 320px; }
  .lk-krok3 .lk-ilustracja { top: auto; inset-inline-end: auto; }
  .lk-krok3 .lk-glowa-tekst { min-height: 0; }
  .lk-poziomy { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
  .lk-kafel-poziom { min-height: 96px; padding-block: 16px; padding-inline: 16px 14px; }
  .lk-poziom-nazwa { font-size: 20px; }
  .lk-poziom-opis { font-size: 14px; }
  .lk-konto .lk-ilustracja { width: clamp(180px, 15vw, 210px); }
  .lk-konto-karta { padding: 28px 30px; }
}
@media (min-width: 960px) {
  .lk-konto-uklad {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); grid-template-rows: auto 1fr;
    grid-template-areas: "karta pods" "karta nota"; gap: 16px 24px; align-items: start;
  }
  .lk-konto-karta { grid-area: karta; }
  .lk-konto-pods { grid-area: pods; }
  .lk-konto-nota { grid-area: nota; }
}

.tekst-swiezosc {
  flex-shrink: 0; margin-left: auto; padding: 2px 8px; border-radius: 999px;
  background: var(--bg-success-soft); color: var(--verde);
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase;
  vertical-align: middle; white-space: nowrap;
}

.auth-hint { font-size: 0.82rem; color: var(--grigio); margin-bottom: 14px; line-height: 1.5; }
.auth-error {
  background: var(--bg-error-soft); color: var(--rosso);
  border-radius: 10px; padding: 8px 12px;
  font-size: 0.82rem; margin-bottom: 12px;
}
.auth-kod-adres { margin-top: -6px; overflow-wrap: anywhere; }
.auth-kod-adres:empty { display: none; }
.auth-consent {
  display: flex; align-items: flex-start; gap: 9px; margin: 4px 0 14px;
  font-size: 0.82rem; color: var(--grigio); line-height: 1.5; cursor: pointer;
}
.auth-consent input { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--oro); }
.auth-consent a { color: var(--oro); font-weight: 700; }
.auth-consent-wszystko { font-weight: 800; color: var(--testo); margin-bottom: 10px; }
.auth-consent-mala { font-size: 0.74rem; color: var(--muted-light); }
.auth-consent-mala input { width: 14px; height: 14px; accent-color: var(--muted-light); }
.auth-wymagane { color: var(--rosso); font-weight: 800; margin-right: 1px; }
.auth-legal, .settings-legal {
  display: flex; gap: 14px; justify-content: center; margin-top: 18px;
  padding-top: 14px; border-top: 1px solid var(--border-warm-soft);
  font-size: 0.75rem;
}
.auth-legal a, .settings-legal a { color: var(--grigio); text-decoration: none; font-weight: 600; }
.auth-legal a:hover, .settings-legal a:hover { color: var(--oro); text-decoration: underline; }
.settings-credits {
  margin-top: 10px; text-align: center; font-size: 0.72rem; color: var(--grigio); line-height: 1.6;
}
.settings-credits a { color: var(--grigio); font-weight: 600; text-decoration: underline; }
.settings-credits a:hover { color: var(--oro); }
.auth-switch { text-align: center; font-size: 0.85rem; color: var(--grigio); margin-top: 14px; }
.auth-switch a { color: var(--oro); font-weight: 800; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.auth-switch a:hover { text-decoration: underline; }


.flag-icon { border-radius: 3px; box-shadow: 0 0 0 1px rgba(15,23,42,0.12); flex-shrink: 0; display: block; }
.lang-picker { position: relative; margin-bottom: 12px; }
.lang-picker-btn {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 12px; border: 2px solid var(--border);
  background: var(--crema); font-family: inherit; font-size: 0.95rem; font-weight: 600;
  color: var(--testo); cursor: pointer; transition: var(--transition);
}
.lang-picker-btn:hover { border-color: var(--oro); }
.lang-picker-name { flex: 1; text-align: left; }
.lang-picker-caret { color: var(--grigio); font-size: 0.8rem; }
.lang-picker-list {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50;
  background: var(--card-bg); border-radius: 14px; box-shadow: var(--shadow-hover);
  max-height: 260px; overflow-y: auto; padding: 6px;
}
.lang-picker-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 9px; cursor: pointer; font-size: 0.9rem; font-weight: 600;
}
.lang-picker-opt:hover { background: var(--crema); }
.community-tile-jezyk {
  display: inline-flex; align-items: center; padding: 3px; border-radius: 6px;
  background: color-mix(in srgb, var(--card-bg) 86%, transparent); backdrop-filter: blur(3px);
}
.community-tile-jezyk svg { border-radius: 3px; display: block; }
#wyborPaczkiOverlay .wordmap-modal { max-width: 1080px; }
.wybor-paczki-lista {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px;
  padding: 16px 20px 22px; overflow-y: auto; align-content: start;
  grid-auto-rows: max-content;
}
.wybor-paczki-lista > .wordmap-empty { grid-column: 1 / -1; }
.wybor-paczki-wiersz {
  position: relative; display: flex; flex-direction: column; min-width: 0; isolation: isolate;
  border-radius: 16px; border: 2px solid var(--border-warm); background: var(--card-bg); color: var(--testo);
  overflow: hidden; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.wybor-paczki-wiersz:hover, .wybor-paczki-wiersz:focus-within {
  border-color: var(--oro); transform: translateY(-3px); box-shadow: var(--shadow-hover);
}
.wp-wejdz {
  flex: 1; display: flex; flex-direction: column; align-items: stretch; width: 100%; padding: 0;
  background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.wp-wejdz:focus-visible { outline: 3px solid var(--fokus); outline-offset: -3px; border-radius: 14px; }
.wp-okladka {
  --k: var(--oro);
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--k) 32%, var(--card-bg)), color-mix(in srgb, var(--k) 8%, var(--card-bg)));
}
.wp-okladka-tekst   { --k: var(--marka-niebieski); }
.wp-okladka-plik    { --k: var(--verde); }
.wp-okladka-zdjecie { --k: var(--marka-czerwony); }
.wp-okladka-film    { --k: var(--testo); }
.wp-okladka-rozmowa { --k: var(--marka-zielony, #35A64D); }
.wp-okladka-artykul { --k: var(--marka-niebieski); }
.wp-mini {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  background: var(--bg-soft); transition: transform .35s ease;
}
.wybor-paczki-wiersz:hover .wp-mini { transform: scale(1.05); }
.wp-ikona { display: flex; }
.wp-ikona .ico { font-size: 2.6rem; margin: 0; color: var(--k); transition: transform .25s ease; }
.wybor-paczki-wiersz:hover .wp-ikona .ico { transform: scale(1.12) rotate(-4deg); }
.wp-pasek { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: rgba(15, 23, 42, .28); }
.wp-pasek > span { display: block; height: 100%; width: var(--postep, 0%); background: var(--marka-zielony); transition: width .35s ease; }
.wp-komplet {
  position: absolute; left: 8px; top: 8px; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--verde); color: var(--na-akcencie); box-shadow: 0 2px 8px rgba(15, 23, 42, .3);
}
.wp-komplet .ico { margin: 0; font-size: .9rem; }
.wp-tresc { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; min-width: 0; }
.wp-material { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; }
.wp-material:focus-visible { outline: 3px solid var(--fokus); outline-offset: -3px; border-radius: 14px; }
.wp-otworz {
  position: absolute; left: 8px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 16px);
  padding: 5px 10px; border-radius: 999px; background: rgba(15, 23, 42, .74); color: #fff;
  font-size: .76rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  backdrop-filter: blur(4px); transition: background .15s ease, transform .15s ease;
}
.wp-otworz .ico { margin: 0; font-size: .8rem; }
.wp-material:hover .wp-otworz, .wp-material:focus-visible .wp-otworz { background: var(--oro); color: var(--na-akcencie); transform: scale(1.05); }
.wp-cwicz { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: .78rem; font-weight: 800; color: var(--oro); }
.wp-cwicz .ico { margin: 0; font-size: .75rem; }
.wybor-paczki-wiersz.z-materialem .wp-wejdz:hover .wp-cwicz { text-decoration: underline; }
.wp-nazwa {
  font-weight: 800; line-height: 1.25; overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.wp-meta { font-size: 0.78rem; color: var(--grigio); }
.wp-otwarto { font-size: 0.74rem; color: var(--muted-light); }
.wp-zamek, .ppt-zamek {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.74rem; font-weight: 700; color: var(--muted-dark);
}
.wp-zamek .ico, .ppt-zamek .ico { font-size: 0.85rem; margin: 0; color: var(--rosso); }
.ppt-zamek { border: none; background: transparent; cursor: pointer; font-family: inherit; padding: 0; }
.ppt-zamek:hover { text-decoration: underline; }
.ppt-do-sprawdzenia { display: inline-flex; align-items: center; gap: 4px; font-size: 0.74rem; font-weight: 700; color: var(--muted-dark); }
.ppt-do-sprawdzenia .ico { font-size: 0.85rem; margin: 0; color: var(--oro); }
.paczka-pasek-trybu .ppt-do-sprawdzenia { color: #FFFFFF; }
.paczka-pasek-trybu .ppt-do-sprawdzenia .ico { color: var(--zolty); }
.fiszki-arena .paczka-pasek-trybu .ppt-do-sprawdzenia { color: var(--fa-tekst, #FFFFFF); }
.wybor-paczki-wiersz.zamknieta .wp-okladka { filter: grayscale(.85); opacity: .75; }
.wybor-paczki-wiersz.zamknieta .wp-nazwa { color: var(--grigio); }
.wp-akcje {
  position: absolute; top: 8px; right: 8px; z-index: 2; display: flex; gap: 2px; padding: 3px;
  border-radius: 12px; background: color-mix(in srgb, var(--card-bg) 86%, transparent);
  backdrop-filter: blur(6px); box-shadow: 0 2px 10px rgba(15, 23, 42, .18);
}
.wp-akcja {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 9px; background: transparent; color: var(--grigio); cursor: pointer; font-size: .95rem;
}
.wp-akcja .ico { margin: 0; }
.wp-akcja:hover, .wp-akcja:focus-visible { background: var(--bg-soft); color: var(--testo); }
.wp-akcja:focus-visible { outline: 2px solid var(--fokus); outline-offset: 1px; }
.wp-akcja-usun:hover, .wp-akcja-usun:focus-visible { color: var(--rosso); }
.wp-akcja-ok { color: var(--verde); }
.wp-akcja:disabled { opacity: .5; cursor: default; }
.wybor-paczki-wiersz.edytuje > .wp-akcje, .wybor-paczki-wiersz.edytuje .wp-tresc { display: none; }
.wybor-paczki-wiersz.edytuje > .wp-wejdz, .wybor-paczki-wiersz.edytuje > .wp-material { flex: none; pointer-events: none; }
.wp-edycja { display: flex; align-items: center; gap: 4px; padding: 10px 8px 10px 10px; min-width: 0; }
.wp-edycja-pole {
  flex: 1; min-width: 0; padding: 9px 12px; border-radius: 10px; border: 2px solid var(--border-2);
  background: var(--bg-soft); color: var(--testo); font: inherit; font-weight: 700;
}
.wp-edycja-pole:focus { outline: none; border-color: var(--oro); }
@media (max-width: 560px) {
  .wybor-paczki-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; }
  .wp-tresc { padding: 8px 10px 4px; }
  .wp-nazwa { font-size: .9rem; }
  .wp-ikona .ico { font-size: 2rem; }
  .wp-akcje {
    position: static; justify-content: flex-end; padding: 0 4px 6px;
    background: none; box-shadow: none; backdrop-filter: none;
  }
  .wp-akcja { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .wybor-paczki-wiersz, .wp-mini, .wp-ikona .ico, .wp-pasek > span { transition: none; }
  .wybor-paczki-wiersz:hover, .wybor-paczki-wiersz:focus-within { transform: none; }
  .wybor-paczki-wiersz:hover .wp-mini, .wybor-paczki-wiersz:hover .wp-ikona .ico { transform: none; }
}

.zakres-usun-okno {
  position: fixed; inset: 0; z-index: 2100; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(15, 23, 42, .55);
}
.zakres-usun-karta {
  width: min(460px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--card-bg);
  color: var(--testo); border-radius: 18px; box-shadow: var(--shadow-hover);
}
.zakres-usun-glowa {
  display: flex; align-items: flex-start; gap: 10px; padding: 18px 18px 10px; font-weight: 800;
  font-size: 1.05rem; line-height: 1.35; overflow-wrap: anywhere;
}
.zakres-usun-glowa .ico { color: var(--rosso); margin: 3px 0 0; flex: none; }
.zakres-usun-tresc { padding: 0 18px 8px; font-size: 0.9rem; line-height: 1.55; color: var(--muted-dark); }
.zakres-usun-tresc p { margin: 0 0 8px; }
#zakresUsunArchiwum { color: var(--rosso); font-weight: 700; }
.zakres-usun-zawsze input:disabled { cursor: default; }
.zakres-usun-zawsze {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 11px 12px; border-radius: 12px;
  background: var(--bg-soft); cursor: pointer; font-weight: 700; color: var(--testo);
}
.zakres-usun-zawsze input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--rosso); }
.zakres-usun-tozsamosc { margin-top: 12px; }
.zakres-usun-tozsamosc > label { display: block; margin-bottom: 6px; font-weight: 700; color: var(--testo); }
.zakres-usun-tozsamosc .auth-input { margin-bottom: 6px; }
.zakres-usun-stopka { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding: 10px 18px 18px; }
.zakres-usun-stopka .btn { width: auto; margin: 0; padding: 9px 18px; }
.slowko-edycja .zakres-usun-glowa .ico { color: var(--oro); }
.slowko-edycja .zakres-usun-tresc label { display: block; margin: 10px 0 4px; font-weight: 700; color: var(--testo); font-size: 0.85rem; }
.slowko-edycja .auth-input { width: 100%; margin: 0; box-sizing: border-box; }
.slowko-edycja textarea.auth-input { resize: vertical; min-height: 54px; font: inherit; line-height: 1.45; }
.slowko-edycja-uwaga { margin: 12px 0 0 !important; color: var(--grigio); font-size: 0.82rem; }
.slowko-edycja .auth-error { margin-top: 10px; }
.btn.zakres-usun-btn { background: transparent; color: var(--rosso); border: 2px solid var(--rosso); }
.btn.zakres-usun-btn.na-zawsze { background: var(--rosso); color: #fff; }
.btn.zakres-usun-btn:disabled { opacity: .6; cursor: default; }

.zakres-nazwa { margin: 14px auto 4px; max-width: 520px; text-align: left; }
.zakres-nazwa-etykieta { display: block; margin-bottom: 6px; font-size: 0.8rem; font-weight: 700; color: var(--muted-dark); }
.zakres-nazwa input {
  width: 100%; box-sizing: border-box; padding: 10px 13px; border-radius: 12px; border: 2px solid var(--border-2);
  background: var(--bg-soft); color: var(--testo); font: inherit; font-size: 0.9rem;
}
.zakres-nazwa input:focus { outline: none; border-color: var(--oro); }
.zakres-nazwa .btn-auto-nazwa { min-height: 42px; }
.zakres-nazwa .btn-auto-nazwa[aria-busy="true"] { cursor: progress; }
.zakres-nazwa-podpowiedz { margin: 6px 0 0; font-size: 0.74rem; line-height: 1.45; color: var(--muted-light); }
.zakres-nazwa-stan { margin-left: 6px; font-weight: 700; color: var(--verde); }
@media (max-width: 520px) {
  .zakres-nazwa .pole-z-przyciskiem { flex-wrap: wrap; }
  .zakres-nazwa .pole-z-przyciskiem input { flex: 1 1 100%; }
  .zakres-nazwa .btn-auto-nazwa { flex: 1 1 auto; }
}

.film-kafelek-fiszki {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
  padding: 5px 10px; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--oro) 10%, transparent);
  color: var(--oro); font-size: 0.76rem; font-weight: 700;
  transition: var(--transition);
}
.film-kafelek-fiszki:hover { background: color-mix(in srgb, var(--oro) 20%, transparent); }
.film-kafelek-fiszki .ico { font-size: 0.9rem; }
.film-kafelek-ma {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 6px;
  font-size: 0.74rem; font-weight: 600; color: var(--grigio);
}
.film-kafelek-umiesz {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 6px;
  font-size: 0.74rem; font-weight: 700; color: var(--grigio);
}
.film-kafelek-umiesz::before { content: ','; margin-left: -6px; font-weight: 400; color: var(--grigio); }
.film-kafelek-umiesz.duzo { color: var(--verde); }
.kandydaci-inne-jezyki { margin-top: 12px; font-size: 0.85rem; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.kandydaci-inne-jezyki svg { vertical-align: -2px; }
.kandydaci-inne-jezyki-pas { grid-column: 1 / -1; padding: 10px 14px; border-radius: 12px; background: var(--panel-bg, rgba(36, 99, 233, 0.08)); }
.kandydaci-inne-jezyki-pas .kandydaci-inne-jezyki { margin-top: 0; align-items: flex-start; }
.kandydaci-przelacz-rzad { display: flex; flex-wrap: wrap; gap: 8px; }
.czysciec-wiersz {
  display: flex; gap: 12px; align-items: flex-start; padding: 10px 0;
  border-bottom: 1px solid var(--border-warm);
}
.czysciec-mini {
  width: 84px; height: 62px; object-fit: cover; border-radius: 10px; flex-shrink: 0;
  border: 1px solid var(--border-warm); cursor: zoom-in; background: var(--bg-soft);
}
.czysciec-brak { display: flex; align-items: center; justify-content: center; font-size: 1.4rem; cursor: default; }
.czysciec-info { flex: 1; min-width: 0; font-size: 0.85rem; }
.czysciec-powody { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.czysciec-powod {
  background: var(--bg-soft); border: 1px solid var(--border-warm); border-radius: 999px;
  padding: 2px 10px; font-size: 0.78rem;
}
.czysciec-opisy { font-size: 0.8rem; color: var(--grigio); margin: 2px 0; }
.czysciec-usun {
  width: 26px; height: 26px; border-radius: 50%; border: none; background: var(--rosso);
  color: #fff; cursor: pointer; flex-shrink: 0; line-height: 1;
}

.ad-rail {
  display: none;
  position: fixed; top: 96px;
  width: 160px; max-height: calc(100vh - 116px);
  z-index: 5;
}
.ad-rail-left  { left: 24px; }
.ad-rail-right { right: 24px; }
@media (min-width: 1500px) {
  .ad-rail:not(.hidden) { display: block; }
}

.ad-sidebar {
  margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border-warm);
  min-height: 100px;
}
.ad-sidebar-label {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--grigio); opacity: 0.65; margin-bottom: 6px; text-align: center;
}

:root { --rank-srebro: #DDE3F0; --rank-srebro-tekst: #17183B; --rank-braz: #F5D3B5; --rank-braz-tekst: #6B3410; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --rank-srebro: #3A3F70; --rank-srebro-tekst: #F2F3FA; --rank-braz: #5A3A22; --rank-braz-tekst: #F5D3B5; }
}
:root[data-theme="dark"] { --rank-srebro: #3A3F70; --rank-srebro-tekst: #F2F3FA; --rank-braz: #5A3A22; --rank-braz-tekst: #F5D3B5; }
.rank-rail {
  display: none; position: fixed; top: 96px; right: 24px;
  width: 268px; max-height: calc(100vh - 116px); box-sizing: border-box; overflow: hidden;
  z-index: 5; background: var(--bianco); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 12px 10px;
  flex-direction: column; gap: 12px; color: var(--testo);
}
@media (min-width: 1400px) {
  .rank-rail:not(.zwiniety) { display: flex; }
  .rank-wypustka:not(.hidden) { display: flex; }
}
body.focus-mode .rank-rail, body.focus-mode .rank-wypustka { display: none; } 
.rank-glowa { display: flex; align-items: center; gap: 10px; padding: 0 0 0 4px; }
.rank-puchar {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; background: var(--zolty); color: var(--granat);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1;
}
.rank-puchar .ico { margin: 0; }
.rank-glowa-teksty { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.rank-tytul { margin: 0; font-family: var(--font-naglowek); font-weight: 800; font-size: 1.125rem; line-height: 1.25; color: var(--testo); }
.rank-podtytul { font-size: 0.75rem; font-weight: 600; color: var(--grigio); }
.rank-zwin {
  width: 44px; height: 44px; flex-shrink: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; color: var(--testo);
}
.rank-zwin-kolko {
  width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; transition: background 0.15s ease;
}
.rank-zwin-kolko .ico { margin: 0; }
.rank-zwin:hover .rank-zwin-kolko { background: var(--bg-soft); }
.rank-zwin:focus-visible, .rank-wypustka:focus-visible, .rank-row:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
#rankRailBody { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; min-height: 0; }
.rank-lista { display: flex; flex-direction: column; gap: 2px; }
.rank-rail .rank-lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
.rank-pusto { font-size: 0.85rem; color: var(--grigio); text-align: center; padding: 14px 0; }
.rank-okres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 3px; border-radius: 999px; background: var(--bg-soft); }
.rank-okres-btn {
  min-height: 40px; padding: 0 10px; border: 0; border-radius: 999px; cursor: pointer; background: transparent; color: var(--grigio);
  font: inherit; font-size: 0.8125rem; font-weight: 800; transition: background 0.15s ease, color 0.15s ease;
}
.rank-okres-btn:hover { color: var(--testo); }
.rank-okres-btn.active { background: var(--zolty); color: var(--granat); }
.rank-row {
  display: grid; grid-template-columns: 24px 36px minmax(0, 1fr); column-gap: 9px; align-items: center;
  width: 100%; padding: 8px; border: 0; border-radius: 14px; background: transparent; color: inherit;
  font: inherit; text-align: left; cursor: pointer; transition: background 0.15s ease;
}
.rank-row:hover { background: var(--bg-soft); }
.rank-row.me { background: var(--bg-highlight); }
.rank-row .leaderboard-avatar-img, .rank-row .leaderboard-avatar-fallback { width: 36px; height: 36px; font-size: 0.95rem; }
.rank-row-num {
  width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-naglowek); font-size: 0.8125rem; font-weight: 800; color: var(--grigio);
}
.rank-row-num.medal-1 { background: var(--zolty); color: var(--granat); }
.rank-row-num.medal-2 { background: var(--rank-srebro); color: var(--rank-srebro-tekst); }
.rank-row-num.medal-3 { background: var(--rank-braz); color: var(--rank-braz-tekst); }
.rank-row-tresc { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rank-row-name { font-size: 0.875rem; line-height: 1.3; font-weight: 700; color: var(--testo); overflow-wrap: anywhere; }
.rank-row-meta { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rank-row-jezyki {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px 6px; border-radius: 999px; background: var(--bg-soft);
  line-height: 0; flex-shrink: 0; color: var(--grigio);
}
.rank-row-jezyki .flag-icon { border-radius: 2px; }
.rank-row-jezyki .ico { margin: 0; font-size: 0.7rem; line-height: 1; }
.rank-row-xp {
  margin-left: auto; white-space: nowrap; font-family: var(--font-naglowek); font-size: 0.875rem; font-weight: 800;
  color: var(--primary); font-variant-numeric: tabular-nums;
}
.rank-row-xp-j { margin-left: 3px; font-family: var(--font-tekst); font-size: 0.6875rem; font-weight: 700; color: var(--grigio); }
.rank-row-trend {
  font-size: 0.8rem; width: 16px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.rank-row-trend .ico { margin-right: 0; }
.rank-row-trend.up { color: var(--verde); }
.rank-row-trend.down { color: var(--rosso); }
.rank-row-trend.flat { color: var(--grigio); }
.rank-wypustka {
  display: none; position: fixed; top: 96px; right: 0; z-index: 5; width: 56px; padding: 14px 0 12px; box-sizing: border-box;
  flex-direction: column; align-items: center; gap: 8px; cursor: pointer; font: inherit; color: var(--testo);
  background: var(--card-bg); border: 1.5px solid var(--border); border-right: 0; border-radius: 20px 0 0 20px;
  box-shadow: -6px 8px 24px rgba(23, 24, 59, 0.08); transition: transform 0.15s ease;
}
.rank-wypustka:hover { transform: translateX(-4px); }
.rank-wypustka > .ico { margin: 0; font-size: 1rem; line-height: 1; }
.rank-wypustka-miejsce { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.rank-wypustka-miejsce b { font-family: var(--font-naglowek); font-weight: 800; font-size: 1rem; }
.rank-wypustka-miejsce span { font-size: 0.625rem; font-weight: 700; color: var(--grigio); }
@media (prefers-reduced-motion: reduce) {
  .rank-wypustka, .rank-row, .rank-okres-btn, .rank-zwin-kolko { transition: none; }
  .rank-wypustka:hover { transform: none; }
}

.app-body {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 20px;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 768px) {
  .app-body { grid-template-columns: 1fr; }
  .sidebar { order: 2; }
}
body.focus-mode .sidebar { display: none; }
body.focus-mode .app-body { grid-template-columns: 1fr; }
body.focus-mode .app-header { display: none; }
body.focus-mode .ad-rail { top: 24px; } 

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,0.06);
}
.card-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--grigio);
  margin-bottom: 14px;
}

.card-title.z-menu { display: flex; align-items: center; gap: 6px; }
.card-menu-wrap { position: relative; margin-left: auto; }
.card-menu-btn {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border: none; border-radius: 8px;
  background: transparent; color: var(--grigio); cursor: pointer;
  font: inherit; font-size: 1.1rem; line-height: 1; letter-spacing: 0;
  transition: var(--transition);
}
.card-menu-btn:hover, .card-menu-btn[aria-expanded="true"] { background: var(--bg-soft); color: var(--testo); }
.card-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 200;
  background: var(--card-bg); border: 1px solid var(--border-warm-soft);
  border-radius: 12px; box-shadow: var(--shadow-hover);
  min-width: 210px; padding: 6px;
}
.card-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 11px; border: none; border-radius: 9px; background: transparent;
  color: var(--testo); font: inherit; font-size: 0.84rem; font-weight: 700;
  text-align: left; text-transform: none; letter-spacing: 0; cursor: pointer;
}
.card-menu-item:hover { background: var(--bg-soft); }

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.stat-box {
  background: var(--crema);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition);
}
.stat-box:hover { border-color: var(--oro); transform: scale(1.03); }
.stat-box.active-filter { border-color: var(--oro); background: var(--bg-highlight); }
.stat-box .count { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.stat-box .label { font-size: 0.7rem; font-weight: 600; color: var(--grigio); margin-top: 2px; }
.stat-nowe  .count { color: var(--muted-dark); }
.stat-latwe .count { color: var(--chart-latwe); }
.stat-srednie .count { color: var(--primary); }
.stat-trudne .count { color: var(--rosso); }

.add-method-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.add-method-tab {
  display: flex; align-items: center; gap: 10px; text-align: left;
  flex: 1; padding: 8px 6px; border-radius: 10px; border: 2px solid var(--border);
  background: var(--crema); font-family: inherit; font-size: 0.72rem; font-weight: 700;
  color: var(--grigio); cursor: pointer; transition: var(--transition); text-align: center;
}
.add-method-tab:hover { border-color: var(--oro); }
.add-method-tab.active { background: var(--oro); border-color: var(--oro); color: var(--na-akcencie); }
.add-method-tab .ico { font-size: 1.15rem; margin-right: 0; flex-shrink: 0; }
.add-method-tab b { display: block; font-size: 0.82rem; font-weight: 800; line-height: 1.2; }
.add-method-tab small { display: block; font-size: 0.68rem; opacity: 0.75; line-height: 1.3; margin-top: 1px; }
.add-method-tab > span { min-width: 0; }

.pomoc-rozwijana { margin-top: 12px; }
.pomoc-rozwijana > summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  font-size: 0.78rem; font-weight: 700; color: var(--grigio);
  padding: 8px 10px; border-radius: 10px; background: var(--bg-soft);
  transition: var(--transition);
}
.pomoc-rozwijana > summary::-webkit-details-marker { display: none; }
.pomoc-rozwijana > summary:hover { color: var(--testo); background: var(--border); }
.pomoc-rozwijana > summary .ico { margin-right: 0; }
.pomoc-rozwijana[open] > summary { margin-bottom: 10px; }

.card.podswietlona { animation: kartaTetno 1.5s cubic-bezier(.22,1,.36,1); }
@keyframes kartaTetno {
  0%, 100% { box-shadow: var(--shadow); }
  20%, 60% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--oro) 45%, transparent), var(--shadow); }
}
@media (prefers-reduced-motion: reduce) { .card.podswietlona { animation: none; } }
.settings-section.ustawienia-cel { border-radius: 12px; animation: ustawieniaCel 1.6s cubic-bezier(.22,1,.36,1); }
@keyframes ustawieniaCel {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  20%, 60% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--oro) 45%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .settings-section.ustawienia-cel { animation: none; } }

.upload-zone {
  border: 2px dashed var(--border-warm-dash);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  background: var(--crema);
}
.upload-zone:hover, .upload-zone.dragover {
  border-color: var(--oro);
  background: var(--bg-highlight);
}
.upload-zone input { display: none; }
.upload-icon { font-size: 2rem; margin-bottom: 8px; }
.upload-text { font-size: 0.85rem; color: var(--grigio); }

.upload-hint-note {
  font-size: 0.78rem; color: var(--grigio); line-height: 1.5;
  background: var(--bg-info-soft); border-radius: 10px; padding: 9px 12px; margin-top: 10px;
}
.upload-hint-note strong { color: var(--testo); }
.excel-example {
  margin-top: 12px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--border); background: var(--card-bg);
  box-shadow: var(--shadow);
}
.excel-example-titlebar {
  background: var(--bg-soft); padding: 10px 14px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; position: relative;
}
.excel-example-dots { display: flex; gap: 6px; }
.excel-example-dots span { width: 10px; height: 10px; border-radius: 50%; display: block; }
.excel-example-dots span:nth-child(1) { background: #ff5f56; }
.excel-example-dots span:nth-child(2) { background: #ffbd2e; }
.excel-example-dots span:nth-child(3) { background: #27c93f; }
.excel-example-filename {
  position: absolute; left: 0; right: 0; text-align: center;
  font-size: 0.72rem; font-weight: 700; color: var(--grigio);
}
.excel-example-banner {
  background: var(--bg-info-soft); padding: 8px 14px; border-bottom: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.72rem; color: var(--primary); font-weight: 600;
}
.excel-example table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.78rem; }
.excel-example th {
  padding: 7px 12px; color: var(--testo); font-weight: 700;
  border-right: 1px solid var(--border); border-bottom: 2px solid var(--border);
  background: var(--bg-soft);
}
.excel-example th:last-child { border-right: none; }
.excel-example th small { font-weight: 400; color: var(--grigio); }
.excel-example td {
  padding: 7px 12px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border-warm-2);
}
.excel-example td:last-child { border-right: none; color: var(--testo); }
.excel-example td:first-child:not(.excel-example-num) { font-weight: 700; color: var(--primary); }
.excel-example-num {
  width: 30px; text-align: center; color: var(--muted-light); font-size: 0.7rem;
  background: var(--bg-soft) !important; font-weight: 400 !important;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  border: none;
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
  transition: var(--transition);
  width: 100%;
  margin-top: 8px;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); }
.btn:active { transform: translateY(0); }
.btn-verde  { background: var(--oro);    color: var(--na-akcencie); }
.btn-rosso  { background: var(--rosso);  color: white; }
.btn-oro    { background: var(--oro);    color: var(--na-akcencie); }
.btn-grigio { background: var(--card-bg); color: var(--testo); box-shadow: inset 0 0 0 1.5px var(--border-2); }
.btn-grigio:hover { box-shadow: inset 0 0 0 1.5px var(--oro), var(--shadow-hover); }
.btn-strzalka, .polmetek.cel-slowek .cs-glowny {
  --kolko-tlo: var(--przycisk-kolko);
  --kolko-strzalka: var(--przycisk-kolko-strzalka);
  justify-content: flex-start; min-height: 56px; padding: 6px 6px 6px 24px;
  font-size: 1rem; text-align: left;
}
.btn-strzalka > .ico:first-child, .polmetek.cel-slowek .cs-glowny > .ico:first-child { display: none; }
.btn-strzalka::after, .polmetek.cel-slowek .cs-glowny::after {
  content: ''; flex: none; width: 44px; height: 44px; margin-left: auto; border-radius: 999px;
  background: var(--kolko-tlo) var(--kolko-strzalka) center / 22px 22px no-repeat;
}
[dir="rtl"] .btn-strzalka::after { transform: scaleX(-1); }
.na-granacie .btn-strzalka { background: var(--zolty); color: var(--granat); --kolko-tlo: var(--granat); --kolko-strzalka: var(--strzalka-zolta); }
.na-kolorze .btn-strzalka, .polmetek.cel-slowek .cs-glowny { background: var(--granat); color: #FFFFFF; --kolko-tlo: var(--zolty); --kolko-strzalka: var(--strzalka-granatowa); }
.btn-kreskowany {
  background: var(--crema); color: var(--testo);
  border: 2px dashed var(--border-warm-dash);
}
.btn-kreskowany .ico { color: var(--grigio); }
.btn-kreskowany:hover { border-color: var(--oro); color: var(--oro); }
.btn-kreskowany:hover .ico { color: var(--oro); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.account-row { display: flex; align-items: center; gap: 12px; }
.account-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: #78828C; color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.1rem; flex-shrink: 0;
  overflow: hidden; text-transform: uppercase;
}
.account-avatar img { width: 100%; height: 100%; object-fit: cover; }

.awatar-pierscien {
  position: relative; flex-shrink: 0; border-radius: 50%; padding: 3px;
  background: var(--border-warm);
  transition: background 0.4s ease;
}
.awatar-pierscien::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--pierscien-kolor, var(--verde)) calc(var(--pierscien-pct, 0) * 1%), transparent 0);
  transition: background 0.4s ease;
}
.awatar-pierscien > * { position: relative; }

.awatar-pierscien.premium { background: transparent; animation: awatarOddech 3.6s ease-in-out infinite; }
.awatar-pierscien.premium::before {
  background: conic-gradient(from 0deg,
    var(--zielen-gleboka), var(--zielen-pastel), var(--zielen-gleboka),
    var(--zielen-pastel), var(--zielen-gleboka));
  animation: awatarObrot 6s linear infinite;
}
@keyframes awatarObrot { to { transform: rotate(360deg); } }
@keyframes awatarOddech {
  0%, 100% { box-shadow: 0 0 0 0 rgba(140, 208, 166, 0.0); }
  50%      { box-shadow: 0 0 0 5px rgba(140, 208, 166, 0.28); }
}
@media (prefers-reduced-motion: reduce) {
  .awatar-pierscien.premium, .awatar-pierscien.premium::before { animation: none; }
}
.awatar-pierscien .account-avatar { box-shadow: 0 0 0 2px var(--card-bg); }
.header-konto .awatar-pierscien .account-avatar { box-shadow: 0 0 0 2px var(--bg-soft); }

.awatar-przycisk { cursor: pointer; border: none; background: none; padding: 3px; }
.awatar-przycisk:hover { transform: scale(1.06); }
.awatar-przycisk { transition: transform var(--transition); }

.pw-kotwica { position: relative; display: inline-flex; flex-shrink: 0; }
.pw-licznik {
  position: absolute; top: -4px; right: -6px; z-index: 3;
  display: flex; align-items: center; justify-content: center; gap: 3px;
  min-width: 22px; height: 22px; padding: 0;
  border: 2px solid var(--bg-soft); border-radius: 50px;
  background: var(--card-bg); color: var(--testo);
  box-shadow: 0 0 0 1px var(--border-2);
  font-family: var(--font-naglowek); font-size: 0.68rem; font-weight: 800; line-height: 1;
  cursor: pointer; transition: transform var(--transition), background var(--transition);
}
.pw-licznik::before { content: ''; position: absolute; inset: -9px; border-radius: 50%; }
.pw-licznik .ico { font-size: 0.62rem; margin: 0; }
.pw-licznik #pwLicznikIle { display: none; }
.pw-licznik:hover { transform: scale(1.12); }
.pw-licznik:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.pw-licznik.nowe {
  padding: 0 6px; background: var(--marka-czerwony); color: #fff; box-shadow: none;
}
.pw-licznik.nowe #pwLicznikIle { display: inline; }
.pw-licznik.dzwoni .ico { animation: pwDzwoni 0.9s ease-in-out 1; transform-origin: 50% 10%; }
@keyframes pwDzwoni {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(16deg); } 35% { transform: rotate(-14deg); }
  55% { transform: rotate(9deg); }  75% { transform: rotate(-5deg); }
}
@media (prefers-reduced-motion: reduce) { .pw-licznik.dzwoni .ico { animation: none; } }

@media (min-width: 561px) { .profil-panel.pw-panel { width: 440px; min-width: 0; } }
.pw-glowa { display: flex; align-items: center; gap: 10px; padding-top: 30px; }
.pw-glowa-ikona {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--zolty); color: var(--granat); font-size: 1rem;
}
.pw-naglowek { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.3rem; line-height: 1.2; }
.pw-sekcja {
  display: flex; align-items: center; gap: 8px; margin: 10px 2px 4px;
  font-family: var(--font-naglowek); font-size: 0.78rem; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--grigio);
}
.pw-sekcja-ile {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--marka-czerwony); color: #fff; font-size: 0.7rem; letter-spacing: 0;
}
.pw-grupa { display: flex; flex-direction: column; gap: 4px; }
.pw-nic-nowego {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 16px;
  background: var(--card-bg); box-shadow: 0 0 0 1px var(--border);
  font-size: 0.84rem; color: var(--grigio);
}
.pw-nic-nowego .ico { color: var(--marka-zielony); margin: 0; }
.pw-pusto {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 34px 18px; margin-top: 8px; border-radius: 22px;
  background: var(--card-bg); box-shadow: 0 0 0 1px var(--border);
}
.pw-pusto-ikona {
  width: 64px; height: 64px; border-radius: 50%; margin-bottom: 4px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-soft); color: var(--testo); font-size: 1.6rem;
}
.pw-pusto-tytul { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.05rem; }
.pw-pusto-tekst { margin: 0; font-size: 0.84rem; line-height: 1.5; color: var(--grigio); max-width: 300px; }

.pw-wiersz {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; cursor: pointer;
  padding: 11px 12px; border: none; border-radius: 16px; background: none;
  font-family: inherit; color: inherit; text-align: left; transition: background var(--transition);
}
.pw-wiersz:hover { background: var(--bg-soft); }
.pw-wiersz:focus-visible { outline: 2px solid var(--fokus); outline-offset: 1px; }
.pw-wiersz.nowe { background: var(--zielen-tlo); }
.pw-wiersz.nowe:hover { background: var(--zielen-tlo); filter: brightness(1.15); }
.pw-wiersz:not(.nowe) .pw-tekst { color: var(--grigio); }
.pw-wiersz:not(.nowe) .pw-tekst b, .pw-wiersz:not(.nowe) .pw-tytul-postu { color: var(--testo); }
.pw-awatar { position: relative; width: 40px; height: 40px; flex-shrink: 0; }
.pw-awatar img, .pw-awatar-litera {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: flex;
  align-items: center; justify-content: center;
  font-family: var(--font-naglowek); font-weight: 800; font-size: 0.95rem; color: #fff;
}
.pw-znaczek {
  position: absolute; right: -4px; bottom: -3px;
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--crema);
  display: flex; align-items: center; justify-content: center;
  background: var(--granat); color: #fff; font-size: 0.55rem; font-weight: 800; line-height: 1;
}
.pw-znaczek .ico { margin: 0; }
.pw-ikona {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--card-bg); box-shadow: 0 0 0 1px var(--border-2); color: var(--testo); font-size: 0.95rem;
}
.pw-ikona .ico { margin: 0; }
.pw-znaczek.serce { background: #DB2727; }
.pw-znaczek.obserwuje { background: #35A64D; }
.pw-znaczek.komentarz, .pw-znaczek.oznaczenie { background: #2463E9; }
.pw-znaczek.combo { background: #F59E0B; }
.pw-ikona.serce { color: var(--marka-czerwony); }
.pw-ikona.obserwuje { color: var(--zielen-gleboka); }
.pw-ikona.combo { color: #F59E0B; }
.pw-ikona.komentarz, .pw-ikona.oznaczenie { color: var(--marka-niebieski); }
.pw-tresc { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.pw-tekst { font-size: 0.87rem; line-height: 1.45; overflow-wrap: anywhere; }
.pw-tekst b { font-weight: 800; }
.pw-tytul-postu { font-weight: 700; }
.pw-kiedy { font-size: 0.74rem; color: var(--grigio); margin-top: 2px; }

.cmty-obserwowani {
  border: 2px solid var(--zielen-gleboka); border-radius: 18px;
  padding: 14px 16px 16px; margin-bottom: 18px;
  background: var(--zielen-tlo);
}
.cmty-obs-glowa { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.cmty-obs-tytul {
  font-weight: 800; font-size: 0.95rem; color: var(--zielen-gleboka);
  display: flex; align-items: center; gap: 7px;
}
.cmty-obs-opis { font-size: 0.76rem; color: var(--grigio); }
.cmty-obs-pas { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.cmty-obs-kafelek {
  flex: 0 0 210px; display: flex; flex-direction: column; gap: 6px;
  padding: 10px; border: 1px solid var(--border-2); border-radius: 14px;
  background: var(--card-bg); cursor: pointer; text-align: left;
  font-family: inherit; color: inherit;
}
.cmty-obs-kafelek:hover { border-color: var(--zielen-gleboka); transform: translateY(-2px); }
.cmty-obs-kafelek { transition: transform var(--transition), border-color var(--transition); }
.cmty-obs-obraz {
  width: 100%; height: 88px; border-radius: 10px; object-fit: cover; background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center; color: var(--grigio); font-size: 1.5rem;
}
.cmty-obs-tytul-mat { font-weight: 700; font-size: 0.84rem; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cmty-obs-autor { font-size: 0.74rem; color: var(--grigio); display: flex; align-items: center; gap: 5px; }
.account-info { min-width: 0; }
.account-nick { font-weight: 700; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-plan { font-size: 0.75rem; color: var(--grigio); }

.header-konto {
  display: flex; align-items: center; gap: 9px; padding: 4px 6px 4px 4px;
  border-radius: 999px; background: var(--bg-soft);
}
.header-konto .account-avatar { width: 34px; height: 34px; font-size: 0.85rem; }
.header-konto-opis { max-width: 150px; color: var(--testo); line-height: 1.25; }
.header-konto .account-nick { font-size: 0.82rem; }
.header-konto .account-plan { font-size: 0.68rem; color: var(--grigio); }
.header-konto-akcje { display: flex; align-items: center; gap: 9px; }
.header-konto-akcja {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; cursor: pointer;
  border: none; background: var(--border); color: var(--testo); font-size: 0.85rem;
  line-height: 1; transition: var(--transition);
}
.header-konto-akcja:hover { background: var(--border-2); transform: translateY(-1px); }

@media (max-width: 1000px) {
  .header-konto-opis { display: none; }
}

.settings-tab {
  flex: 0 0 auto; padding: 9px 14px; border-radius: 50px; border: 2px solid var(--border);
  background: var(--crema); font-family: inherit; font-size: 0.78rem; font-weight: 700;
  color: var(--grigio); cursor: pointer; transition: var(--transition); white-space: nowrap;
}
.settings-tab:hover { border-color: var(--oro); color: var(--testo); }
.settings-tab.active { background: var(--zolty); border-color: var(--zolty); color: var(--granat); }
.theme-switch { display: flex; gap: 10px; }
.theme-switch-btn:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
.header-theme {
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 50%;
  width: 32px; height: 32px; flex-shrink: 0; cursor: pointer; font-size: 0.95rem;
  line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.header-theme:hover { background: var(--border); transform: rotate(-18deg) scale(1.1); }

.theme-switch-btn {
  flex: 1; padding: 10px 8px; border-radius: 12px; border: 2px solid var(--border);
  background: var(--crema); font-family: inherit; font-size: 0.78rem; font-weight: 700;
  color: var(--grigio); cursor: pointer; transition: var(--transition);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.theme-switch-btn .ico { font-size: 1.3rem; margin-right: 0; line-height: 1; height: 1.3rem; }
.theme-switch-btn:hover { border-color: var(--primary); color: var(--testo); }
.theme-switch-btn.active { background: var(--oro); border-color: var(--oro); color: var(--na-akcencie); }
.settings-pane { display: none; }
.settings-pane.active { display: block; }
.settings-section { padding: 18px 0; border-bottom: 1px solid var(--border-warm-soft); }
.ust-pref-opis { margin: 0 0 12px; }
.ust-pref-naglowek { margin: 14px 0 8px; font-size: 0.82rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--grigio); }
.ust-poziomy { display: grid; gap: 8px; }
.ust-poziom {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; border: 2px solid var(--border); border-radius: 14px;
  background: var(--card-bg); color: var(--testo); font: inherit; text-align: start; cursor: pointer;
}
.ust-poziom:hover { border-color: var(--border-2); }
.ust-poziom[aria-checked="true"] { border-color: var(--oro); background: var(--bg-highlight); }
.ust-poziom-kod {
  flex-shrink: 0; min-width: 40px; padding: 4px 8px; border-radius: 9px; font-family: var(--font-naglowek); font-weight: 800; text-align: center;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--testo) 22%, transparent);
}
.ust-poziom-tresc { display: flex; flex-direction: column; min-width: 0; }
.ust-poziom-tresc b { font-size: 0.94rem; line-height: 1.3; }
.ust-poziom-tresc span { font-size: 0.85rem; line-height: 1.35; color: var(--grigio); }
.ust-poziom-ptak { margin-inline-start: auto; color: var(--oro); font-size: 1.1rem; opacity: 0; flex-shrink: 0; }
.ust-poziom[aria-checked="true"] .ust-poziom-ptak { opacity: 1; }
.ust-cele { margin-bottom: 0; }
.settings-section:last-child { border-bottom: none; padding-bottom: 4px; }
.settings-section:first-child { padding-top: 0; }
.settings-plan-box {
  background: var(--crema);
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 0.88rem;
  line-height: 1.6;
}

.wordmap-overlay.ustawienia-overlay { justify-content: flex-end; padding: 0; }
.ustawienia-panel {
  background: var(--crema);
  width: min(780px, 100%);
  min-width: 0;
  height: 100%;
  display: flex; flex-direction: column;
  box-shadow: -24px 0 70px rgba(0,0,0,0.30);
  animation: ustawieniaWjazd 0.34s cubic-bezier(.22,1,.36,1);
}
@keyframes ustawieniaWjazd { from { transform: translateX(100%); } to { transform: translateX(0); } }
.ustawienia-overlay.zamykanie { animation: ustawieniaZanik 0.24s ease forwards; }
.ustawienia-overlay.zamykanie .ustawienia-panel { animation: ustawieniaZjazd 0.24s cubic-bezier(.4,0,1,1) forwards; }
@keyframes ustawieniaZanik { to { opacity: 0; } }
@keyframes ustawieniaZjazd { to { transform: translateX(100%); } }

.ustawienia-head {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  padding: 16px 20px; background: var(--card-bg);
  border-bottom: 1px solid var(--border-warm-soft);
}
.ustawienia-osoba { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.ustawienia-osoba .account-avatar { width: 46px; height: 46px; font-size: 1.05rem; }
.ustawienia-nick { font-weight: 800; font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ustawienia-podpis { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
.ustawienia-plakietka {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
  border: none; font-family: inherit;
  background: var(--bg-soft); color: var(--grigio); font-size: 0.7rem; font-weight: 800;
}
button.ustawienia-plakietka { cursor: pointer; transition: var(--transition); }
button.ustawienia-plakietka:hover { filter: brightness(0.95); }
.ustawienia-plakietka .ico { font-size: 0.72rem; margin-right: 0; }
.ustawienia-plakietka.premium { background: var(--bg-gold-soft); color: var(--oro); }
.ustawienia-plakietka.xp { background: var(--bg-info-soft); color: var(--muted-dark); }
.ustawienia-zamknij {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; border: none;
  background: var(--bg-soft); color: var(--grigio); font-size: 1rem; cursor: pointer;
  transition: var(--transition);
}
.ustawienia-zamknij:hover { background: var(--bg-error-soft); color: var(--rosso); transform: rotate(90deg); }

.ustawienia-korpus { display: flex; flex: 1; min-height: 0; min-width: 0; }
.ustawienia-rail {
  position: relative; flex: 0 0 196px; padding: 14px 12px; overflow-y: auto;
  background: var(--card-bg); border-right: 1px solid var(--border-warm-soft);
  display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin;
}
.ustawienia-poz {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 11px 13px; border: none; border-radius: 12px; background: transparent;
  font-family: inherit; font-size: 0.86rem; font-weight: 700; color: var(--grigio);
  cursor: pointer; text-align: left; white-space: nowrap;
  transition: color 0.22s ease, transform 0.22s ease;
}
.ustawienia-poz .ico { font-size: 1rem; margin-right: 0; }
.ustawienia-poz:hover { color: var(--testo); transform: translateX(2px); }
.ustawienia-poz.active { color: var(--oro); }
.ustawienia-wskaznik {
  position: absolute; left: 12px; right: 12px; top: 0; height: 0; z-index: 0;
  border-radius: 12px; background: var(--bg-highlight); pointer-events: none; opacity: 0;
  transition: transform 0.34s cubic-bezier(.22,1,.36,1), height 0.34s cubic-bezier(.22,1,.36,1), opacity 0.2s ease;
}
.ustawienia-wskaznik.widoczny { opacity: 1; }

.ustawienia-tresc { flex: 1; min-width: 0; overflow-y: auto; padding: 22px 26px 40px; }
.settings-pane.active > .settings-section { animation: ustawieniaSekcja 0.4s cubic-bezier(.22,1,.36,1) backwards; }
.settings-pane.active > .settings-section:nth-child(1) { animation-delay: 0.02s; }
.settings-pane.active > .settings-section:nth-child(2) { animation-delay: 0.07s; }
.settings-pane.active > .settings-section:nth-child(3) { animation-delay: 0.12s; }
.settings-pane.active > .settings-section:nth-child(4) { animation-delay: 0.17s; }
.settings-pane.active > .settings-section:nth-child(n+5) { animation-delay: 0.22s; }
@keyframes ustawieniaSekcja { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.settings-title { font-weight: 800; font-size: 0.95rem; margin-bottom: 12px; display: flex; align-items: center; gap: 9px; }
.settings-title .ico { color: var(--oro); font-size: 1rem; margin-right: 0; }

.ustawienia-wiersz {
  display: flex; align-items: center; gap: 16px; justify-content: space-between;
  padding: 13px 0; border-bottom: 1px dashed var(--border-warm-soft);
}
.ustawienia-wiersz:last-child { border-bottom: none; padding-bottom: 0; }
.ustawienia-wiersz:first-child { padding-top: 0; }
.ustawienia-wiersz-txt { min-width: 0; }
.ustawienia-wiersz-tytul { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.88rem; }
.ustawienia-wiersz-tytul .ico { color: var(--grigio); font-size: 0.92rem; margin-right: 0; }
.ustawienia-wiersz-opis { font-size: 0.76rem; color: var(--grigio); line-height: 1.5; margin-top: 3px; }
.ustawienia-wiersz-akcja { flex-shrink: 0; }
.ustawienia-suwak { display: flex; flex-direction: column; gap: 6px; min-width: 210px; }
.ustawienia-suwak-wartosc { font-weight: 800; font-size: 0.82rem; color: var(--oro); text-align: right; }
.ustawienia-suwak input[type="range"] { width: 100%; accent-color: var(--oro); cursor: pointer; }

.pk { container-type: inline-size; container-name: pk; display: grid; gap: 16px; min-width: 0; overflow-wrap: break-word; }
.pk-sekcja { min-width: 0; }
.pk-sekcja-tytul { margin: 0 0 10px; font-size: 0.95rem; font-weight: 800; color: var(--testo); }

.pk-baner {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px;
  border-radius: 24px; padding: 26px 26px 24px; color: #FFFFFF;
  background: radial-gradient(90% 120% at 100% 0%, #3A3D96 0%, #22246A 38%, #17183B 75%);
  box-shadow: 0 16px 34px -18px rgba(23, 24, 59, 0.6);
}
.pk-baner-tekst { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.pk-baner-tytul {
  display: flex; align-items: center; gap: 10px; font-family: var(--font-naglowek); font-weight: 800;
  font-size: 2.1rem; line-height: 1.05; letter-spacing: -0.02em;
}
.pk-baner-tytul .ico { display: none; }
.pk-baner-zdanie { margin: 0; font-size: 0.98rem; line-height: 1.5; color: #D9DAF5; }
.pk-baner-platnosc {
  display: flex; gap: 8px; align-items: flex-start; margin: 0; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.18); font-size: 0.84rem; line-height: 1.5; color: #C9CAE8;
}
.pk-baner-platnosc .ico { margin: 2px 0 0; flex-shrink: 0; color: var(--zolty); }
.pk-baner-plakietka {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 9px; border-radius: 999px;
  background: rgba(255, 200, 61, 0.16); border: 1px solid rgba(255, 200, 61, 0.45); color: var(--zolty);
  font-family: var(--font-naglowek); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.02em;
}
.pk-baner-plakietka .ico { margin: 0; }
.pk-baner-ozdoba { position: relative; flex: none; width: 140px; height: 120px; }
.pk-baner-ozdoba::before {
  content: ''; position: absolute; left: 10px; top: 4px; width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 200, 61, 0.5) 0%, rgba(255, 200, 61, 0) 68%);
}
.pk-korona { position: absolute; left: 15px; top: 18px; transform-origin: 50% 90%; animation: pkUnos 4s ease-in-out infinite; }
.pk-iskra {
  position: absolute; width: 15px; height: 15px; background: var(--zolty); opacity: 0;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation: pkIskra 2.4s ease-in-out infinite;
}
.pk-iskra.i1 { left: 2px; top: 4px; }
.pk-iskra.i2 { right: 6px; top: 0; width: 10px; height: 10px; background: #FFFFFF; animation-delay: 0.7s; }
.pk-iskra.i3 { right: 0; bottom: 18px; width: 12px; height: 12px; animation-delay: 1.4s; }
@keyframes pkUnos { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-7px) rotate(-3deg); } }
@keyframes pkIskra { 0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(90deg); } }
@container pk (max-width: 520px) {
  .pk-baner { padding: 22px 20px 20px; }
  .pk-baner-ozdoba { display: none; }
  .pk-baner-tytul { font-size: 1.65rem; }
}

.pk-stan { padding: 14px 16px; border-radius: 14px; background: var(--card-bg); border: 1px solid var(--border-warm-soft); }
.pk-stan-glowa {
  display: flex; justify-content: space-between; align-items: baseline; gap: 4px 10px; flex-wrap: wrap;
  font-size: 0.85rem; font-weight: 700; color: var(--grigio);
}
.pk-stan-glowa b { color: var(--testo); font-size: 1rem; font-weight: 800; }
.pk-pasek { height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; margin-top: 8px; }
.pk-pasek > span { display: block; height: 100%; border-radius: 999px; background: var(--marka-zielony); transition: width 0.4s ease; }
.pk-pasek.ostrzezenie > span { background: #D97706; }
.pk-archiwum { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; font-size: 0.82rem; line-height: 1.5; font-weight: 600; color: var(--muted-dark); }
.pk-archiwum .ico { color: var(--verde); flex-shrink: 0; margin: 2px 0 0; }
.pk-darmowe { margin-top: 12px; font-size: 0.8rem; line-height: 1.5; color: var(--grigio); }
.pk-darmowe b { color: var(--testo); }
.pk-darmowe ul { margin: 4px 0 0; padding: 0 0 0 18px; display: grid; gap: 2px; }
.pk-stan-premium { margin: 10px 0 0; font-size: 0.82rem; line-height: 1.5; font-weight: 700; color: var(--testo); }

.pk-plany-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 6px; }
.pk-plan {
  position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0;
  padding: 18px 14px 14px 42px; border-radius: 14px; border: 2px solid var(--border); background: var(--card-bg);
  cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease;
}
.pk-plan:hover { border-color: var(--oro); }
.pk-plan.wybrany, .pk-plan:has(.pk-plan-radio:checked) { border-color: var(--zolty); background: var(--bg-highlight); }
.pk-plan:has(.pk-plan-radio:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 2px; }
.pk-plan-radio { position: absolute; left: 14px; top: 19px; width: 18px; height: 18px; margin: 0; accent-color: var(--oro); cursor: pointer; }
.pk-plan-nazwa { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--grigio); }
.pk-plan-cena { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.pk-cena { font-size: 1.6rem; font-weight: 800; line-height: 1.15; color: var(--testo); }
.pk-cena-sufiks { font-size: 0.78rem; font-weight: 700; color: var(--grigio); }
.pk-cena-stara { font-size: 0.85rem; font-weight: 700; color: var(--grigio); text-decoration: line-through; }
.pk-plan-nota { font-size: 0.74rem; line-height: 1.4; color: var(--grigio); }
.pk-wstazka {
  position: absolute; top: -10px; right: 12px; white-space: nowrap;
  padding: 3px 10px; border-radius: 999px; font-size: 0.66rem; font-weight: 800;
  background: var(--verde); color: var(--na-akcencie);
}
.pk-zaplac { margin-top: 14px; padding: 13px 20px; font-size: 0.98rem; font-weight: 800; }
.pk-zaplac.loading { opacity: 0.75; }
.pk-zaplac:focus-visible, .pk-akordeon > summary:focus-visible, .currency-opt:focus-visible,
.pk .limit-droga-cta:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.pk-blad { margin-top: 10px; }
.pk-zaplac-nota { margin-top: 8px; font-size: 0.74rem; line-height: 1.5; text-align: center; color: var(--grigio); }

.pk-akordeony { margin-top: 12px; display: grid; gap: 8px; }
.pk-akordeon { border: 1px solid var(--border-warm); border-radius: 12px; background: var(--card-bg); }
.pk-akordeon > summary {
  display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-radius: 12px;
  font-size: 0.85rem; font-weight: 700; color: var(--testo); cursor: pointer; list-style: none; user-select: none;
}
.pk-akordeon > summary::-webkit-details-marker { display: none; }
.pk-akordeon > summary .ico { margin-right: 0; color: var(--grigio); }
.pk-strzalka { margin-left: auto; transition: transform 0.2s ease; }
.pk-akordeon[open] > summary .pk-strzalka { transform: rotate(180deg); }
.pk-akordeon-tresc { padding: 0 14px 14px; }
.pk-akordeon .auth-input { margin: 8px 0 0; }
.pk-akordeon .promo-row .auth-input { margin: 0; }

.pk-kafelki { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pk-kafelek {
  display: flex; gap: 11px; align-items: flex-start; min-width: 0; padding: 13px 15px;
  border-radius: 14px; background: var(--card-bg); border: 1px solid var(--border-warm-soft);
}
.pk-kafelek > .ico { flex-shrink: 0; margin: 2px 0 0; font-size: 1.1rem; color: var(--verde); }
.pk-kafelek b { display: block; margin-bottom: 2px; font-size: 0.84rem; color: var(--testo); }
.pk-kafelek span { display: block; font-size: 0.76rem; line-height: 1.5; color: var(--grigio); }

.pk-ust { gap: 18px; }
.pk-ust .pk-sekcja-tytul { font-family: var(--font-naglowek); font-size: 1.35rem; margin-bottom: 12px; }
.pk-sekcja-glowa { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; margin-bottom: 12px; }
.pk-sekcja-glowa .pk-sekcja-tytul { margin: 0; }
.pk-wlaczone { font-size: 0.84rem; font-weight: 800; color: var(--verde); }

.pk-status { display: grid; gap: 10px; padding: 20px 22px; border-radius: 20px; background: var(--card-bg); border: 1.5px solid var(--border-warm-soft); }
.pk-status-glowa { display: flex; align-items: center; gap: 9px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--verde); }
.pk-status-kropka { width: 11px; height: 11px; flex: none; border-radius: 50%; background: var(--marka-zielony); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marka-zielony) 22%, transparent); }
.pk-status-anulowana .pk-status-glowa { color: var(--grigio); }
.pk-status-anulowana .pk-status-kropka { background: var(--grigio); box-shadow: none; }
.pk-status-problem { border-color: color-mix(in srgb, #DB2727 45%, transparent); }
.pk-status-problem .pk-status-glowa { color: var(--rosso); }
.pk-status-problem .pk-status-kropka { background: #DB2727; box-shadow: 0 0 0 4px color-mix(in srgb, #DB2727 20%, transparent); }
.pk-status-podpis { font-size: 0.84rem; font-weight: 700; color: var(--grigio); }
.pk-status-data { margin-top: -6px; font-family: var(--font-naglowek); font-weight: 800; font-size: 1.9rem; line-height: 1.1; letter-spacing: -0.01em; color: var(--testo); }
.pk-status .renew-box { margin-top: 0; }
.pk-stripe { display: grid; gap: 10px; }
.pk-stripe-zdanie { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--muted-dark); }
.pk-stripe-zdanie.problem { color: var(--rosso); font-weight: 700; }
.stripe-zmiana-ceny {
  display: flex; gap: 8px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; font-size: 0.86rem; line-height: 1.45; color: var(--testo);
  background: color-mix(in srgb, #FFC83D 18%, var(--card-bg)); border: 1.5px solid color-mix(in srgb, #FFC83D 55%, transparent);
}
.stripe-zmiana-ceny .ico { margin: 2px 0 0; flex: none; }
.stripe-karta {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; color: #FFFFFF;
  background: linear-gradient(135deg, #2463E9 0%, #204EB8 60%, #17183B 100%);
  font-family: var(--font-naglowek); font-weight: 700; font-size: 0.98rem; letter-spacing: 0.02em;
}
.stripe-karta .ico { margin: 0; font-size: 1.3rem; color: var(--zolty); }
.pk-ust .pk-stripe-portal {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; margin: 0;
  border: 0; border-radius: 14px; background: #17183B; color: #FFFFFF; font-family: var(--font-naglowek); font-weight: 700; font-size: 0.92rem;
}
.pk-ust .pk-stripe-portal .ico { margin: 0; color: var(--zolty); }
.pk-ust .pk-stripe-portal:hover { background: #24265A; border-color: transparent; color: #FFFFFF; }

.pk-archiwum-karta { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 20px; background: var(--card-bg); border: 1.5px solid var(--border-warm-soft); }
.pk-archiwum-ikona { width: 50px; height: 50px; flex: none; border-radius: 15px; background: #E7EEFE; color: #2463E9; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; }
.pk-archiwum-ikona .ico { margin: 0; }
.pk-archiwum-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pk-archiwum-tekst b { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.08rem; color: var(--testo); }
.pk-archiwum-tekst span { font-size: 0.86rem; line-height: 1.45; color: var(--grigio); }
.pk-archiwum-karta .plan-archiwum-btn {
  width: auto; flex: none; min-height: 46px; padding: 0 20px; border: 0; border-radius: 14px; background: #2463E9; color: #FFFFFF;
  font-family: var(--font-naglowek); font-weight: 700; font-size: 0.92rem; box-shadow: 0 4px 0 #204EB8;
}
.pk-archiwum-karta .plan-archiwum-btn:hover { background: #204EB8; color: #FFFFFF; }
@container pk (max-width: 520px) {
  .pk-archiwum-karta { flex-wrap: wrap; }
  .pk-archiwum-karta .plan-archiwum-btn { width: 100%; }
}

.pk-stan-ust { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 14px; padding: 0; background: none; border: none; }
.pk-stan-ust .pk-stan-talia {
  display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 20px; border-radius: 20px;
  background: var(--card-bg); border: 1.5px solid var(--border-warm-soft);
}
.pk-stan-ust .pk-stan-glowa { flex-direction: column; align-items: flex-start; gap: 6px; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; }
.pk-stan-ust .pk-stan-glowa b { font-family: var(--font-naglowek); font-size: 1.9rem; line-height: 1.05; letter-spacing: -0.01em; text-transform: none; }
.pk-stan-ust .pk-pasek { height: 12px; margin-top: 0; }
.pk-stan-ust .pk-pasek > span { background: linear-gradient(90deg, #2463E9, #4C82F5); }
.pk-stan-ust .pk-pasek.ostrzezenie > span { background: #D97706; }
.pk-stan-ust .pk-archiwum { margin: 0; }
.pk-tabela { margin: 0; border-radius: 20px; background: var(--card-bg); border: 1.5px solid var(--border-warm-soft); overflow: hidden; font-size: 0.86rem; color: var(--testo); }
.pk-tabela-glowa {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 10px; align-items: center; padding: 11px 16px;
  background: var(--crema); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
}
.pk-tabela-glowa b { color: var(--grigio); }
.pk-tabela-glowa span { justify-self: start; padding: 2px 10px; border-radius: 999px; background: #17183B; color: var(--zolty); }
.pk-tabela ul { list-style: none; margin: 0; padding: 0; display: block; }
.pk-tabela li { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--border-warm-soft); }
.pk-tabela-darmowe { color: var(--muted-dark); }
.pk-tabela-premium { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--verde); }
.pk-tabela-premium .ico { margin: 0; color: var(--marka-zielony); }
.pk-stan-ust .pk-stan-premium { grid-column: 1 / -1; margin: 0; padding: 12px 16px; border-radius: 16px; background: color-mix(in srgb, #FFC83D 16%, var(--card-bg)); }
@container pk (max-width: 600px) { .pk-stan-ust { grid-template-columns: 1fr; } }

.pk-ust .pk-plany-lista { gap: 14px; padding-top: 10px; }
.pk-ust .pk-plan { padding: 22px 18px 18px 50px; border-radius: 20px; border-width: 2.5px; gap: 4px; }
.pk-ust .pk-plan.wybrany, .pk-ust .pk-plan:has(.pk-plan-radio:checked) { border-color: var(--zolty); background: color-mix(in srgb, #FFC83D 16%, var(--card-bg)); }
.pk-ust .pk-plan-radio { left: 18px; top: 25px; width: 20px; height: 20px; }
.pk-ust .pk-plan-nazwa { font-family: var(--font-naglowek); font-size: 1.15rem; letter-spacing: 0; text-transform: none; color: var(--testo); }
.pk-ust .pk-cena { font-family: var(--font-naglowek); font-size: 2.3rem; letter-spacing: -0.02em; }
.pk-ust .pk-cena-sufiks { font-size: 0.9rem; }
.pk-ust .pk-plan-nota { font-size: 0.84rem; color: var(--muted-dark); }
.pk-ust .pk-wstazka { top: -12px; right: 16px; padding: 4px 11px; font-size: 0.74rem; background: #DB2727; color: #FFFFFF; }
.pk-ust .buy-consent { font-size: 0.88rem; font-weight: 600; color: var(--testo); }
.pk-ust .buy-consent input { width: 18px; height: 18px; }
.pk.pk-ust .pk-zaplac {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%;
  min-height: 60px; padding: 7px 7px 7px 22px; border-radius: 20px; background: var(--zolty); color: #17183B;
  font-family: var(--font-naglowek); font-size: 1.15rem; box-shadow: 0 5px 0 #D9A21E;
}
.pk.pk-ust .pk-zaplac:hover { background: #FFD45E; color: #17183B; }
.pk.pk-ust .pk-zaplac::after {
  content: ''; flex: none; width: 46px; height: 46px; margin-left: auto; border-radius: 15px;
  background: #17183B var(--strzalka-zolta) center / 22px 22px no-repeat;
}
.pk.pk-ust .pk-zaplac::before {
  content: ''; position: absolute; top: 0; left: 0; width: 26%; height: 100%; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-160%) skewX(-18deg); animation: pkBlysk 3.4s ease-in-out 1s infinite;
}
@keyframes pkBlysk { 0% { transform: translateX(-160%) skewX(-18deg); } 55%, 100% { transform: translateX(420%) skewX(-18deg); } }
.pk-zaplac:disabled:not(.loading) { opacity: 0.45; box-shadow: none; cursor: not-allowed; }
.pk-zaplac:disabled:not(.loading)::before { animation: none; opacity: 0; }
.pk.pk-ust .pk-zaplac:disabled:not(.loading):hover { background: var(--zolty); }

.pk-ust .pk-kafelki { gap: 12px; }
.pk-ust .pk-kafelek { position: relative; gap: 14px; padding: 16px; border-radius: 18px; border-width: 1.5px; animation: pkWjazd 0.45s ease-out both; }
.pk-ust .pk-kafelek:nth-child(2) { animation-delay: 0.06s; }
.pk-ust .pk-kafelek:nth-child(3) { animation-delay: 0.12s; }
.pk-ust .pk-kafelek:nth-child(4) { animation-delay: 0.18s; }
.pk-ust .pk-kafelek:nth-child(5) { animation-delay: 0.24s; }
.pk-ust .pk-kafelek:nth-child(6) { animation-delay: 0.3s; }
.pk-ust .pk-kafelek:nth-child(7) { animation-delay: 0.36s; }
.pk-ust .pk-kafelek:nth-child(8) { animation-delay: 0.42s; }
.pk-ust .pk-kafelek > .ico {
  width: 44px; height: 44px; margin: 0; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; line-height: 1; background: var(--zolty); color: #17183B;
}
.pk-ust .pk-kafelek:is([data-kafelek="mowienie"], [data-kafelek="wsparcie"]) > .ico { background: #DB2727; color: #FFFFFF; }
.pk-ust .pk-kafelek:is([data-kafelek="archiwum"], [data-kafelek="zdjecia"], [data-kafelek="ai"]) > .ico { background: #2463E9; color: #FFFFFF; }
.pk-ust .pk-kafelek[data-kafelek="filmy"] > .ico { background: #17183B; color: var(--zolty); box-shadow: inset 0 0 0 1.5px rgba(255, 200, 61, 0.5); }
.pk-ust .pk-kafelek[data-kafelek="teksty"] > .ico { background: #35A64D; color: #FFFFFF; }
.pk-ust .pk-kafelek b { font-size: 0.95rem; margin-bottom: 3px; }
.pk-ust .pk-kafelek span { font-size: 0.84rem; }
.pk-masz .pk-kafelek::after {
  content: ''; position: absolute; left: 46px; top: 46px; width: 20px; height: 20px; border-radius: 50%; box-sizing: border-box;
  border: 2px solid var(--card-bg);
  background: #35A64D url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
}
@keyframes pkWjazd { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.pk-info { padding: 14px 16px; border-radius: 14px; background: var(--crema); font-size: 0.88rem; line-height: 1.6; }
.pk-info-tytul { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.pk-info-tytul .ico { margin-right: 0; }
.pk-info-opis { margin-top: 6px; font-size: 0.84rem; color: var(--grigio); }

@container pk (max-width: 480px) { .pk-kafelki { grid-template-columns: 1fr; } }
@container pk (max-width: 330px) { .pk-plany-lista { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .pk-kafelki { grid-template-columns: 1fr; }
  .pk-baner { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .pk-strzalka, .pk-pasek > span, .pk-plan { transition: none; }
  .pk-korona, .pk-iskra, .pk-ust .pk-kafelek, .pk.pk-ust .pk-zaplac::before { animation: none; }
  .pk-iskra { opacity: 1; }
}

@media (max-width: 860px) {
  .ustawienia-panel { width: 100%; }
  .ustawienia-korpus { flex-direction: column; }
  .ustawienia-rail {
    flex: 0 0 auto; flex-direction: row; overflow-x: auto; overflow-y: hidden;
    border-right: none; border-bottom: 1px solid var(--border-warm-soft);
    padding: 10px; scrollbar-width: none;
  }
  .ustawienia-rail::-webkit-scrollbar { display: none; }
  .ustawienia-poz { width: auto; flex: 0 0 auto; padding: 9px 13px; }
  .ustawienia-poz:hover { transform: none; }
  .ustawienia-poz.active { background: var(--bg-highlight); }
  .ustawienia-wskaznik { display: none; }
  .ustawienia-tresc { padding: 18px 18px 32px; }
  .ustawienia-suwak { min-width: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .ustawienia-panel,
  .ustawienia-overlay.zamykanie .ustawienia-panel,
  .settings-pane.active > .settings-section { animation: none; }
  .ustawienia-wskaznik { transition: opacity 0.2s ease; }
  .ustawienia-poz:hover { transform: none; }
}



#flashcard-area { min-height: 620px; position: relative; }   

.fiszka-nav { min-height: 40px; align-content: flex-start; }
.fiszka-toggles { min-height: 34px; }
.ocena-row.hidden { display: grid; visibility: hidden; pointer-events: none; }
.ocena-row.bez-ocen { display: none !important; }
.ocena-poziom-hint { text-align: center; font-size: 0.8rem; color: var(--grigio); margin-top: 12px; line-height: 1.45; }
.ocena-poziom-hint.hidden { display: none; }

@media (max-width: 768px) {
  #flashcard-area { min-height: 74dvh; }
  .fiszka-nav { gap: 8px; }
  .fiszka-nav .custom-select { flex: 1 1 45%; }
  .fiszka-nav-select { max-width: none; width: 100%; }

  .community-topbar { gap: 8px; }
  .community-search-wrap { flex: 1 1 100%; max-width: none; }
  .community-filters { flex: 1 1 100%; gap: 8px; flex-wrap: wrap; }
  .cmty-nawigacja { flex-wrap: nowrap !important; margin-left: auto; gap: 8px; }
  #communitySortBtn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .cmty-nawigacja .mode-tab span { display: none; }
  .cmty-nawigacja .mode-tab { padding: 8px 12px; }
  .cmty-nawigacja .mode-tab .ico { margin-right: 0; font-size: 1rem; }

  .community-detail-karta.w-siatce { flex-direction: column; }
  .community-detail-karta.w-siatce .community-detail-obraz img { max-height: 48dvh; }
  .community-detail-panel { padding: 16px 14px; min-width: 0; min-height: 0; }
  .community-detail-karta.paczka .community-detail-obraz { padding: 54px 14px 16px; }
  .community-zdania { max-height: 46dvh; }
  .community-detail-akcje-gora { top: 10px; right: 10px; gap: 6px; }

  body .cmty-nawigacja { display: contents; }
  body .community-filters { display: contents; }
  body .community-topbar { row-gap: 4px; column-gap: 6px; align-items: center; }

  body .community-topbar .community-search-wrap { order: 0; flex: 1 1 80px; min-width: 0; max-width: none; }
  body .community-topbar .community-aparat      { order: 1; }
  body .community-topbar .community-kafelki     { order: 2; }
  body .community-topbar .mode-tabs             { order: 3; flex: 0 0 auto; }
  body .community-topbar .community-chip     { order: 5; flex: 1 1 0; min-width: 0; max-width: max-content; }
  body .community-topbar .header-theme       { order: 7; }
  body .community-topbar .header-lang        { order: 8; }
  body .community-topbar .header-konto       { order: 9; margin-left: auto; }
  body .community-topbar::before { content: ''; order: 4; flex: 1 1 100%; height: 0; }
  body .community-topbar .gosc-cta { order: 10; flex: 1 1 100%; }

  #headerBrand { display: none; }
  .header-inner { padding: 8px 14px; gap: 8px; }
  #headerActions { gap: 8px; row-gap: 8px; justify-content: flex-end; }
  .header-title { gap: 8px; }

  .header-actions { display: contents; }
  .header-inner { row-gap: 8px; justify-content: flex-start; }
  .header-inner > .header-title { order: 0; }
  .header-inner .streak-wrap    { order: 1; }
  .header-inner .header-konto   { order: 2; margin-left: auto; }
  .header-inner .mode-tabs      { order: 3; flex: 1 1 100%; justify-content: center; }
  .mode-tab:not(.active) span:not(.mode-tab-caret) { display: none; }
  .mode-tab:not(.active) { padding-left: 14px; padding-right: 14px; }
  .mode-tab:not(.active) .ico { margin-right: 0; }

  .kartka-pasek { flex-wrap: wrap; row-gap: 8px; }
  .kartka-tytul-blok { flex: 1 1 150px; }
  .kartka-akcje { flex-shrink: 1; flex-wrap: wrap; }

  @supports (padding: env(safe-area-inset-left)) {
    .header-inner {
      padding-left:  max(14px, env(safe-area-inset-left));
      padding-right: max(14px, env(safe-area-inset-right));
    }
  }
  #headerActions { min-width: 0; flex-wrap: wrap; justify-content: flex-end; }

  .wordmap-header { flex-wrap: wrap; gap: 10px; padding: 16px 16px 12px; }
  .wordmap-controls { flex: 1 1 100%; justify-content: space-between; gap: 10px; }
  .wordmap-search { max-width: none; }
}

@media (hover: none) and (pointer: coarse) {
  .stat-map-btn { min-height: 38px; padding-top: 9px; padding-bottom: 9px; }
  .mode-tab { min-height: 44px; }
  .header-theme { width: 40px; height: 40px; }
  .kartka-ikona, .kartka-przelacznik, .kartka-wroc { min-height: 40px; min-width: 40px; }
  .mode-tab-caret { padding: 12px 8px; margin: -12px -8px; }
}

@media (max-width: 480px) {
  .cmty-nawigacja { flex-wrap: wrap !important; justify-content: flex-end; row-gap: 8px; }
  .community-filters { min-width: 0; }
  .cmty-nawigacja .gosc-cta { flex: 1 1 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  body .community-topbar .community-search-wrap { flex: 1 1 0; }
  body .community-topbar .community-chip        { flex: 0 1 auto; max-width: 100%; }
  body .community-topbar .mode-tabs             { order: 12; }
  body .community-topbar .header-konto          { order: 13; }
  body .community-topbar .gosc-cta              { order: 14; }
  body .community-topbar::after { content: ''; order: 10; flex: 1 1 100%; height: 0; }
  body.tryb-goscia .community-topbar .header-theme { order: 3; }
  body.tryb-goscia .community-topbar::after { display: none; }
}
@media (max-width: 400px) {
  body .community-topbar .community-chip { padding-inline: 12px; }
}

@media (max-width: 400px) {
  .empty-state-methods { flex-direction: column; }
  .empty-state-method { width: 100%; }
  .add-method-tabs { grid-template-columns: 1fr; }
}



.mode-tab-wrap { position: relative; display: inline-flex; }
.mode-tab-caret { font-size: 0.7em; opacity: 0.75; margin-left: 5px; padding: 0 2px; }
.mode-tab-caret:hover { opacity: 1; }
.mode-tab-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 200;
  background: var(--card-bg); border: 1px solid var(--border-warm-soft);
  border-radius: 12px; box-shadow: var(--shadow-hover);
  min-width: 210px; padding: 6px;
}
.mode-tab-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px;
  border-radius: 9px; cursor: pointer; color: var(--testo);
}
.mode-tab-item:hover { background: var(--bg-soft); }
.mode-tab-item.active { background: var(--bg-highlight); color: var(--oro); }
.mode-tab-item .ico { margin-right: 0; margin-top: 2px; }
.mode-tab-item b { display: block; font-size: 0.84rem; font-weight: 700; }
.mode-tab-item small { display: block; font-size: 0.7rem; color: var(--grigio); margin-top: 1px; }

#kartaHistoriaTekstow, #kartaHistoriaFilmow, #kartaHistoriaMowienia { display: none; }
body.tryb-teksty   #kartaHistoriaTekstow  { display: block; }
body.tryb-filmy    #kartaHistoriaFilmow   { display: block; }
body.tryb-mowienie #kartaHistoriaMowienia { display: block; }
body.tryb-teksty   #kartaDodajSlowka,
body.tryb-filmy    #kartaDodajSlowka,
body.tryb-mowienie #kartaDodajSlowka { order: 3; }
#tekstyHistoria, #filmyHistoria, #mowienieMapaBok { overflow-x: hidden; }
#kartaHistoriaTekstow  .tekst-wiersz,
#kartaHistoriaFilmow   .tekst-wiersz,
#kartaHistoriaMowienia .tekst-wiersz { padding: 10px 11px; margin-bottom: 6px; }
#kartaHistoriaTekstow  .tekst-wiersz:last-child,
#kartaHistoriaFilmow   .tekst-wiersz:last-child,
#kartaHistoriaMowienia .tekst-wiersz:last-child { margin-bottom: 0; }
.film-wiersz-mini {
  flex: none; width: 46px; height: 26px; object-fit: cover; border-radius: 5px;
  background: var(--bg-soft);
}

.tekst-intro { color: var(--grigio); font-size: 0.86rem; line-height: 1.6; margin: 0 0 14px; }
.tekst-licznik { text-align: right; font-size: 0.72rem; color: var(--grigio); margin: -6px 0 10px; }
.tekst-licznik.blisko { color: var(--rosso); font-weight: 700; }

.tekst-wiersz {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 14px; margin-bottom: 8px; cursor: pointer;
  background: var(--card-bg); border: 1px solid var(--border-warm-soft); border-radius: 14px;
  font-family: inherit; color: var(--testo); transition: var(--transition);
}
.tekst-wiersz:hover { border-color: var(--oro); transform: translateX(2px); }
.tekst-wiersz { position: relative; overflow: hidden; isolation: isolate; }
.tekst-wiersz::before {
  content: ''; position: absolute; inset: 0 auto 0 0; z-index: 0;
  width: var(--postep, 0%);
  background: color-mix(in srgb, var(--verde) 14%, transparent);
  transition: width .35s ease;
  pointer-events: none;
}
.tekst-wiersz > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .tekst-wiersz::before { transition: none; } }
.tekst-wiersz-txt { flex: 1; min-width: 0; }
.tekst-wiersz-glowa { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.tekst-wiersz-tytul { flex: 1 1 auto; min-width: 14ch; font-weight: 700; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tekst-wiersz-meta { display: block; font-size: 0.72rem; color: var(--grigio); margin-top: 3px; }
.tekst-poziom {
  flex-shrink: 0; min-width: 34px; text-align: center; padding: 3px 8px; border-radius: 999px;
  background: var(--bg-info-soft); color: var(--primary); font-size: 0.7rem; font-weight: 800;
}
.tekst-pusto { color: var(--grigio); font-size: 0.85rem; line-height: 1.6; }
.proba-wyjscie-info {
  font-size: 0.78rem; font-weight: 600; color: var(--grigio); line-height: 1.5;
}
.tekst-wiersz-usun {
  flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; color: var(--muted-light); opacity: 0; transition: var(--transition);
}
.tekst-wiersz:hover .tekst-wiersz-usun { opacity: 1; }
.tekst-wiersz-usun:hover { background: var(--bg-soft); color: var(--rosso); }
.tekst-wiersz-usun.tekst-wiersz-fiszki:hover { color: var(--oro); }
@media (hover: none) and (pointer: coarse) { .tekst-wiersz-usun { opacity: 0.55; } }

.kartka-tytul.do-zmiany { cursor: text; text-decoration: underline dotted var(--border-warm); text-underline-offset: 4px; }
.kartka-tytul.do-zmiany:hover { color: var(--primary); }
.kartka-tytul.w-edycji {
  text-decoration: none; overflow: visible; text-overflow: clip; outline: none; cursor: text;
  padding: 2px 8px; margin: -2px -8px; border-radius: 8px;
  background: var(--card-bg); box-shadow: 0 0 0 2px var(--primary);
}

.kartka-przelacznik.aktywny { border-color: var(--oro); color: var(--oro); background: var(--bg-highlight); }

.kartka-obszar { display: flex; align-items: flex-start; gap: 16px; }
.kartka-obszar .kartka { flex: 1; min-width: 0; }
.brudnopis {
  flex: 0 0 300px; align-self: flex-start; position: sticky; top: 12px;
  max-height: calc(100vh - 24px);
  display: flex; flex-direction: column; gap: 10px;
  border-radius: 16px; padding: 16px 16px 14px;
  background-color: var(--card-bg);
  background-image:
    linear-gradient(var(--kratka-linia) 1px, transparent 1px),
    linear-gradient(90deg, var(--kratka-linia) 1px, transparent 1px);
  background-size: 26px 26px;
  border: 1px solid var(--border-warm-soft);
  box-shadow: var(--shadow);
}
.brudnopis-naglowek { display: flex; align-items: center; gap: 6px; }
.brudnopis-tytul {
  flex: 1; font-size: 1.15rem; font-weight: 700; color: var(--grigio);
  letter-spacing: 0.02em; opacity: 0.75;
}
.brudnopis-x {
  width: 26px; height: 26px; flex-shrink: 0; border: none; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--grigio); font-size: 0.85rem; transition: var(--transition);
}
.brudnopis-x:hover { background: var(--bg-soft); color: var(--testo); }
.brudnopis-kartka {
  flex: 1 1 auto; min-height: 220px; overflow-y: auto;
  font-size: 0.9rem; line-height: 26px;   
  color: var(--testo); outline: none; word-break: break-word;
}
.brudnopis-kartka:empty::before {
  content: attr(data-pusty); color: var(--muted-light); pointer-events: none;
}
.brudnopis-kartka .cytat {
  display: block; border-left: 3px solid var(--oro); padding-left: 9px; margin: 2px 0;
}
.brudnopis-kartka .cytat .tlum { display: block; font-size: 0.82rem; color: var(--grigio); }

.context-word.glosy-czekaja { opacity: 0.5; cursor: progress; }

.quiz-zdanie-glosy { margin-top: 6px; font-size: 0.95rem; line-height: 1.7; }

.brudnopis-pasek {
  position: fixed; z-index: 1200; display: flex; align-items: center; gap: 4px;
  padding: 5px 7px; border-radius: 10px;
  background: var(--testo); box-shadow: 0 6px 18px rgba(0,0,0,0.28);
}
.bp-narzedzie {
  min-width: 26px; height: 26px; border: none; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--card-bg); font-family: inherit; font-size: 0.85rem;
}
.bp-narzedzie:hover { background: rgba(255,255,255,0.16); }
.bp-kolor {
  width: 20px; height: 20px; border: none; border-radius: 50%; cursor: pointer; background: var(--k);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.35);
}
.bp-kolor:hover { transform: scale(1.12); }
.bp-kreska { width: 1px; height: 18px; background: rgba(255,255,255,0.25); margin: 0 2px; }

.przenoszenie-pasek {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
  padding: 10px 14px; border-radius: 12px;
  background: var(--bg-warn-soft); color: var(--muted-dark);
  font-size: 0.82rem; font-weight: 600; line-height: 1.45;
}
.przenoszenie-pasek .ico { color: var(--primary); flex-shrink: 0; }
.przenoszenie-pasek button {
  margin-left: auto; flex-shrink: 0; border: none; border-radius: 9px; cursor: pointer;
  padding: 7px 14px; background: var(--primary); color: #fff;
  font-family: inherit; font-size: 0.78rem; font-weight: 800;
}
body.tryb-przenoszenia #kartkaTresc .kartka-segment { cursor: text; }
body.tryb-przenoszenia #kartkaTresc .kartka-proba { display: none !important; }
body.tryb-przenoszenia #kartkaTresc .kartka-segment:hover { background: transparent; }
body.tryb-przenoszenia .brudnopis-przenies { background: var(--primary); color: #fff; }
@media (max-width: 900px) {
  .kartka-obszar { flex-direction: column; }
  .brudnopis { flex: 1 1 auto; width: 100%; position: static; max-height: none; }
}


.sciaga-grupa { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--grigio); margin: 16px 0 8px; }
.sciaga-grupa:first-child { margin-top: 0; }
.sciaga-wiersz { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.sciaga-wiersz:last-child { border-bottom: none; }
.sciaga-probka { flex-shrink: 0; width: 74px; display: flex; align-items: center; justify-content: center; padding-top: 2px; }
.sciaga-probka .kartka-zrodlo { font-size: 0.95rem; font-weight: 600; color: var(--testo); }
.sciaga-opis b { display: block; font-size: 0.86rem; color: var(--testo); }
.sciaga-wskazany { animation: sciagaMrug 2.1s ease-out; border-radius: 10px; }
@keyframes sciagaMrug {
  0%, 100% { background: transparent; }
  15%, 55% { background: var(--bg-success-soft); }
}
@media (prefers-reduced-motion: reduce) { .sciaga-wskazany { animation: none; background: var(--bg-success-soft); } }
.kartka-segment.zrobione .znane-slowo,
.kartka-segment .trudne-fraza, .kartka-segment .ai-wstawka { cursor: help; }
.sciaga-opis span { font-size: 0.79rem; color: var(--grigio); line-height: 1.5; }

.limit-opis { font-size: 0.9rem; color: var(--muted-dark); line-height: 1.6; margin: 0 0 10px; }
.limit-spokoj {
  font-size: 0.86rem; line-height: 1.6; margin: 0 0 18px; padding: 10px 14px;
  border-radius: 12px; background: var(--bg-success-soft); color: var(--muted-dark);
}
.limit-spokoj b { color: var(--testo); }
.sciana-powod { margin-bottom: 18px; }
.sciana-powod > :last-child { margin-bottom: 0; }
.limit-droga {
  display: flex; flex-direction: column; padding: 15px 16px; border-radius: 16px;
  border: 1px solid var(--border-warm-soft); background: var(--card-bg); min-width: 0;
}
.limit-droga-tytul { font-weight: 800; font-size: 0.95rem; margin-bottom: 6px; }
.limit-droga-opis { font-size: 0.82rem; color: var(--grigio); line-height: 1.55; margin: 0 0 12px; }
.limit-droga-cta { margin: auto 0 0; width: 100%; padding: 10px 14px; font-size: 0.84rem; }
.plan-archiwum { margin-top: 10px; font-size: 0.85rem; line-height: 1.55; color: var(--muted-dark); }
.plan-archiwum-btn { width: 100%; padding: 10px 14px; font-size: 0.84rem; }
.plan-archiwum-opis { margin-top: 6px; font-size: 0.78rem; color: var(--grigio); }
.locked-banner-archiwum { margin-top: 6px; font-weight: 600; }
#premiumScianaOverlay { padding: 0; z-index: 2700; }
#premiumScianaOverlay .sciana-okno { max-width: none; width: 100%; height: 100%; max-height: none; border-radius: 0; }
#premiumScianaOverlay .wordmap-header,
#premiumScianaOverlay .wordmap-body { width: 100%; max-width: 720px; margin: 0 auto; }
#premiumScianaOverlay .wordmap-body { overflow-y: auto; }
#premiumScianaOverlay .wordmap-close:focus-visible { outline: 3px solid var(--zolty); outline-offset: 2px; border-radius: 8px; }
@media (max-width: 480px) {
  #premiumScianaOverlay .wordmap-header { padding: 14px 16px 12px; }
  #premiumScianaOverlay .wordmap-body { padding: 16px; }
  #premiumScianaOverlay .wordmap-title { font-size: 1.02rem; }
}
.paywall-miekki {
  display: flex; gap: 14px; align-items: flex-start; margin: 0 0 14px;
  padding: 14px 16px; border-radius: 16px;
  background: var(--bg-success-soft); border: 1px solid var(--zielen-pastel);
}
.paywall-miekki-tresc { flex: 1; min-width: 0; }
.paywall-miekki-tytul { font-weight: 800; font-size: 0.98rem; margin-bottom: 4px; }
.paywall-miekki-opis { font-size: 0.84rem; color: var(--grigio); line-height: 1.55; }
.paywall-miekki-akcje { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.paywall-miekki-akcje .btn { width: auto; padding: 8px 14px; font-size: 0.82rem; }

.limit-pozniej { width: 100%; margin: 14px 0 0; padding: 11px 16px; font-size: 0.84rem; }

.przydzial-kiedy { display: flex; align-items: flex-start; gap: 8px; }
.przydzial-kiedy .ico { color: var(--oro); flex-shrink: 0; margin-top: 2px; }
.mow-mapa-przydzial {
  display: flex; align-items: center; gap: 7px; justify-content: center;
  font-size: 0.78rem; color: var(--grigio); margin: 0 0 10px;
}
.mow-mapa-przydzial.pusty { color: var(--arancio); font-weight: 700; }
.cmty-przydzial-notka {
  display: flex; align-items: flex-start; gap: 7px; margin-top: 10px;
  font-size: 0.78rem; line-height: 1.5; color: var(--grigio);
}
.cmty-przydzial-notka .ico { color: var(--arancio); flex-shrink: 0; margin-top: 2px; }
[dir="rtl"] { text-align: right; }
[dir="rtl"] ol, [dir="rtl"] ul { padding-left: 0; padding-right: 22px; }
[dir="rtl"] .kartka-akapit { padding-left: 0; padding-right: 36px; }
[dir="rtl"] .kartka-segment.aktywny {
  padding-left: 0; padding-right: 13px; box-shadow: inset -3px 0 0 var(--oro);
}
[dir="rtl"] .settings-legal, [dir="rtl"] .settings-credits { text-align: right; }
[dir="rtl"] .lang-picker-caret { margin-left: 0; margin-right: auto; }
[dir="rtl"] .mono, [dir="rtl"] code, [dir="rtl"] .kpi-value { direction: ltr; unicode-bidi: embed; }

.cookie-baner {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 100000;
  width: min(760px, calc(100vw - 24px));
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: var(--card-bg); border: 1px solid var(--border-warm); border-radius: 18px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .22); padding: 18px 22px;
}
.cookie-baner-tresc { flex: 1 1 320px; min-width: 0; }
.cookie-baner-tytul { font-weight: 800; font-size: 1rem; margin-bottom: 6px; }
.cookie-baner-opis { margin: 0 0 8px; font-size: 0.84rem; line-height: 1.6; color: var(--muted-dark); }
.cookie-baner-link { font-size: 0.8rem; font-weight: 700; color: var(--primary); }
.cookie-baner-akcje { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; min-width: 210px; }
.cookie-baner-akcje .btn { margin: 0; width: 100%; padding: 12px 16px; font-size: 0.88rem; }
@media (max-width: 640px) {
  .cookie-baner { bottom: 0; border-radius: 18px 18px 0 0; width: 100vw; padding: 16px; }
  .cookie-baner-akcje { flex-direction: row; width: 100%; min-width: 0; }
}
.przypomnienie-pasek { height: 10px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--border); overflow: hidden; }
.przypomnienie-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--zielen-gleboka), var(--zielen-pastel)); }
.przypomnienie-podpis { margin-top: 8px; font-size: 0.8rem; color: var(--grigio); }
.kartka-podpis-marki {
  margin-top: 14px; text-align: center;
  font-size: 0.68rem; letter-spacing: 0.06em; color: var(--muted-light);
}
.kartka-podpis-marki a { color: inherit; text-decoration: none; font-weight: 700; }
.kartka-podpis-marki a:hover { color: var(--oro); text-decoration: underline; }
.kartka-cwicz { margin-top: 14px; }
.kartka-cwicz .btn { width: auto; margin: 0; padding: 11px 18px; font-size: 0.86rem; }
.limit-opis b { color: var(--testo); }
.tekst-lista-otworz {
  margin-left: auto; border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 0.74rem; font-weight: 800; color: var(--oro);
  letter-spacing: 0.02em; padding: 2px 0;
}
.tekst-lista-otworz:hover { text-decoration: underline; }
.tekst-lista-otworz .ico { margin: 0 0 0 1px; vertical-align: -0.2em; }
[dir="rtl"] .tekst-lista-otworz .ico { transform: scaleX(-1); }
.tekst-lista-otworz.hidden { display: none; }
.tekst-lista-ile { font-size: 0.8rem; font-weight: 700; color: var(--grigio); margin-left: 6px; }
#tekstyListaBody .tekst-wiersz { padding: 13px 16px; }

.kartka-pasek { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.kartka-wroc {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--border-2); background: var(--card-bg); color: var(--testo);
  font-size: 1rem; line-height: 1; transition: var(--transition);
}
.kartka-wroc:hover { border-color: var(--oro); transform: translateX(-2px); }
.kartka-tytul-blok { flex: 1; min-width: 0; }
.kartka-tytul, .kartka-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kartka-tytul { font-weight: 800; font-size: 1.05rem; }
.kartka-meta { font-size: 0.75rem; color: var(--grigio); margin-top: 2px; }
.pochodzenie-pytanie { font-size: 0.78rem; font-weight: 800; color: var(--grigio); }
.pochodzenie-btn { width: auto; margin: 0; padding: 7px 12px; font-size: 0.76rem; }
.kartka-akcje { display: flex; gap: 8px; flex-shrink: 0; }
.kartka-postep { height: 5px; border-radius: 999px; background: var(--border); overflow: hidden; margin-bottom: 16px; }
.kartka-postep-fill {
  height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, var(--zielen-gleboka), var(--zielen-pastel));
  transition: width 0.45s cubic-bezier(.22,1,.36,1);
}

.kartka {
  position: relative; border-radius: 16px; padding: 34px 30px;
  background-color: var(--card-bg);
  background-image:
    linear-gradient(var(--kratka-linia) 1px, transparent 1px),
    linear-gradient(90deg, var(--kratka-linia) 1px, transparent 1px);
  background-size: var(--kartka-krok, 26px) var(--kartka-krok, 26px);
  box-shadow: var(--shadow);
  border: 1px solid var(--border-warm-soft);
}
.kartka::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 52px; width: 1px;
  background: color-mix(in srgb, var(--rosso) 35%, transparent);
}

.kartka-akapit {
  padding-left: 36px;
  font-size: var(--kartka-pismo, 1.02rem); font-weight: 600;
  line-height: var(--kartka-krok, 26px); color: var(--testo);
}
.kartka-akapit + .kartka-akapit { margin-top: 26px; }

.kartka-segment {
  cursor: pointer; border-radius: 4px; transition: background 0.2s ease;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.kartka-segment.zrobione { cursor: default; }
.kartka-segment:not(.zrobione):hover { background: color-mix(in srgb, var(--oro) 18%, transparent); }

.kartka-segment.aktywny {
  display: block; border-radius: 0;
  margin: 13px 0; padding-left: 13px;
  background: transparent; box-shadow: inset 3px 0 0 var(--oro);
}
.kartka-segment.aktywny .kartka-zrodlo,
.kartka-segment.aktywny .kartka-tlumaczenie { display: block; }
.kartka-segment.aktywny .kartka-tlumaczenie::before { display: none; }
.kartka-segment.aktywny .kartka-zrodlo { color: var(--tekst-neutralny); }

.kartka-zrodlo { transition: color 0.4s ease; }

.kartka-tlumaczenie {
  font-size: 0.843em; font-weight: 500; color: var(--grigio); margin-right: 3px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.kartka-tlumaczenie::before {
  content: ''; display: inline-block; width: 2px; height: 0.9em;
  margin: 0 6px -1px 4px; border-radius: 1px;
  background: color-mix(in srgb, var(--primary) 40%, transparent);
}
.kartka.wersami .kartka-segment { display: block; }
.kartka.wersami .kartka-tlumaczenie { display: block; }
.kartka.wersami .kartka-tlumaczenie::before { display: none; }

.kartka-wskazowka {
  display: flex; align-items: center; gap: 7px; margin: -6px 0 12px 2px;
  font-size: 0.76rem; font-weight: 600; color: var(--muted-light);
}
.kartka-wskazowka .ico { margin: 0; font-size: 0.85rem; }
.kartka-wskazowka.hidden { display: none; }


.czesc-zle {
  text-decoration: underline wavy var(--rosso);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.trudne-fraza, .ai-wstawka {
  text-decoration: underline;
  text-decoration-color: var(--rosso);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
}
.czesc-zle { background: color-mix(in srgb, var(--rosso) 9%, transparent); border-radius: 4px; }

.kartka-segment.zrobione .kartka-zrodlo {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-decoration-color: var(--border-2);
  text-decoration-skip-ink: none;
}

.ai-wstawka::after {
  content: '✦';
  font-size: 0.58em; vertical-align: 0.55em; margin-left: 2px;
  color: var(--ai-wstawka-znak); opacity: 0.9;
  display: inline-block; text-decoration: none;
}
.kartka-proba { margin-top: 0; display: flex; flex-direction: column; gap: 8px; }
.proba-linia { line-height: 26px; }
.proba-pole {
  outline: none; border: none; background: transparent; color: var(--testo);
  font-family: inherit; font-size: 1.02rem; font-weight: 600; line-height: 26px;
  caret-color: var(--oro);
  overflow-wrap: anywhere;
}
.proba-pole:empty::before {
  content: ''; display: inline-block; width: 2px; height: 15px; margin-right: 5px;
  vertical-align: -2px; background: var(--oro);
  animation: kursorProby 1.05s step-end infinite;
}
.proba-pole:empty { caret-color: transparent; }
.proba-pole:empty::after {
  content: attr(data-pusty);
  color: var(--testo); font-weight: 500; opacity: 0.3;
}
@keyframes kursorProby { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .proba-pole:empty::before { animation: none; } }
.proba-ikony { white-space: nowrap; }   
.proba-ikona {
  width: 24px; height: 24px; margin-left: 6px; vertical-align: -6px; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem;
  border: 1px solid var(--border-2); background: var(--card-bg); color: var(--grigio);
  transition: var(--transition);
}
.proba-ikona .ico { margin: 0; }
.proba-ikona.ok:hover  { border-color: var(--verde); color: var(--verde); transform: scale(1.1); }
.proba-ikona.nie:hover { border-color: var(--rosso); color: var(--rosso); transform: scale(1.1); }
.proba-ikona:disabled { opacity: 0.5; cursor: default; transform: none; }
.proba-ikona.mik:hover { border-color: var(--primary); color: var(--primary); transform: scale(1.1); }
.proba-ikona.mik.slucha, .proba-ikona.mik.slucha:hover {
  background: var(--rosso); border-color: var(--rosso); color: #FFFFFF;
  transform: scale(calc(1 + var(--moc, 0) * 0.35));
  box-shadow: 0 0 0 calc(var(--moc, 0) * 8px) color-mix(in srgb, var(--rosso) 25%, transparent);
}
.proba-ikona.mik.mysli { border-color: var(--primary); color: var(--primary); animation: dyktandoPuls 0.8s ease-in-out infinite; }
@keyframes dyktandoPuls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
.proba-pole.dyktando-niepewne { color: var(--grigio); }
@media (prefers-reduced-motion: reduce) { .proba-ikona.mik.mysli { animation: none; } .proba-ikona.mik.slucha { transform: none; } }
.czesc { border-radius: 4px; padding: 1px 2px; }
.proba-czesci { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 0.78rem; }
.czesci-licznik { font-weight: 800; color: var(--zielen-gleboka); }
.czesc-wiersz { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.czesc-wiersz .ico { margin: 0; font-size: 0.72rem; }
.czesc-wiersz.ok  { color: var(--zielen-gleboka); }
.czesc-wiersz.zle { color: var(--rosso); }

.proba-wyjscie { font-size: 0.78rem; }
.proba-wyjscie-koszt { font-weight: 800; opacity: 0.75; }
.kartka-dociagniete {
  margin-left: 5px; padding: 0 4px; border-radius: 4px; cursor: help;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; vertical-align: 0.35em;
  color: var(--muted-light); background: var(--bg-soft);
}

.kartka-stopka { margin-top: 18px; }

@media (max-width: 768px) {
  .kartka { padding: 22px 16px; background-size: 22px 22px; }
  .kartka::before { left: 30px; }
  .kartka-akapit { padding-left: 28px; font-size: 0.98rem; }
  [dir="rtl"] .kartka-akapit { padding-left: 0; padding-right: 28px; }
  .kartka-tlumaczenie { font-size: 0.85rem; }
  .mode-tab-menu { min-width: 180px; }
}


#widokMowienia { --mow-ease: cubic-bezier(.42, 0, .58, 1); }
.mow-uklad { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
.mow-scena {
  position: relative; min-height: 560px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 64px 16px 40px; overflow: hidden;
}
.mow-scena.wybor { justify-content: flex-start; padding-top: 28px; }
.mow-scena.wybor > :not(.mow-mapa) { display: none !important; }
.mow-mapa { width: 100%; max-width: 760px; animation: mowWejscie .5s var(--mow-ease); }
.mow-mapa-powrot, .tryb-powrot { display: flex; width: fit-content; margin: 0 0 12px; margin-inline-end: auto; }
[dir="rtl"] .mow-mapa-powrot .ico, [dir="rtl"] .tryb-powrot .ico { transform: scaleX(-1); }
.mow-mapa-tytul { font-size: clamp(1.15rem, 2.6vw, 1.45rem); font-weight: 500; color: var(--testo); margin-bottom: 6px; }
.mow-mapa-opis { font-size: 0.92rem; line-height: 1.5; color: var(--grigio); margin-bottom: 22px; }
.mow-mapa-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; text-align: left; }
@media (max-width: 640px) { .mow-mapa-lista { grid-template-columns: minmax(0, 1fr); } }
.mow-kafelek {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px; text-align: left;
  padding: 16px 16px 14px; border-radius: 16px; cursor: pointer; font: inherit;
  background: var(--card-bg); color: var(--testo); border: 1px solid var(--border-warm-soft);
  transition: border-color .2s var(--mow-ease), transform .15s var(--mow-ease), box-shadow .2s var(--mow-ease);
}
.mow-kafelek:hover, .mow-kafelek:focus-visible { border-color: var(--primary); box-shadow: var(--shadow-hover); transform: translateY(-2px); outline: none; }
.mow-kafelek-foto { position: relative; display: block; margin: -16px -16px 2px; height: 128px; overflow: hidden; border-radius: 15px 15px 0 0; background: var(--bg-soft); }
.mow-kafelek-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.znak-si.mow-znak-ai { position: absolute; right: 8px; bottom: 8px; }
.znak-si.mow-znak-ai .znak-si-dymek { left: auto; right: 0; }
.mow-kafelek-glowa { display: flex; align-items: center; gap: 10px; }
.mow-kafelek-glowa .ico { font-size: 1.35rem; color: var(--primary); margin: 0; }
.mow-kafelek-glowa b { font-size: 1.02rem; font-weight: 600; line-height: 1.3; flex: 1; min-width: 0; }
.mow-cefr { font-size: 0.68rem; font-weight: 700; letter-spacing: .05em; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--verde); color: var(--verde); }
.mow-kafelek-t { font-size: 0.86rem; color: var(--grigio); margin-top: -4px; }
.mow-kafelek-opis { font-size: 0.85rem; line-height: 1.45; color: var(--grigio); }
.mow-kafelek-slowka { display: flex; flex-wrap: wrap; gap: 5px; }
.mow-chip { font-size: 0.76rem; padding: 2px 9px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--border-warm-soft); color: var(--grigio); }
.mow-chip.cichy { border-style: dashed; }
.mow-chip.zn { border-width: 1.5px; font-weight: 600; }
.mow-chip.zn::before { content: ""; width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 5px; vertical-align: 1px; }
.mow-chip.zn-latwe   { border-color: var(--chart-latwe); color: var(--testo); }
.mow-chip.zn-latwe::before   { background: var(--chart-latwe); }
.mow-chip.zn-srednie { border-color: var(--primary); color: var(--testo); }
.mow-chip.zn-srednie::before { background: var(--primary); }
.mow-chip.zn-trudne  { border-color: var(--rosso); color: var(--testo); }
.mow-chip.zn-trudne::before  { background: var(--rosso); }
.mow-chip.zn-nowe    { border-color: var(--border-2); }
.mow-chip.zn-nowe::before    { background: var(--border-2); }
.mow-legenda { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.72rem; color: var(--grigio); padding: 2px 0; }
.mow-legenda span { display: inline-flex; align-items: center; gap: 5px; }
.mow-legenda i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.mow-legenda i.legenda-latwe { background: var(--chart-latwe); }
.mow-legenda i.legenda-srednie { background: var(--primary); }
.mow-legenda i.legenda-trudne { background: var(--rosso); }
.mow-legenda i.legenda-nowe { background: var(--border-2); }
.mow-kafelek-stopka { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.78rem; color: var(--muted-light); margin-top: 2px; }
.mow-kafelek-meta { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mow-kafelek-znasz { font-weight: 700; color: var(--grigio); }
.mow-kafelek-znasz.duzo { color: var(--verde); }
.mow-kafelek-fiszki {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-2); background: transparent; color: var(--grigio); font: inherit; font-size: 0.72rem; font-weight: 600;
}
.mow-kafelek-fiszki:hover { border-color: var(--oro); color: var(--oro); }
.mow-kafelek-fiszki .ico { margin: 0; font-size: 0.78rem; }
.mow-sugestie { display: none; flex-direction: column; align-items: center; gap: 10px; margin-top: 18px; width: 100%; }
.mow-sugestie.wl { display: flex; }
.mow-sugestie-tytul { font-size: 0.82rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--grigio); }
.mow-sugestie-lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.mow-sugestia {
  display: flex; align-items: center; gap: 10px; max-width: 280px; padding: 9px 14px 9px 10px;
  border: 1px solid var(--border-warm-soft); border-radius: 14px; background: var(--card-bg); color: var(--testo);
  font: inherit; text-align: left; cursor: pointer; transition: var(--transition);
}
.mow-sugestia:hover { border-color: var(--oro); transform: translateY(-2px); }
.mow-sugestia .ico { margin: 0; font-size: 1.1rem; color: var(--primary); }
.mow-sugestia-txt { display: flex; flex-direction: column; min-width: 0; }
.mow-sugestia-tytul { font-weight: 700; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mow-sugestia-meta { font-size: 0.74rem; color: var(--grigio); }
.mow-sugestia-meta b { color: var(--verde); }
.tekst-stopka { display: none; flex-direction: column; align-items: center; gap: 10px; margin-top: 28px; }
.tekst-stopka.wl { display: flex; }
.mow-bok-rozdzka {
  margin-left: auto; width: 26px; height: 26px; padding: 0; border: none; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center; transition: var(--transition);
}
.mow-bok-rozdzka:hover { background: var(--bg-soft); }
.mow-bok-rozdzka .ico { margin: 0; font-size: 0.95rem; }
.mow-bok-wiecej {
  display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%;
  padding: 10px 14px; margin-top: 2px; cursor: pointer;
  background: var(--bg-soft); border: 1.5px solid var(--border-warm-soft); border-radius: 999px;
  font-family: inherit; font-size: 0.82rem; font-weight: 700; color: var(--testo); transition: var(--transition);
}
.mow-bok-wiecej:hover { border-color: var(--oro); }
.mow-bok-wiecej:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
.mow-bok-wiecej .ico { margin: 0; font-size: 1rem; }
.mow-naglowek-pokrycie {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--border-2); color: var(--grigio); font-size: 0.72rem; font-weight: 700;
}
.mow-naglowek-pokrycie .ico { margin: 0; font-size: 0.76rem; }
.mow-naglowek-pokrycie.pelne { border-color: var(--verde); color: var(--verde); }
.mow-test-wejscie, .mow-test-przerwij {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px 5px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-warm-soft); background: var(--card-bg); font: inherit; font-size: 0.76rem; font-weight: 700;
}
.mow-test-wejscie { color: var(--oro); }
.mow-test-wejscie:hover, .mow-test-wejscie:focus-visible { border-color: var(--oro); }
.mow-test-wejscie[disabled] { opacity: .6; cursor: progress; }
.mow-test-przerwij { color: var(--grigio); }
.mow-test-przerwij:hover, .mow-test-przerwij:focus-visible { color: var(--testo); border-color: var(--primary); }
.mow-test-wejscie .ico, .mow-test-przerwij .ico { margin: 0; font-size: 0.8rem; }
.mow-test-postep {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--oro); color: var(--oro); font-size: 0.72rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.mow-test-postep .ico { margin: 0; font-size: 0.76rem; }
.mow-test-zasady { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.mow-test-zasady li { display: flex; gap: 8px; align-items: flex-start; font-size: 0.92rem; font-weight: 600; line-height: 1.45; color: var(--om-tekst2); }
.mow-test-zasady .ico { flex: none; margin: 3px 0 0; font-size: 0.85rem; }
.mow-poziomy-pills { display: inline-flex; gap: 5px; }
.mow-poziom-pill {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border-2); background: var(--card-bg);
  color: var(--grigio); font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: background .2s var(--mow-ease), color .2s var(--mow-ease), border-color .2s var(--mow-ease);
}
.mow-poziom-pill .ico { margin: 0; font-size: 0.75rem; }
.mow-poziom-pill:hover { border-color: var(--primary); color: var(--testo); }
.mow-poziom-pill.ukonczony { border-color: var(--verde); color: var(--verde); }
.mow-poziom-pill.aktywny { background: var(--primary); border-color: var(--primary); color: #fff; }
.mow-poziom-pill.zablokowany { opacity: .55; cursor: not-allowed; }
.mow-naglowek {
  position: absolute; top: 12px; left: 8px; right: 150px; z-index: 2;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; text-align: left;
  font-size: 0.82rem; color: var(--grigio);
}
.mow-naglowek-mapa {
  display: inline-flex; align-items: center; gap: 2px; padding: 6px 10px 6px 6px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-warm-soft); background: var(--card-bg); color: var(--grigio); font: inherit; font-size: 0.8rem; font-weight: 600;
}
.mow-naglowek-mapa:hover { color: var(--testo); border-color: var(--primary); }
.mow-naglowek-mapa .ico { margin: 0; }
.mow-naglowek-tytul { font-weight: 600; color: var(--testo); }
.mow-naglowek-tytul .ico { color: var(--primary); margin: 0 2px 0 0; }
.mow-srodek {
  width: 100%; min-height: 6rem; margin-bottom: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
}
.mow-gora {
  max-width: 680px; max-height: 4.8em; overflow: hidden; padding: 0 18px;
  display: flex; align-items: flex-end; justify-content: center;
  font-size: 1.1rem; line-height: 1.6; color: var(--grigio);
}
.mow-gora-txt { max-width: 680px; }
.mow-gora-x { flex: 0 0 auto; margin-left: 6px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--grigio); opacity: .55; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; line-height: 1; }
.mow-gora-x:hover, .mow-gora-x:focus-visible { opacity: 1; background: var(--muted-light); }
.mow-gora-x .ico { margin: 0; font-size: 0.85rem; }
.mow-cwiczenie-slot:empty { display: none; }
.mow-cwiczenie-slot .mow-cwiczenie { margin-bottom: 8px; padding: 0 12px; }
.mow-srodek.z-cwiczeniem { min-height: 8.5rem; }
.mow-srodek.z-cwiczeniem .mow-gora { max-height: 1.6em; font-size: 0.95rem; width: 100%; min-width: 0; }
.mow-srodek.z-cwiczeniem .mow-gora-txt { white-space: nowrap; max-width: none; }
.mow-gora.przewija {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 1.4em);
          mask-image: linear-gradient(to bottom, transparent, #000 1.4em);
}
.mow-srodek.z-cwiczeniem .mow-gora.przewija {
  justify-content: flex-end;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 22%);
          mask-image: linear-gradient(to right, transparent, #000 22%);
}
.mow-gora .niepewne { color: var(--muted-light); }
.mow-gora-cisza { display: inline-flex; gap: 5px; align-items: center; padding-top: 6px; }
.mow-gora-cisza i { width: 4px; height: 4px; border-radius: 50%; background: var(--muted-light); animation: mowTetno 1.4s var(--mow-ease) infinite; }
.mow-gora-cisza i:nth-child(2) { animation-delay: .2s; }
.mow-gora-cisza i:nth-child(3) { animation-delay: .4s; }
@keyframes mowTetno { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.mow-zaczep { max-width: 560px; margin-bottom: 0; line-height: 1.5; animation: mowWejscie .6s var(--mow-ease); }
.mow-zaczep.znika { animation: mowGasnie .28s var(--mow-ease) forwards; }
.mow-zaczep:empty { display: none; }
.mow-instrukcja-etykieta { display: block; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-light); margin-bottom: 4px; }
.mow-krok { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 0.7rem; letter-spacing: normal; text-transform: none;
  background: color-mix(in srgb, var(--oro) 14%, transparent); color: var(--testo); font-weight: 600; vertical-align: 1px; }
.mow-instrukcja { font-size: clamp(1.05rem, 2.3vw, 1.3rem); font-weight: 500; color: var(--testo); }
.mow-instrukcja-wiersz { display: inline; }
.mow-instrukcja-wiersz .mow-glos { margin-left: 4px; }
.mow-zaczep-tlum { display: block; margin-top: 4px; font-size: 0.9rem; line-height: 1.4; color: var(--grigio); animation: mowWejscie .2s var(--mow-ease); }
@keyframes mowWejscie { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes mowGasnie  { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-6px); } }
.mow-dymki {
  min-height: 62px; display: flex; align-items: flex-end; justify-content: center;
  gap: 8px 14px; flex-wrap: wrap; padding: 0 8px;
}
.mow-dymek {
  position: relative;
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--bg-soft); border: none; padding: 7px 12px; border-radius: 999px; font: inherit;
  font-size: 0.98rem; line-height: 1.35; color: var(--testo); max-width: 260px;
  animation: mowPrzylot .45s var(--mow-ease) both; transition: background .25s var(--mow-ease);
}
.mow-dymek.uzyty { box-shadow: inset 0 0 0 1px color-mix(in srgb, #f5b800 55%, transparent); }
.mow-gwiazda { position: absolute; top: -7px; right: 6px; color: #f5b800; font-size: .78rem; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.mow-gwiazda::before { margin: 0; }
.mow-plus {
  position: absolute; top: -8px; left: 6px; padding: 1px 6px; border-radius: 999px;
  background: var(--verde); color: var(--na-akcencie); font-size: .68rem; font-weight: 700; line-height: 1.5;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
.mow-pomin {
  position: absolute; bottom: -9px; right: 6px; width: 22px; height: 22px; padding: 0; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font: inherit; font-size: .72rem; line-height: 1;
  background: var(--card-bg); color: var(--muted-dark); border: 1px solid color-mix(in srgb, #f5b800 60%, transparent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .16); transition: transform .15s var(--mow-ease), color .15s, background .15s;
}
.mow-pomin:hover, .mow-pomin:focus-visible { color: var(--testo); background: color-mix(in srgb, #f5b800 22%, var(--card-bg)); transform: scale(1.12); }
.mow-dymek.pominiety { background: color-mix(in srgb, #f5b800 24%, var(--bg-soft)); box-shadow: inset 0 0 0 2px color-mix(in srgb, #f5b800 70%, transparent); }
.mow-klawisz { font: inherit; font-size: .72rem; font-weight: 700; line-height: 1.3; padding: 0 5px; margin-left: 2px; border-radius: 4px;
  border: 1px solid var(--border); color: var(--muted-dark); }
.mow-dymek:nth-child(2) { animation-delay: .07s; }
.mow-dymek:nth-child(3) { animation-delay: .14s; }
.mow-dymek:nth-child(4) { animation-delay: .21s; }
.mow-dymek-tekst { display: inline; }
.mow-dymek .mow-glos { padding: 0 4px; font-size: 0.85em; }
.mow-dymek-pl { display: none; font-size: 0.78rem; color: var(--muted-light); line-height: 1.3; }
.mow-dymek.pokaz-pl .mow-dymek-pl { display: block; animation: mowWejscie .2s var(--mow-ease); }
.mow-dymek, .mow-dymek.slowa { cursor: pointer; }
.mow-dymek:hover { background: color-mix(in srgb, var(--primary) 10%, var(--bg-soft)); }
.mow-dymek.po-naszemu { cursor: default; }
.mow-dymek.po-naszemu:not(.trafiony):hover { background: var(--bg-soft); }
.mow-dymek.po-naszemu .mow-dymek-tekst { font-style: italic; }
.mow-dymek.trafiony { background: color-mix(in srgb, var(--verde) 18%, var(--bg-soft)); }
.mow-dymek-cel { display: block; font-style: normal; font-weight: 600; color: var(--verde); animation: mowWejscie .2s var(--mow-ease); }
.mow-dymek.duch { background: transparent; box-shadow: inset 0 0 0 1.5px var(--border); color: var(--muted-light); min-width: 118px; }
.mow-dymek.duch.uzyty { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #f5b800 55%, transparent); }
.mow-dymek.duch:hover, .mow-dymek.duch:focus-visible { background: var(--bg-soft); color: var(--muted-dark); outline: none; }
.mow-duch-tekst { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; letter-spacing: .02em; }
.mow-duch-tekst .ico, .mow-duch-dalej .ico { margin: 0; font-size: .9em; }
.mow-dymek.po-naszemu.odkryty { cursor: pointer; }
.mow-dymek.po-naszemu.odkryty:hover, .mow-dymek.po-naszemu.odkryty:focus-visible { background: color-mix(in srgb, var(--primary) 10%, var(--bg-soft)); outline: none; }
.mow-duch-dalej { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-style: normal; color: var(--muted-light); }
.mow-dymki.cicho .mow-dymek { animation: none; }
.mow-dymki.cicho .mow-dymek.odslona { animation: mowWejscie .25s var(--mow-ease); }
.mow-wybor { display: inline-block; padding: 0 8px; margin: 0 2px; border: 1.5px dashed var(--verde); border-radius: 999px;
  color: var(--verde); font-weight: 800; font-size: .82em; line-height: 1.55; white-space: nowrap; vertical-align: baseline; font-style: normal; }
.mow-wybor-wartosc { font-weight: 800; color: var(--verde); }
.mow-dymki.znika .mow-dymek { animation: mowGasnie .22s var(--mow-ease) forwards; }
@keyframes mowPrzylot { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
.mow-mik-obszar { position: relative; width: 116px; height: 116px; }
.mow-fala {
  position: absolute; inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px);
  pointer-events: none; color: var(--muted-light);
}
.mow-odliczanie {
  position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px);
  pointer-events: none; transform: rotate(-90deg); opacity: 0; transition: opacity .2s var(--mow-ease);
}
.mow-odliczanie circle {
  fill: none; stroke: var(--primary); stroke-width: 3.5; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
}
.mow-mik-obszar.odlicza .mow-odliczanie { opacity: 1; }
.mow-mik-obszar.odlicza .mow-odliczanie circle { animation: mowOdlicz 2s linear forwards; }
@keyframes mowOdlicz { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.mow-mik {
  position: absolute; inset: 14px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--bg-soft); color: var(--testo);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 calc(var(--moc, 0) * 12px) color-mix(in srgb, var(--testo) 8%, transparent);
  transition: background .25s var(--mow-ease), color .25s var(--mow-ease), transform .15s var(--mow-ease), opacity .25s var(--mow-ease);
}
.mow-mik .ico { font-size: 1.7rem; line-height: 1; margin: 0; }
.mow-mik:hover:not(:disabled) { background: var(--border-warm-soft); }
.mow-mik:active:not(:disabled) { transform: scale(.94); }
.mow-mik:disabled { color: var(--muted-light); cursor: default; }
.mow-mik.slucha, .mow-mik.slucha:hover { background: var(--verde); color: var(--na-akcencie); }
.mow-mik.mysli .ico { animation: glosMysli 0.9s ease-in-out infinite; }
.mow-mik.laczy .ico { animation: glosMysli 0.9s ease-in-out infinite; }
.mow-mik-obszar.lektor .mow-mik {
  opacity: 0; transform: scale(.6); pointer-events: none;
  visibility: hidden;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .25s var(--mow-ease), visibility 0s linear .3s;
}
.mow-mik-obszar.lektor .mow-fala, .mow-mik-obszar.lektor .mow-odliczanie { opacity: 0; visibility: hidden; }
.mow-lektor {
  position: absolute; inset: 14px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  opacity: 0; transform: scale(.6); pointer-events: none; visibility: hidden;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .25s var(--mow-ease), visibility 0s linear .3s;
}
.mow-lektor:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.mow-mik-obszar.lektor .mow-lektor { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.mow-kropka { width: 12px; height: 12px; border-radius: 99px; background: var(--marka-zielony); flex: none; }
.mow-kropka:nth-child(2) { background: var(--marka-czerwony); }
.mow-kropka:nth-child(3) { background: var(--marka-niebieski); }
.mow-mik-obszar.lektor .mow-kropka { animation: mowLektorFala .8s ease-in-out infinite; }
.mow-mik-obszar.lektor .mow-kropka:nth-child(2) { animation-delay: .18s; }
.mow-mik-obszar.lektor .mow-kropka:nth-child(3) { animation-delay: .36s; }
@keyframes mowLektorFala { 0%, 100% { height: 12px; } 50% { height: 28px; } }
.mow-mik-obszar.dalej .mow-mik {
  opacity: 0; transform: scale(.6); pointer-events: none; visibility: hidden;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .25s var(--mow-ease), visibility 0s linear .3s;
}
.mow-mik-obszar.dalej .mow-fala, .mow-mik-obszar.dalej .mow-odliczanie { opacity: 0; visibility: hidden; }
.mow-dalej {
  position: absolute; inset: 14px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--oro); color: var(--na-akcencie); font: inherit; font-size: 0.82rem; font-weight: 800;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  opacity: 0; transform: scale(.6); pointer-events: none; visibility: hidden;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .25s var(--mow-ease), visibility 0s linear .3s;
}
.mow-dalej .ico { font-size: 1.5rem; line-height: 1; margin: 0; }
.mow-dalej:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.mow-mik-obszar.dalej .mow-dalej { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.mow-mik-obszar.dalej .mow-dalej:hover { filter: brightness(1.06); }
.mow-mik-obszar.dalej .mow-dalej:active { transform: scale(.94); }
.mow-linia { display: grid; margin-top: 20px; min-height: 2.4rem; width: 100%; max-width: 680px; }
.mow-linia > * { grid-area: 1 / 1; transition: opacity .32s var(--mow-ease), transform .32s var(--mow-ease); }
.mow-linia .mow-status { margin-top: 0; align-self: center; }
.mow-linia:not(.z-statusem) .mow-status, .mow-linia.pusto .mow-status { opacity: 0; transform: translateY(-12px); pointer-events: none; }
.mow-linia.z-statusem .mow-pytanie, .mow-linia.pusto .mow-pytanie { opacity: 0; transform: translateY(12px); pointer-events: none; visibility: hidden; }
.mow-status {
  margin-top: 20px; min-height: 1.5em; font-size: 0.95rem; line-height: 1.4;
  color: var(--grigio); animation: mowWejscie .35s var(--mow-ease);
}
.mow-status.ok { color: var(--verde); font-weight: 600; }
.mow-status.powtorz { color: var(--testo); font-weight: 600; font-size: 1.05rem; }
.mow-status.cicho { color: var(--muted-light); font-style: italic; }
.mow-status-cichy { margin-top: 6px; font-size: 0.82rem; color: var(--muted-light); }
.mow-status-cichy:empty { display: none; }
.mow-status-cichy a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.mow-pytanie { display: flex; flex-direction: column; align-items: center; }
.mow-pytanie:empty { display: none; }
.mow-pytanie-wiersz { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 6px; }
.mow-bot { animation: mowWejscie .4s var(--mow-ease); }
.mow-bot-tekst { font-size: clamp(1.15rem, 2.6vw, 1.45rem); font-weight: 500; line-height: 1.45; color: var(--testo); }
.mow-bot-narzedzia { display: inline-flex; justify-content: center; gap: 0; }
.mow-bot-narzedzia .mow-glos { padding: 4px 6px; font-size: 1rem; }
.mow-glos { background: none; border: none; cursor: pointer; color: var(--muted-light); padding: 0 6px; font-size: .95em; vertical-align: middle; }
.mow-glos:hover { color: var(--testo); }
.mow-glos .ico { margin: 0; }
.mow-glos.wl { color: var(--primary); }
.mow-tempo { display: inline-flex; align-items: center; gap: 3px; }
.mow-tempo-liczba { font-size: 0.72rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.mow-bot-tlum { margin-top: 2px; font-size: 0.9rem; line-height: 1.45; color: var(--grigio); animation: mowWejscie .25s var(--mow-ease); }
.mow-tlum-wiersz { display: flex; justify-content: center; margin-top: 10px; }
.mow-tlum-przelacz {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px 6px 12px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 2px solid var(--border); color: var(--testo);
  font-family: var(--font-naglowek); font-weight: 700; font-size: 0.88rem; line-height: 1.2;
  transition: border-color .2s var(--mow-ease), background-color .2s var(--mow-ease);
}
.mow-tlum-przelacz .ico { margin: 0; font-size: 1.05rem; line-height: 1; }
.mow-tlum-przelacz:hover { border-color: var(--oro); }
.mow-tlum-przelacz:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
.mow-tlum-przelacz.wl { border-color: var(--oro); background: color-mix(in srgb, var(--oro) 12%, transparent); }
.mow-tlum-wiersz + .mow-bot-tlum { margin-top: 8px; }
.mow-bot-opis { max-width: 640px; margin: 0 auto; padding: 14px 18px; border-radius: 16px; text-align: left;
  background: color-mix(in srgb, #8b5cf6 9%, var(--card-bg)); border: 1px solid color-mix(in srgb, #8b5cf6 30%, transparent); }
.mow-bot-opis .mow-bot-tekst { font-size: clamp(0.98rem, 1.9vw, 1.14rem); font-weight: 400; }
.mow-bot-opis .mow-pytanie-wiersz { align-items: flex-start; }
.mow-opis-etykieta { display: block; font-size: 0.64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #8b5cf6; margin-bottom: 7px; }
.mow-karta { max-width: 620px; margin-top: 26px; }
.mow-karta:empty { display: none; }
.mow-karta.gasnie { animation: mowGasnie .35s var(--mow-ease) forwards; }
.mow-recenzja { font-size: 1rem; line-height: 1.55; color: var(--grigio); animation: mowWejscie .4s var(--mow-ease); }
.mow-rada { margin-top: 10px; display: inline-flex; gap: 8px; align-items: baseline; text-align: left; font-size: 0.92rem; line-height: 1.5; color: var(--testo); }
.mow-rada .ico { color: var(--oro); margin: 0; flex: none; }
.mow-xp-lot {
  position: fixed; z-index: 3000; pointer-events: none; transform: translate(-50%, -50%);
  font-weight: 900; font-size: 1.05rem; color: var(--zielen-gleboka); white-space: nowrap;
}
.mow-xp-trafienie { animation: mowXpTrafienie .55s var(--mow-ease); }
@keyframes mowXpTrafienie { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.18); } }
.mow-akcje { display: flex; gap: 14px 26px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 18px; min-height: 1.6em; }
.mow-akcje button {
  background: none; border: none; padding: 4px 2px; cursor: pointer; font: inherit; font-size: 0.9rem;
  color: var(--grigio); transition: color .2s var(--mow-ease);
}
.mow-akcje button:hover { color: var(--testo); }
.mow-akcje button.cichy { font-size: 0.82rem; color: var(--muted-light); }
.mow-akcja-koszt { font-size: 0.72rem; }
.mow-akcje .mow-btn-dalej {
  width: auto; margin: 0; padding: 10px 18px; border-radius: 999px;
  background: var(--oro); color: var(--na-akcencie); font-weight: 800;
  animation: mowWejscie .4s var(--mow-ease);
}
.mow-akcje .mow-btn-dalej:hover { background: var(--oro); color: var(--na-akcencie); filter: brightness(1.08); }
.mow-wszystko { font-weight: 600; color: var(--verde); }
.mow-cwiczenie { animation: mowWejscie .4s var(--mow-ease); }
.mow-cwiczenie-etykieta { display: block; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-light); margin-bottom: 8px; }
.mow-cwiczenie-uwaga { font-size: 0.86rem; line-height: 1.45; color: var(--grigio); }
.mow-cwiczenie-zdanie { font-size: clamp(1.2rem, 2.8vw, 1.6rem); font-weight: 500; line-height: 1.45; color: var(--testo); }
.mow-poprawka-karta {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  max-width: 620px; margin: 0 auto 8px; padding: 14px 40px 12px; border-radius: 18px;
  background: var(--card-bg); border: 1px solid var(--border-warm-soft); box-shadow: 0 6px 22px rgba(0,0,0,.06);
}
.mow-poprawka-pytanie { font-size: 0.88rem; font-weight: 600; color: var(--grigio); }
.mow-poprawka-karta .mow-cwiczenie-etykieta { margin: 2px 0 0; }
.mow-poprawka-x {
  position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: none; border: none; color: var(--muted-light); font-size: 1.1rem; transition: background .2s var(--mow-ease), color .2s var(--mow-ease);
}
.mow-poprawka-x:hover { background: var(--bg-soft); color: var(--testo); }
.mow-poprawka-x .ico { margin: 0; }
.mow-fragment-slowo { text-transform: uppercase; font-weight: 700; color: var(--oro); }
.mow-poprawka-blad {
  font-weight: 700; text-decoration: underline wavy var(--rosso); text-decoration-thickness: 2px;
  text-underline-offset: .22em; text-decoration-skip-ink: none;
}
.mow-pomylka-luka {
  display: inline-block; min-width: 1.7em; padding: 0 6px; margin: 0 1px; border: 1.5px dashed var(--rosso); border-radius: 999px;
  color: var(--rosso); font-weight: 700; line-height: 1.25; text-align: center; vertical-align: baseline;
}
.mow-pomylka-dalej { font-size: 0.76rem; line-height: 1.4; color: var(--muted-light); text-align: center; }
.mow-zmiana-zle {
  color: var(--grigio); text-decoration: line-through; text-decoration-color: var(--rosso); text-decoration-thickness: 2px;
}
.mow-zmiana-wstaw {
  display: inline; padding: 1px 8px; border-radius: 999px; font-weight: 700; color: var(--verde);
  background: color-mix(in srgb, var(--marka-zielony, #35A64D) 16%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--marka-zielony, #35A64D) 45%, transparent);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.mow-pomylka-karta.naprowadza .mow-cwiczenie-zdanie { line-height: 1.6; }
.mow-swobodna-kryteria { display: flex; align-items: flex-start; justify-content: center; gap: 6px; margin-top: 6px;
  font-size: 0.9rem; line-height: 1.45; color: var(--grigio); }
.mow-swobodna-kryteria .ico { margin: 3px 0 0; font-size: 0.8rem; color: var(--muted-light); }
.mow-swobodna { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; max-width: 620px; }
.mow-swobodna-zacheta { font-size: 0.82rem; line-height: 1.4; color: var(--muted-light); text-align: center; }
.mow-swobodna-przyklad-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  background: none; border: 1.5px dashed var(--border-warm-soft); color: var(--grigio); font: inherit; font-size: 0.86rem; font-weight: 600;
  transition: border-color .2s var(--mow-ease), color .2s var(--mow-ease);
}
.mow-swobodna-przyklad-btn:hover, .mow-swobodna-przyklad-btn:focus-visible { border-color: var(--oro); color: var(--testo); }
.mow-swobodna-przyklad-btn .ico { margin: 0; }
.mow-swobodna-przyklad {
  display: flex; flex-direction: column; gap: 4px; width: 100%; max-width: 560px; padding: 10px 14px; border-radius: 16px; text-align: left;
  background: var(--bg-soft); border: 1.5px dashed color-mix(in srgb, var(--oro) 40%, transparent); animation: mowWejscie .3s var(--mow-ease);
}
.mow-swobodna-przyklad-glowa { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-light); }
.mow-swobodna-schowaj { width: 26px; height: 26px; padding: 0; border: none; border-radius: 50%; background: none; color: var(--muted-light); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.mow-swobodna-schowaj:hover { background: var(--card-bg); color: var(--testo); }
.mow-swobodna-schowaj .ico { margin: 0; font-size: 0.85rem; }
.mow-swobodna-przyklad-tekst { font-size: 1rem; line-height: 1.5; color: var(--testo); }
.mow-swobodna-przyklad-tekst .mow-glos { margin-left: 4px; vertical-align: middle; }
.mow-swobodna-przyklad-pl { font-size: 0.86rem; line-height: 1.4; color: var(--grigio); }
.mow-swobodna-pasek { display: none; }
.mow-swobodna-pasek.wl { display: flex; justify-content: center; align-items: center; min-height: 42px; margin-top: 12px; }
.mow-skonczylem {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border: none; border-radius: 999px; cursor: pointer;
  background: var(--oro); color: var(--na-akcencie); font: inherit; font-size: 0.92rem; font-weight: 800; animation: mowWejscie .3s var(--mow-ease);
}
.mow-skonczylem:hover { filter: brightness(1.06); }
.mow-skonczylem:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.mow-skonczylem .ico { margin: 0; }
.mow-skonczylem-zegar { padding-left: 8px; border-left: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  font-weight: 600; font-variant-numeric: tabular-nums; opacity: .85; }
.mow-cwiczenie-slot .mow-ocena-karta { max-width: 680px; align-items: stretch; text-align: left; padding: 14px 22px; }
.mow-ocena-karta .mow-cwiczenie-etykieta { margin: 6px 0 0; }
.mow-ocena-werdykt { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; padding: 4px 12px; border-radius: 999px;
  font-size: 0.92rem; font-weight: 800; }
.mow-ocena-werdykt .ico { margin: 0; }
.mow-ocena-karta.zaliczone .mow-ocena-werdykt { color: var(--verde); background: color-mix(in srgb, var(--marka-zielony, #35A64D) 16%, transparent); }
.mow-ocena-karta.do-poprawy .mow-ocena-werdykt { color: var(--testo); background: color-mix(in srgb, #FFC83D 32%, transparent); }
.mow-ocena-karta.odrzucone .mow-ocena-werdykt { color: var(--rosso); background: color-mix(in srgb, var(--rosso) 13%, transparent); }
.mow-ocena-karta.bez-oceny .mow-ocena-werdykt { color: var(--grigio); background: var(--bg-soft); }
.mow-ocena-karta .mow-ocena-zdanie { font-size: clamp(1rem, 2.2vw, 1.18rem); line-height: 1.65; max-height: 32vh; overflow-y: auto; }
.mow-ocena-ladniej { font-size: 0.98rem; line-height: 1.5; font-style: italic; color: var(--testo); }
.mow-ocena-zdanie .mow-glos, .mow-ocena-ladniej .mow-glos { margin-left: 4px; vertical-align: middle; font-style: normal; }
.mow-ocena-uwaga { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; }
.mow-ocena-uwaga .ico { margin: 3px 0 0; color: var(--oro); }
.mow-ocena-uwaga-oko { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 4px 10px; border-radius: 999px;
  background: none; border: 1px solid var(--border-warm-soft); color: var(--grigio); font: inherit; font-size: 0.8rem; cursor: pointer; }
.mow-ocena-uwaga-oko:hover { color: var(--testo); border-color: var(--oro); }
.mow-ocena-uwaga-oko .ico { margin: 0; }
.mow-ocena-akcje { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.mow-ocena-ponownie { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  background: none; border: 1.5px solid var(--border-warm-soft); color: var(--testo); font: inherit; font-size: 0.86rem; font-weight: 700;
  transition: border-color .2s var(--mow-ease); }
.mow-ocena-ponownie:hover, .mow-ocena-ponownie:focus-visible { border-color: var(--oro); }
.mow-ocena-ponownie .ico { margin: 0; }
.mow-ocena-ponownie .mow-akcja-koszt { font-weight: 500; color: var(--muted-light); }
@media (max-width: 640px) {
  .mow-cwiczenie-slot .mow-ocena-karta { padding: 12px 14px; }
  .mow-ocena-karta .mow-ocena-zdanie { max-height: 28vh; }
  .mow-ocena-akcje { justify-content: center; }
}
.mow-czytanie { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding: 12px 14px; border-radius: 14px;
  background: var(--bg-soft); border: 1.5px solid color-mix(in srgb, var(--oro) 35%, transparent); }
.mow-czytanie.nowe { animation: mowWejscie .3s var(--mow-ease); }
.mow-czytanie-tytul { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 0.92rem; font-weight: 800; color: var(--testo); }
.mow-czytanie-licznik { font-size: 0.74rem; font-weight: 600; color: var(--muted-light); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mow-czytanie-zdanie { font-size: clamp(1.1rem, 2.6vw, 1.42rem); line-height: 1.6; }
.mow-czytanie-zdanie .mow-glos { margin-left: 4px; vertical-align: middle; }
.mow-czytanie-tlum { font-size: 0.95rem; line-height: 1.45; color: var(--grigio); animation: mowWejscie .25s var(--mow-ease); }
.mow-czytanie-zdanie .mow-oko[disabled] { opacity: .5; cursor: progress; }
@media (prefers-reduced-motion: reduce) { .mow-czytanie-tlum { animation: none; } }
.mow-ocena-karta.czyta .mow-ocena-zdanie { max-height: 18vh; font-size: 0.95rem; }
.mow-cwiczenie.cicho { animation: none; }
.mow-czytanie-pomin { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; cursor: pointer;
  background: none; border: 1.5px solid var(--border-warm-soft); color: var(--testo); font: inherit; font-size: 0.9rem; font-weight: 700;
  animation: mowWejscie .3s var(--mow-ease); transition: border-color .2s var(--mow-ease); }
.mow-czytanie-pomin:hover, .mow-czytanie-pomin:focus-visible { border-color: var(--oro); }
.mow-czytanie-pomin .ico { margin: 0; }
@media (prefers-reduced-motion: reduce) { .mow-swobodna-przyklad, .mow-skonczylem, .mow-czytanie.nowe, .mow-czytanie-pomin { animation: none; } }
.mow-fragment-cale {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 2px 10px; border-radius: 999px;
  background: none; border: 1px solid var(--border-warm-soft); color: var(--muted-light); font-size: 0.74rem; cursor: pointer;
  vertical-align: middle; transition: background .2s var(--mow-ease), color .2s var(--mow-ease);
}
.mow-fragment-cale:hover { background: var(--bg-soft); color: var(--testo); }
.mow-fragment-cale .ico { margin: 0; font-size: 0.9rem; }
.mow-historia-pusto { font-size: 0.86rem; color: var(--muted-light); line-height: 1.5; }
.mow-slowo { border-radius: 4px; }
.mow-dymek.slowa { cursor: pointer; }   
.mow-od-nowa {
  position: absolute; top: 12px; right: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-warm-soft); cursor: pointer;
  background: var(--card-bg); color: var(--grigio); font: inherit; font-size: 0.8rem; font-weight: 600;
  transition: color .2s var(--mow-ease), border-color .2s var(--mow-ease);
}
.mow-od-nowa:hover { color: var(--testo); border-color: var(--primary); }
.mow-od-nowa .ico { margin: 0; }
.mow-mapa-stopka { margin-top: 22px; display: none; flex-direction: column; align-items: center; gap: 10px; }
.mow-mapa-stopka.wl { display: flex; }
.mow-mapa-tworca-podpis { font-size: 0.8rem; color: var(--muted-light); }
.mow-tworca-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; cursor: pointer;
  border: 1px dashed var(--primary); background: var(--card-bg); color: var(--primary); font: inherit; font-size: 0.88rem; font-weight: 600;
  transition: background .2s var(--mow-ease), color .2s var(--mow-ease), border-style .2s var(--mow-ease);
}
.mow-tworca-btn:hover { background: var(--primary); color: #fff; border-style: solid; }
.mow-tworca-btn .ico { margin: 0; }
.mow-kafelek-moj {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--primary); background: transparent; color: var(--primary); font: inherit; font-size: 0.68rem; font-weight: 700; letter-spacing: .04em;
}
.mow-kafelek-moj:hover { background: var(--primary); color: #fff; }
.mow-kafelek-moj .ico { margin: 0; font-size: 0.7rem; }
.mow-fiszki-okno { position: fixed; inset: 0; z-index: 2600; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(15, 23, 42, .55); text-align: left; animation: mowWejscie .2s var(--mow-ease); }
.mow-fiszki-okno.hidden { display: none; }
.mow-fiszki-karta { display: flex; flex-direction: column; width: min(720px, 100%); max-height: min(78vh, 720px);
  background: var(--card-bg); color: var(--testo); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-hover); }
.mow-fiszki-glowa { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border-warm-soft); }
.mow-fiszki-tytul { font-size: 1.02rem; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.mow-fiszki-tytul .ico { color: var(--oro); margin: 0; }
.mow-mapa-czeka { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -8px 0 16px; padding: 10px 14px;
  border-radius: 12px; background: var(--bg-soft); border: 1px solid var(--border-warm-soft); font-size: 0.9rem; line-height: 1.45;
  text-align: left; font-weight: 400; color: var(--testo); }
.mow-mapa-czeka .spinner { width: 18px; height: 18px; border-width: 2px; flex: none; }
.mow-mapa-czeka span { flex: 1; min-width: 180px; }
.mow-fiszki-stopka { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--border-warm-soft); }
.tworca-usun-karta { width: min(520px, 100%); }
.tworca-usun-tytul .ico { color: var(--rosso); }
.tworca-usun-tresc { padding: 16px 18px; font-size: 0.9rem; line-height: 1.55; color: var(--grigio); }
.tworca-usun-tresc p { margin: 0 0 8px; }
.tworca-usun-nazwa { font-weight: 700; color: var(--testo); font-size: 1rem; }
.tworca-usun-karta .mow-fiszki-stopka { justify-content: flex-end; }
.mow-fiszki-stopka .btn { width: auto; margin: 0; padding: 9px 16px; }
@media (max-width: 560px) { .mow-fiszki-karta { max-height: 88vh; } }
.paletka-okno {
  position: fixed; inset: 0; z-index: 1990; display: flex; align-items: center; justify-content: center; padding: 12px;
  background: var(--zaslona); text-align: left; animation: paletkaTlo .22s ease both;
}
.paletka-okno.hidden { display: none; }
.paletka-karta {
  --pk-tlo: #35A64D; --pk-tekst: #17183B; --pk-tekst2: #17183B; --pk-akcent: #17183B; --pk-tor: rgba(23, 24, 59, 0.18);
  position: relative; display: flex; flex-direction: column; width: min(1180px, 100%); min-width: 0; max-height: min(96vh, 1040px); max-height: min(96dvh, 1040px);
  background: var(--crema); color: var(--testo); border-radius: 32px; overflow: hidden; outline: none;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6); animation: paletkaWejscie .34s cubic-bezier(.2, .9, .3, 1.15) both;
}
.paletka-karta.tryb-tekst { --pk-tlo: #2463E9; --pk-tekst: #FFFFFF; --pk-tekst2: #EEF3FF; --pk-akcent: #FFC83D; --pk-tor: rgba(255, 255, 255, 0.26); }
.paletka-karta.tryb-film  { --pk-tlo: #DB2727; --pk-tekst: #FFFFFF; --pk-tekst2: #FFFFFF; --pk-akcent: #FFC83D; --pk-tor: rgba(255, 255, 255, 0.28); }
.paletka-karta.tryb-zdjecie { --pk-tlo: #FFC83D; --pk-tekst: #17183B; --pk-tekst2: #2E3055; --pk-akcent: #17183B; --pk-tor: rgba(23, 24, 59, 0.18); }
@keyframes paletkaTlo { from { opacity: 0; } to { opacity: 1; } }
@keyframes paletkaWejscie { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
.paletka-bohater { position: relative; flex: none; padding: 14px 20px 16px; background: var(--pk-tlo); color: var(--pk-tekst); overflow: hidden; }
.paletka-bohater::before {
  content: ''; position: absolute; width: 340px; height: 340px; right: -110px; top: -170px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 68%); pointer-events: none;
}
.paletka-pasek { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.paletka-pasek .om-pigulka { max-width: calc(100% - 60px); }
.paletka-pasek .om-zamknij { margin-left: auto; }
.paletka-karta:is(.tryb-tekst, .tryb-film) .paletka-pasek .om-zamknij { background: #FFFFFF; color: #17183B; }
.paletka-glowa { position: relative; z-index: 1; display: flex; align-items: center; gap: 20px; margin-top: 8px; }
.paletka-glowa-tekst { flex: 1; min-width: 0; }
.paletka-nadtytul { margin: 0 0 4px; font-size: 0.78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pk-tekst2); opacity: .9; }
.paletka-tytul {
  margin: 0; font-family: var(--font-naglowek); font-weight: 800; font-size: 1.8rem; line-height: 1.05; letter-spacing: -0.02em;
  color: var(--pk-tekst); text-wrap: balance; overflow-wrap: anywhere;
}
.paletka-podtytul { margin: 6px 0 0; font-size: 0.86rem; font-weight: 700; color: var(--pk-tekst2); }
.paletka-tytul-olowek {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-inline-start: 10px; padding: 0;
  border: 0; border-radius: 50%; vertical-align: 6px; cursor: pointer; font-size: 0.95rem;
  background: color-mix(in srgb, var(--pk-tekst) 16%, transparent); color: var(--pk-tekst);
}
.paletka-tytul-olowek:hover { background: color-mix(in srgb, var(--pk-tekst) 28%, transparent); }
.paletka-tytul-olowek .ico { margin: 0; line-height: 1; }
.paletka-tytul.w-edycji { outline: 2px solid var(--pk-tekst); outline-offset: 4px; border-radius: 8px; cursor: text; }
.paletka-znasz { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.paletka-pierscien { position: relative; flex: none; width: 58px; height: 58px; }
.paletka-pierscien svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.paletka-pierscien circle { fill: none; stroke-width: 3.6; }
.paletka-pierscien .tor { stroke: var(--pk-tor); }
.paletka-pierscien .postep { stroke: var(--pk-akcent); stroke-linecap: round; transition: stroke-dasharray 1.1s cubic-bezier(.2, .8, .2, 1) .15s; }
.paletka-pierscien b {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-naglowek); font-weight: 800; font-size: 0.94rem; color: var(--pk-tekst); font-variant-numeric: tabular-nums;
}
.paletka-pierscien.laduje .tor { animation: paletkaMigot 1.2s ease-in-out infinite; }
.paletka-znasz-opis { display: flex; flex-direction: column; gap: 2px; font-size: 0.78rem; font-weight: 600; color: var(--pk-tekst2); }
.paletka-znasz-opis b { font-family: var(--font-naglowek); font-weight: 800; font-size: 0.94rem; color: var(--pk-tekst); }
.paletka-okladka {
  position: relative; flex: none; width: 178px; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden;
  border: 5px solid #FFFFFF; transform: rotate(3deg); background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 34px -16px rgba(0, 0, 0, 0.55); animation: paletkaOkladka .5s cubic-bezier(.2, .9, .3, 1.2) .08s both;
}
.paletka-okladka img { width: 100%; height: 100%; object-fit: cover; display: block; }
.paletka-okladka.bez { display: flex; align-items: center; justify-content: center; font-size: 3rem; color: var(--pk-tekst); background: rgba(255, 255, 255, 0.2); }
.paletka-okladka.bez .ico { margin: 0; }
@keyframes paletkaOkladka { from { opacity: 0; transform: rotate(9deg) translateY(10px) scale(.9); } to { opacity: 1; transform: rotate(3deg); } }
.paletka-narzedzia { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 10px 20px 8px; background: var(--crema); }
.paletka-narzedzia:empty { display: none; }
.paletka-zakladki { display: flex; gap: 8px; flex-wrap: wrap; }
.paletka-zakladka {
  display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 6px 0 14px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--border-2); background: var(--card-bg); color: var(--testo); font: inherit; font-size: 0.82rem; font-weight: 800;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.paletka-zakladka:hover { border-color: var(--oro); transform: translateY(-1px); }
.paletka-zakladka b {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-soft); color: var(--testo); font-size: 0.72rem; font-variant-numeric: tabular-nums;
}
.paletka-zakladka[aria-selected="true"] { background: var(--zolty); border-color: var(--zolty); color: #17183B; }
.paletka-zakladka[aria-selected="true"] b { background: #17183B; color: #FFFFFF; }
.paletka-rzad { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.paletka-szukaj { position: relative; flex: 1 1 220px; min-width: 0; max-width: 340px; }
.paletka-szukaj .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); margin: 0; color: var(--grigio); pointer-events: none; }
.paletka-szukaj input {
  width: 100%; min-height: 34px; padding: 0 12px 0 34px; border-radius: 999px; border: 1.5px solid var(--border-2);
  background: var(--card-bg); color: var(--testo); font: inherit; font-size: 0.84rem;
}
.paletka-szukaj input:focus { outline: none; border-color: var(--oro); }
.paletka-filtr {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 11px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--border-warm); background: transparent; color: var(--grigio); font: inherit; font-size: 0.74rem; font-weight: 700;
}
.paletka-filtr i { width: 9px; height: 9px; border-radius: 50%; background: var(--pk-zn, var(--szary-marki)); }
.paletka-filtr[aria-pressed="true"] { border-color: var(--oro); background: var(--bg-highlight); color: var(--testo); }
.paletka-rozpora { flex: 1; }
.paletka-mini {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border-radius: 999px; cursor: pointer;
  border: none; background: transparent; color: var(--testo); font: inherit; font-size: 0.76rem; font-weight: 700; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1.5px; text-decoration-color: var(--border-2);
}
.paletka-mini:hover { text-decoration-color: var(--oro); }
.paletka-mini .ico { margin: 0; }
.paletka-lista { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 20px 18px; }
.paletka-sekcja + .paletka-sekcja { margin-top: 16px; }
.paletka-sekcja-glowa { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 8px; flex-wrap: wrap; }
.paletka-sekcja-glowa h3 { margin: 0; font-family: var(--font-naglowek); font-weight: 800; font-size: 0.98rem; }
.paletka-sekcja-ile { font-size: 0.74rem; font-weight: 700; color: var(--grigio); font-variant-numeric: tabular-nums; }
.paletka-sekcja-glowa .paletka-mini { margin-left: auto; min-height: 28px; }
.paletka-siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.paletka-siatka.zdania { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.paletka-siatka.wyrazenia { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
.paletka-kafel {
  --pk-zn: transparent;
  position: relative; display: flex; flex-direction: column; gap: 2px; min-height: 66px; padding: 10px 34px 8px 14px;
  border-radius: 16px; background: var(--card-bg); border: 1.5px solid var(--border-warm); cursor: pointer; user-select: none;
  transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.paletka-lista.wchodzi .paletka-kafel { animation: paletkaKafel .38s cubic-bezier(.2, .9, .3, 1.2) backwards; animation-delay: var(--d, 0s); }
@keyframes paletkaKafel { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
.paletka-kafel:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.paletka-kafel:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.paletka-kafel::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--pk-zn); }
.paletka-kafel.zn-latwe, .paletka-filtr.zn-latwe { --pk-zn: var(--marka-zielony); }
.paletka-kafel.zn-srednie, .paletka-filtr.zn-srednie { --pk-zn: var(--marka-niebieski); }
.paletka-kafel.zn-trudne, .paletka-filtr.zn-trudne { --pk-zn: var(--marka-czerwony); }
.paletka-kafel.zn-nowe, .paletka-filtr.zn-nowe { --pk-zn: var(--szary-marki); }
.paletka-t { font-family: var(--font-naglowek); font-weight: 800; font-size: 0.98rem; line-height: 1.2; color: var(--testo); overflow-wrap: anywhere; }
.paletka-siatka.zdania .paletka-t { font-family: var(--font-tekst); font-weight: 700; font-size: 0.88rem; line-height: 1.38; }
.paletka-pl { font-size: 0.78rem; font-weight: 500; line-height: 1.32; color: var(--grigio); overflow-wrap: anywhere; }
.paletka-przyklad {
  margin-top: 3px; font-size: 0.72rem; font-style: italic; line-height: 1.38; color: var(--grigio);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.paletka-dol { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: auto; padding-top: 4px; min-height: 0; }
.paletka-mam, .paletka-poziom, .paletka-sekunda {
  display: inline-flex; white-space: nowrap; align-items: center; gap: 5px; font-size: 0.68rem; font-weight: 800; color: var(--grigio);
}
.paletka-mam .ico { margin: 0; color: var(--verde); }
.paletka-poziom i { width: 8px; height: 8px; border-radius: 50%; background: var(--pk-zn); }
.paletka-sekunda { padding: 1px 8px; border-radius: 999px; background: var(--bg-soft); font-variant-numeric: tabular-nums; }
.paletka-glos {
  position: absolute; right: 5px; bottom: 6px;
  flex: none; width: 26px; height: 26px; margin: 0; padding: 0; border: none; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; background: var(--bg-soft); color: var(--testo); font-size: 0.78rem;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.paletka-glos .ico { margin: 0; line-height: 1; }
.paletka-glos:hover { background: var(--oro); color: var(--na-akcencie); transform: scale(1.08); }
.paletka-glos.gra { background: var(--oro); color: var(--na-akcencie); }
.paletka-znacznik {
  position: absolute; top: 9px; right: 9px; width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--border-2); background: var(--card-bg); color: #17183B;
  transition: background .16s ease, border-color .16s ease;
}
.paletka-znacznik .ico { margin: 0; font-size: 0.64rem; line-height: 1; transform: scale(0); transition: transform .22s cubic-bezier(.2, .9, .3, 1.6); }
.paletka-kafel.wybrany { border-color: var(--oro); background: color-mix(in srgb, var(--zolty) 13%, var(--card-bg)); }
.paletka-kafel.wybrany .paletka-znacznik { background: var(--zolty); border-color: var(--zolty); }
.paletka-kafel.wybrany .paletka-znacznik .ico { transform: scale(1); }
.paletka-kafel.mam:not(.wybrany) { background: transparent; border-style: dashed; }
.paletka-kafel.mam:not(.wybrany) .paletka-t { color: var(--grigio); }
.paletka-kafel.ukryty, .paletka-sekcja.ukryty, .paletka-brak.ukryty { display: none; }
.paletka-uwaga {
  display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 14px; padding: 12px 14px; border-radius: 16px; font-size: 0.88rem;
  line-height: 1.5; background: var(--bg-highlight); border: 1.5px solid var(--zolty); color: var(--testo);
}
.paletka-uwaga .ico { margin: 2px 0 0; color: var(--testo); }
.paletka-dodatki.nad { margin: 8px 0 16px; }
.paletka-dodatki.nad .zakres-nazwa { margin: 0; max-width: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.paletka-dodatki.nad .zakres-nazwa-etykieta { margin: 0; font-family: var(--font-naglowek); font-weight: 800; font-size: 0.98rem; color: var(--testo); }
.paletka-dodatki.nad .pole-z-przyciskiem { flex: 1 1 380px; min-width: 0; max-width: 680px; }
.paletka-dodatki.nad .zakres-nazwa-podpowiedz { flex: 1 1 100%; margin: 0; }
.paletka-dodatki.pod {
  display: flex; flex-direction: column; gap: 8px; margin: 18px 0 2px; padding: 12px 16px; border-radius: 16px;
  background: var(--card-bg); border: 1.5px solid var(--border-warm);
}
.paletka-dodatki.pod > * { margin: 0; }
.paletka-dodatki.pod .photo-review-skipped, .paletka-dodatki.pod .photo-review-silnik { line-height: 1.45; }
.paletka-dodatki.pod .photo-zgoda-blokada { margin-left: 25px; }
.paletka-czeka { display: flex; align-items: center; gap: 10px; margin: 6px 0 14px; font-size: 0.9rem; line-height: 1.45; color: var(--testo); }
.paletka-czeka .spinner { width: 18px; height: 18px; border-width: 2px; flex: none; }
.paletka-szkielet { min-height: 72px; border-radius: 16px; background: var(--card-bg); border: 1.5px solid var(--border-warm); position: relative; overflow: hidden; }
.paletka-szkielet::before, .paletka-szkielet::after { content: ''; position: absolute; left: 16px; height: 12px; border-radius: 6px; background: var(--bg-soft); animation: paletkaMigot 1.2s ease-in-out infinite; }
.paletka-szkielet::before { top: 18px; width: 58%; height: 16px; }
.paletka-szkielet::after { top: 46px; width: 38%; animation-delay: .15s; }
@keyframes paletkaMigot { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.paletka-stan { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 34px 16px 18px; text-align: center; }
.paletka-stan-ikona {
  width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--bg-soft); color: var(--testo); font-size: 1.6rem;
}
.paletka-stan-ikona .ico { margin: 0; }
.paletka-stan p { margin: 0; max-width: 440px; font-size: 0.96rem; line-height: 1.55; color: var(--grigio); }
.paletka-stan .btn { width: auto; margin: 4px 0 0; }
.paletka-stopka {
  flex: none; display: flex; align-items: center; gap: 16px; padding: 10px 20px; background: var(--card-bg);
  border-top: 1.5px solid var(--border-warm); box-shadow: 0 -14px 26px -22px rgba(23, 24, 59, 0.45);
}
.paletka-licznik { display: flex; flex-direction: column; min-width: 0; }
.paletka-licznik-opis { font-size: 0.66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--grigio); }
.paletka-licznik-rzad { display: flex; align-items: baseline; gap: 6px; }
.paletka-licznik-liczba { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.65rem; line-height: 1; font-variant-numeric: tabular-nums; }
.paletka-licznik-liczba.skok { animation: paletkaSkok .32s cubic-bezier(.2, .9, .3, 1.6); }
@keyframes paletkaSkok { 40% { transform: scale(1.18); } }
.paletka-licznik-z { font-size: 0.8rem; font-weight: 700; color: var(--grigio); }
.paletka-stopka .btn.paletka-dodaj { width: auto; min-width: 250px; margin: 0 0 0 auto; }
.paletka-stopka .btn.paletka-dodaj[disabled] { opacity: .45; cursor: default; transform: none; box-shadow: none; }
.paletka-stopka .btn.paletka-druga { width: auto; margin: 0 0 0 auto; }
.paletka-stopka .btn.paletka-druga[hidden] { display: none; }
.paletka-stopka .btn.paletka-druga:not([hidden]) + .btn.paletka-dodaj { margin-left: 0; }
.paletka-stopka .btn.paletka-druga[disabled] { opacity: .45; cursor: default; transform: none; box-shadow: inset 0 0 0 1.5px var(--border-2); }
.paletka-dodawanie { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 0.92rem; font-weight: 700; line-height: 1.35; color: var(--testo); }
.paletka-dodawanie[hidden] { display: none; }
.paletka-dodawanie .spinner { flex-shrink: 0; width: 24px; height: 24px; }
.paletka-stopka.czeka .paletka-licznik { display: none; }
.paletka-lot {
  position: fixed; z-index: 100001; pointer-events: none; transform: translate(-50%, -50%); max-width: 220px; padding: 7px 14px;
  border-radius: 999px; background: var(--zolty); color: #17183B; font-family: var(--font-naglowek); font-weight: 800; font-size: 0.95rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 12px 26px -12px rgba(23, 24, 59, 0.6);
}
.paletka-trafienie { animation: paletkaTrafienie .5s cubic-bezier(.2, .9, .3, 1.6); }
@keyframes paletkaTrafienie { 35% { transform: scale(1.22); } 70% { transform: scale(.95); } }
@media (min-width: 641px) and (max-height: 820px) {
  .paletka-bohater { padding: 10px 18px 12px; }
  .paletka-glowa { margin-top: 4px; gap: 16px; }
  .paletka-tytul { font-size: 1.5rem; }
  .paletka-znasz { margin-top: 6px; }
  .paletka-pierscien { width: 46px; height: 46px; }
  .paletka-pierscien b { font-size: 0.8rem; }
  .paletka-okladka, .paletka-okladka.bez { width: 128px; border-width: 4px; }
  .paletka-okladka.bez { font-size: 2rem; }
}
@media (max-width: 640px) {
  .paletka-okno { align-items: flex-end; padding: 0; }
  .paletka-karta { width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 28px 28px 0 0; animation-name: paletkaArkusz; animation-duration: .38s; }
  @keyframes paletkaArkusz { from { transform: translateY(100%); } to { transform: none; } }
  .paletka-bohater { padding: 14px 16px 18px; }
  .paletka-okladka, .paletka-okladka.bez { display: none; }
  .paletka-tytul { font-size: 1.7rem; }
  .paletka-pierscien { width: 58px; height: 58px; }
  .paletka-narzedzia { padding: 12px 16px 8px; }
  .paletka-zakladki { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; }
  .paletka-zakladki::-webkit-scrollbar { display: none; }
  .paletka-zakladka { flex: none; min-height: 36px; font-size: 0.86rem; }
  .paletka-mini { min-height: 30px; }
  .paletka-lista { padding: 2px 16px 18px; }
  .paletka-siatka, .paletka-siatka.wyrazenia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .paletka-siatka.zdania { grid-template-columns: 1fr; }
  .paletka-kafel { min-height: 78px; padding: 10px 36px 8px 14px; }
  .paletka-t { font-size: 1.02rem; }
  .paletka-szukaj { max-width: none; flex-basis: 100%; }
  .paletka-stopka { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); gap: 12px; }
  .paletka-stopka .btn.paletka-dodaj { min-width: 0; flex: 1; }
  .paletka-stopka { flex-wrap: wrap; }
  .paletka-stopka .btn.paletka-druga { order: 3; flex: 1 1 100%; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .paletka-okno, .paletka-karta, .paletka-okladka, .paletka-lista.wchodzi .paletka-kafel, .paletka-licznik-liczba.skok,
  .paletka-szkielet::before, .paletka-szkielet::after, .paletka-pierscien.laduje .tor { animation: none; }
  .paletka-kafel, .paletka-znacznik .ico, .paletka-pierscien .postep { transition: none; }
  .paletka-kafel:hover { transform: none; }
}
.tworca-okno {
  position: fixed; inset: 0; z-index: 2500; display: flex; flex-direction: column;
  background: var(--bg-soft); color: var(--testo); text-align: left; animation: mowWejscie .25s var(--mow-ease);
}
.tworca-glowa { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--border-warm-soft); background: var(--card-bg); flex-wrap: wrap; }
.tworca-tytul { font-size: 1.05rem; font-weight: 700; }
.tworca-tytul .ico { color: var(--primary); margin: 0; }
.tworca-podpis { flex: 1; min-width: 200px; font-size: 0.82rem; color: var(--grigio); line-height: 1.4; }
.tworca-logo { height: 24px; opacity: .55; flex-shrink: 0; pointer-events: none; user-select: none; }
@media (max-width: 760px) { .tworca-logo { display: none; } }
.tworca-zamknij { background: none; border: 1px solid var(--border-warm-soft); border-radius: 50%; width: 36px; height: 36px; cursor: pointer; color: var(--grigio); font-size: 1rem; }
.tworca-zamknij:hover { color: var(--testo); border-color: var(--primary); }
.tworca-zamknij .ico { margin: 0; }
.tworca-cialo { flex: 1; min-height: 0; display: flex; }
.tworca-bok { width: 260px; flex: none; border-right: 1px solid var(--border-warm-soft); padding: 14px; display: flex; flex-direction: column; gap: 10px; overflow: auto; background: var(--card-bg); }
.tworca-lista { display: flex; flex-direction: column; gap: 6px; }
.tworca-wiersz { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 9px 34px 9px 11px; border-radius: 12px; border: 1px solid var(--border-warm-soft); background: var(--bg-soft); cursor: pointer; font: inherit; color: var(--testo); text-align: left; }
.tworca-wiersz-kosz { position: absolute; right: 6px; top: 8px; width: 26px; height: 26px; border-radius: 8px; cursor: pointer;
  border: 1px solid transparent; background: none; color: var(--muted-light); opacity: 0; transition: opacity .15s, color .15s, border-color .15s; }
.tworca-wiersz:hover .tworca-wiersz-kosz, .tworca-wiersz.aktywny .tworca-wiersz-kosz, .tworca-wiersz-kosz:focus-visible { opacity: 1; }
.tworca-wiersz-kosz:hover { color: var(--rosso); border-color: var(--rosso); }
.tworca-wiersz-kosz .ico { margin: 0; font-size: 0.82rem; }
@media (hover: none) { .tworca-wiersz-kosz { opacity: 1; } }
.tworca-wiersz:hover, .tworca-wiersz.aktywny { border-color: var(--primary); }
.tworca-wiersz b { font-size: 0.92rem; }
.tworca-wiersz small { font-size: 0.74rem; color: var(--grigio); }
.tworca-wiersz .tworca-szkic { color: var(--muted-light); }
.tworca-publiczna { color: var(--verde); font-weight: 700; }
.tworca-pusto { font-size: 0.84rem; color: var(--muted-light); line-height: 1.45; }
.tworca-edytor { flex: 1; min-width: 0; padding: 10px 14px 12px; overflow: hidden; display: flex; flex-direction: column; gap: 8px; }
.tworca-start[hidden], .tworca-start [hidden], .tworca-edytor[hidden] { display: none !important; }
.tworca-start { flex: 1; min-width: 0; overflow: auto; padding: 18px 16px 24px; display: flex; justify-content: center; align-items: flex-start; }
.tworca-start-karta { width: min(720px, 100%); display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 20px; border-radius: 18px;
  background: var(--card-bg); border: 1px solid var(--border-warm-soft); box-shadow: var(--shadow-hover); }
.tworca-start-tytul { font-size: 1.25rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.tworca-start-tytul .ico { color: var(--primary); margin: 0; }
.tworca-start-opis { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--grigio); }
.tworca-start-etykieta { margin-top: 6px; font-size: 0.82rem; font-weight: 700; color: var(--testo); }
.tworca-start .tworca-start-temat { width: 100%; box-sizing: border-box; resize: vertical; min-height: 180px; font-size: 0.95rem; line-height: 1.5; padding: 12px 14px; }
.tworca-start-licznik { align-self: flex-end; font-size: 0.74rem; color: var(--muted-light); margin-top: -4px; }
.tworca-start-zakresy { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.tworca-start-zakres { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--grigio); }
.tworca-start-zakres input { width: 64px; }
.tworca-start-stan { display: flex; align-items: center; gap: 10px; font-size: 0.86rem; color: var(--grigio); }
.tworca-start-stan .spinner { width: 18px; height: 18px; border-width: 2px; flex: none; }
.tworca-start-akcje { margin-top: 6px; }
.tworca-start-akcje .btn[disabled] { opacity: .6; cursor: default; }
@media (max-width: 560px) {
  .tworca-start { padding: 12px 8px 20px; }
  .tworca-start-karta { padding: 16px 14px; }
  .tworca-start .tworca-start-akcje { flex-direction: column; align-items: stretch; }
  .tworca-start .tworca-start-akcje .btn { width: 100%; justify-content: center; }
}
.tworca-start.kl-tlo { display: block; background: var(--marka-zielony); color: var(--granat); padding: 20px clamp(16px, 3vw, 40px) 40px; }
.tworca-start.kl-tlo > .tworca-start-karta { margin: 0 auto; }
.tworca-start-wroc { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 12px 0 6px; border-radius: 999px;
  border: 1px solid var(--border-warm-soft); background: none; color: var(--testo); font: inherit; font-size: 0.84rem; font-weight: 700; cursor: pointer; }
.tworca-start-wroc .ico { margin: 0; }
.kl-ekran { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; color: var(--granat); }
.kl-ekran[hidden] { display: none !important; }
.kl-gora { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kl-pigulka { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px 0 14px; box-sizing: border-box; border-radius: 999px;
  background: #fff; color: var(--granat); font-size: 0.95rem; font-weight: 800; }
.kl-pigulka .ico { margin: 0; font-size: 1.05rem; }
.kl-pigulka-granat { background: var(--granat); color: #fff; }
.kl-pigulka-granat .ico { color: var(--zolty); }
.kl-plakietka { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px;
  background: var(--zolty); color: var(--granat); font-size: 0.82rem; font-weight: 800; }
.kl-plakietka .ico { margin: 0; }
.kl-naglowek { display: flex; flex-direction: column; gap: 10px; }
.kl-nadtytul { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.kl-h1 { margin: 0; font-family: var(--font-naglowek); font-weight: 800; font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.03; letter-spacing: -0.02em;
  text-wrap: balance; color: var(--granat); }
.kl-opis { margin: 0; max-width: 640px; font-size: 1.05rem; font-weight: 500; line-height: 1.5; color: var(--granat); }
.kl-tylko-telefon { display: none; }
.kl-karty { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.kl-karta { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-height: 420px;
  padding: 30px; box-sizing: border-box; border: 0; border-radius: 28px; text-align: left; font: inherit; }
.kl-karta > :not(.kl-karta-ilu) { position: relative; }
.kl-karta-ilu { position: absolute; right: -18px; bottom: -22px; width: 280px; height: 280px; pointer-events: none; }
.kl-karta { container-type: inline-size; }
@container (max-width: 519px) {
  .kl-karta-ilu { position: relative; order: -1; align-self: flex-end; right: auto; bottom: auto; width: 120px; height: 120px; margin: -14px -12px -56px 0; }
  .kl-karta-tytul { font-size: 1.9rem; }
}
.kl-karta-latwa { background: var(--granat); color: #fff; cursor: pointer; transition: transform .18s ease; }
.kl-karta-latwa:hover { transform: translateY(-2px); }
.kl-karta-sama { background: #fff; color: var(--granat); }
.kl-znaczek { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; box-sizing: border-box; border-radius: 999px;
  background: var(--zolty); color: var(--granat); font-size: 0.8rem; font-weight: 800; }
.kl-znaczek-obrys { background: none; border: 1.5px solid var(--granat); }
.kl-karta-tytul { margin: 0; font-family: var(--font-naglowek); font-size: 2.2rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; }
.kl-karta-opis { margin: 0; max-width: 330px; font-size: 1rem; font-weight: 500; line-height: 1.5; }
.kl-karta-latwa .kl-karta-opis { color: #D4D5F0; }
.kl-karta-sama .kl-karta-opis { color: #4A4B6B; }
.kl-cechy { display: flex; flex-wrap: wrap; gap: 8px; max-width: 330px; }
.kl-cechy span { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; background: #2A2C5E; font-size: 0.8rem; font-weight: 700; }
.kl-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 14px; min-height: 58px; padding: 0 7px 0 24px; box-sizing: border-box; border: 0;
  border-radius: 999px; font: inherit; font-size: 1.05rem; font-weight: 800; cursor: pointer; }
.kl-cta[disabled] { opacity: .6; cursor: default; }
.kl-cta-kolko { width: 44px; height: 44px; flex: none; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
.kl-cta-kolko .ico { margin: 0; font-size: 1.1rem; }
.kl-cta-zolta { background: var(--zolty); color: var(--granat); }
.kl-cta-zolta .kl-cta-kolko { background: var(--granat); color: var(--zolty); }
.kl-cta-granat { background: var(--granat); color: #fff; }
.kl-cta-granat .kl-cta-kolko { background: var(--zolty); color: var(--granat); }
.kl-karta-akcje { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.kl-karta-akcje .kl-cta { margin-top: 0; }
.kl-obrys { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; box-sizing: border-box; border: 2px solid var(--granat); border-radius: 999px;
  background: #fff; color: var(--granat); font: inherit; font-size: 1rem; font-weight: 800; cursor: pointer; }
.kl-stopka, .kl-maly { margin: 0; font-size: 0.9rem; font-weight: 600; line-height: 1.5; color: var(--granat); }
.kl-tel-info, .kl-uwaga-tel { display: none; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 20px; background: #1F7A35; color: #fff;
  font-size: 0.88rem; font-weight: 500; line-height: 1.45; }
.kl-tel-info-ikona { width: 40px; height: 40px; flex: none; border-radius: 12px; background: #fff; color: var(--granat); display: inline-flex; align-items: center; justify-content: center; }
.kl-tel-info-ikona .ico { margin: 0; font-size: 1.15rem; }
.kl-tel-info-tresc { display: flex; flex-direction: column; gap: 3px; }
.kl-tel-info-tresc b { font-size: 0.95rem; font-weight: 800; }
.kl-ekran button:focus-visible, .kl-ekran textarea:focus-visible, .tworca-start-wroc:focus-visible { outline: 3px solid var(--granat); outline-offset: 3px; }
.kl-zamknij { width: 44px; height: 44px; flex: none; border: 0; border-radius: 999px; background: #fff; color: var(--granat); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.kl-zamknij .ico { margin: 0; font-size: 1.2rem; }
.kl-postep { flex: 1 1 260px; min-width: 200px; display: flex; flex-direction: column; gap: 7px; }
.kl-postep-licznik { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.kl-postep-pasek { display: flex; gap: 5px; }
.kl-postep-pasek span { flex: 1 1 0; height: 6px; border-radius: 3px; background: rgba(23, 24, 59, 0.2); }
.kl-postep-pasek span.zrobiony { background: var(--granat); }
.kl-postep-pasek span.teraz { background: #fff; }
.kl-uklad { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.kl-glowna { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.kl-bok { flex: 1 1 320px; max-width: 440px; min-width: 0; display: flex; flex-direction: column; }
.kl-bok-ilu { height: 190px; display: flex; justify-content: center; align-items: flex-end; }
.kl-bok-ilu img { width: 220px; height: 220px; margin-bottom: -14px; }
.kl-lekcja { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 24px; background: #fff; color: var(--granat); }
.kl-lekcja-glowa { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kl-lekcja-tytul { font-family: var(--font-naglowek); font-size: 1.3rem; font-weight: 800; }
.kl-lekcja-licznik { display: inline-flex; align-items: center; min-height: 28px; padding: 0 11px; border-radius: 999px; background: var(--marka-zielony);
  color: var(--granat); font-size: 0.78rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.kl-lekcja-pusto { margin: 0; font-size: 0.88rem; font-weight: 500; line-height: 1.5; color: #4A4B6B; }
.kl-wiersze { display: flex; flex-wrap: wrap; gap: 8px; }
.kl-wiersz { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; max-width: 100%; padding: 4px 12px 4px 10px; box-sizing: border-box; border: 0;
  border-radius: 999px; background: #F3F5FB; color: var(--granat); text-align: left; font: inherit; font-size: 0.8rem; font-weight: 600; line-height: 1.3; cursor: pointer; }
.kl-wiersz .ico { margin: 0; color: #4A4B6B; font-size: 0.8rem; }
.kl-wiersz b { font-weight: 800; }
.kl-polecenie-podglad { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 16px; border: 1.5px dashed #9FA1C4; }
.kl-polecenie-etykieta { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #4A4B6B; }
.kl-polecenie-tekst { font-size: 0.84rem; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }
.kl-znaki { align-self: flex-end; font-size: 0.75rem; font-weight: 700; color: #4A4B6B; font-variant-numeric: tabular-nums; }
.kl-opcje { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.kl-opcja { display: flex; align-items: center; gap: 14px; min-height: 84px; padding: 14px; box-sizing: border-box; border: 0; border-radius: 20px;
  background: #fff; color: var(--granat); text-align: left; font: inherit; cursor: pointer; transition: transform .15s ease; }
.kl-opcja:hover { transform: translateY(-1px); }
.kl-opcja.wybrana { background: var(--granat); color: #fff; }
.kl-opcja-ikona { width: 52px; height: 52px; flex: none; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-naglowek); font-size: 1.15rem; font-weight: 800; }
.kl-opcja-ikona .ico { margin: 0; font-size: 1.45rem; }
.kl-k-n { background: var(--granat); color: #fff; }
.kl-opcja.wybrana .kl-k-n { background: #2A2C5E; }
.kl-k-b { background: var(--marka-niebieski); color: #fff; }
.kl-k-y { background: var(--zolty); color: var(--granat); }
.kl-k-r { background: var(--marka-czerwony); color: #fff; }
.kl-k-g { background: var(--marka-zielony); color: var(--granat); }
.kl-k-j { background: #F3F5FB; color: var(--granat); }
.kl-opcja-teksty { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.kl-opcja-t { font-family: var(--font-naglowek); font-size: 1.1rem; font-weight: 800; line-height: 1.15; }
.kl-opcja-p { font-size: 0.84rem; font-weight: 500; line-height: 1.4; color: #4A4B6B; }
.kl-opcja.wybrana .kl-opcja-p { color: #D4D5F0; }
.kl-ptaszek { width: 26px; height: 26px; flex: none; border-radius: 999px; background: var(--zolty); color: var(--granat); display: inline-flex; align-items: center; justify-content: center; }
.kl-ptaszek .ico { margin: 0; font-size: 0.85rem; }
.kl-pole { width: 100%; box-sizing: border-box; padding: 14px 16px; border: 0; border-radius: 18px; background: #fff; color: var(--granat); font: inherit;
  font-size: 1rem; font-weight: 500; line-height: 1.5; resize: vertical; }
.kl-przyciski { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 4px; }
.kl-przyciski .kl-cta { margin-top: 0; }
.kl-wstecz { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 18px 0 12px; box-sizing: border-box; border: 0; border-radius: 999px;
  background: #fff; color: var(--granat); font: inherit; font-size: 0.95rem; font-weight: 800; cursor: pointer; }
.kl-wstecz .ico, .kl-losuj .ico { margin: 0; }
.kl-losuj { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px 0 14px; box-sizing: border-box; border: 2px solid var(--granat);
  border-radius: 999px; background: transparent; color: var(--granat); font: inherit; font-size: 0.95rem; font-weight: 800; cursor: pointer; }
.kl-polecenie-blok { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border-radius: 22px; background: #fff; }
.kl-polecenie-blok .kl-pole { padding: 0; border-radius: 0; min-height: 9.5em; }
.kl-wlasna { display: flex; flex-direction: column; justify-content: center; gap: 10px; min-height: 84px; padding: 12px 14px; box-sizing: border-box;
  border: 2px dashed var(--granat); border-radius: 20px; background: rgba(255, 255, 255, 0.6); color: var(--granat); }
.kl-wlasna.wybrana { border-style: solid; background: var(--granat); color: #fff; }
.kl-wlasna-glowa { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-naglowek); font-size: 1.05rem; font-weight: 800; }
.kl-wlasna-glowa .ico { margin: 0; font-size: 0.95rem; }
.kl-wlasna-wiersz { display: flex; gap: 8px; }
.kl-wlasna-pole { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 16px; box-sizing: border-box; border: 0; border-radius: 999px;
  background: #fff; color: var(--granat); font: inherit; font-size: 0.95rem; font-weight: 600; }
.kl-wlasna-pole:focus-visible { outline: 3px solid var(--zolty); outline-offset: 1px; }
.kl-wlasna-ok { width: 44px; height: 44px; flex: none; border: 0; border-radius: 999px; background: var(--granat); color: var(--zolty);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.kl-wlasna.wybrana .kl-wlasna-ok { background: var(--zolty); color: var(--granat); }
.kl-wlasna-ok[disabled] { opacity: .4; cursor: default; }
.kl-wlasna-ok .ico { margin: 0; font-size: 1.05rem; }
.kl-mysli { display: flex; align-items: center; gap: 12px; }
.kl-mysli-znak { width: 24px; height: 24px; flex: none; box-sizing: border-box; border-radius: 999px; border: 3px solid var(--granat);
  border-right-color: var(--zolty); animation: klKrec .9s linear infinite; }
.kl-opcja.kl-szkielet { cursor: default; }
.kl-opcja.kl-szkielet:hover { transform: none; }
.kl-szkielet-pas { display: block; height: 12px; border-radius: 999px; background: #E3E6F2; animation: klPuls 1.4s ease-in-out infinite; }
.kl-szkielet-pas.dlugi { width: 72%; }
.kl-szkielet-pas.krotki { width: 46%; margin-top: 6px; }
@keyframes klPuls { 50% { opacity: .45; } }
.kl-losuj[disabled] { opacity: .5; cursor: default; }
.kl-blad { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border-radius: 20px; background: #fff; color: var(--granat); }
.kl-blad-tekst { font-size: 0.95rem; font-weight: 700; line-height: 1.45; }
.kl-blad .kl-przyciski { margin-top: 0; }
.kl-ust { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; border-radius: 22px; background: #fff; color: var(--granat); }
.kl-ust-tytul { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #4A4B6B; }
.kl-ust-wiersz { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kl-ust-etykieta { min-width: 88px; font-size: 0.92rem; font-weight: 800; }
.kl-ust-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 16px; box-sizing: border-box; border: 0;
  border-radius: 999px; background: #F3F5FB; color: var(--granat); font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer; }
.kl-ust-chip small { font-size: 0.75rem; font-weight: 600; color: #4A4B6B; }
.kl-ust-chip.wybrany { background: var(--zolty); font-weight: 800; }
.kl-ust-chip.wybrany small { color: var(--granat); }
.kl-ust-chip:focus-visible, .kl-ust-przelacznik:focus-visible { outline: 3px solid var(--granat); outline-offset: 2px; }
.kl-ust-przelacznik { display: flex; align-items: flex-start; gap: 14px; padding: 4px 0; border: 0; background: none; color: var(--granat);
  text-align: left; font: inherit; cursor: pointer; }
.kl-ust-tor { position: relative; width: 46px; height: 28px; flex: none; margin-top: 2px; border-radius: 999px; background: #D5D8E6; transition: background .15s ease; }
.kl-ust-tor::after { content: ''; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 999px; background: #fff; transition: transform .15s ease; }
.kl-ust-przelacznik[aria-checked="true"] .kl-ust-tor { background: var(--granat); }
.kl-ust-przelacznik[aria-checked="true"] .kl-ust-tor::after { transform: translateX(18px); background: var(--zolty); }
.kl-ust-przelacznik-teksty { display: flex; flex-direction: column; gap: 3px; }
.kl-ust-przelacznik-teksty b { font-size: 0.95rem; font-weight: 800; }
.kl-ust-przelacznik-teksty span { font-size: 0.84rem; font-weight: 500; line-height: 1.45; color: #4A4B6B; }
.kl-ust-uwaga { display: flex; align-items: flex-start; gap: 10px; font-size: 0.84rem; font-weight: 500; line-height: 1.45; color: #4A4B6B; }
.kl-ust-uwaga .ico { margin: 2px 0 0; color: var(--granat); }
.kl-link { min-height: 48px; padding: 0 6px; border: 0; background: none; color: var(--granat); font: inherit; font-size: 0.95rem; font-weight: 800;
  text-decoration: underline; cursor: pointer; }
.kl-uklada { container-type: inline-size; }
.kl-uk-uklad { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; gap: 40px; }
.kl-uk-ilu { display: flex; justify-content: center; }
.kl-uk-ilu img { width: 100%; max-width: 340px; height: auto; aspect-ratio: 1 / 1; animation: klUnos 3.2s ease-in-out infinite; }
.kl-uk-tresc { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
@container (max-width: 680px) {
  .kl-uk-uklad { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .kl-uk-ilu img { width: 160px; }
}
.kl-uk-pasek { height: 12px; border-radius: 999px; background: rgba(23, 24, 59, 0.2); overflow: hidden; }
.kl-uk-pasek > div { height: 100%; border-radius: 999px; background: var(--granat); transition: width .6s ease; }
.kl-uk-kroki { margin: 0; padding: 18px 20px; list-style: none; display: flex; flex-direction: column; gap: 12px; border-radius: 22px; background: #fff; color: var(--granat); }
.kl-uk-kroki li { display: flex; align-items: center; gap: 12px; font-size: 0.95rem; font-weight: 600; }
.kl-uk-kroki li.czeka { color: #4A4B6B; }
.kl-uk-kroki li.teraz { font-weight: 800; }
.kl-uk-znak { width: 28px; height: 28px; flex: none; box-sizing: border-box; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
.kl-uk-znak .ico { margin: 0; font-size: 0.85rem; }
.kl-uk-kroki li.zrobiony .kl-uk-znak { background: var(--marka-zielony); color: var(--granat); }
.kl-uk-kroki li.teraz .kl-uk-znak { border: 3px solid var(--granat); border-right-color: var(--zolty); animation: klKrec .9s linear infinite; }
.kl-uk-kroki li.czeka .kl-uk-znak { border: 2px dashed #9FA1C4; }
@keyframes klKrec { to { transform: rotate(360deg); } }
@keyframes klUnos { 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) {
  .kl-uk-ilu img, .kl-uk-kroki li.teraz .kl-uk-znak { animation: none; }
  .kl-karta-latwa, .kl-opcja, .kl-ust-tor, .kl-ust-tor::after { transition: none; }
  .kl-mysli-znak, .kl-szkielet-pas { animation: none; }
  .kl-karta-latwa:hover, .kl-opcja:hover { transform: none; }
}
@media (max-width: 760px) {
  .tworca-okno .tworca-bok, .tworca-okno .tworca-podpis { display: none; }
  .kl-tylko-komputer, .kl-karta-sama, .kl-stopka { display: none; }
  .kl-tylko-telefon { display: block; }
  .kl-tel-info, .kl-uwaga-tel { display: flex; }
  .tworca-start.kl-tlo { padding: 14px 16px 28px; }
  .kl-karta { min-height: 0; padding: 22px; padding-bottom: 26px; }
  .kl-karta-latwa .kl-cta { margin-top: 8px; }
  .kl-bok-ilu { display: none; }
}
.tworca-meta { display: flex; flex-direction: column; gap: 8px; }
#tworcaEdytorMiejsce { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.tworca-edytor .se { flex: 1 1 0; height: auto; min-height: 0; margin-top: 0; }
.tworca-pola { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tworca-in { font: inherit; font-size: 0.86rem; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--border-warm-soft); background: var(--card-bg); color: var(--testo); min-width: 0; }
.tworca-in:focus { outline: none; border-color: var(--primary); }
.tworca-in-tytul { flex: 1 1 260px; font-weight: 600; }
.tworca-in-szeroki { flex: 1 1 100%; }
.tworca-pole-szeroki { flex: 1 1 100%; display: flex; gap: 6px; align-items: center; }
.tworca-rola { display: flex; gap: 6px; align-items: center; flex: 1 1 220px; }
.tworca-rola .tworca-in { flex: 1; min-width: 90px; }
.tworca-jezyki { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tworca-jezyki-chipy { display: flex; flex-wrap: wrap; gap: 4px; max-height: 76px; overflow: auto; }
.tworca-jezyk {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; cursor: pointer;
  border: 1px dashed var(--border-2); background: transparent; color: var(--muted-light); font: inherit; font-size: 0.72rem;
}
.tworca-jezyk svg { border-radius: 2px; display: block; }
.tworca-jezyk.wl { border-style: solid; border-color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--testo); font-weight: 700; }
.tworca-jezyk:hover { border-color: var(--primary); }
.tworca-jezyki-stan { font-size: 0.76rem; color: var(--muted-light); }
.tworca-etykieta { font-size: 0.78rem; color: var(--grigio); }
.tworca-obca { color: var(--primary); font-weight: 600; }
.tworca-pole-szeroki .tworca-in { flex: 1; }
.tworca-mini-ai { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 45%, transparent); }
.tworca-mini-ai:hover { background: var(--primary); color: #fff; }
.tworca-mini[disabled] { opacity: .5; cursor: default; }
.tworca-mini { background: none; border: 1px solid var(--border-warm-soft); border-radius: 10px; width: 34px; height: 34px; cursor: pointer; color: var(--grigio); }
.tworca-mini:hover { color: var(--primary); border-color: var(--primary); }
.tworca-mini .ico { margin: 0; }
.tworca-bledy { white-space: pre-line; }
.tworca-akcje { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tworca-akcje .btn { width: auto; margin: 0; padding: 8px 14px; }
.tworca-akcje .btn, .mow-tworca-btn {
  position: relative; border-bottom-width: 0;
  box-shadow: 0 4px 0 color-mix(in srgb, currentColor 22%, #0b1220), 0 6px 14px rgba(15, 23, 42, .28);
  background-image: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 58%);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
}
.tworca-akcje .btn.btn-verde, .tworca-akcje .btn.btn-rosso, .tworca-akcje .btn.btn-grigio {
  box-shadow: 0 4px 0 rgba(8, 15, 30, .45), 0 6px 14px rgba(15, 23, 42, .28);
}
.tworca-akcje .btn:hover, .mow-tworca-btn:hover { filter: brightness(1.06); }
.tworca-akcje .btn:active, .mow-tworca-btn:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 rgba(8, 15, 30, .45), 0 2px 6px rgba(15, 23, 42, .22);
}
.tworca-akcje .btn:focus-visible, .mow-tworca-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .tworca-akcje .btn, .mow-tworca-btn { transition: none; }
  .tworca-akcje .btn:active, .mow-tworca-btn:active { transform: none; }
}
.tworca-rozpora { flex: 1; }
.tworca-stan { font-size: 0.8rem; color: var(--grigio); }
.tworca-okladka [hidden] { display: none !important; }
.tworca-okladka { display: flex; gap: 14px; align-items: flex-start; padding: 10px 12px; border-radius: 14px;
  background: var(--bg-soft); border: 1px solid var(--border-warm-soft); }
.tworca-okladka-plyta { position: relative; width: 232px; aspect-ratio: 16 / 9; flex: none; border-radius: 12px; overflow: hidden;
  border: 1px dashed var(--border-warm-dash); background: var(--card-bg); display: flex; align-items: center; justify-content: center; }
.tworca-okladka-plyta.jest { border-style: solid; border-color: var(--border-warm-soft); }
.tworca-okladka-plyta.brak { border: 2px solid var(--rosso); animation: tworcaBrakObrazka .45s ease-in-out 2; }
@keyframes tworcaBrakObrazka { 50% { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .tworca-okladka-plyta.brak { animation: none; } }
.tworca-okladka-plyta img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tworca-okladka-pusto { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 0.74rem; color: var(--muted-light); text-align: center; padding: 0 10px; }
.tworca-okladka-pusto .ico { margin: 0; font-size: 1.5rem; }
.tworca-okladka-pracuje { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: color-mix(in srgb, var(--card-bg) 82%, transparent); font-size: 0.74rem; color: var(--grigio); text-align: center; padding: 0 10px; }
.tworca-okladka-akcje { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.tworca-okladka-rzad { display: flex; gap: 6px; flex-wrap: wrap; }
.tworca-mini2 { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 0.82rem; padding: 6px 12px; border-radius: 10px;
  border: 1px solid var(--border-warm-soft); background: var(--card-bg); color: var(--testo); cursor: pointer; }
.tworca-mini2:hover { border-color: var(--primary); color: var(--primary); }
.tworca-mini2[disabled] { opacity: .5; cursor: default; }
.tworca-mini2 .ico { margin: 0; }
.tworca-okladka-info { font-size: 0.76rem; color: var(--muted-light); line-height: 1.4; max-width: 420px; }
@media (max-width: 720px) { .tworca-okladka { flex-direction: column; } .tworca-okladka-plyta { width: 100%; } }
@media (max-width: 760px) { .tworca-cialo { flex-direction: column; } .tworca-bok { width: auto; border-right: none; border-bottom: 1px solid var(--border-warm-soft); max-height: 32vh; } .tworca-edytor .se { height: 70vh; } }
@media (prefers-reduced-motion: reduce) {
  .mow-mapa, .mow-bot, .mow-bot-tlum, .mow-zaczep, .mow-zaczep-tlum, .mow-dymek, .mow-status, .mow-recenzja, .mow-cwiczenie { animation: none; }
  .mow-gora-cisza i { animation: none; }
  .mow-linia > * { transition: none; }
  .mow-xp-trafienie { animation: none; }
}
.ustawienia-select {
  padding: 8px 32px 8px 12px; border-radius: 10px; border: 1px solid var(--border-2);
  background: var(--card-bg); color: var(--testo); font: inherit; font-size: 0.9rem; cursor: pointer;
}
#kartaHistoriaMowienia .tekst-poziom { min-width: 30px; padding: 5px 0; }
#kartaHistoriaMowienia .tekst-poziom .ico { margin: 0; font-size: 0.8rem; }
#kartaHistoriaMowienia .tekst-wiersz.aktywny .tekst-wiersz-tytul { color: var(--primary); }
@media (max-width: 640px) {
  .mow-scena { min-height: 460px; padding-top: 96px; }
  .mow-naglowek { right: 8px; }
  .mow-dymki { min-height: 52px; gap: 8px 10px; }
  .mow-dymek { font-size: 0.88rem; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .mow-mik { box-shadow: none; }
  .mow-mik-obszar.lektor .mow-kropka { animation: mowLektorPuls 1.6s ease-in-out infinite; }
}
@keyframes mowLektorPuls { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }


.kartka-akapit { animation: segmentWjazd 0.42s cubic-bezier(.22,1,.36,1) backwards;
  animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes segmentWjazd { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.kartka-segment.blysk { animation: blyskOceny 0.85s cubic-bezier(.4,0,.2,1); }
@keyframes blyskOceny {
  from { background-color: var(--blysk-kolor, transparent); }
  to   { background-color: transparent; }
}
.kartka-segment.wznowione { animation: segmentWznowienie 2.2s ease; }
@keyframes segmentWznowienie {
  0%, 100% { background-color: transparent; }
  15%, 62% { background-color: color-mix(in srgb, var(--primary) 22%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .kartka-segment.wznowione { animation: none; } }

.kartka-segment.aktywny.puls { animation: segmentPuls 0.5s cubic-bezier(.22,1,.36,1); }
@keyframes segmentPuls { 0%,100% { transform: scale(1); } 45% { transform: scale(1.012); } }
.kartka-segment.aktywny.potrzasnij { animation: segmentPotrzas 0.4s ease; }
@keyframes segmentPotrzas {
  0%,100% { transform: translateX(0); } 20% { transform: translateX(-5px); }
  50% { transform: translateX(4px); } 80% { transform: translateX(-2px); }
}

.kartka-proba { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s cubic-bezier(.22,1,.36,1); }
.kartka-proba > * { overflow: hidden; }
.kartka-proba.otwarty { grid-template-rows: 1fr; }
.kartka-proba-wnetrze { display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }

.xp-lecacy {
  position: fixed; z-index: 3000; pointer-events: none;
  font-weight: 900; font-size: 1.1rem;
  animation: xpLeci 1.1s cubic-bezier(.22,1,.36,1) forwards;
}
.xp-lecacy.plus  { color: var(--zielen-gleboka); }
.xp-lecacy.minus { color: var(--muted-dark); }
@keyframes xpLeci {
  0%   { opacity: 0; transform: translateY(6px) scale(0.85); }
  25%  { opacity: 1; transform: translateY(-6px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-46px) scale(1); }
}

.kartka-dymek { position: fixed; z-index: 2500; transform: translate(-50%, -100%); }
.kartka-dymek button {
  display: flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px;
  border: none; cursor: pointer; font-family: inherit; font-size: 0.8rem; font-weight: 700;
  background: var(--testo); color: var(--crema); box-shadow: 0 8px 24px rgba(0,0,0,0.28);
  animation: dymekWjazd 0.22s cubic-bezier(.22,1,.36,1);
}
.kartka-dymek button:hover { filter: brightness(1.15); }
.kartka-dymek .ico { margin-right: 0; }
@keyframes dymekWjazd { from { opacity: 0; transform: translateY(6px) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes odsluchWjazd { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ods-pytanie-tresc { font-weight: 800; font-size: 0.95rem; margin-bottom: 10px; }
.ods-pytanie-tresc b { color: var(--primary); }
.ods-opcje { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ods-opcja {
  display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer;
  padding: 12px 14px; border-radius: 14px; font-family: inherit; font-size: 0.9rem; font-weight: 700;
  background: var(--card-bg); border: 1px solid var(--border-2); color: var(--testo);
  transition: var(--transition);
}
.ods-opcja:hover { border-color: var(--primary); transform: translateY(-1px); }
.ods-opcja b {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; font-size: 0.78rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-info-soft); color: var(--primary);
}
.ods-opcja.dobra { border-color: var(--verde); background: color-mix(in srgb, var(--verde) 14%, transparent); }
.ods-opcja.zla   { border-color: var(--rosso); background: color-mix(in srgb, var(--rosso) 12%, transparent); }
.ods-opcja[disabled] { cursor: default; }
@media (max-width: 560px) {
  .ods-opcje { grid-template-columns: 1fr; }
}

.znane-slowo { border-radius: 4px; padding: 1px 2px; }
.znane-slowo.p-latwe   { background: color-mix(in srgb, var(--chart-latwe) 22%, transparent); }
.znane-slowo.p-srednie { background: color-mix(in srgb, var(--primary) 20%, transparent); }
.znane-slowo.p-trudne  { background: color-mix(in srgb, var(--rosso) 20%, transparent); }

.kartka-fraza { border-radius: 4px; padding: 0 1px; transition: background 0.15s ease; }
.kartka-segment.auto .kartka-fraza { cursor: help; }
.kartka-segment.auto .kartka-fraza:hover { background: color-mix(in srgb, var(--primary) 20%, transparent); }
.fraza-dymek {
  position: fixed; z-index: 2600; transform: translate(-50%, -100%); pointer-events: none;
  padding: 6px 12px; border-radius: 10px; white-space: nowrap;
  background: var(--testo); color: var(--crema); font-size: 0.82rem; font-weight: 700;
  box-shadow: 0 6px 20px rgba(0,0,0,0.26);
  animation: dymekWjazd 0.14s ease;
}
.kartka-przelacznik.zablokowany { opacity: 0.45; cursor: not-allowed; }
.kartka-przelacznik.zablokowany .toggle { pointer-events: none; }

.kartka-auto { position: relative; }
.kartka-auto-etykieta { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.kartka-auto.zablokowany { opacity: 1; }
.kartka-auto.zablokowany .kartka-auto-etykieta,
.kartka-auto.zablokowany .toggle { opacity: 0.45; }
.kartka-auto-strzalka {
  border: none; background: transparent; cursor: pointer; padding: 0 2px;
  font: inherit; font-size: 0.8rem; line-height: 1; color: var(--grigio);
  border-radius: 6px; transition: var(--transition);
}
.kartka-auto-strzalka:hover { color: var(--oro); background: var(--bg-highlight); }
.kartka-auto-menu { top: calc(100% + 6px); left: auto; right: 0; min-width: 268px; }
.kartka-auto-menu .mode-tab-item small { line-height: 1.45; white-space: normal; }
.settings-ranga { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.settings-ranga-opis { font-size: 0.8rem; color: var(--grigio); font-weight: 600; }

.naruszenie-zgoda, .pochodzenie-zgoda {
  display: block; font-size: 0.72rem; line-height: 1.5; color: var(--muted-light);
  margin: 0 0 12px; text-align: center;
}
.pochodzenie-zgoda { margin: 0; text-align: left; flex-basis: 100%; }
.naruszenie-zgoda a, .pochodzenie-zgoda a { color: var(--grigio); font-weight: 600; }

.app-stopka {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 16px;
  padding: 22px 20px 26px; margin-top: 28px;
  border-top: 1px solid var(--border);
  font-size: 0.74rem; color: var(--muted-light); text-align: center;
}
.app-stopka a { color: var(--grigio); text-decoration: none; font-weight: 600; }
.app-stopka a:hover { color: var(--oro); text-decoration: underline; }
.app-stopka-marka {
  flex-basis: 100%; margin-top: 2px;
  color: var(--grigio); font-weight: 700;
}
.community-full .app-stopka { margin-top: 8px; padding-bottom: 8px; }

.cmty-zglos {
  display: inline-flex; align-items: center; gap: 6px; margin: 10px auto 0;
  border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 0.7rem; font-weight: 600; color: var(--muted-light);
  padding: 4px 8px; border-radius: 8px; transition: var(--transition);
}
.cmty-zglos:hover { color: var(--rosso); background: var(--bg-error-soft); }
a.cmty-zglos { text-decoration: none; }   
.cmty-zglos .ico { margin-right: 0; font-size: 0.78rem; }
.community-detail-panel .cmty-zglos { display: flex; }
.community-tile .cmty-zglos { margin: 4px 0 0; font-size: 0.64rem; padding: 2px 6px; }

.naruszenie-lista { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.naruszenie-poz {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; text-align: left;
  border: 1px solid var(--border); border-radius: 11px; background: var(--card-bg);
  font-family: inherit; font-size: 0.85rem; font-weight: 600; color: var(--testo);
  cursor: pointer; transition: var(--transition);
}
.naruszenie-poz:hover { border-color: var(--oro); background: var(--bg-highlight); }
.naruszenie-poz.wybrany { border-color: var(--rosso); background: var(--bg-error-soft); color: var(--rosso); }
.naruszenie-poz .ico { margin-right: 0; }
.naruszenie-opis { margin-bottom: 14px; }
.naruszenie-opis input {
  width: 100%; padding: 11px 13px; border-radius: 11px;
  border: 1px solid var(--border-2); background: var(--crema);
  color: var(--testo); font-family: inherit; font-size: 0.88rem;
}

.cmty-licznik {
  display: inline-flex; align-items: center; justify-content: center; min-width: 21px;
  height: 21px; padding: 0 6px; margin-left: auto; border-radius: 999px;
  background: var(--verde); color: #fff; font-size: 0.68rem; font-weight: 800;
  animation: licznikPuls 2.6s ease-in-out infinite;
}
@keyframes licznikPuls {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--verde) 55%, transparent); }
  50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--verde) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .cmty-licznik { animation: none; } }
.cmty-kategoria { position: relative; }

.community-tile.naruszenie { border: 2px solid var(--rosso); }
.naruszenie-plakietka {
  position: absolute; top: 8px; left: 8px; z-index: 3;
  background: var(--rosso); color: #fff; border-radius: 999px;
  padding: 3px 9px; font-size: 0.68rem; font-weight: 800;
}
.naruszenie-powody { display: block; font-size: 0.7rem; opacity: 0.9; margin-top: 2px; }
.naruszenie-formularz { display: block; margin-top: 4px; font-size: 0.7rem; text-align: start; }
.naruszenie-formularz summary { cursor: pointer; font-weight: 700; }
.naruszenie-formularz p { margin: 3px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 9em; overflow: auto; }
.naruszenie-ukryty { display: inline-block; margin-top: 3px; padding: 1px 8px; border-radius: 999px; font-size: 0.66rem; font-weight: 800;
  background: var(--oro); color: var(--na-akcencie); }

.kartka-pismo-btn {
  border: none; background: transparent; cursor: pointer; padding: 2px 5px;
  font-family: inherit; font-weight: 800; font-size: 0.8rem; line-height: 1;
  color: var(--grigio); border-radius: 7px; transition: var(--transition);
}
.kartka-pismo-btn:hover:not([disabled]) { color: var(--oro); background: var(--bg-highlight); }
.kartka-pismo-btn[disabled] { opacity: 0.35; cursor: default; }
.kartka-pismo-ile { min-width: 16px; text-align: center; font-variant-numeric: tabular-nums; }
.tpow-linia { margin: 10px 0 0; font-weight: 700; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpow-ile { margin: 6px 0 0; font-weight: 700; }

.kartka-auto-znacznik {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; line-height: 1.6;
  background: var(--bg-warn-soft); color: var(--muted-dark);
}
.kartka-przelacznik.pracuje { opacity: 0.75; }
.kartka-przelacznik .spinner-maly {
  width: 13px; height: 13px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--oro) 30%, transparent); border-top-color: var(--oro);
  animation: obrot 0.7s linear infinite;
}
@keyframes obrot { to { transform: rotate(360deg); } }

.frag-tlumaczenie {
  font-size: 0.8rem; font-weight: 600; color: var(--primary); margin-left: 6px;
  animation: segmentWjazd 0.3s cubic-bezier(.22,1,.36,1);
}

.kartka-przelaczniki { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.kartka-przelacznik {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 7px 8px 7px 13px; border-radius: 999px;
  border: 1px solid var(--border); background: transparent;
  font-size: 0.78rem; font-weight: 700; color: var(--grigio);
  transition: var(--transition);
}
.kartka-przelacznik:hover { color: var(--testo); border-color: var(--oro); background: var(--card-bg); }
.kartka-przelacznik .ico { margin-right: 0; font-size: 0.95rem; }
.kartka-przelacznik .toggle { width: 34px; height: 19px; }
.kartka-przelacznik .toggle-slider::before { width: 13px; height: 13px; }
.kartka-przelacznik .toggle input:checked + .toggle-slider::before { transform: translateX(15px); }
.kartka-przelacznik:has(input:checked) {
  color: var(--testo); border-color: var(--oro);
  background: color-mix(in srgb, var(--oro) 10%, transparent);
}

.kartka-ikona {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--border-2); background: var(--card-bg); color: var(--testo);
  font-size: 0.95rem; line-height: 1; transition: var(--transition);
}
.kartka-ikona:hover { border-color: var(--oro); color: var(--oro); }
.kartka-ikona.zablokowany { opacity: 0.4; cursor: not-allowed; }
.kartka-ikona.zablokowany:hover { border-color: var(--border-warm); color: inherit; }
.kartka-edycja { position: relative; padding: 0; }
.kartka-textarea {
  width: 100%; min-height: 300px; height: 300px; resize: none; overflow: hidden;
  transition: height 0.5s cubic-bezier(.22,1,.36,1);
  border: none; outline: none;
  background: transparent; color: var(--testo);
  font-family: inherit; font-size: 1.02rem; font-weight: 600;
  line-height: 26px; padding: 34px 30px 34px 66px;
}
.kartka-textarea::placeholder { color: var(--muted-light); font-weight: 500; }
@media (max-width: 768px) {
  .kartka-textarea { padding: 22px 16px 22px 44px; font-size: 0.98rem; }
}
.kartka-edycja.wossh { animation: kartkaWossh 0.6s cubic-bezier(.22,1,.36,1); }
@keyframes kartkaWossh {
  0%   { transform: scale(0.985); box-shadow: 0 0 0 0 color-mix(in srgb, var(--oro) 45%, transparent); }
  55%  { transform: scale(1.006); box-shadow: 0 0 0 10px color-mix(in srgb, var(--oro) 0%, transparent); }
  100% { transform: none; box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .kartka-textarea { transition: none; }
  .kartka-edycja.wossh { animation: none; }
}
.kartka-drop-nakladka {
  position: absolute; inset: 0; border-radius: 16px; display: none;
  align-items: center; justify-content: center; gap: 10px; flex-direction: column;
  background: color-mix(in srgb, var(--oro) 12%, var(--card-bg));
  border: 2px dashed var(--oro); color: var(--oro); font-weight: 800; font-size: 0.9rem;
}
.kartka-drop-nakladka .ico { font-size: 1.8rem; margin-right: 0; }
.kartka-edycja.przeciaganie .kartka-drop-nakladka { display: flex; animation: dymekWjazd 0.18s ease; }

.tekst-narzedzia { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0 14px; }
.tekst-narzedzie {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--border-2); background: var(--card-bg); color: var(--testo);
  font-family: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer;
  transition: var(--transition);
}
.tekst-narzedzie:hover { border-color: var(--oro); color: var(--oro); transform: translateY(-1px); }
.tekst-narzedzie .ico { margin-right: 0; }
.tekst-narzedzie[disabled] { opacity: 0.6; cursor: default; transform: none; }
.tekst-narzedzia .tekst-licznik { margin: 0 0 0 auto; }

.znacznik-beta {
  font-size: 0.58rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 999px; line-height: 1.5;
  background: var(--bg-warn-soft); color: var(--muted-dark);
}

body.focus-mode #widokTekstow .kartka,
body.focus-mode #widokTekstow .czyt-arena,
body.focus-mode #widokTekstow .kartka-pasek,
body.focus-mode #widokTekstow .kartka-przelaczniki,
body.focus-mode #widokTekstow .kartka-postep,
body.focus-mode #widokTekstow .kartka-stopka { max-width: var(--czyt-szer, 900px); margin-left: auto; margin-right: auto; }
body[data-czyt-szer="2"] { --czyt-szer: 1120px; }
body[data-czyt-szer="3"] { --czyt-szer: 1360px; }
body[data-czyt-szer="4"] { --czyt-szer: 100%; }
body.focus-mode[data-czyt-szer="2"]:has(#kartkaPelnyEkran:checked) .app-body { max-width: 1160px; }
body.focus-mode[data-czyt-szer="3"]:has(#kartkaPelnyEkran:checked) .app-body { max-width: 1400px; }
body.focus-mode[data-czyt-szer="4"]:has(#kartkaPelnyEkran:checked) .app-body { max-width: none; }
.kartka-szer .kartka-pismo-btn .ico { margin: 0; font-size: 0.85rem; line-height: 1; vertical-align: -2px; }
body.focus-mode #widokTekstow .kartka { padding: 44px 44px 44px 60px; }
body.focus-mode #widokTekstow .kartka-akapit { padding-left: 6px; }
@media (max-width: 768px) {
  body.focus-mode #widokTekstow .kartka { padding: 22px 16px; }
  body.focus-mode #widokTekstow .kartka-akapit { padding-left: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .kartka-akapit, .kartka-segment.blysk, .kartka-segment.aktywny.puls,
  .kartka-segment.aktywny.potrzasnij,
  .kartka-dymek button, .frag-tlumaczenie { animation: none; }
  .kartka-proba { transition: none; }
  .xp-lecacy { animation: xpLeci 0.6s linear forwards; }
  .tekst-narzedzie:hover { transform: none; }
}

.admin-log-box { max-height: 220px; overflow-y: auto; background: var(--crema); border-radius: 8px; padding: 10px 14px; }
.admin-log-line { font-size: 0.8rem; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.admin-log-line:last-child { border-bottom: none; }
.admin-user-stats { font-size: 0.8rem; color: var(--muted-dark); font-weight: 700; }
.admin-user-stats .live-dot { color: #16A34A; }

.photo-review-skipped { font-size: 0.8rem; color: var(--grigio); margin-bottom: 10px; }
.photo-review-silnik { font-size: 0.8rem; color: var(--grigio); margin: -4px 0 10px; line-height: 1.45; }
.wm-pasek { display: grid; gap: 8px; margin: 0 0 12px; }
.wm-zdanie { font-size: 0.86rem; line-height: 1.5; }
.wm-gotowosc { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.78rem; color: var(--grigio); }
.wm-gotowosc .pill { margin-right: 4px; }
.wm-edytor { margin-top: 14px; border-top: 1px solid var(--border-warm); padding-top: 12px; }
.wm-glowa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.wm-glowa-akcje { margin-left: auto; display: inline-flex; gap: 6px; }
.wm-sekcja { border: 1px solid var(--border-warm); border-radius: 12px; padding: 12px 14px; margin: 0 0 12px; }
.wm-sekcja h4 { margin: 0 0 10px; font-size: 0.92rem; }
.wm-sekcja.wm-zablokowana { opacity: 0.55; }
.wm-sekcja.wm-zablokowana h4::after { content: ' (najpierw zapisz treść)'; font-weight: 400; color: var(--grigio); }
.wm-dwie { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1000px) { .wm-dwie { grid-template-columns: 1fr; } }
.wm-pola label { display: block; font-size: 0.78rem; font-weight: 700; margin: 0 0 8px; }
.wm-pola .admin-in { width: 100%; box-sizing: border-box; margin-top: 3px; font-weight: 400; }
.wm-pola textarea.admin-in { min-height: 160px; resize: vertical; }
.wm-licz { font-weight: 400; color: var(--grigio); margin-left: 6px; }
.wm-licz.za-dlugi { color: var(--rosso); font-weight: 700; }
.wm-szer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.wm-szer .aktywny { outline: 2px solid var(--oro); }
.wm-szer select.admin-in { width: auto; margin-left: auto; }
.wm-ramka { width: 600px; max-width: 100%; height: 680px; border: 1px solid var(--border-warm); border-radius: 12px; background: #fff; display: block; }
.wm-ostrz { margin-top: 8px; display: grid; gap: 5px; font-size: 0.78rem; line-height: 1.45; }
.wm-ostrz .pill { margin-right: 6px; }
.wm-jezyki-ui { font-size: 0.78rem; margin: 0 0 8px; }
.wm-jezyki-ui label { display: inline-flex; align-items: center; gap: 4px; margin: 2px 10px 2px 0; font-weight: 400; }
.wm-wynik { font-size: 0.82rem; line-height: 1.55; margin-top: 8px; }
.wm-wynik ul { margin: 4px 0 8px; padding-left: 18px; }
.wm-potwierdzenie { border: 2px solid var(--oro); border-radius: 12px; padding: 12px 14px; margin-top: 10px; font-size: 0.86rem; line-height: 1.55; }
.wm-pasek-postepu { height: 10px; border-radius: 999px; background: var(--border-warm); overflow: hidden; margin: 6px 0; }
.wm-pasek-postepu > span { display: block; height: 100%; background: var(--oro); }
.wm-wysylka-pola { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 14px; }
.wm-kontrola { display: grid; gap: 5px; font-size: 0.8rem; line-height: 1.45; margin: 8px 0; }
.wm-kontrola .pill { margin-right: 6px; }
.wm-kontrola label { display: flex; align-items: flex-start; gap: 6px; font-weight: 400; }
.wm-dziala { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 700; margin: 6px 0 4px; }
.wm-potwierdzenie p { margin: 0 0 8px; }
.wm-potwierdzenie .admin-in { width: 140px; }
.wm-postep-liczby { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 8px 0; }
.wm-postep-liczby > div { border: 1px solid var(--border-warm); border-radius: 10px; padding: 6px 8px; font-size: 0.74rem; color: var(--grigio); }
.wm-postep-liczby b { display: block; font-size: 1.05rem; color: var(--testo); }
.wm-historia { margin: 6px 0 0; padding-left: 18px; font-size: 0.76rem; color: var(--grigio); line-height: 1.5; }

.regula-mail {
  border: 1px solid var(--border); border-radius: 10px; background: var(--crema);
  padding: 12px 14px; margin-bottom: 12px;
}
.regula-gora { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.regula-nazwa { font-weight: 800; font-size: 0.9rem; }
.regula-wlacznik {
  display: flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 700;
  color: var(--grigio); cursor: pointer; white-space: nowrap;
}
.regula-warunek {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 0.76rem; color: var(--grigio); margin-bottom: 10px;
}
.regula-zmienne { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 10px; }
.regula-zmienna {
  border: 1px solid var(--border); background: var(--bg-soft); color: var(--muted-dark);
  border-radius: 999px; padding: 3px 9px; font-size: 0.7rem; font-weight: 700;
  cursor: pointer; width: auto; margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.regula-zmienna:hover { background: var(--crema); color: var(--testo); }
.regula-podglad { margin-top: 10px; }
.regula-podglad-temat { font-size: 0.76rem; color: var(--grigio); margin-bottom: 6px; }
.regula-podglad-ramka {
  width: 100%; height: 360px; border: 1px solid var(--border); border-radius: 8px;
  background: #F4F6FA; display: block;
}

.mk-pasek { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.mk-kpi { background: var(--bianco); border: 1px solid var(--border); border-left: 4px solid #0EA5E9;
  border-radius: 8px; padding: 8px 12px; font-size: 0.72rem; color: var(--grigio); min-width: 140px; flex: 1; }
.mk-kpi b { display: block; font-size: 1.05rem; color: var(--testo); font-variant-numeric: tabular-nums; margin: 2px 0; }
.mk-kpi-o { display: block; color: var(--muted-light); font-size: 0.66rem; }
.mk-filtry { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.mk-filtry > span { display: contents; }
.mk-chip { border: 1px solid var(--border); background: var(--bg-soft); color: var(--muted-dark);
  border-radius: 999px; padding: 4px 11px; font-size: 0.72rem; font-weight: 700; cursor: pointer; width: auto; margin: 0; }
.mk-chip:hover { color: var(--testo); }
.mk-chip.akt { background: var(--testo); color: var(--bianco); border-color: var(--testo); }
.mk-szukaj { margin-left: auto; min-width: 220px; }
.mk-grupa-tytul { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--grigio); margin: 18px 0 4px; }
.mk-grupa-opis { font-size: 0.74rem; color: var(--grigio); margin: 0 0 8px; line-height: 1.5; }
.mk-karta { border: 1px solid var(--border); border-radius: 10px; background: var(--bianco); padding: 12px 14px; margin-bottom: 10px; }
.mk-karta.wylaczony { border-style: dashed; opacity: 0.75; }
.mk-karta.mk-inne { background: var(--crema); }
.mk-gora { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.mk-ikona { font-size: 1.05rem; line-height: 1; }
.mk-nazwa { font-weight: 800; font-size: 0.92rem; }
.mk-rodzaj { font-size: 0.68rem; color: var(--muted-light); background: var(--bg-soft); padding: 1px 6px; border-radius: 5px; }
.mk-znacznik { font-size: 0.66rem; font-weight: 800; border-radius: 999px; padding: 2px 8px;
  background: var(--bg-soft); color: var(--muted-dark); white-space: nowrap; }
.mk-znacznik.zielony  { background: var(--bg-success-soft); color: var(--verde); }
.mk-znacznik.czerwony { background: var(--bg-error-soft2); color: var(--rosso); }
.mk-znacznik.zloty    { background: var(--bg-info-soft); color: var(--oro); }
.mk-znacznik.szary    { background: var(--border); color: var(--muted-dark); }
.mk-wlacznik { display: flex; align-items: center; gap: 5px; font-size: 0.7rem; font-weight: 700;
  color: var(--grigio); cursor: pointer; white-space: nowrap; margin-left: auto; }
.mk-opis { font-size: 0.78rem; line-height: 1.55; color: var(--testo); margin: 2px 0; }
.mk-opis b { color: var(--grigio); font-weight: 800; margin-right: 3px; }
.mk-zrodlo code { font-size: 0.7rem; color: var(--muted-dark); }
.mk-meta { font-size: 0.7rem; color: var(--grigio); margin: 6px 0 8px; display: flex; flex-wrap: wrap; gap: 3px 14px; }
.mk-meta b { color: var(--testo); font-variant-numeric: tabular-nums; }
.mk-blad, .mk-blad b { color: var(--rosso); }
.mk-akcje { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mk-akcje .admin-in { padding: 5px 8px; font-size: 0.74rem; }
.mk-akcje [data-mk="adres"] { flex: 1; min-width: 200px; }
.mk-rozwin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px;
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.mk-rozwin.jedna { grid-template-columns: 1fr; }
@media (max-width: 960px) { .mk-rozwin { grid-template-columns: 1fr; } }

.mai-stan { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 0.8rem; color: var(--grigio); margin-bottom: 12px; }
.mai-stan b { color: var(--testo); font-variant-numeric: tabular-nums; }
.mai-stan .mai-wstrzymaj { margin-left: auto; }
.mai-stan .mai-stan-wstrzymane { flex-basis: 100%; order: 10; padding: 8px 12px; border-radius: 10px; background: var(--bg-gold-soft); box-shadow: inset 3px 0 0 var(--zolty); color: var(--testo); line-height: 1.45; }
.mai-stan-glowny { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 0.86rem; color: var(--testo); }
.mai-kropka { width: 10px; height: 10px; border-radius: 50%; background: var(--grigio); flex: none; }
.mai-stan-glowny.ok .mai-kropka { background: var(--verde); }
.mai-stan-glowny.zle .mai-kropka { background: var(--rosso); }
.mai-stan-glowny.uwaga .mai-kropka { background: var(--zolty); }
.mai-link { border: 0; background: none; padding: 0; font: inherit; color: var(--marka-niebieski); font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.mai-link:focus-visible, .mai-wiersz-btn:focus-visible, .mai-opc:focus-visible, .mai-dzien:focus-visible, .mai-kom:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.pus-widok .mai-link { font-size: 0.8rem; }
.mai-trzy { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 0 14px; }
.mai-dzial-karta { border-top-width: 6px; border-top-style: solid; }
.mai-dzial-karta.same { border-top-color: var(--marka-niebieski); }
.mai-dzial-karta.konto { border-top-color: var(--testo); }
.mai-dzial-karta.ty { border-top-color: var(--zolty); }
.mai-duza { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mai-duza b { font-family: var(--font-naglowek); font-weight: 800; font-size: 2.2rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--testo); }
.mai-duza span { font-size: 0.82rem; color: var(--grigio); }
.mai-podpis { margin: 6px 0 4px; font-size: 0.8rem; font-weight: 700; color: var(--grigio); }
.mai-podpis.ok { color: var(--verde); }
.mai-wiersze { margin-top: 8px; }
.mai-wiersz { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 0.82rem; }
.mai-wiersz > b, .mai-wiersz .mai-liczba { margin-left: auto; font-family: var(--font-naglowek); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mai-wiersz .mai-cichy { margin-left: auto; font-size: 0.76rem; color: var(--grigio); }
.mai-szczeble { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.mai-szczeble .pill { font-size: 0.7rem; padding: 2px 8px; }
.mai-karta-stopka { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.mai-kanaly-pasek { display: flex; height: 16px; border-radius: 999px; overflow: hidden; background: var(--bg-soft); margin: 4px 0 8px; }
.mai-kanaly-pasek > span { display: block; height: 100%; }
.mai-znak { width: 12px; height: 12px; border-radius: 4px; flex: none; display: inline-block; }
.mai-ramka-info { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg-soft); font-size: 0.8rem; line-height: 1.5; }
.mai-plan { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 4px 14px; font-size: 0.82rem; line-height: 1.45; }
.mai-plan > b { font-family: var(--font-naglowek); }
.mai-plan > * { padding: 7px 0; border-top: 1px solid var(--border); }
.mai-blok { border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--bianco); min-width: 0; }
.mai-blok-glowa { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; margin-bottom: 10px; }
.mai-blok-glowa b { font-family: var(--font-naglowek); font-size: 1.02rem; }
.mai-blok-glowa span { font-size: 0.74rem; color: var(--grigio); }
.mai-trojka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 640px) { .mai-trojka { grid-template-columns: 1fr; } }
.mai-wynik-kreska { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grigio); }
.mai-wynik-kreska::before, .mai-wynik-kreska::after { content: ''; flex: 1; height: 2px; background: var(--border-2); }
.mai-drabina-przewijak { overflow-x: auto; }
.mai-drabina { min-width: 900px; display: grid; grid-template-columns: 112px repeat(8, minmax(0, 1fr)); gap: 6px; align-items: stretch; }
.mai-etap { display: flex; flex-direction: column; gap: 1px; padding: 0 2px; font-size: 0.72rem; color: var(--grigio); }
.mai-etap b { font-family: var(--font-naglowek); font-size: 0.86rem; color: var(--testo); }
.mai-tor-et { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 8px 10px; border-radius: 10px; color: var(--bianco); font-size: 0.7rem; }
.mai-tor-et b { font-family: var(--font-naglowek); font-size: 0.9rem; }
.mai-tor-et.mail { background: var(--testo); color: var(--bianco); }
.mai-tor-et.push { background: var(--marka-niebieski); color: #fff; }
.mai-drabina .pus-wezel, .mai-trojka .pus-wezel, .mai-bramki .pus-wezel { flex-direction: column; align-items: flex-start; min-height: 58px; }
.mai-drabina .pus-ile, .mai-bramki .pus-ile { margin-left: 0; }
.mai-drabina .pus-wezel { min-width: 0; }
.mai-drabina .pus-wezel .pill, .mai-drabina .pus-ile { white-space: normal; line-height: 1.25; max-width: 100%; }
.mai-wezel-wynik { display: flex; align-items: center; gap: 8px; width: 100%; }
.mai-wezel-wynik b { font-family: var(--font-naglowek); font-size: 0.95rem; }
.mai-wezel-wynik .mai-liczba { margin-left: auto; font-family: var(--font-naglowek); font-weight: 800; }
.mai-wezel-pod { font-size: 0.7rem; font-weight: 500; color: var(--grigio); }
.mai-bramki { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 8px; }
.mai-historia { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 10px; }
.mai-historia-krok { display: flex; flex-direction: column; gap: 6px; font-size: 0.78rem; line-height: 1.45; }
.mai-historia-nr { display: flex; align-items: center; gap: 8px; }
.mai-historia-nr span:first-child { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-naglowek); font-weight: 800; font-size: 0.8rem; flex: none; background: var(--bg-soft); color: var(--testo); }
.mai-historia-nr span:last-child { flex: 1; height: 3px; border-radius: 2px; background: var(--border); }
.mai-historia-krok b { font-family: var(--font-naglowek); font-size: 0.88rem; }
.mai-historia-krok .pill { align-self: flex-start; }
.mai-reguly { display: grid; gap: 8px; }
.mai-regula-wiersz { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--bg-soft); font-size: 0.8rem; }
.mai-regula-wiersz b { font-size: 0.86rem; }
.mai-regula-wiersz span { color: var(--grigio); }
@media (max-width: 640px) { .mai-regula-wiersz { grid-template-columns: minmax(0, 1fr); } }
.mai-lista-uklad { display: flex; flex-wrap: wrap; gap: 0 14px; align-items: flex-start; }
.mai-lista-karta { flex: 999 1 520px; min-width: 0; }
.mai-szuflada { flex: 1 1 400px; min-width: 0; position: sticky; top: 12px; border: 2px solid var(--testo); }
.mai-szuflada[hidden], .mai-szuflada [hidden] { display: none !important; }
.mai-szuflada .nkc-wymiary { align-self: end; align-items: center; }
@media (max-width: 760px) { .mai-szuflada { position: static; } }
#maileWykres .wl-svg { min-width: 460px; }
.mai-grupa { padding-top: 10px; }
.mai-grupa-glowa { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding-bottom: 4px; }
.mai-grupa-glowa h4 { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-naglowek); font-size: 1rem; }
.mai-grupa-glowa h4 span { font-family: var(--font-tekst); font-size: 0.8rem; font-weight: 700; color: var(--grigio); }
.mai-grupa-opis { flex: 1 1 300px; font-size: 0.76rem; line-height: 1.45; color: var(--grigio); }
.mai-grupa-znak { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.mai-pod-glowa { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 6px 4px; font-size: 0.74rem; color: var(--grigio); }
.mai-pod-glowa b { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--testo); }
.mai-kolumny { display: grid; grid-template-columns: minmax(0, 1fr) 118px 50px; gap: 8px; padding: 6px 0 2px; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grigio); }
.mai-kolumny > span:first-child { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.6fr) 56px 96px; gap: 10px; padding: 0 8px; }
.mai-wiersz-maila { display: grid; grid-template-columns: minmax(0, 1fr) 118px 50px; gap: 8px; align-items: center; border-top: 1px solid var(--border); }
.mai-wiersz-maila.wybrany { border-top-color: transparent; border-radius: 12px; box-shadow: inset 0 0 0 2px var(--marka-niebieski); background: var(--bg-info-soft); }
.mai-wiersz-btn {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.6fr) 56px 96px; gap: 10px; align-items: center; width: 100%; box-sizing: border-box;
  padding: 8px; border: 0; border-radius: 10px; background: none; color: var(--testo); font: inherit; font-size: 0.8rem; text-align: left; cursor: pointer; min-width: 0;
}
.mai-wiersz-btn:hover { background: var(--bg-soft); }
.mai-wiersz-nazwa { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mai-wiersz-nazwa b { font-size: 0.86rem; line-height: 1.3; overflow-wrap: anywhere; }
.mai-wiersz-nazwa .ico { font-size: 0.8rem; color: var(--grigio); margin-right: 4px; }
.mai-znaczniki { display: flex; flex-wrap: wrap; gap: 4px; }
.mai-znaczniki .pill, .mai-wiersz-maila .pill { font-size: 0.66rem; padding: 2px 8px; }
.mai-dawniej { font-size: 0.7rem; color: var(--grigio); }
.mai-kiedy { font-size: 0.76rem; line-height: 1.4; color: var(--muted-dark); overflow-wrap: anywhere; }
.mai-n30 { font-family: var(--font-naglowek); font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.mai-ost { font-size: 0.74rem; color: var(--grigio); }
.mai-sw-kom { display: flex; justify-content: center; }
.mai-sw { position: relative; display: inline-flex; width: 40px; height: 24px; flex: none; }
.mai-sw input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.mai-sw-t { width: 40px; height: 24px; border-radius: 999px; background: var(--border-2); position: relative; transition: background 0.15s; }
.mai-sw-t::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--bianco); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: left 0.15s; }
.mai-sw input:checked + .mai-sw-t { background: var(--marka-niebieski); }
.mai-sw input:checked + .mai-sw-t::after { left: 19px; }
.mai-sw input:focus-visible + .mai-sw-t { outline: 2px solid var(--fokus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .mai-sw-t, .mai-sw-t::after { transition: none; } }
.mai-lista-karta { container: maile-lista / inline-size; }
@container maile-lista (max-width: 700px) {
  .mai-wiersz-btn { grid-template-columns: minmax(0, 1fr) 50px; }
  .mai-wiersz-btn .mai-kiedy { grid-column: 1 / -1; order: 5; }
  .mai-wiersz-btn .mai-ost, .mai-kolumny { display: none; }
  .mai-wiersz-maila { grid-template-columns: minmax(0, 1fr) auto 46px; }
}
.mai-poza { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 8px; margin-top: 8px; }
.mai-poza > div { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--bg-soft); font-size: 0.76rem; line-height: 1.4; color: var(--grigio); }
.mai-poza b { color: var(--testo); font-size: 0.84rem; }
.mai-pusto { padding: 14px; border-radius: 12px; background: var(--bg-soft); font-size: 0.82rem; }
.mai-sz-glowa { display: flex; align-items: flex-start; gap: 10px; }
.mai-sz-glowa > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mai-sz-et { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grigio); }
.mai-sz-tytul { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.2rem; line-height: 1.2; overflow-wrap: anywhere; }
.mai-sz-kiedy { font-size: 0.8rem; line-height: 1.45; color: var(--grigio); }
.mai-sz-stan { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0; font-size: 0.78rem; font-weight: 700; }
.mai-sz-stan label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.mai-sz-karty { display: grid; gap: 4px; padding: 4px; border-radius: 12px; background: var(--bg-soft); margin-bottom: 12px; }
.mai-sz-karty .nkc-wymiar { justify-content: center; }
.mai-sz-panel { display: flex; flex-direction: column; gap: 10px; }
.mai-sz-panel .popup-pole textarea { width: 100%; box-sizing: border-box; }
.mai-uwaga-koszt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--zolty) 22%, var(--bianco)); color: var(--testo); font-size: 0.8rem; line-height: 1.45; }
.mai-uwaga-koszt .ico { margin-top: 2px; }
.mai-szkic-ramka { border: 1.5px dashed var(--border-2); border-radius: 12px; padding: 10px; }
.mai-sz-ramka { width: 100%; height: 460px; border: 1px solid var(--border); border-radius: 10px; background: #F4F6FA; display: block; }
.mai-dl { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0 12px; font-size: 0.8rem; line-height: 1.5; }
.mai-dl > dt { padding: 8px 0; border-top: 1px solid var(--border); color: var(--grigio); font-weight: 700; }
.mai-dl > dd { margin: 0; padding: 8px 0; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
.mai-kafle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mai-kafle > div { padding: 10px 12px; border-radius: 12px; background: var(--bg-soft); font-size: 0.74rem; color: var(--grigio); }
.mai-kafle b { display: block; font-family: var(--font-naglowek); font-size: 1.3rem; color: var(--testo); font-variant-numeric: tabular-nums; }
.mai-tygodnie { display: grid; gap: 6px; }
.mai-tydzien { display: grid; grid-template-columns: 52px minmax(0, 1fr) 48px; gap: 10px; align-items: center; font-size: 0.76rem; }
.mai-tydzien b { text-align: right; font-variant-numeric: tabular-nums; }
.mai-regulamin { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 14px; }
.mai-reg { border: 1px solid var(--border); border-top: 5px solid var(--testo); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mai-reg-glowa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px; }
.mai-reg-glowa b { font-family: var(--font-naglowek); font-size: 1.05rem; }
.mai-reg-pigulki { display: flex; flex-wrap: wrap; gap: 6px; }
.mai-kroki { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .mai-kroki { grid-template-columns: 1fr; } }
.mai-kroki li { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 0.78rem; }
.mai-krok-nr { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.mai-krok-nr span { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.74rem; background: var(--bg-soft); }
.mai-krok-nr span.ok { background: var(--bg-success-soft); color: var(--verde); }
.mai-wynik-kroku { padding: 8px 10px; border-radius: 10px; background: var(--bg-soft); line-height: 1.45; overflow-wrap: anywhere; }
.mai-wynik-kroku.zle { background: var(--bg-error-soft2); }
.mai-wynik-kroku.ok { background: var(--bg-success-soft); }
.mai-wynik-kroku:empty { display: none; }
.mai-reg details summary { cursor: pointer; font-weight: 700; font-size: 0.8rem; color: var(--marka-niebieski); }
.mai-reg details ul { margin: 6px 0 0; padding-left: 18px; font-size: 0.78rem; line-height: 1.6; }
.mai-probka { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.mai-probka-pola { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.mai-probka-podglad { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.mai-probka-lista { max-height: 220px; overflow-y: auto; border: 1.5px solid var(--border); border-radius: 12px; padding: 4px; display: flex; flex-direction: column; gap: 2px; }
.mai-opc { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: 9px; background: none; color: var(--testo); font: inherit; font-size: 0.8rem; font-weight: 600; text-align: left; cursor: pointer; }
.mai-opc:hover { background: var(--bg-soft); }
.mai-opc.wybrany { background: var(--bg-info-soft); box-shadow: inset 0 0 0 2px var(--marka-niebieski); }
.mai-opc span:first-child { flex: 1; min-width: 0; }
.mai-opc span:last-child { font-size: 0.7rem; color: var(--grigio); white-space: nowrap; }
.mai-probka-glowa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.mai-probka-temat { font-size: 0.8rem; line-height: 1.45; min-width: 0; overflow-wrap: anywhere; }
.mai-ramka-tlo { background: var(--bg-soft); border-radius: 16px; padding: 14px 10px; overflow-x: auto; }
.mai-ramka { width: 600px; max-width: 100%; height: 600px; margin: 0 auto; border: 1px solid var(--border); border-radius: 12px; background: #fff; display: block; }
.mai-ostatnie { border-top: 1px solid var(--border); padding-top: 10px; font-size: 0.78rem; }
.mai-ostatnie > div { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 8px; padding: 4px 0; align-items: center; }
.mai-ostatnie .pill { font-size: 0.66rem; padding: 2px 8px; }
.mai-sym-kanal { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: var(--bg-soft); font-size: 0.8rem; line-height: 1.45; }
.mai-os-przewijak { overflow-x: auto; }
.mai-os { min-width: 500px; display: grid; grid-template-columns: 54px repeat(30, minmax(0, 1fr)); gap: 3px; align-items: center; }
.mai-os-et { font-size: 0.7rem; font-weight: 700; color: var(--grigio); }
.mai-dzien { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 3px 0; border: 0; border-radius: 7px; background: none; color: var(--testo); font: inherit; font-family: var(--font-naglowek); font-size: 0.68rem; font-weight: 800; cursor: pointer; }
.mai-dzien span { font-family: var(--font-tekst); font-size: 0.58rem; font-weight: 600; color: var(--grigio); }
.mai-dzien.wybrany { background: var(--testo); color: var(--bianco); }
.mai-dzien.wybrany span { color: var(--bianco); }
.mai-dzien.przerwa { box-shadow: inset 0 -3px 0 var(--marka-czerwony, #DB2727); }
.mai-znak.mai-znak-przerwa { background: var(--bg-soft); box-shadow: inset 0 -3px 0 var(--marka-czerwony, #DB2727), inset 0 0 0 1px var(--border); }
.mai-sym-przerwa { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 8px; font-size: 0.8rem; line-height: 1.45; }
.mai-kom { display: block; height: 24px; border: 0; border-radius: 6px; padding: 0; cursor: pointer; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--border); }
.mai-kom.mail { background: var(--testo); box-shadow: none; }
.mai-kom.push { background: var(--marka-niebieski); box-shadow: none; }
.mai-kom.stop { background: var(--zolty); box-shadow: none; }
.mai-kom.wybrany { outline: 2px solid var(--testo); outline-offset: 1px; }
.mai-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0; font-size: 0.74rem; font-weight: 600; color: var(--grigio); }
.mai-legenda > span { display: inline-flex; align-items: center; gap: 6px; }
.mai-sym-dzien { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 14px; font-size: 0.8rem; line-height: 1.45; }
.mai-sym-dzien b.mai-sym-tytul { font-family: var(--font-naglowek); font-size: 0.95rem; }
.mai-sym-rzad { display: grid; grid-template-columns: 52px 104px minmax(0, 1fr); gap: 8px; align-items: center; }
.mai-kto-lista > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--border); font-size: 0.78rem; }
.mai-kto-lista b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mai-kto-lista .pill { font-size: 0.66rem; padding: 2px 8px; }
.mai-kto-duza { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 8px 0 4px; }
.mai-kto-duza b { font-family: var(--font-naglowek); font-size: 2rem; line-height: 1; }
.mai-podsumowanie { margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: var(--bg-soft); }
.mai-podsumowanie:empty { display: none; }
.mai-dz-rozwin td { background: var(--bg-soft); }
.mai-dz-dane { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.76rem; color: var(--grigio); margin-top: 6px; }
#adminPane-mailing .pill.info, #adminPane-mailing .pill.bad, #adminPane-mailing .pill.off { color: var(--testo); }
#adminPane-mailing .pill.bad { box-shadow: inset 3px 0 0 var(--rosso); }
#adminPane-mailing .admin-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.pus-stan { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 0.78rem; color: var(--grigio); margin-bottom: 12px; }
.pus-stan b { color: var(--testo); }
.pus-zakladki { margin-top: 2px; }
.pus-zakladki .nkc-wymiar .ico { font-size: 0.75rem; margin-right: 2px; }
.pus-widok[hidden], .pus-tryb-panel[hidden] { display: none !important; }
.pill.pus-czeka, .pus-znak.wait, .pus-ile.wait { background: color-mix(in srgb, var(--zolty) 34%, var(--bianco)); color: var(--testo); }
#adminPane-pushe .pill.info, #adminPane-pushe .pill.bad, #adminPane-pushe .pill.off { color: var(--testo); }
#adminPane-pushe .pill.bad { box-shadow: inset 3px 0 0 var(--rosso); }
.sc-pasek i.bad { background: var(--rosso); }
.sc-pasek i.czeka { background: var(--zolty); }
.pus-uwaga { margin: 10px 0 0; }
.pus-przyciski { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pus-glowa-karty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.pus-glowa-karty h3 { margin: 0; }
.pus-droga { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 10px; }
.pus-horyzont { grid-column: 1 / -1; margin: 0; display: flex; align-items: center; gap: 6px; }
.pus-krok-drogi { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 14px; background: var(--bg-soft); min-width: 0; }
.pus-krok-glowa { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 0.74rem; font-weight: 700; color: var(--grigio); }
.pus-krok-glowa b { color: var(--marka-niebieski); }
.pus-krok-liczba { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.5rem; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--testo); }
.pus-krok-opis { font-size: 0.72rem; line-height: 1.4; color: var(--grigio); }
.pus-krok { font-weight: 700; }
.pus-czemu { display: flex; flex-direction: column; gap: 4px; }
.pus-czemu-wiersz {
  display: grid; grid-template-columns: minmax(0, 1fr) 110px 48px; gap: 10px; align-items: center; width: 100%; padding: 6px 8px; border: 0;
  border-radius: 10px; background: none; color: var(--testo); font: inherit; font-size: 0.8rem; font-weight: 600; text-align: left; cursor: pointer;
}
.pus-czemu-wiersz:hover { background: var(--bg-soft); }
.pus-czemu-wiersz:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.pus-czemu-wiersz b { text-align: right; font-variant-numeric: tabular-nums; }
.pus-bledy { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; font-size: 0.8rem; }
.pus-bledy .kpi-label { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--grigio); }
.pus-blad-wiersz { display: flex; justify-content: space-between; gap: 12px; }
.pus-legenda-wykresu { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 4px; font-size: 0.76rem; font-weight: 600; color: var(--grigio); }
.pus-legenda-wykresu > span { display: inline-flex; align-items: center; gap: 6px; }
.wl-linia-dod { stroke-width: 2.5; }
.pus-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 12px; font-size: 0.76rem; font-weight: 600; color: var(--grigio); }
.pus-legenda > span { display: inline-flex; align-items: center; gap: 6px; }
.pus-drzewo-uklad { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.pus-drzewo { flex: 999 1 760px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.pus-panel { flex: 1 1 300px; min-width: 0; position: sticky; top: 12px; border: 2px solid var(--testo); border-radius: 14px; padding: 14px 16px; background: var(--bianco); }
.pus-tory { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1600px) { .pus-tory { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pus-tory { grid-template-columns: 1fr; } .pus-panel { position: static; } }
.pus-tor { border: 1px solid var(--border); border-top: 5px solid var(--marka-niebieski); border-radius: 12px; padding: 10px; background: var(--bianco); min-width: 0; }
.pus-tor-glowa { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.pus-tor-glowa b { font-family: var(--font-naglowek); font-size: 1.05rem; }
.pus-tor-glowa span { font-size: 0.72rem; line-height: 1.35; color: var(--grigio); }
.pus-etap { margin: 10px 0 5px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grigio); }
.pus-wezly { display: flex; flex-direction: column; gap: 4px; }
.pus-wezel {
  display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 7px 8px; border: 2px solid transparent; border-radius: 10px;
  background: var(--bg-soft); color: var(--testo); font: inherit; font-size: 0.76rem; font-weight: 600; line-height: 1.3; text-align: left; cursor: pointer;
}
.pus-wezel:hover { border-color: var(--border-2); }
.pus-wezel.wybrany { border-color: var(--testo); background: var(--bianco); }
.pus-wezel:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.pus-wezel-t { flex: 1; min-width: 0; overflow-wrap: break-word; }
.pus-znak { flex: none; min-width: 20px; height: 20px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.66rem; font-weight: 800; }
.pus-znak .ico { font-size: 0.7rem; line-height: 1; }
.pus-znak.ok, .pus-ile.ok { background: var(--bg-success-soft); color: var(--verde); }
.pus-znak.stop, .pus-ile.stop { background: var(--bg-error-soft2); color: var(--rosso); }
.pus-znak.info, .pus-ile.info { background: var(--bg-info-soft); color: var(--marka-niebieski); }
.pus-znak.nr { background: var(--testo); color: var(--bianco); }
.pus-ile { flex: none; margin-left: auto; padding: 2px 7px; border-radius: 999px; font-size: 0.68rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pus-wspolna-kreska { display: flex; align-items: center; gap: 10px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grigio); }
.pus-wspolna-kreska::before, .pus-wspolna-kreska::after { content: ''; flex: 1; height: 2px; background: var(--border-2); }
.pus-wspolne { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 1600px) { .pus-wspolne { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); } }
.pus-wspolny { border: 1px solid var(--border); border-radius: 12px; padding: 4px 10px 10px; background: var(--bianco); min-width: 0; }
.pus-wspolny-t { display: block; margin-bottom: 6px; font-family: var(--font-naglowek); font-size: 0.9rem; }
.pus-panel-tytul { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.15rem; line-height: 1.2; overflow-wrap: anywhere; }
.pus-panel-znaczki { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.pus-panel-sekcja { margin-top: 12px; font-size: 0.82rem; line-height: 1.5; }
.pus-panel-sekcja > b { display: block; margin-bottom: 4px; font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--grigio); }
.pus-panel-sekcja p { margin: 0; }
.pus-panel-liczba { display: flex; justify-content: space-between; gap: 12px; margin-top: 4px; padding: 6px 10px; border-radius: 8px; background: var(--bg-soft); }
.pus-kod { display: flex; flex-wrap: wrap; gap: 4px; }
.pus-kod code { overflow-wrap: anywhere; }
.pus-telefony { font-size: 0.78rem; color: var(--grigio); margin-bottom: 10px; }
.pus-telefon { padding: 12px 14px; border-radius: 12px; background: var(--bg-soft); margin-bottom: 8px; }
.pus-telefon-glowa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.pus-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 6px 0 0; font-size: 0.78rem; }
.pus-dl dt { color: var(--grigio); }
.pus-dl dd { margin: 0; overflow-wrap: anywhere; }
.pus-uwaga-ramka { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1.5px dashed var(--border-2); border-radius: 12px; font-size: 0.78rem; color: var(--grigio); margin: 8px 0; }
.pus-uwaga-ramka .ico { color: var(--wyk-4); margin-top: 2px; }
.pus-przelaczniki { margin-top: 8px; }
.pus-droga-testu { display: grid; grid-template-columns: 70px repeat(4, minmax(0, 1fr)); gap: 8px; align-items: stretch; margin-top: 8px; }
@media (max-width: 760px) { .pus-droga-testu { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pus-telefon-etykieta { grid-column: 1 / -1; } }
.pus-telefon-etykieta { align-self: center; font-size: 0.78rem; font-weight: 800; }
.pus-etap-testu { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; font-size: 0.74rem; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
.pus-etap-testu .pus-etap { margin: 0; }
.pus-etap-testu b { font-size: 0.86rem; }
.pus-etap-testu.ok { background: var(--bg-success-soft); }
.pus-etap-testu.bad { background: var(--bg-error-soft2); }
.pus-etap-testu.pus-czeka { background: color-mix(in srgb, var(--zolty) 26%, var(--bianco)); }
.pus-tryby { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 5px; border-radius: 14px; background: var(--bg-soft); margin-bottom: 14px; }
@media (max-width: 760px) { .pus-tryby { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pus-tryb {
  display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border: 2px solid transparent; border-radius: 11px; background: none;
  color: var(--testo); font: inherit; font-size: 0.82rem; font-weight: 800; text-align: left; cursor: pointer;
}
.pus-tryb span { font-size: 0.68rem; font-weight: 600; color: var(--grigio); }
.pus-tryb.aktywny { background: var(--bianco); border-color: var(--testo); }
.pus-tryb:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.pus-test { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
@media (max-width: 860px) { .pus-test { grid-template-columns: 1fr; } }
.pus-test-pola { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pus-tryb-panel { display: flex; flex-direction: column; gap: 8px; }
.pus-pole { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 8px; font-size: 0.74rem; font-weight: 700; color: var(--grigio); min-width: 0; }
.pus-pole .admin-in { grid-column: 1 / -1; width: 100%; box-sizing: border-box; }
.pus-pole > .admin-hint { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.pus-pole[hidden] { display: none; }
#adminPane-pushe .admin-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.pus-pole-waskie { max-width: 240px; }
.pus-cel { display: flex; flex-wrap: wrap; gap: 8px; }
.pus-cel .pus-pole { flex: 1; min-width: 160px; }
.pus-siatka2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.pus-siatka3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px 12px; align-items: end; }
.pus-siatka3 #pusheSymDataPole { grid-column: 1 / -1; }
@media (max-width: 640px) { .pus-siatka2, .pus-siatka3 { grid-template-columns: 1fr; } }
.pus-sym { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; padding: 12px 14px; border-radius: 14px; background: var(--bg-soft); }
.pus-sym .pus-etap { margin: 0; }
.pus-cele { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 6px; }
.pus-cel-wiersz { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--bg-soft); }
.pus-cel-opis { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 0.8rem; }
.pus-cel-opis code { align-self: flex-start; overflow-wrap: anywhere; }
.pus-cel-wiersz .admin-in { grid-column: 1 / -1; grid-row: 2; min-width: 0; width: 100%; box-sizing: border-box; padding: 5px 8px; font-size: 0.74rem; }
@media (max-width: 520px) { .pus-cel-wiersz { grid-template-columns: minmax(0, 1fr) auto; } }
.pod-grupa { margin: 16px 0 6px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--grigio); }
.pod-grupa:first-child { margin-top: 0; }
.pod-opis { font-size: 0.74rem; color: var(--grigio); }
.pus-cel-wiersz .pod-parametry { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.pus-cel-wiersz .pod-parametry .admin-in { grid-column: auto; grid-row: auto; flex: 1 1 140px; width: auto; }
.pus-podglad-kol { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pus-segmenty { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.pus-ekran { border-radius: 26px; padding: 18px 12px 16px; background: linear-gradient(160deg, #17183B 0%, #2D3A8C 100%); color: #FFFFFF; min-height: 240px; }
.pus-ekran[data-motyw="jasny"] { background: linear-gradient(160deg, #6A8DF0 0%, #A9C0FA 100%); }
.pus-ekran-godzina { text-align: center; font-size: 2.4rem; font-weight: 300; letter-spacing: 1px; margin: 4px 0 16px; font-variant-numeric: tabular-nums; }
.pus-ekran-push { background: rgba(40, 42, 70, 0.92); color: #FFFFFF; border-radius: 18px; padding: 10px 12px; }
.pus-ekran[data-motyw="jasny"] .pus-ekran-push { background: rgba(255, 255, 255, 0.92); color: #17183B; }
.pus-ekran[data-platforma="android"] .pus-ekran-push { border-radius: 12px; }
.pus-ekran-glowa { display: flex; align-items: center; gap: 6px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.4px; opacity: 0.85; margin-bottom: 4px; }
.pus-ekran-ikona { width: 18px; height: 18px; border-radius: 5px; background: #2463E9; color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; font-size: 0.66rem; }
.pus-ekran[data-platforma="android"] .pus-ekran-ikona { border-radius: 999px; }
.pus-ekran-teraz { margin-left: auto; font-weight: 400; }
.pus-ekran-tytul { font-weight: 800; font-size: 0.82rem; line-height: 1.3; overflow-wrap: anywhere; }
.pus-ekran-tresc { font-size: 0.8rem; line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pus-ekran-cel { display: table; margin: 10px auto 0; padding: 3px 10px; border-radius: 999px; background: rgba(23, 24, 59, 0.6); color: #FFFFFF; font-size: 0.68rem; text-align: center; overflow-wrap: anywhere; }
.pus-ekran-cel:empty { display: none; }
.pus-drabina { display: grid; grid-template-columns: repeat(31, minmax(0, 1fr)); gap: 3px; align-items: end; }
.pus-dzien { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.pus-dzien-pas { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 54px; padding-bottom: 5px; box-sizing: border-box; border-radius: 6px;
  background: var(--bg-soft); font-size: 0.6rem; font-weight: 800; color: #FFFFFF; overflow: hidden; }
.pus-dzien-pas.push { background: var(--marka-niebieski); }
.pus-dzien-pas.nauka { background: var(--marka-zielony); }
.pus-dzien-nr { font-size: 0.62rem; font-weight: 700; color: var(--grigio); }
@media (max-width: 640px) { .pus-drabina { gap: 1px; } .pus-dzien-pas { height: 40px; font-size: 0; } .pus-dzien-nr { font-size: 0.5rem; } }
.pus-grupa { margin-bottom: 14px; }
.pus-grupa .mk-grupa-tytul { display: flex; align-items: center; gap: 6px; }
.pus-rodzaj-blok { margin-bottom: 6px; }
.pus-rodzaj { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.7fr) minmax(0, 1.2fr) 130px 150px; gap: 12px; align-items: center;
  padding: 10px 12px; border-radius: 12px; background: var(--bg-soft); font-size: 0.78rem; }
.pus-rodzaj.wylaczony { opacity: 0.6; }
.pus-rodzaj > div:first-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pus-rodzaj .mk-rodzaj { align-self: flex-start; }
.pus-rodzaj-glowa { background: none; padding-top: 0; padding-bottom: 2px; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--grigio); }
.pus-rodzaj-opis { display: flex; flex-direction: column; gap: 4px; min-width: 0; line-height: 1.4; overflow-wrap: anywhere; }
.pus-rodzaj-opis code { align-self: flex-start; overflow-wrap: anywhere; }
.pus-otwarcia { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.pus-otwarcia .sc-pasek { flex: 1; }
@media (max-width: 960px) { .pus-rodzaj { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pus-rodzaj-glowa { display: none; } }
@media (max-width: 520px) { .pus-rodzaj { grid-template-columns: 1fr; } }
.pus-teksty { margin: 4px 0 2px 12px; }
.pus-warianty { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 6px; margin-top: 8px; }
.pus-wariant { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; font-size: 0.76rem; background: var(--bianco); }
.pus-wariant .pus-etap { display: block; margin: 0 0 2px; }
.pus-wariant b { display: block; color: var(--testo); }
.pus-wariant.brak { border-style: dashed; }
.pus-filtry { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 12px; }
.pus-filtry-pola { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-left: auto; }
.pus-filtry-pola input.admin-in { width: 150px; }
@media (max-width: 760px) { .pus-filtry-pola { margin-left: 0; } }
.pus-dziennik { max-height: none; }
.pus-rozwin-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; border-radius: 999px; background: none; color: var(--grigio); cursor: pointer; }
.pus-rozwin-btn:hover { background: var(--bg-soft); color: var(--testo); }
.pus-rozwin-btn:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.pus-wiersz.otwarty td { border-bottom: 0; }
.pus-rozwin td { background: var(--crema); }
.pus-rozwin-dane { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font-size: 0.76rem; color: var(--grigio); }
.pus-rozwin-dane code { overflow-wrap: anywhere; }
.pus-rozwin .mk-blad { display: block; margin-top: 6px; }
.admin-shell {
  width: 100vw; height: 100vh;
  background: var(--crema); color: var(--testo);
  border-radius: 0; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 30px 90px rgba(0,0,0,0.45);
  font-family: 'Nunito', system-ui, sans-serif;
}
.admin-topbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 18px; background: #0F172A; color: #F8FAFC;
}
.admin-topbar h2 { font-size: 1rem; font-weight: 800; margin: 0; letter-spacing: 0.02em; }
.admin-topbar .admin-env {
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(248,250,252,0.14); padding: 3px 8px; border-radius: 5px;
}
.admin-topbar .spacer { flex: 1; }
.admin-topbar .wordmap-close { color: #F8FAFC; background: rgba(248,250,252,0.12); }

.admin-daterange { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.76rem; }
.admin-daterange input[type="date"] {
  padding: 5px 8px; border-radius: 6px; border: 1px solid #334155;
  background: #1E293B; color: #F8FAFC; font-family: inherit; font-size: 0.76rem;
  color-scheme: dark; 
}
.admin-quick {
  border: 1px solid #334155; background: #1E293B; color: #CBD5E1;
  border-radius: 6px; padding: 5px 10px; font-family: inherit;
  font-size: 0.72rem; font-weight: 700; cursor: pointer; transition: var(--transition);
}
.admin-quick:hover { background: #334155; color: var(--bianco); }
.admin-quick.active { background: #38BDF8; border-color: #38BDF8; color: var(--testo); }

.wagi-uklad { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .wagi-uklad { grid-template-columns: 1fr; } }
.wagi-naglowek {
  margin: 16px 0 8px; font-size: 0.74rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--grigio);
}
.wagi-naglowek:first-child { margin-top: 0; }
.wagi-suwak { margin-bottom: 11px; }
.wagi-suwak label { display: flex; justify-content: space-between; gap: 10px; font-size: 0.78rem; margin-bottom: 3px; }
.wagi-suwak label b { font-variant-numeric: tabular-nums; }
.wagi-suwak input[type=range] { width: 100%; accent-color: var(--verde); }
.wagi-suwak .wagi-opis { font-size: 0.68rem; color: var(--grigio); line-height: 1.4; margin-top: 2px; }
.wagi-suwak .wagi-info {
  border: none; background: none; padding: 0 2px; margin-left: 4px; cursor: pointer; color: var(--grigio);
  font: inherit; line-height: 1; vertical-align: middle;
}
.wagi-suwak .wagi-info:hover, .wagi-suwak .wagi-info[aria-expanded="true"] { color: var(--testo); }
.wagi-suwak .wagi-info:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; border-radius: 4px; }
.wagi-suwak .wagi-info-tresc {
  font-size: 0.74rem; line-height: 1.55; color: var(--testo); background: var(--bg-soft);
  border-radius: 8px; padding: 8px 10px; margin: 4px 0 6px;
}
.wagi-suwak .wagi-info-tresc p { margin: 0 0 5px; }
.wagi-suwak .wagi-info-tresc p:last-child { margin-bottom: 0; }

.wagi-tab { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.wagi-tab th {
  text-align: right; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--grigio); padding: 0 0 7px; font-weight: 700;
}
.wagi-tab th:first-child, .wagi-tab td:first-child { text-align: left; }
.wagi-tab td { padding: 7px 0; border-top: 1px solid var(--border-warm-2); text-align: right;
  font-variant-numeric: tabular-nums; }
.wagi-tab .wagi-pasek-kom { width: 34%; }
.wagi-pasek-tlo { height: 7px; border-radius: 999px; background: var(--bg-soft); overflow: hidden; }
.wagi-pasek { height: 100%; border-radius: 999px; transition: width 0.45s cubic-bezier(.22,1,.36,1); }
.wagi-pasek.nowe { background: var(--grigio); }
.wagi-pasek.latwe { background: var(--verde); }
.wagi-pasek.srednie { background: var(--primary); }
.wagi-pasek.trudne { background: var(--rosso); }
.wagi-przewaga { font-weight: 700; }
.wagi-suma {
  font-size: 0.82rem; padding: 11px 13px; border-radius: 12px; margin-bottom: 12px;
  background: var(--bg-info-soft); line-height: 1.5;
}

.iko-okno-tlo {
  position: fixed; inset: 0; z-index: 100000; background: rgba(15, 23, 42, 0.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.iko-okno {
  background: var(--bianco); border-radius: 22px; padding: 22px 24px; max-width: 420px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35); text-align: center;
}
.iko-okno p { margin: 0 0 16px; font-size: 0.9rem; line-height: 1.55; }
.iko-okno .przyciski { display: flex; gap: 10px; justify-content: center; }
.iko-okno button {
  border: none; border-radius: 13px; padding: 10px 20px; font: inherit; font-weight: 800;
  font-size: 0.85rem; cursor: pointer; transition: var(--transition);
}
.iko-okno button.potwierdz { background: #EF4444; color: #fff; box-shadow: 0 4px 0 #B91C1C; }
.iko-okno button.potwierdz:active { transform: translateY(3px); box-shadow: 0 1px 0 #B91C1C; }
.iko-okno button.anuluj { background: var(--bg-soft); color: var(--testo); }

.iko-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.iko-karta {
  position: relative; background: var(--card-bg); border: 1px solid var(--border-2);
  border-radius: 14px; padding: 12px 8px 9px; text-align: center; cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.iko-karta:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10); }
.iko-karta.pusta { opacity: 0.55; }
.iko-karta.czeka-gen .iko-rys { opacity: 0.35; }
.iko-karta.czeka-gen { animation: ikoPuls 1.1s ease-in-out infinite; }
@keyframes ikoPuls { 50% { border-color: #38BDF8; } }
.iko-rys { display: block; margin: 0 auto; --rys-h: 92px; height: 92px; }
.iko-rys-brak {
  display: flex; align-items: center; justify-content: center; width: 92px; height: 92px;
  margin: 0 auto; border: 2px dashed var(--border-2); border-radius: 16px;
  font-size: 1.5rem; color: var(--grigio);
}
.iko-karta b { display: block; font-size: 11px; margin-top: 7px; word-break: break-word; }
.iko-slowa { display: block; font-size: 10px; color: var(--grigio); word-break: break-word; }
.iko-pl { display: block; font-size: 10.5px; font-weight: 800; color: #0369A1; margin-top: 2px; word-break: break-word; }

.iko-grid.przeglad { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.iko-grid.przeglad .iko-rys { --rys-h: 170px; height: 170px; }
.iko-grid.przeglad .iko-rys-brak { width: 170px; height: 170px; font-size: 2.4rem; }
.iko-grid.przeglad .iko-karta b { font-size: 14px; }
.iko-grid.przeglad .iko-slowa { font-size: 12px; }
.iko-grid.przeglad .iko-pl { font-size: 13px; }
.iko-grid.przeglad .iko-akcje button { display: block; }
.iko-mini-hist {
  display: flex; gap: 6px; justify-content: center; align-items: center;
  flex-wrap: wrap; margin-top: 8px; min-height: 20px; font-size: 10px; color: var(--grigio);
}
.iko-mini {
  --rys-h: 42px; height: 42px; display: block; padding: 2px;
  border: 1px dashed var(--border-2); border-radius: 9px; opacity: 0.85;
}
.iko-plakietka {
  position: absolute; top: 6px; left: 6px; font-size: 9px; font-weight: 900;
  padding: 2px 7px; border-radius: 999px; background: #E0F2FE; color: #0369A1;
}
.iko-plakietka.f5 { background: #DCFCE7; color: #15803D; }   
.iko-plakietka.df { background: #E0F2FE; color: #0369A1; }   
.iko-plakietka.go  { background: #FEF3C7; color: #B45309; }   
.iko-plakietka.cg  { background: #CCFBF1; color: #0F766E; }   
.iko-plakietka.ad  { background: #EDE9FE; color: #6D28D9; }   
.iko-klodka { position: absolute; top: 24px; left: 6px; font-size: 12px; color: #B91C1C; }
.iko-akcje { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; }
.iko-akcje button {
  width: 23px; height: 23px; border: none; border-radius: 8px; font: inherit; font-size: 12px;
  font-weight: 900; line-height: 1; cursor: pointer; display: none; padding: 0;
}
.iko-karta:hover .iko-akcje button { display: block; }
.iko-akcje .iko-x    { background: #FEE2E2; color: #B91C1C; }
.iko-akcje .iko-baza { background: #E0E7FF; color: #4338CA; }
.iko-akcje .iko-gen  { background: #DBEAFE; color: #1D4ED8; }
.iko-akcje .iko-klodka-btn { font-size: 11px; }
.iko-akcje .iko-klodka-btn.otwarta   { background: #DCFCE7; color: #15803D; }
.iko-akcje .iko-klodka-btn.zamknieta { background: #FEE2E2; color: #B91C1C; }
.iko-modal { max-width: 660px; width: 100%; text-align: left; max-height: 86vh; overflow-y: auto; }
.iko-modal h4 { margin: 0 0 4px; font-size: 1rem; }
.iko-modal .meta { font-size: 0.78rem; color: var(--grigio); line-height: 1.6; }
.iko-modal .glowa { display: flex; gap: 16px; align-items: flex-start; }
.iko-modal .glowa .iko-rys { --rys-h: 128px; height: 128px; margin: 0; flex-shrink: 0; }
.iko-modal .przyciski { justify-content: flex-start; flex-wrap: wrap; margin-top: 14px; }
.iko-modal button.zwykly { background: var(--bg-soft); color: var(--testo); }
.iko-modal button.zwykly:hover { background: var(--border-2); }
.iko-hist { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; margin-top: 10px; }
.iko-hist .poz {
  border: 1px dashed var(--border-2); border-radius: 12px; padding: 8px; text-align: center;
  font-size: 10px; color: var(--grigio);
}
.iko-hist .poz .iko-rys { --rys-h: 72px; height: 72px; }
.iko-hist .poz button {
  margin-top: 6px; border: none; border-radius: 8px; background: #E0E7FF; color: #4338CA;
  font: inherit; font-size: 10px; font-weight: 800; padding: 4px 8px; cursor: pointer;
}

.fb-poz {
  border: 1px solid var(--border-warm); border-radius: 14px;
  padding: 12px 14px; margin-bottom: 9px; background: var(--card-bg);
}
.fb-poz.nowe { border-color: var(--verde); background: var(--bg-success-soft); }
.fb-meta {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 0.72rem; color: var(--grigio); margin-bottom: 7px;
}
.fb-meta b { color: var(--testo); font-size: 0.78rem; }
.fb-meta .fb-akcje { margin-left: auto; display: flex; gap: 6px; }
.fb-meta button {
  border: 1px solid var(--border-warm); background: transparent; color: var(--grigio);
  border-radius: 9px; padding: 3px 9px; font: inherit; font-size: 0.7rem; cursor: pointer;
  transition: var(--transition);
}
.fb-meta button:hover { border-color: var(--testo); color: var(--testo); }
.fb-meta button.usun:hover { border-color: var(--rosso); color: var(--rosso); }
.fb-tresc { font-size: 0.88rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }

.admin-body { flex: 1; overflow-y: auto; padding: 18px; }
.admin-pane { display: none; }
.admin-pane.active { display: block; }
.admin-card {
  background: var(--bianco); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 16px; margin-bottom: 14px;
}
.admin-card h3 {
  font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--grigio); margin: 0 0 12px;
}

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 14px; }
.kpi {
  background: var(--bianco); border: 1px solid var(--border); border-left: 4px solid #0EA5E9;
  border-radius: 8px; padding: 12px 14px;
}
.kpi .kpi-label {
  font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--grigio);
}
.kpi .kpi-value {
  font-size: 1.5rem; font-weight: 800; margin-top: 3px;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.kpi .kpi-sub { font-size: 0.7rem; color: var(--muted-light); font-weight: 600; margin-top: 2px; }
.kpi.zysk { border-left-color: #16A34A; }
.kpi.zysk .kpi-value { color: #15803D; }
.kpi.uwaga { border-left-color: var(--primary); }
.kpi.zle { border-left-color: var(--rosso); }

.dt { width: 100%; border-collapse: collapse; font-size: 0.79rem; }
.dt th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg-soft); text-align: left; padding: 8px 10px;
  font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted-dark); border-bottom: 1px solid var(--border-2); white-space: nowrap;
}
.dt td { padding: 8px 10px; border-bottom: 1px solid var(--bg-soft); vertical-align: middle; }
.dt tbody tr:hover { background: var(--crema); }
.dt .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dt .mono { font-family: 'Consolas', 'Courier New', monospace; font-size: 0.74rem; color: var(--grigio); }
.dt-scroll { max-height: 420px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--bianco); }
.dt-empty { padding: 26px; text-align: center; color: var(--muted-light); font-size: 0.82rem; font-weight: 600; }

.pill {
  display: inline-block; padding: 2px 8px; border-radius: 20px;
  font-size: 0.68rem; font-weight: 800; white-space: nowrap;
}
.pill.ok   { background: #DCFCE7; color: #15803D; }
.pill.wait { background: var(--bg-amber-soft); color: var(--muted-dark); }
.pill.bad  { background: var(--bg-error-soft2); color: #B91C1C; }
.pill.info { background: var(--bg-info-soft); color: #0369A1; }
.pill.off  { background: var(--bg-soft); color: var(--grigio); }

.zgl-admin-pasek { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.zgl-admin-zakladki { display: flex; flex-wrap: wrap; gap: 6px; }
.zgl-admin-zakladki button {
  border: 1px solid var(--border-2); background: var(--bianco); color: var(--testo); border-radius: 999px;
  padding: 5px 12px; font: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer;
}
.zgl-admin-zakladki button.aktywna { background: var(--testo); color: var(--bianco); border-color: var(--testo); }
.zgl-admin-zbierz { margin: 0; width: auto; flex: 0 0 auto; padding: 8px 16px; font-size: 0.82rem; min-height: 0; }
.zgl-admin-lista { display: flex; flex-direction: column; gap: 10px; max-height: 720px; overflow: auto; }
.zgl-admin-wiersz { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--bianco); font-size: 0.82rem; }
.zgl-admin-wiersz.rozwiazane { opacity: 0.72; }
.zgl-admin-glowa { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 8px; color: var(--grigio); font-size: 0.76rem; }
.zgl-admin-glowa strong { color: var(--testo); }
.zgl-admin-karta { font-size: 0.95rem; margin: 0 0 6px; overflow-wrap: anywhere; }
.zgl-admin-karta b { font-weight: 800; }
.zgl-admin-pola { display: grid; grid-template-columns: max-content 1fr; gap: 3px 10px; margin: 6px 0; }
.zgl-admin-pola dt { color: var(--grigio); font-weight: 700; }
.zgl-admin-pola dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.zgl-admin-pola dd.propozycja { font-weight: 800; }
.zgl-admin-audio { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0; }
.zgl-admin-audio audio { height: 34px; max-width: 100%; }
.zgl-admin-akcje { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.zgl-admin-akcje .btn { margin: 0; padding: 6px 14px; font-size: 0.78rem; min-height: 0; width: auto; flex: 0 0 auto; }

.bars { display: flex; flex-direction: column; gap: 7px; }
.bar-row { display: grid; grid-template-columns: 92px 1fr 46px; align-items: center; gap: 9px; font-size: 0.76rem; }
.bar-track { height: 9px; background: var(--bg-soft); border-radius: 5px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: #0EA5E9; border-radius: 5px; }
.bar-row .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 800; }

.admin-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 900px) {
  .admin-grid-2 { grid-template-columns: 1fr; }
}

.admin-form-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.admin-in {
  padding: 7px 10px; border: 1px solid var(--border-2); border-radius: 7px;
  font-family: inherit; font-size: 0.8rem; background: var(--bianco); color: var(--testo); outline: none;
}
.admin-in:focus { border-color: #0EA5E9; }
.admin-btn {
  padding: 7px 14px; border: none; border-radius: 7px; background: var(--testo); color: var(--bianco);
  font-family: inherit; font-size: 0.78rem; font-weight: 800; cursor: pointer; transition: var(--transition);
}
.admin-btn:hover { background: #1E293B; }
.admin-btn.sec { background: var(--border); color: var(--testo); }
.admin-btn.sec:hover { background: var(--border-2); }

.por-siatka { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 14px; }
.por-pole { display: flex; flex-direction: column; gap: 5px; }
.por-pole > span { font-size: 0.75rem; font-weight: 800; color: var(--testo); }
.por-pole > span em { font-weight: 600; font-style: normal; color: var(--grigio); }
.por-pole .admin-in { width: 100%; box-sizing: border-box; }
.por-szeroko { grid-column: 1 / -1; }

.sesja-koniec {
  position: fixed; inset: 0; z-index: 12000;
  background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.sesja-koniec-karta {
  background: var(--card-bg); border: 1px solid var(--border-2); border-radius: 22px;
  padding: 30px 28px; max-width: 380px; width: 100%; text-align: center;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.35);
}
.sesja-koniec-ikona { font-size: 2.2rem; line-height: 1; margin-bottom: 12px; }
.sesja-koniec-karta h3 { margin: 0 0 8px; font-size: 1.15rem; color: var(--testo); }
.sesja-koniec-karta p { margin: 0 0 18px; font-size: 0.92rem; color: var(--grigio); line-height: 1.6; }
.sesja-koniec-karta .btn { width: 100%; margin: 0; }

.por-zdjecie { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.por-zdjecie-podglad {
  width: 190px; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden;
  border: 1px dashed var(--border-2); background: var(--crema);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.por-zdjecie-podglad img { width: 100%; height: 100%; object-fit: cover; display: block; }
.por-zdjecie-akcje { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }

.por-pasek { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.por-btn {
  padding: 5px 11px; border: 1px solid var(--border-2); border-radius: 20px; background: var(--bianco);
  color: var(--testo); font-family: inherit; font-size: 0.72rem; font-weight: 700; cursor: pointer;
}
.por-btn:hover { border-color: #0EA5E9; color: #0EA5E9; }
.por-para { display: inline-flex; }
.por-para .por-btn { border-radius: 20px 0 0 20px; }
.por-para .por-btn-ai { border-radius: 0 20px 20px 0; margin-left: -1px; padding: 5px 9px; }
.por-btn-ai[disabled] { opacity: .5; cursor: progress; }

.por-split { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: stretch; }
.por-split.z-podgladem { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .por-split.z-podgladem { grid-template-columns: minmax(0, 1fr); } }

.por-podglad {
  border: 1px solid var(--border-warm); border-radius: 16px;
  background: var(--card-bg); overflow: hidden;
  display: flex; flex-direction: column; min-height: 420px; max-height: 70vh;
}
.por-podglad-stan {
  padding: 8px 14px; font-size: 0.74rem; color: var(--grigio);
  border-bottom: 1px solid var(--border-warm); background: var(--bg-soft); flex-shrink: 0;
}
.por-podglad-tresc { padding: 18px 20px; overflow-y: auto; font-size: 0.92rem; line-height: 1.75; }
.por-podglad-uwagi {
  flex-shrink: 0; padding: 9px 14px; margin: 0; list-style: none;
  font-size: 0.74rem; line-height: 1.55; color: #92400E;
  background: rgba(245, 158, 11, 0.14); border-bottom: 1px solid var(--border-warm);
}
.por-podglad-uwagi div { padding: 2px 0; }
.por-podglad-tresc h2 { font-size: 1.15rem; margin: 18px 0 8px; }
.por-podglad-tresc h3 { font-size: 1rem; margin: 14px 0 6px; }
.por-podglad-tresc p { margin: 0 0 10px; }
.por-podglad-tresc img { max-width: 100%; height: auto; border-radius: 12px; }

.por-podglad-tresc {
  --karta: var(--card-bg);
  --tlo: var(--bg-soft);
  --tekst: var(--testo);
  --zielen: #16A34A;
  --czerwien: #DC2626;
  --primary-jasny: var(--bg-soft);
  --primary-ciemny: var(--primary);
}
.por-blok {
  margin: 26px 0; padding: 18px 20px 16px;
  background: var(--karta, #fff);
  border: 1px solid var(--border, #E2E8F0);
  border-left: 4px solid var(--primary, #2563EB);
  border-radius: 16px;
}
.por-blok-quiz      { border-left-color: var(--primary, #2563EB); }
.por-blok-fiszki    { border-left-color: #A855F7; }
.por-blok-sluchanie { border-left-color: #F59E0B; }
.por-blok-smart-czytanie { border-left-color: var(--zielen, #16A34A); }
.por-blok-tytul {
  margin: 0 0 14px; font-size: 1.02rem; font-weight: 700;
  color: var(--testo, #0F172A); display: flex; align-items: center; gap: 8px;
}
.por-blok-ikona { font-size: 1.15rem; line-height: 1; }
.por-blok-podp { margin: 12px 0 0; font-size: .82rem; color: var(--grigio, #64748B); }
.por-blok-glos {
  flex: none; width: 30px; height: 30px; padding: 0; cursor: pointer;
  border: 1px solid var(--border, #E2E8F0); border-radius: 9px; font-size: .9rem;
  background: var(--crema, #F8FAFC); color: inherit; line-height: 1;
}
.por-blok-glos:hover { border-color: var(--primary, #2563EB); }
.por-blok-akcja {
  padding: 8px 16px; cursor: pointer; font: inherit; font-size: .85rem; font-weight: 600;
  border: 1px solid var(--border-2, #CBD5E1); border-radius: 999px;
  background: var(--crema, #F8FAFC); color: var(--testo, #0F172A);
}
.por-blok-akcja:hover { border-color: var(--primary, #2563EB); color: var(--primary, #2563EB); }

.por-fiszki { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.por-fiszka { display: flex; align-items: stretch; gap: 8px; }
.por-fiszka-karta {
  flex: 1; display: flex; flex-direction: column; gap: 4px; cursor: pointer;
  padding: 12px 14px; text-align: left; font: inherit;
  background: var(--crema, #F8FAFC); color: var(--testo, #0F172A);
  border: 1px solid var(--border, #E2E8F0); border-radius: 12px;
}
.por-fiszka-karta:hover { border-color: #A855F7; }
.por-fiszka-przod { display: flex; flex-direction: column; gap: 3px; }
.por-fiszka-obcy { font-weight: 700; }
.por-fiszka-wym { font-size: .82rem; color: var(--grigio, #64748B); font-style: italic; }
.por-fiszka-tyl { display: flex; flex-direction: column; gap: 2px; }
.por-fiszka-pol { color: var(--primary, #2563EB); font-weight: 600; }
.por-fiszka-notka { font-size: .82rem; color: var(--grigio, #64748B); }
.por-blok[data-js] .por-fiszka-tyl { display: none; }
.por-blok[data-js] .por-fiszka-karta[aria-expanded="true"] .por-fiszka-tyl { display: flex; }

.por-quiz { margin: 0; padding: 0 0 0 4px; list-style: none; counter-reset: pyt; display: grid; gap: 18px; }
.por-quiz-pyt { counter-increment: pyt; }
.por-quiz-tresc { margin: 0 0 10px; font-weight: 600; color: var(--testo, #0F172A); }
.por-quiz-tresc::before { content: counter(pyt) ". "; color: var(--primary, #2563EB); }
.por-quiz-odp { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.por-quiz-btn {
  width: 100%; text-align: left; cursor: pointer; font: inherit; font-size: .95rem;
  padding: 10px 14px; border-radius: 11px;
  background: var(--crema, #F8FAFC); color: var(--testo, #0F172A);
  border: 1px solid var(--border, #E2E8F0);
}
.por-quiz-btn:hover { border-color: var(--primary, #2563EB); }
.por-quiz-btn.dobra  { border-color: var(--zielen, #16A34A); background: rgba(22,163,74,.12); font-weight: 600; }
.por-quiz-btn.zla    { border-color: var(--czerwien, #DC2626); background: rgba(220,38,38,.10); }
.por-quiz-btn[disabled] { cursor: default; }
.por-quiz-wyj {
  margin: 10px 0 0; padding: 10px 13px; font-size: .88rem; border-radius: 10px;
  background: var(--primary-jasny, #EFF6FF); color: var(--tekst, #334155);
}
.por-blok[data-js] .por-quiz-wyj { display: none; }
.por-blok[data-js] .por-quiz-pyt.odpowiedziane .por-quiz-wyj { display: block; }

.por-sluch-audio { width: 100%; margin: 0 0 12px; }
.por-dialog { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.por-dialog-w { display: flex; align-items: flex-start; gap: 9px; }
.por-dialog-tekst { display: flex; flex-direction: column; gap: 2px; padding-top: 3px; }
.por-dialog-obcy { font-weight: 600; }
.por-dialog-tlum { font-size: .85rem; color: var(--grigio, #64748B); }
.por-sluch-akcje { margin-top: 12px; display: none; }
.por-blok[data-js] .por-sluch-akcje { display: block; }
.por-blok[data-js] .por-dialog.zakryty .por-dialog-tekst { filter: blur(5px); opacity: .55; user-select: none; }

.por-smart-tekst { margin: 0 0 8px; font-size: 1.02rem; line-height: 2; }
.por-smart-slowo {
  padding: 0; font: inherit; line-height: 1.3; cursor: pointer; background: none;
  color: inherit; vertical-align: baseline;
  border: none; border-bottom: 2px dotted var(--zielen, #16A34A);
}
.por-smart-slowo:hover, .por-smart-slowo.wybrane { background: rgba(22,163,74,.14); border-radius: 4px; }
.por-smart-cien { color: var(--grigio, #64748B); font-size: .88em; }
.por-blok[data-js] .por-smart-cien { display: none; }
.por-smart-panel {
  margin: 10px 0 0; padding: 10px 13px; min-height: 42px; font-size: .9rem; border-radius: 10px;
  background: var(--crema, #F8FAFC); color: var(--tekst, #334155);
}
.por-smart-panel b { color: var(--testo, #0F172A); }
.por-smart-panel i { color: var(--grigio, #64748B); }

.por-film { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; }
.por-film-plakat {
  display: block; width: 100%; height: 100%; padding: 0; border: none; cursor: pointer;
  background: #000;
}
.por-film-plakat img { width: 100%; height: 100%; object-fit: cover; display: block; }
.por-film-play {
  position: absolute; inset: 0; margin: auto; width: 68px; height: 68px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; color: #fff; padding-left: 5px;
  background: rgba(15,23,42,.72); border-radius: 50%; pointer-events: none;
}
.por-film-plakat:hover .por-film-play { background: #DC2626; }
.por-film iframe { width: 100%; height: 100%; border: 0; display: block; }

.por-trigger-linia { margin: 22px 0; text-align: center; }
.por-trigger {
  padding: 13px 26px; cursor: pointer; font: inherit; font-size: 1rem; font-weight: 700;
  color: #fff; background: var(--primary, #2563EB); border: none; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(37,99,235,.28);
}
.por-trigger:hover { background: var(--primary-ciemny, #1D4ED8); }

.por-blok-modal {
  position: fixed; inset: 0; z-index: 9000; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(8,12,20,.72);
}
.por-blok-modal.otwarty { display: flex; }
.por-blok-modal-okno {
  position: relative; width: min(680px, 100%); max-height: 88vh; overflow-y: auto;
  padding: 26px 22px 22px; border-radius: 20px;
  background: var(--tlo, #F0F4F8);
}
.por-blok-modal-x {
  position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; cursor: pointer;
  font-size: 1.3rem; line-height: 1; border-radius: 50%;
  border: 1px solid var(--border, #E2E8F0); background: var(--karta, #fff); color: inherit;
}
.por-blok-modal .por-blok { margin: 0; }

@media (max-width: 560px) {
  .por-blok { padding: 15px 14px 13px; border-radius: 13px; }
  .por-smart-tekst { font-size: .97rem; line-height: 1.95; }
}
@media (prefers-reduced-motion: reduce) {
  .por-blok, .por-blok * { transition: none !important; animation: none !important; }
}
.por-przelacznik {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: 0.78rem; color: var(--muted-dark);
}

.por-tresc {
  width: 100%; box-sizing: border-box; resize: vertical; line-height: 1.55;
  font-family: ui-monospace, Consolas, 'Courier New', monospace; font-size: 0.78rem;
}
.por-stan { font-size: 0.75rem; font-weight: 700; color: var(--grigio); margin: 6px 0 10px; }
.por-stan b { color: var(--testo); }
.por-stan.ok b { color: var(--verde); }
.por-stan.malo b { color: #B45309; }

.por-sciaga { background: var(--crema); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; }
.por-sciaga summary { cursor: pointer; font-size: 0.78rem; font-weight: 800; }
.por-sciaga table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.76rem; }
.por-sciaga td { padding: 4px 8px 4px 0; vertical-align: top; color: var(--grigio); }
.por-sciaga td:first-child { white-space: nowrap; width: 1%; color: var(--testo); }
.por-sciaga code { background: var(--bianco); border: 1px solid var(--border-2); border-radius: 4px; padding: 1px 5px; font-size: 0.95em; }

.por-wiersz {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 7px;
  background: var(--bianco); border: 1px solid var(--border); border-left: 4px solid var(--border-2);
  border-radius: 9px; cursor: pointer;
}
.por-wiersz:hover { border-color: #0EA5E9; }
.por-wiersz.jest { border-left-color: var(--verde); }
.por-wiersz.szkic { border-left-color: #D97706; }
.por-wiersz-tytul { font-size: 0.85rem; font-weight: 800; }
.por-wiersz-meta { font-size: 0.72rem; color: var(--grigio); font-weight: 600; margin-top: 2px; }
.por-wiersz-stan { margin-left: auto; font-size: 0.7rem; font-weight: 800; white-space: nowrap; }
.por-wiersz.jest .por-wiersz-stan { color: var(--verde); }
.por-wiersz.szkic .por-wiersz-stan { color: #B45309; }

.por-uwaga {
  background: #FEF3C7; border-left: 4px solid #D97706; border-radius: 0 8px 8px 0;
  padding: 9px 13px; margin-bottom: 8px; font-size: 0.78rem; font-weight: 600; color: #78350F;
}
.admin-btn.del { background: var(--bg-error-soft2); color: #B91C1C; }
.admin-btn.del:hover { background: var(--rosso); color: var(--bianco); }
.admin-btn.mini { padding: 4px 9px; font-size: 0.7rem; }

.chart-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.72rem; font-weight: 700; color: var(--muted-dark); margin-top: 8px; }
.chart-legend span i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; }

#adminPane-poradnik {
  --kra-ok-tlo: #E3F3E6; --kra-ok: #1E6B31;
  --kra-plan-tlo: #E5EDFD; --kra-plan: #1A4FC4;
  --kra-uwaga-tlo: #FFF2CC; --kra-uwaga: #6E4A00;
  --kra-blad-tlo: #FCE6E6; --kra-blad: #A11B1B;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #adminPane-poradnik {
    --kra-ok-tlo: rgba(53, 166, 77, 0.2); --kra-ok: #86D597;
    --kra-plan-tlo: rgba(36, 99, 233, 0.24); --kra-plan: #A9C2F8;
    --kra-uwaga-tlo: rgba(255, 200, 61, 0.16); --kra-uwaga: #FFD66B;
    --kra-blad-tlo: rgba(219, 39, 39, 0.22); --kra-blad: #F7A3A3;
  }
}
:root[data-theme="dark"] #adminPane-poradnik {
  --kra-ok-tlo: rgba(53, 166, 77, 0.2); --kra-ok: #86D597;
  --kra-plan-tlo: rgba(36, 99, 233, 0.24); --kra-plan: #A9C2F8;
  --kra-uwaga-tlo: rgba(255, 200, 61, 0.16); --kra-uwaga: #FFD66B;
  --kra-blad-tlo: rgba(219, 39, 39, 0.22); --kra-blad: #F7A3A3;
}

#adminPane-poradnik .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.kra-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; line-height: 1.5; white-space: nowrap; }
.kra-p-szkic { background: var(--bg-soft); color: var(--testo); }
.kra-p-plan { background: var(--kra-plan-tlo); color: var(--kra-plan); }
.kra-p-ok { background: var(--kra-ok-tlo); color: var(--kra-ok); }
.kra-p-krotki, .kra-p-uwaga { background: var(--kra-uwaga-tlo); color: var(--kra-uwaga); }
.kra-p-blad { background: var(--kra-blad-tlo); color: var(--kra-blad); }

.kra-lista-glowa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.kra-lista-glowa h3 { margin: 0; }
.kra-przyciski { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kra-przyciski .admin-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; border-radius: 999px; padding: 0 16px; text-decoration: none; }
.admin-btn.kra-duzy { min-height: 48px; padding: 0 22px; font-family: var(--font-naglowek); font-weight: 800; font-size: 0.95rem; }
.kra-lista-uklad { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; margin-top: 12px; }
.kra-lista-glowna { flex: 999 1 560px; min-width: 0; }
.kra-lista-bok { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.kra-karta { border: 1.5px solid var(--border); border-radius: 16px; padding: 14px 16px; background: var(--bianco); }
.kra-karta h4 { margin: 0 0 6px; font-family: var(--font-naglowek); font-weight: 800; font-size: 0.95rem; color: var(--testo); }
.kra-filtry { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.kra-filtr {
  display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px; border-radius: 999px;
  border: 1.5px solid var(--border-2); background: var(--kon-pole); color: var(--testo);
  font-family: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer;
}
.kra-filtr b { font-variant-numeric: tabular-nums; }
.kra-filtr.wybrany { background: var(--kon-akcent); color: var(--kon-na-akcencie); border-color: var(--kon-wybor-obwodka); }
.kra-filtr:focus-visible, .kra-wiersz-tytul:focus-visible, .kra-dzien:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.kra-szukaj-rzad { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.kra-szukaj { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--border-2); background: var(--kon-pole); color: var(--grigio); }
.kra-szukaj input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--testo); font-family: inherit; font-size: 0.82rem; font-weight: 600; outline: none; }
.kra-wybor { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 6px 0 14px; border-radius: 999px; border: 1.5px solid var(--border-2); background: var(--kon-pole); font-size: 0.78rem; font-weight: 700; color: var(--grigio); }
.kra-wybor select { border: 0; background: transparent; color: var(--testo); font-family: inherit; font-size: 0.8rem; font-weight: 700; min-height: 36px; }
.kra-wiersz {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 12px 14px; margin-bottom: 8px;
  border: 1.5px solid var(--border); border-radius: 16px; background: var(--bianco);
}
.kra-mini { flex: 0 0 92px; width: 92px; height: 60px; border-radius: 10px; object-fit: cover; background: var(--bg-soft); }
.kra-mini-brak { display: flex; align-items: center; justify-content: center; border: 1.5px dashed var(--border-2); background: transparent; color: var(--grigio); font-size: 0.7rem; font-weight: 700; }
.kra-wiersz-tresc { flex: 999 1 300px; min-width: 0; }
.kra-wiersz-tytul { display: block; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; font-family: var(--font-naglowek); font-weight: 800; font-size: 0.95rem; line-height: 1.3; color: var(--testo); }
.kra-wiersz-tytul:hover { text-decoration: underline; }
.kra-wiersz-meta { margin-top: 2px; font-size: 0.74rem; font-weight: 600; color: var(--grigio); overflow-wrap: anywhere; }
.kra-pasek-slow { height: 6px; max-width: 340px; margin-top: 7px; border-radius: 999px; background: var(--bg-soft); overflow: hidden; }
.kra-pasek-slow span { display: block; height: 100%; border-radius: 999px; background: var(--kra-uwaga); }
.kra-braki { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 7px; }
.kra-braki-glowa { font-size: 0.72rem; font-weight: 700; color: var(--grigio); }
.kra-wiersz-stan { flex: 1 0 180px; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.kra-kiedy { font-size: 0.72rem; font-weight: 600; color: var(--grigio); }
.kra-wiersz-akcje { display: flex; align-items: center; gap: 6px; }
.kra-wiersz-akcje .admin-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; border-radius: 999px; }
.kra-ikona { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; border: 1.5px solid var(--border-2); color: var(--testo); text-decoration: none; }
.kra-ikona .ico { margin: 0; }
.kra-pusto { margin: 0; padding: 20px; border: 1.5px dashed var(--border-2); border-radius: 16px; text-align: center; color: var(--grigio); font-weight: 600; }
.kra-plan-baner { padding: 12px 14px; margin-bottom: 12px; border-radius: 14px; background: var(--kra-plan-tlo); color: var(--kra-plan); font-weight: 700; font-size: 0.82rem; }
.kra-plan-baner .kra-chipy { margin-top: 8px; }
.kra-kal-glowa { font-size: 0.74rem; color: var(--grigio); margin: 0 0 10px; }
.kra-kal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) 58px; gap: 4px; align-items: center; }
.kra-kal-dn { font-size: 0.66rem; font-weight: 800; color: var(--grigio); text-align: center; }
.kra-dzien {
  position: relative; height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--testo);
  font-family: inherit; font-size: 0.74rem; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer;
}
.kra-dzien:hover { background: var(--bg-soft); }
.kra-dzien.przeszly { color: var(--muted-light); cursor: default; }
.kra-dzien.przeszly:hover { background: transparent; }
.kra-dzien.dzis { box-shadow: inset 0 0 0 2px var(--kon-akcent-linia); }
.kra-dzien.plan { background: var(--kra-plan-tlo); color: var(--kra-plan); }
.kra-dzien.jest { background: var(--kra-ok-tlo); color: var(--kra-ok); }
.kra-dzien.plan::after, .kra-dzien.jest::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 999px; background: currentColor; }
.kra-kal .kra-pill { justify-content: center; padding: 2px 4px; }
.kra-legenda { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 10px 0; font-size: 0.72rem; font-weight: 600; color: var(--grigio); }
.kra-legenda span { display: inline-flex; align-items: center; gap: 5px; }
.kra-legenda i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; }
.kra-zaplanowane { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 0.8rem; font-weight: 600; }
.kra-zaplanowane li { display: flex; gap: 8px; align-items: baseline; }
.kra-zasady { margin: 0; display: flex; flex-direction: column; gap: 9px; }
.kra-zasady dd { margin: 3px 0 0; font-size: 0.76rem; color: var(--grigio); line-height: 1.5; }

.kra-ed-glowa { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 12px; }
.kra-ed-glowa .admin-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; border-radius: 999px; padding: 0 16px; }
.kra-ed-nazwa { flex: 1 1 300px; min-width: 0; }
.kra-ed-tytul { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.05rem; line-height: 1.25; color: var(--testo); overflow-wrap: anywhere; }
.kra-ed-stan { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; font-size: 0.74rem; font-weight: 600; color: var(--grigio); }
.kra-tryby { display: inline-flex; padding: 3px; border-radius: 999px; border: 1.5px solid var(--border-2); background: var(--kon-pole); }
.kra-tryby button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--testo); font-family: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.kra-tryby button.wybrany { background: var(--kon-akcent); color: var(--kon-na-akcencie); box-shadow: inset 0 0 0 1.5px var(--kon-wybor-obwodka); font-weight: 800; }
.kra-stan { min-height: 0; font-size: 0.8rem; font-weight: 600; color: var(--grigio); margin: -4px 0 10px; }
.kra-stan:empty { display: none; }
.kra-uwagi-zapisu { margin: 0 0 12px; }
.kra-kroki { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.kra-kroki li { display: flex; align-items: center; gap: 8px; }
.kra-krok-btn {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 4px 14px 4px 4px; border: 0; border-radius: 999px;
  background: transparent; color: var(--grigio); font-family: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer;
}
.kra-krok-btn:hover { background: var(--bg-soft); }
.kra-krok-btn.biezacy { background: var(--kon-akcent-tlo); color: var(--testo); font-weight: 800; }
.kra-krok-btn.zrobiony { color: var(--testo); }
.kra-krok-nr {
  width: 34px; height: 34px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1.5px var(--border-2); font-family: var(--font-naglowek); font-weight: 800;
}
.kra-krok-btn.biezacy .kra-krok-nr { background: var(--kon-akcent); color: var(--kon-na-akcencie); box-shadow: none; }
.kra-krok-btn.zrobiony .kra-krok-nr { box-shadow: inset 0 0 0 1.5px var(--kon-akcent-linia); color: var(--kon-akcent-linia); }
.kra-krok-btn.blad .kra-krok-nr { box-shadow: inset 0 0 0 1.5px var(--kra-blad); color: var(--kra-blad); }
.kra-krok-btn .ico { margin: 0; }
.kra-laczik { width: 18px; height: 2px; background: var(--border-2); }
.kra-uklad { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.kra-glowna { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.kra-bok { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.kra-h { margin: 0; font-family: var(--font-naglowek); font-weight: 800; font-size: 1.35rem; color: var(--testo); }
.kra-sekcja { border: 1.5px solid var(--border); border-radius: 16px; padding: 14px 16px; background: var(--bianco); }
.kra-sekcja > h4, .kra-sekcja-glowa h4 { margin: 0 0 4px; font-family: var(--font-naglowek); font-weight: 800; font-size: 1rem; color: var(--testo); }
.kra-sekcja-glowa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.kra-opis { margin: 0 0 10px; font-size: 0.8rem; color: var(--grigio); line-height: 1.5; }
.kra-pole { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.kra-pole > span { font-size: 0.76rem; font-weight: 800; color: var(--testo); }
.kra-in {
  width: 100%; box-sizing: border-box; min-height: 42px; padding: 8px 12px; border: 1.5px solid var(--border-2); border-radius: 12px;
  background: var(--kon-pole); color: var(--testo); font-family: inherit; font-size: 0.86rem; outline: none;
}
.kra-in:focus, .kra-edyt:focus { border-color: var(--kon-akcent-linia); box-shadow: 0 0 0 3px var(--fokus-pierscien); }
.kra-in[disabled] { opacity: 0.6; cursor: not-allowed; }
textarea.kra-in { resize: vertical; line-height: 1.5; }
.kra-in.kra-tytul-pole { min-height: 50px; font-family: var(--font-naglowek); font-weight: 700; font-size: 1.1rem; }
.kra-in.kra-mono, .kra-zapis { font-family: ui-monospace, Consolas, 'Courier New', monospace; font-size: 0.78rem; line-height: 1.6; }
.kra-licznik { display: flex; align-items: center; gap: 10px; font-size: 0.74rem; font-weight: 700; color: var(--grigio); }
.kra-licznik-pasek { flex: 1; height: 6px; border-radius: 999px; background: var(--bg-soft); overflow: hidden; }
.kra-licznik-pasek span { display: block; height: 100%; border-radius: 999px; background: var(--kra-ok); }
.kra-licznik-pasek.za span { background: var(--kra-blad); }
.kra-rada { font-size: 0.76rem; color: var(--grigio); }
.kra-rada.zle { color: var(--kra-blad); font-weight: 700; }
.kra-chipy { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kra-chip {
  display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 40px; padding: 4px 14px;
  border-radius: 14px; border: 1.5px solid var(--border-2); background: var(--kon-pole); color: var(--testo);
  font-family: inherit; font-size: 0.8rem; font-weight: 800; cursor: pointer; text-align: left;
}
.kra-chip small { font-size: 0.68rem; font-weight: 600; opacity: 0.85; }
.kra-chip.wybrany, .kra-seg button.wybrany { background: var(--kon-akcent); color: var(--kon-na-akcencie); border-color: var(--kon-wybor-obwodka); }
.kra-dzialy { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.kra-dzial { display: flex; flex-direction: column; gap: 3px; padding: 11px 13px; border-radius: 14px; border: 1.5px solid var(--border-2); background: var(--kon-pole); color: var(--testo); font-family: inherit; text-align: left; cursor: pointer; }
.kra-dzial b { font-family: var(--font-naglowek); font-weight: 800; font-size: 0.88rem; }
.kra-dzial span { font-size: 0.74rem; color: var(--grigio); line-height: 1.45; }
.kra-dzial.wybrany { background: var(--kon-akcent-tlo); border-color: var(--kon-akcent-linia); }
.kra-rady { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 0.8rem; line-height: 1.5; }
.kra-przyklady { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; font-size: 0.8rem; }
.kra-przyklady div { display: flex; gap: 8px; align-items: flex-start; }
.kra-stopka { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 4px; }
.kra-stopka .admin-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; border-radius: 999px; padding: 0 18px; }
.kra-stopka .admin-btn.kra-dalej { font-family: var(--font-naglowek); font-weight: 800; font-size: 0.92rem; }
.kra-stopka-prawo { display: flex; flex-wrap: wrap; gap: 8px; }
.kra-seg { display: inline-flex; padding: 2px; border-radius: 999px; background: var(--bg-soft); }
.kra-seg button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--testo); font-family: inherit; font-size: 0.74rem; font-weight: 700; cursor: pointer; }

.kra-pasek-tresci { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.kra-pasek-duzy { position: relative; height: 10px; margin: 8px 0 4px; border-radius: 999px; background: var(--bg-soft); }
.kra-pasek-duzy > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--kra-ok); }
.kra-pasek-duzy.malo > span { background: var(--kra-uwaga); }
.kra-pasek-duzy .prog { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--testo); }
.kra-pasek-duzy .cel { position: absolute; top: -3px; bottom: -3px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--kon-akcent-linia); }
.kra-pasek-podpis { display: flex; justify-content: space-between; gap: 8px; font-size: 0.7rem; font-weight: 600; color: var(--grigio); }
.kra-blok { border: 1.5px solid var(--border); border-radius: 16px; background: var(--bianco); }
.kra-blok.ma-blad { border-color: var(--kra-blad); }
.kra-blok-glowa { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 5px 8px 5px 12px; border-bottom: 1.5px solid var(--border); }
.kra-blok-typ { display: inline-flex; align-items: center; gap: 7px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--grigio); }
.kra-blok-glowa .kra-odstep { flex: 1; }
.kra-ib {
  width: 34px; height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--grigio);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-family: inherit; font-weight: 800;
}
.kra-ib:hover { background: var(--bg-soft); color: var(--testo); }
.kra-ib .ico { margin: 0; }
.kra-ib[disabled] { opacity: 0.35; cursor: default; }
.kra-ai { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--border-2); background: var(--kon-pole); color: var(--testo); font-family: inherit; font-size: 0.74rem; font-weight: 700; cursor: pointer; }
.kra-ai[disabled] { opacity: 0.55; cursor: progress; }
.kra-blok-cialo { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.kra-edyt {
  min-height: 46px; padding: 10px 12px; border: 1.5px solid var(--border-2); border-radius: 12px; background: var(--kon-pole);
  color: var(--testo); font-size: 0.92rem; line-height: 1.65; outline: none; overflow-wrap: anywhere; white-space: pre-wrap;
}
.kra-edyt:empty::before { content: attr(data-podpowiedz); color: var(--muted-light); }
.kra-edyt.ramka { background: var(--kra-plan-tlo); }
.kra-edyt.cytat { font-style: italic; }
.kra-edyt code { font-family: ui-monospace, Consolas, monospace; font-size: 0.9em; padding: 0 4px; border-radius: 4px; background: var(--bg-soft); }
.kra-edyt mark { background: var(--kon-akcent-tlo); color: inherit; border-bottom: 2px solid var(--kon-akcent-linia); padding: 0 2px; }
.kra-edyt mark.bez-tlum { border-bottom-color: var(--kra-blad); }
.kra-naglowek-pole { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.15rem; }
.kra-tabela-ramka { overflow-x: auto; }
.kra-tabela { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0 5px; }
.kra-tabela th { text-align: left; padding: 0 5px; font-size: 0.7rem; font-weight: 800; color: var(--grigio); }
.kra-tabela td { padding: 0 3px; vertical-align: middle; }
.kra-tabela .kra-in { min-height: 38px; padding: 6px 9px; border-radius: 10px; font-size: 0.82rem; }
.kra-tabela .kra-in.obcy { font-weight: 800; }
.kra-tabela .kra-in.brak { border-style: dashed; border-color: var(--kra-uwaga); background: var(--kra-uwaga-tlo); }
.kra-dodaj { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1.5px dashed var(--border-2); background: transparent; color: var(--testo); font-family: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer; }
.kra-przelacznik { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 600; cursor: pointer; }
.kra-przelacznik input { width: 18px; height: 18px; accent-color: var(--kon-akcent-linia); }
.kra-pytanie { margin: 0; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 14px; display: flex; flex-direction: column; gap: 8px; }
.kra-pytanie legend { padding: 0 6px; font-size: 0.72rem; font-weight: 800; color: var(--grigio); }
.kra-odp { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 6px 0 10px; border-radius: 12px; border: 1.5px solid var(--border-2); background: var(--kon-pole); }
.kra-odp.ok { border-color: var(--kon-akcent-linia); background: var(--kon-akcent-tlo); }
.kra-odp input[type="radio"] { width: 18px; height: 18px; accent-color: var(--kon-akcent-linia); flex: none; }
.kra-odp .kra-in { border: 0; background: transparent; min-height: 38px; padding: 0 4px; }
.kra-odp-znak { font-size: 0.72rem; font-weight: 800; color: var(--kon-akcent-linia); white-space: nowrap; }
.kra-wstawka { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; }
.kra-wstawka span { flex: 1; height: 1px; background: var(--border); }
.kra-plus { width: 26px; height: 26px; border-radius: 999px; border: 1.5px solid var(--border-2); background: var(--bianco); color: var(--grigio); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.kra-plus .ico { margin: 0; font-size: 0.7rem; }
.kra-dodaj-duzy { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 54px; margin-top: 8px; border-radius: 16px; border: 1.5px dashed var(--border-2); background: transparent; color: var(--testo); font-family: var(--font-naglowek); font-weight: 800; font-size: 0.95rem; cursor: pointer; }
.kra-menu { margin: 8px 0; padding: 14px 16px; border: 1.5px solid var(--kon-akcent-linia); border-radius: 16px; background: var(--bianco); }
.kra-menu h5 { margin: 12px 0 6px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grigio); }
.kra-menu-siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 7px; }
.kra-menu-poz { display: flex; align-items: stretch; border-radius: 12px; border: 1.5px solid var(--border-2); background: var(--kon-pole); overflow: hidden; }
.kra-menu-poz > button { border: 0; background: transparent; color: var(--testo); font-family: inherit; text-align: left; cursor: pointer; }
.kra-menu-poz > button:first-child { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; }
.kra-menu-poz > button:first-child b { font-size: 0.82rem; }
.kra-menu-poz > button:first-child span { font-size: 0.72rem; color: var(--grigio); line-height: 1.4; }
.kra-menu-poz > button.kra-menu-ai { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0 10px; border-left: 1.5px solid var(--border-2); font-size: 0.64rem; font-weight: 800; }
.kra-menu-poz > button:hover { background: var(--bg-soft); }
.kra-blok-uwagi:empty { display: none; }
.kra-blok-uwagi { padding: 0 14px 12px; display: flex; flex-direction: column; gap: 5px; }
.kra-komunikat { margin: 0; padding: 8px 12px; border-radius: 10px; font-size: 0.78rem; font-weight: 700; line-height: 1.5; }
.kra-komunikat.blad { background: var(--kra-blad-tlo); color: var(--kra-blad); }
.kra-komunikat.uwaga { background: var(--kra-uwaga-tlo); color: var(--kra-uwaga); }
.kra-komunikat.ok { background: var(--kra-ok-tlo); color: var(--kra-ok); }
.kra-komunikat.info { background: var(--kon-akcent-tlo); color: var(--testo); }
.kra-film { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.kra-film-mini { flex: 0 0 200px; height: 112px; border-radius: 12px; border: 1.5px dashed var(--border-2); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--grigio); font-size: 0.72rem; font-weight: 700; text-align: center; }
.kra-film-mini img { width: 100%; height: 100%; object-fit: cover; }
.kra-film-pola { flex: 1 1 220px; display: flex; flex-direction: column; gap: 8px; }
.kra-slowa-smart { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.kra-slowa-smart li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.kra-slowa-smart b { min-width: 90px; }
.kra-slowa-smart .kra-in { flex: 1 1 140px; width: auto; min-height: 36px; }
.kra-zakladki { display: inline-flex; align-self: flex-start; padding: 3px; border-radius: 999px; border: 1.5px solid var(--border-2); background: var(--kon-pole); }
.kra-zakladki button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--testo); font-family: inherit; font-size: 0.8rem; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.kra-zakladki button.wybrany { background: var(--kon-akcent); color: var(--kon-na-akcencie); box-shadow: inset 0 0 0 1.5px var(--kon-wybor-obwodka); }
.kra-podglad-ramka { border: 1.5px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--card-bg); }
.kra-podglad-ramka .por-podglad-stan { border-bottom: 1.5px solid var(--border); }
.kra-podglad-ramka .por-podglad-tresc { max-height: 75vh; }
.kra-podglad-ramka.telefon { max-width: 390px; margin: 0 auto; border-radius: 28px; border-width: 8px; border-color: var(--border-2); }
.kra-zapis { margin: 0; padding: 14px 16px; max-height: 75vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--testo); }
.kra-uwagi-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.kra-uwagi-lista li { display: flex; gap: 8px; align-items: flex-start; }
.kra-uwagi-lista li .kra-komunikat { flex: 1; }
.kra-link-maly { border: 0; background: none; padding: 6px 4px; color: var(--kon-akcent-linia); font-family: inherit; font-size: 0.78rem; font-weight: 800; cursor: pointer; white-space: nowrap; }

.kra-google { padding: 14px 16px; border-radius: 12px; background: #FFFFFF; font-family: Arial, system-ui, sans-serif; }
.kra-google-witryna { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.kra-google-witryna i { width: 28px; height: 28px; border-radius: 999px; background: #17183B; color: #FFC83D; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-family: var(--font-naglowek); font-weight: 800; font-size: 0.85rem; }
.kra-google-witryna span { display: flex; flex-direction: column; line-height: 1.25; font-size: 0.85rem; color: #202124; }
.kra-google-witryna small { font-size: 0.74rem; color: #4D5156; overflow-wrap: anywhere; }
.kra-google-tytul { font-size: 1.2rem; line-height: 1.3; color: #1A0DAB; margin-bottom: 4px; overflow-wrap: anywhere; }
.kra-google-opis { font-size: 0.86rem; line-height: 1.58; color: #4D5156; }
.kra-link-podglad { border-radius: 12px; overflow: hidden; background: #F0F2F5; color: #050505; }
.kra-link-podglad-obraz { aspect-ratio: 1.91 / 1; background: #D9DCE6; display: flex; align-items: center; justify-content: center; color: #4A4D6B; }
.kra-link-podglad-obraz img, .kra-kafel-obraz img, .kra-zdjecie-podglad img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kra-link-podglad-tekst { padding: 10px 14px 12px; }
.kra-link-podglad-tekst small { display: block; font-size: 0.72rem; color: #4A4D56; text-transform: uppercase; }
.kra-link-podglad-tekst b { display: block; font-size: 0.95rem; line-height: 1.3; }
.kra-link-podglad-tekst span { display: block; font-size: 0.82rem; color: #4A4D56; line-height: 1.4; }
.kra-kafel { max-width: 300px; border-radius: 16px; overflow: hidden; background: #FFFFFF; border: 1.5px solid #E1E5F2; color: #17183B; }
.kra-kafel-obraz { aspect-ratio: 16 / 10; background: #D9DCE6; }
.kra-kafel-tekst { padding: 12px 14px 14px; }
.kra-kafel-tekst small { display: block; font-size: 0.72rem; font-weight: 800; color: #1A4FC4; }
.kra-kafel-tekst b { display: block; font-family: var(--font-naglowek); font-weight: 800; font-size: 0.95rem; line-height: 1.3; }
.kra-kafel-tekst span { display: block; font-size: 0.72rem; color: #4A4D6B; margin-top: 3px; }
.kra-adres { display: flex; flex-wrap: wrap; align-items: center; min-height: 44px; border-radius: 12px; border: 1.5px solid var(--border-2); background: var(--kon-pole); overflow: hidden; }
.kra-adres > span { padding: 0 2px 0 12px; color: var(--grigio); font-weight: 600; font-size: 0.84rem; }
.kra-adres input { flex: 1 1 160px; min-width: 0; min-height: 42px; border: 0; background: transparent; color: var(--testo); font-family: inherit; font-weight: 800; font-size: 0.86rem; outline: none; }
.kra-zdjecie { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.kra-zdjecie-podglad { flex: 0 0 220px; aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; border: 1.5px dashed var(--border-2); display: flex; align-items: center; justify-content: center; color: var(--grigio); font-size: 0.76rem; font-weight: 700; }
.kra-zdjecie-akcje { flex: 1 1 240px; display: flex; flex-direction: column; gap: 8px; }
.kra-tag { display: inline-flex; align-items: center; gap: 2px; min-height: 32px; padding: 0 2px 0 12px; border-radius: 999px; border: 1.5px solid var(--border-2); background: var(--kon-pole); font-size: 0.78rem; font-weight: 700; }
.kra-tag .kra-ib { width: 28px; height: 28px; }
.kra-tag-nowy { width: 150px; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1.5px dashed var(--border-2); background: transparent; color: var(--testo); font-family: inherit; font-size: 0.78rem; }
.kra-powiazane { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.kra-powiazane li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 12px; border: 1.5px solid var(--border-2); background: var(--kon-pole); }
.kra-powiazane li b { flex: 1 1 220px; font-size: 0.82rem; }
.kra-propozycje { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--kon-akcent-tlo); }
.kra-propozycja { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 0.8rem; }
.kra-propozycja b { flex: 1 1 240px; overflow-wrap: anywhere; }

.kra-kontrola { list-style: none; margin: 0; padding: 0; }
.kra-kontrola li { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-top: 1px solid var(--border); }
.kra-kontrola li:first-child { border-top: 0; }
.kra-waga { flex: none; width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.kra-waga .ico { margin: 0; font-size: 0.8rem; }
.kra-waga.ok { background: var(--kra-ok-tlo); color: var(--kra-ok); }
.kra-waga.blad { background: var(--kra-blad-tlo); color: var(--kra-blad); }
.kra-waga.uwaga { background: var(--kra-uwaga-tlo); color: var(--kra-uwaga); }
.kra-waga.czeka { background: var(--bg-soft); color: var(--grigio); }
.kra-kontrola-tekst { flex: 1; min-width: 0; }
.kra-kontrola-tekst b { display: block; font-size: 0.86rem; color: var(--testo); }
.kra-kontrola-tekst span { display: block; font-size: 0.78rem; color: var(--grigio); line-height: 1.5; overflow-wrap: anywhere; }
.kra-kontrola .admin-btn { min-height: 34px; border-radius: 999px; }
.kra-liczby { display: flex; flex-wrap: wrap; gap: 10px; }
.kra-liczby > div { flex: 1 1 220px; padding: 12px 14px; border-radius: 12px; background: var(--bg-soft); }
.kra-liczby > div.kreska { background: transparent; border: 1.5px dashed var(--border-2); }
.kra-liczby big { display: block; font-family: var(--font-naglowek); font-weight: 800; font-size: 1.5rem; color: var(--testo); }
.kra-opcje { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.kra-opcja { display: flex; flex-direction: column; gap: 5px; padding: 13px; min-height: 118px; border-radius: 14px; border: 1.5px solid var(--border-2); background: var(--kon-pole); color: var(--testo); font-family: inherit; text-align: left; cursor: pointer; }
.kra-opcja.wybrana { background: var(--kon-akcent-tlo); border-color: var(--kon-akcent-linia); }
.kra-opcja b { font-family: var(--font-naglowek); font-weight: 800; font-size: 0.95rem; }
.kra-opcja span:not(.kra-pill) { font-size: 0.76rem; color: var(--grigio); line-height: 1.45; }
.kra-plan { margin-top: 14px; padding: 12px; border-radius: 14px; background: var(--bg-soft); }
.kra-tydzien { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 8px; }
.kra-tydzien-nazwa { width: 120px; font-size: 0.72rem; font-weight: 800; color: var(--grigio); }
.kra-dzien-plan { width: 50px; min-height: 50px; border: 0; border-radius: 12px; background: var(--kon-pole); color: var(--testo); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; font-family: inherit; font-weight: 800; font-size: 0.9rem; cursor: pointer; }
.kra-dzien-plan small { font-size: 0.64rem; font-weight: 700; opacity: 0.85; }
.kra-dzien-plan.zajety { background: var(--kra-plan-tlo); color: var(--kra-plan); }
.kra-dzien-plan.wybrany { background: var(--kon-akcent); color: var(--kon-na-akcencie); box-shadow: inset 0 0 0 1.5px var(--kon-wybor-obwodka); }
.kra-dzien-plan[disabled] { background: transparent; color: var(--muted-light); cursor: default; }
.kra-os { list-style: none; margin: 0; padding: 0; }
.kra-os li { display: flex; gap: 12px; }
.kra-os-nr { display: flex; flex-direction: column; align-items: center; }
.kra-os-nr span { width: 26px; height: 26px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--kon-akcent-linia); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-naglowek); font-weight: 800; font-size: 0.75rem; color: var(--testo); }
.kra-os-nr::after { content: ""; flex: 1; width: 2px; min-height: 12px; background: var(--border-2); }
.kra-os li:last-child .kra-os-nr::after { display: none; }
.kra-os-tekst { padding-bottom: 12px; }
.kra-os-tekst b { display: block; font-size: 0.84rem; color: var(--testo); }
.kra-os-tekst span { display: block; font-size: 0.78rem; color: var(--grigio); line-height: 1.5; }
.kra-niebezpieczne { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px; border-radius: 16px; border: 1.5px solid var(--border); }
.kra-niebezpieczne p { flex: 1 1 300px; margin: 0; font-size: 0.78rem; color: var(--grigio); }
.kra-podsumowanie { margin: 0; display: flex; flex-direction: column; gap: 9px; }
.kra-podsumowanie > div { display: flex; gap: 10px; align-items: baseline; }
.kra-podsumowanie dt { flex: 0 0 96px; font-size: 0.72rem; font-weight: 800; color: var(--grigio); }
.kra-podsumowanie dd { margin: 0; flex: 1; min-width: 0; font-size: 0.82rem; font-weight: 600; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: no-preference) {
  .kra-filtr, .kra-chip, .kra-dzial, .kra-opcja, .kra-krok-btn { transition: background 0.15s ease, border-color 0.15s ease; }
}


.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 0.85rem;
  color: var(--grigio);
}
.toggle {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border-2);
  border-radius: 24px;
  cursor: pointer;
  transition: var(--transition);
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  left: 3px; top: 3px;
  background: white;
  border-radius: 50%;
  transition: var(--transition);
}
.toggle input:checked + .toggle-slider { background: var(--oro); }
.toggle input:checked + .toggle-slider::before { transform: translateX(20px); }

.progress-wrap { margin: 10px 0; }
.progress-label { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--grigio); margin-bottom: 4px; }
.progress-bar {
  height: 8px;
  background: var(--border-warm);
  border-radius: 8px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--zielen-gleboka), var(--zielen-pastel));
  border-radius: 8px;
  transition: width 0.6s ease;
}

.wgr-panel {
  background: var(--card-bg); border: 1px solid var(--border-warm); border-radius: 18px;
  padding: 20px 18px; margin-top: 12px; text-align: center;
}
.wgr-pierscien { position: relative; width: 96px; height: 96px; margin: 0 auto 14px; }
.wgr-pierscien svg { transform: rotate(-90deg); }
.wgr-pierscien circle { fill: none; stroke-width: 8; stroke-linecap: round; }
.wgr-tor { stroke: var(--bg-soft); }
.wgr-luk { stroke: var(--verde); transition: stroke-dashoffset 0.5s cubic-bezier(.22,1,.36,1); }
.wgr-procent {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.wgr-etap { font-size: 0.95rem; font-weight: 700; margin-bottom: 4px; }
.wgr-detal { font-size: 0.82rem; color: var(--grigio); line-height: 1.5; min-height: 2.4em; }

.wgr-kroki { display: flex; justify-content: center; gap: 18px; margin-top: 16px; flex-wrap: wrap; }
.wgr-krok { font-size: 0.74rem; color: var(--grigio); display: flex; align-items: center; gap: 6px; }
.wgr-krok .kropka {
  width: 8px; height: 8px; border-radius: 50%; background: var(--border-warm); flex-shrink: 0;
}
.wgr-krok.trwa { color: var(--testo); font-weight: 700; }
.wgr-krok.trwa .kropka { background: var(--verde); animation: wgrPuls 1.2s ease-in-out infinite; }
.wgr-krok.zrobiony .kropka { background: var(--verde); }
@keyframes wgrPuls { 50% { transform: scale(1.5); opacity: 0.5; } }

.wgr-odrzucone {
  margin-top: 14px; text-align: left; background: var(--bg-warn-soft);
  border-radius: 14px; padding: 13px 15px;
}
.wgr-odrzucone h4 { margin: 0 0 4px; font-size: 0.88rem; font-weight: 800; }
.wgr-odrzucone > p { margin: 0 0 10px; font-size: 0.78rem; color: var(--grigio); line-height: 1.5; }
.wgr-zla {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: baseline;
  padding: 7px 0; border-top: 1px solid var(--border-warm-soft); font-size: 0.8rem;
}
.wgr-zla b { font-weight: 700; }
.wgr-zla .podane { color: var(--rosso); text-decoration: line-through; }
.wgr-zla .strzalka { color: var(--grigio); font-size: 0.72rem; }
.wgr-zla .powod { grid-column: 1 / -1; font-size: 0.72rem; color: var(--grigio); }
.wgr-odrzucone-wiecej { font-size: 0.76rem; color: var(--grigio); margin-top: 8px; }

.upload-log {
  background: #1A1A1A;
  color: #00FF88;
  border-radius: 10px;
  padding: 12px;
  font-family: monospace;
  font-size: 0.75rem;
  max-height: 160px;
  overflow-y: auto;
  margin-top: 10px;
  display: none;
  line-height: 1.6;
}
.upload-log.active { display: block; }
.log-line { margin: 0; }
.log-line.err { color: #FF6B6B; }
.log-line.ok  { color: #00FF88; }
.log-line.info { color: #FFD700; }

.main-content { min-width: 0; }

.fiszka-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 0.85rem;
  color: var(--grigio);
}
.fiszka-nav-select {
  padding: 6px 12px; border-radius: 50px; border: 1px solid var(--border-warm);
  background: var(--crema); font-family: inherit; font-size: 0.78rem; font-weight: 600;
  color: var(--testo); cursor: pointer; outline: none; max-width: 150px; transition: var(--transition);
}
.fiszka-nav-select:focus { border-color: var(--oro); }
.custom-select { position: relative; display: inline-block; }
.custom-select-btn { display: inline-flex; align-items: center; gap: 6px; }
.custom-select-caret { font-size: 0.7em; opacity: 0.7; }
.custom-select-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 200;
  background: var(--card-bg); border: 1px solid var(--border-warm-soft);
  border-radius: 12px; box-shadow: var(--shadow-hover);
  min-width: 180px; max-height: 320px; overflow-y: auto;
  padding: 6px; font-size: 0.85rem; font-weight: 600;
}
.custom-select-item {
  padding: 8px 12px; border-radius: 8px; cursor: pointer; color: var(--testo);
  white-space: nowrap;
}
.custom-select-item:hover { background: var(--crema); }
.custom-select-item.active { background: var(--bg-gold-soft); color: var(--testo); }


.community-full {
  position: fixed; left: 0; right: 0; bottom: 0; top: var(--cmty-top, 64px);
  z-index: 90; overflow-y: auto; overscroll-behavior: contain;
  background: var(--crema); padding: 18px 20px 60px;
}
.community-topbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 20px;
}

.community-tile.reklama {
  background: var(--bg-soft); border: 1px dashed var(--border-2); cursor: default;
  padding: 10px; min-height: 220px; display: flex; flex-direction: column; gap: 8px;
}
.community-tile.reklama:hover { transform: none; }
.reklama-etykieta {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted-light);
}

body.tryb-goscia .mode-tabs,
body.tryb-goscia .header-konto,
body.tryb-goscia #headerLangSwitcher,
body.tryb-goscia #communityAparatBtn,
body.tryb-goscia #communitySortBtn,
body.tryb-goscia .community-tile-akcje,
body.tryb-goscia #communityDetailLike,
body.tryb-goscia #communityDetailSave,
body.tryb-goscia #communityDetailDelete,
body.tryb-goscia .community-komentarz-form,
body.tryb-goscia .community-btn-zapisz,
body.tryb-goscia .community-btn-przejdz { display: none !important; }
body.tryb-goscia .cmty-autor-link { pointer-events: none; }
body.tryb-goscia .cmty-autor-link:hover .cmty-autor-nick { text-decoration: none; }
body.tryb-goscia .header-konto { cursor: pointer; }
.gosc-cta { display: none; }
body.tryb-goscia .gosc-cta {
  display: inline-flex; align-items: center; gap: 6px; border: none; border-radius: 999px;
  padding: 9px 16px; background: var(--oro); color: var(--na-akcencie); font-family: inherit;
  font-size: 0.82rem; font-weight: 800; cursor: pointer; white-space: nowrap;
}
body.tryb-goscia .gosc-cta:hover { filter: brightness(1.08); }

body.cmty-mode .app-header { display: none; }

body.cmty-mode .community-topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--crema); padding: 10px 0; margin-bottom: 12px;
  transition: transform 0.26s cubic-bezier(.22,1,.36,1), opacity 0.2s ease;
  will-change: transform;
}
body.cmty-mode.cmty-pasek-schowany .community-topbar {
  transform: translateY(calc(-100% - 12px));
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  body.cmty-mode .community-topbar { transition: none; }
  body.cmty-mode.cmty-pasek-schowany .community-topbar { transform: none; opacity: 1; pointer-events: auto; }
}
.cmty-nawigacja { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.cmty-logo { height: 31px; margin-left: 14px; flex-shrink: 0; }
@media (max-width: 900px) {
  .cmty-logo { display: none; }
}
.cmty-nawigacja .mode-tab { font-size: 0.8rem; padding: 6px 14px; }
.cmty-nawigacja .header-konto-opis { display: block; }
.cmty-nawigacja .header-lang-menu { left: auto; right: 0; }

@media (max-width: 760px) {
  .cmty-nawigacja { margin-left: 0; }
  .cmty-nawigacja .header-konto-opis { display: none; }
}
@media (max-width: 560px) {
  .cmty-nawigacja { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
}
.community-search-wrap { position: relative; flex: 1; min-width: 200px; max-width: 420px; }
.community-search-ico {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  font-size: 0.8rem; pointer-events: none; opacity: 0.5;
}
#communitySearch {
  width: 100%; box-sizing: border-box; padding: 9px 32px 9px 34px;
  border-radius: 999px; border: 1px solid var(--border); background: var(--bg-soft);
  color: var(--testo); font-family: inherit; font-size: 0.85rem; transition: var(--transition);
}
#communitySearch::placeholder { color: var(--muted-light); }

.community-aparat {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-warm); background: var(--card-bg); color: var(--testo);
  font-size: 1rem; transition: var(--transition);
}
.community-aparat:hover { border-color: var(--oro); color: var(--oro); }
.community-aparat .ico { margin: 0; }

.cmty-wgraj-info {
  display: flex; align-items: center; gap: 9px; margin-bottom: 14px;
  padding: 10px 13px; border-radius: 12px; line-height: 1.45;
  background: var(--bg-success-soft); border: 1px solid var(--zielen-pastel);
  font-size: 0.82rem; color: var(--muted-dark);
}
.cmty-wgraj-info b { color: var(--testo); }
.cmty-wgraj-info .flaga { display: inline-flex; line-height: 0; vertical-align: -2px; margin: 0 2px; }
.cmty-wgraj-opis { font-size: 0.78rem; color: var(--grigio); line-height: 1.55; margin: 12px 0 0; }
#communitySearch:focus { outline: none; border-color: var(--oro); background: var(--card-bg); }
.community-search-clear {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--grigio); cursor: pointer; font-size: 0.8rem;
}
.community-filters {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: nowrap;
  flex: 1; min-width: min-content;
}
.community-chip {
  border: 1px solid var(--border); background: transparent; color: var(--grigio);
  border-radius: 999px; padding: 7px 13px; font-family: inherit; font-size: 0.8rem;
  font-weight: 600; cursor: pointer; transition: var(--transition); white-space: nowrap;
}
.community-chip:hover { border-color: var(--border-2); color: var(--testo); background: var(--bg-soft); }
.community-chip.active { border-color: var(--oro); color: var(--oro); background: transparent; font-weight: 700; }
.community-kafelki {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%;
  border: 1px solid var(--border); background: transparent; color: var(--grigio);
  font-size: 0.85rem; line-height: 1; cursor: pointer; transition: var(--transition);
  display: inline-flex; align-items: center; justify-content: center;
}
.community-kafelki .ico { margin-right: 0; }
.community-kafelki:hover { border-color: var(--border-2); color: var(--testo); background: var(--bg-soft); }
.community-kafelki.otwarty { border-color: var(--oro); color: var(--oro); background: var(--bg-highlight); }

.cmty-kategorie {
  position: fixed; left: 0; top: var(--cmty-top, 0px); bottom: 0; z-index: 60;
  width: 260px; max-width: 82vw; padding: 14px 12px;
  background: var(--card-bg); border-right: 1px solid var(--border-warm-soft);
  box-shadow: 18px 0 50px rgba(0,0,0,0.20);
  display: flex; flex-direction: column; gap: 4px;
  transform: translateX(-100%);
  transition: transform 0.32s cubic-bezier(.22,1,.36,1);
  overflow-y: auto;
}
.cmty-kategorie.otwarty { transform: translateX(0); }
.cmty-kategorie-tlo {
  position: fixed; inset: 0; z-index: 55; background: rgba(15,23,42,0.32);
  opacity: 0; pointer-events: none; transition: opacity 0.28s ease;
}
.cmty-kategorie-tlo.otwarty { opacity: 1; pointer-events: auto; }
.cmty-kategorie-head {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 800; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--grigio); padding: 4px 8px 10px; border-bottom: 1px solid var(--border-warm-soft);
  margin-bottom: 6px;
}
.cmty-kategorie-zamknij {
  width: 28px; height: 28px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--bg-soft); color: var(--grigio); font-size: 0.85rem; line-height: 1;
  transition: var(--transition);
}
.cmty-kategorie-zamknij:hover { background: var(--bg-error-soft); color: var(--rosso); }
.cmty-kategorie-lista { display: flex; flex-direction: column; gap: 2px; }
.cmty-kategoria {
  display: flex; align-items: flex-start; gap: 11px; width: 100%; text-align: left;
  padding: 10px 11px; border: none; border-radius: 12px; background: transparent;
  font-family: inherit; color: var(--testo); cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}
.cmty-kategoria:hover { background: var(--bg-soft); transform: translateX(2px); }
.cmty-kategoria.active { background: var(--bg-highlight); color: var(--oro); }
.cmty-kategoria .ico { font-size: 1rem; margin-right: 0; margin-top: 3px; }
.cmty-kategoria b { display: block; font-size: 0.85rem; font-weight: 700; }
.cmty-kategoria small { display: block; font-size: 0.71rem; color: var(--grigio); line-height: 1.45; margin-top: 2px; }
.cmty-kategorie.otwarty .cmty-kategoria { animation: kategoriaWjazd 0.34s cubic-bezier(.22,1,.36,1) backwards; }
@keyframes kategoriaWjazd { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .cmty-kategorie { transition: none; }
  .cmty-kategorie.otwarty .cmty-kategoria { animation: none; }
  .cmty-kategoria:hover { transform: none; }
}

.community-empty { text-align: center; padding: 60px 20px; color: var(--grigio); font-size: 0.95rem; }
.cmty-zaproszenie {
  grid-column: 1 / -1; text-align: center; padding: 48px 24px; max-width: 460px;
  margin: 20px auto; background: var(--card-bg); border-radius: var(--radius);
  border: 2px dashed var(--border-2);
}
.cmty-zaproszenie-ikona { font-size: 2.4rem; line-height: 1; margin-bottom: 10px; }
.cmty-zaproszenie-tytul { font-size: 1.15rem; font-weight: 800; color: var(--testo); margin-bottom: 8px; }
.cmty-zaproszenie p { color: var(--grigio); font-size: 0.86rem; line-height: 1.6; margin: 0 0 18px; }

.cmty-zaproszenie.upuszczalny { cursor: pointer; transition: var(--transition); }
.cmty-zaproszenie.upuszczalny:hover { border-color: var(--oro); }
.cmty-zaproszenie.dragover {
  border-color: var(--oro); border-style: solid;
  background: var(--bg-success-soft);
  transform: scale(1.01);
}
@media (prefers-reduced-motion: reduce) { .cmty-zaproszenie.dragover { transform: none; } }
.cmty-zaproszenie-upusc {
  display: block; margin-top: 12px; font-size: 0.76rem; color: var(--muted-light);
}
.cmty-zaproszenie input[type="file"] { display: none; }

.cmty-polecany {
  display: flex; align-items: center; gap: 14px; margin: 0 0 16px;
  padding: 14px 18px; border-radius: 18px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--primary) 12%, var(--card-bg)), var(--card-bg));
  border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
  animation: odsluchWjazd 0.4s cubic-bezier(.22,1,.36,1);
}
.polecany-ikona {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff; font-size: 1.05rem;
}
.polecany-ikona .ico { margin: 0; }
.polecany-tresc { flex: 1; min-width: 0; }
.polecany-powod { font-size: 0.78rem; font-weight: 700; color: var(--primary); }
.polecany-tytul { font-size: 1rem; font-weight: 800; margin-top: 2px; }
.polecany-meta { font-size: 0.76rem; color: var(--grigio); margin-top: 2px; }
.polecany-btn { width: auto; margin: 0; flex-shrink: 0; padding: 10px 18px; font-size: 0.85rem; }
@media (max-width: 560px) {
  .cmty-polecany { flex-wrap: wrap; }
  .polecany-btn { width: 100%; }
}


.community-board {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  grid-auto-rows: 8px; gap: 18px; align-items: start;
}
.community-board.z-closeup { grid-auto-flow: row dense; }
.community-tile.otwarty { outline: 3px solid var(--oro); outline-offset: 2px; }
.community-tile.otwarty:hover { transform: none; }
.community-tile {
  position: relative; border-radius: 18px; overflow: hidden; cursor: pointer;
  background: var(--bg-soft); box-shadow: var(--shadow);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease;
  will-change: transform;
}
.community-tile:hover { transform: translateY(-8px) scale(1.035); box-shadow: 0 18px 40px rgba(0,0,0,0.32); z-index: 5; }
.community-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.community-tile-badge {
  position: absolute; top: 10px; right: 10px; background: rgba(15,23,42,0.78); color: #fff;
  font-size: 0.72rem; font-weight: 800; padding: 4px 9px; border-radius: 999px;
}


.community-serce {
  background: rgba(15,23,42,0.55); border: none; border-radius: 999px;
  padding: 5px 9px 5px 7px; cursor: pointer; line-height: 0; flex-shrink: 0;
  display: flex; align-items: center; gap: 4px;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease;
}
.community-serce:hover { background: rgba(15,23,42,0.75); }
.community-serce svg { width: 22px; height: 22px; display: block; }
.community-serce path {
  fill: transparent; stroke: #fff; stroke-width: 2;
  transition: fill 0.22s ease, stroke 0.22s ease;
}
.community-serce.lubie path { fill: var(--primary); stroke: var(--primary); }
.community-serce:hover { transform: scale(1.18); }
.community-serce.pyk { animation: sercePyk 0.42s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes sercePyk {
  0% { transform: scale(1); } 40% { transform: scale(1.42); } 100% { transform: scale(1); }
}
.community-serce-ile {
  font-size: 0.72rem; font-weight: 800; color: #fff; font-family: inherit;
}
.community-tile-overlay {
  position: absolute; inset: 0; padding: 12px;
  background: linear-gradient(0deg, rgba(15,23,42,0.95) 0%, rgba(15,23,42,0.82) 40%, rgba(15,23,42,0.25) 78%, rgba(15,23,42,0) 100%);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 3px;
  opacity: 0; transition: opacity 0.25s ease;
}
.community-tile:hover .community-tile-overlay { opacity: 1; }
.community-tile-tytul { color: #fff; font-weight: 800; font-size: 0.9rem; line-height: 1.25; }

.community-tile.kandydat { outline: 2px dashed var(--oro); outline-offset: -2px; }
.community-tile-powod {
  position: absolute; top: 10px; left: 10px; max-width: calc(100% - 96px);
  background: rgba(15,23,42,0.78); color: #fff; font-size: 0.7rem; font-weight: 700; line-height: 1.3;
  padding: 4px 9px; border-radius: 10px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.kand-powod {
  display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px;
  padding: 10px 13px; border-radius: 12px; border: 1.5px solid var(--oro); background: var(--bg-soft);
  font-size: 0.84rem; line-height: 1.45; color: var(--testo);
}
.kand-powod .ico { color: var(--oro); margin-top: 2px; }

.wer-powod {
  border: 1.5px solid var(--border-warm); background: var(--bg-soft); color: var(--testo);
  border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 0.86rem; cursor: pointer;
}
.wer-powod.wybrany { border-color: var(--rosso); background: var(--bg-error, #fdecec); font-weight: 600; }
.community-tile-meta { color: #CBD5E1; font-size: 0.7rem; }
.community-tile-akcje { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.community-btn-zapisz, .community-btn-przejdz {
  border: none; border-radius: 999px; padding: 7px 13px; font-family: inherit;
  font-size: 0.75rem; font-weight: 800; cursor: pointer; transition: var(--transition);
  white-space: nowrap; line-height: 1.2;
}
.community-btn-zapisz { background: var(--rosso); color: #fff; }
.community-btn-zapisz.zapisane { background: #0F172A; color: #fff; }
.community-btn-przejdz { background: rgba(255,255,255,0.92); color: #0F172A; }
.community-btn-zapisz:hover, .community-btn-przejdz:hover { filter: brightness(1.1); }

.community-detail {
  position: fixed; inset: 0; z-index: 200; background: rgba(2, 6, 23, 0.82);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.community-detail-karta {
  position: relative; background: var(--card-bg); border-radius: 22px; overflow: hidden;
  display: flex; align-items: stretch;
}
.community-detail-obraz {
  position: relative; display: flex;
  align-items: center; justify-content: center; background: var(--card-bg);
}
.cmty-nalepki {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px;
  pointer-events: none;
}
.cmty-nalepki.hidden { display: none; }
.cmty-film { width: 100%; max-width: 760px; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28); background: #000; }
.cmty-film.hidden { display: none; }
.cmty-film iframe { width: 100%; height: 100%; border: 0; display: block; }
.cmty-film-graj {
  position: absolute; inset: 0; z-index: 3; border: 0; background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.cmty-film-graj.hidden { display: none; }
.cmty-film-graj::before {
  content: ""; width: 68px; height: 48px; border-radius: 12px; background: rgba(15, 23, 42, 0.72);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); transition: background .15s ease, transform .15s ease;
}
.cmty-film-graj::after {
  content: ""; position: absolute; width: 0; height: 0;
  border-left: 18px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent;
  margin-left: 5px;
}
.cmty-film-graj:hover::before, .cmty-film-graj:focus-visible::before { background: var(--marka-czerwony); transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .cmty-film-graj:hover::before { transform: none; } }
.community-detail-obraz img {
  display: block; width: auto; height: auto; max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
}

.community-detail-karta.w-siatce {
  grid-column: 1 / span var(--closeup-kolumny, 1);
  grid-row: 1 / span var(--closeup-wiersze, 40);
  align-self: start;
  width: auto; max-width: none; max-height: none;
  box-shadow: 0 20px 60px rgba(2, 6, 23, 0.42);
  border: 1px solid var(--border);
  animation: closeupWjazd 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes closeupWjazd {
  from { opacity: 0; transform: scale(0.965); }
  to   { opacity: 1; transform: none; }
}
.community-detail-karta.w-siatce .community-detail-obraz { flex: 1 1 0%; min-width: 0; align-items: flex-start; }
.community-detail-karta.w-siatce .community-detail-obraz img {
  max-height: 74vh; max-width: 100%;
}
.community-detail-karta.w-siatce .community-detail-panel {
  flex: 0 0 340px; min-width: 0; max-height: 74vh;
}
.community-detail-karta.w-siatce.pion { flex-direction: column; }
.community-detail-karta.w-siatce.pion .community-detail-obraz { flex: 0 0 auto; }
.community-detail-karta.w-siatce.pion .community-detail-obraz img { max-height: 46vh; }
.community-detail-karta.w-siatce.pion .community-detail-panel {
  flex: 1 1 auto; max-height: none; min-height: 0;
}

.community-detail-wroc {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,0.94); color: #0F172A; font-size: 1.15rem; line-height: 1;
  box-shadow: 0 3px 12px rgba(0,0,0,0.32);
  transition: transform 0.18s cubic-bezier(0.22,1,0.36,1), background 0.18s ease;
}
.community-detail-wroc:hover { transform: translateX(-3px); background: #fff; }

.community-detail-akcje-gora {
  position: absolute; top: 12px; right: 12px; z-index: 4;
  display: flex; gap: 8px;
  opacity: 0; pointer-events: none;
}
.community-detail-karta:hover .community-detail-akcje-gora,
.community-detail-akcje-gora:focus-within { opacity: 1; pointer-events: auto; }

.community-akcja {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.34); background: rgba(15,23,42,0.62); color: #fff;
  font-size: 1rem; line-height: 1;
  opacity: 0; transform: translateY(-10px) scale(0.8);
  transition: opacity 0.26s cubic-bezier(.22,1,.36,1), transform 0.26s cubic-bezier(.22,1,.36,1),
              background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.community-detail-karta:hover .community-akcja,
.community-detail-akcje-gora:focus-within .community-akcja { opacity: 1; transform: none; }
.community-detail-karta:hover .community-akcja:nth-child(1) { transition-delay: 0.02s; }
.community-detail-karta:hover .community-akcja:nth-child(2) { transition-delay: 0.06s; }
.community-detail-karta:hover .community-akcja:nth-child(3) { transition-delay: 0.10s; }
.community-detail-karta:hover .community-akcja:nth-child(4) { transition-delay: 0.14s; }

.community-akcja:hover { background: rgba(15,23,42,0.86); border-color: #fff; transform: translateY(-2px); }
.community-akcja.aktywna { border-color: var(--primary); background: var(--primary); }
.community-akcja.polubione { border-color: var(--rosso); background: var(--rosso); color: #fff; }
.community-akcja.zapisane-akcja { border-color: var(--zielen-pastel); background: var(--zielen-gleboka); color: #fff; }
.community-akcja.glowna { border-color: var(--zielen-pastel); background: var(--zielen-gleboka); color: #fff; }
.community-akcja.glowna:hover { background: var(--zielen-pastel); color: var(--testo); border-color: #fff; }

@media (hover: none) {
  .community-detail-akcje-gora { opacity: 1; pointer-events: auto; }
  .community-akcja { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .community-detail-akcje-gora { opacity: 1; pointer-events: auto; }
  .community-akcja { opacity: 1; transform: none; transition-delay: 0s !important; }
}

.community-detail-panel {
  flex: 1 1 340px; padding: 22px; overflow: hidden;
  min-width: 300px; min-height: 420px; display: flex; flex-direction: column;
}
.community-detail-panel > h2,
.community-detail-panel > .community-detail-meta,
.community-detail-panel > .community-ai-nota,
.community-detail-panel > .community-paczka-opis,
.community-detail-panel > .community-postep,
.community-detail-panel > .community-detail-akcje-gora { flex: 0 0 auto; }
.community-komentarze-sekcja { margin-top: auto; padding-top: 14px; }
.community-detail-panel h2 { margin: 0 0 6px; font-size: 1.15rem; }
.community-detail-meta { color: var(--grigio); font-size: 0.78rem; margin-bottom: 14px; }
.community-ai-nota {
  font-size: 0.66rem; color: var(--muted-light); letter-spacing: 0.02em;
  margin: -8px 0 12px;
}
.community-detail-slowa {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px;
  flex: 0 1 auto; min-height: 0; max-height: 210px; overflow-y: auto; padding-right: 4px;
}

.community-komentarze-sekcja {
  display: flex; flex-direction: column;
  flex: 1 1 auto; min-height: 190px;
  border-top: 1px solid var(--border); padding-top: 14px;
}
.community-komentarze-naglowek { font-size: 0.82rem; font-weight: 800; margin-bottom: 10px; }
.community-komentarze-naglowek span { color: var(--grigio); font-weight: 600; }
.community-komentarze-lista { flex: 1 1 auto; overflow-y: auto; min-height: 0; margin-bottom: 10px; padding-right: 4px; }
.community-komentarz {
  display: flex; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--border-warm-soft);
}
.community-komentarz:last-child { border-bottom: none; }
.community-komentarz-tresc { flex: 1; min-width: 0; }
.community-komentarz-autor { font-size: 0.78rem; font-weight: 800; }
.community-komentarz-kiedy { font-size: 0.68rem; color: var(--muted-light); font-weight: 500; }
.community-komentarz-tekst { font-size: 0.83rem; line-height: 1.5; word-wrap: break-word; margin-top: 2px; }
.community-komentarz-akcje { margin-left: 6px; }
.community-komentarz-akcje button {
  background: none; border: none; padding: 0; cursor: pointer; font-family: inherit;
  font-size: 0.7rem; color: var(--muted-light); transition: var(--transition);
}
.community-komentarz-akcje button:hover { color: var(--rosso); }
.community-komentarz-akcje button.zgloszony { color: var(--oro); cursor: default; }
.community-komentarz-flaga { font-size: 0.68rem; color: var(--rosso); font-weight: 700; }
.community-komentarze-pusto { color: var(--muted-light); font-size: 0.8rem; padding: 10px 0; }
.community-komentarz-form { display: flex; gap: 8px; flex: 0 0 auto; }

.community-komentarz-form textarea {
  flex: 1; box-sizing: border-box; padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-soft); color: var(--testo);
  font-family: inherit; font-size: 0.83rem;
}
.community-komentarz-form textarea:focus { outline: none; border-color: var(--oro); }
.community-komentarz-form button {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; border: none;
  background: var(--oro); color: var(--na-akcencie); cursor: pointer; font-size: 0.85rem;
  transition: var(--transition);
}
.community-komentarz-form button:hover { filter: brightness(1.1); }
.community-komentarz-licznik {
  text-align: right; font-size: 0.68rem; color: var(--muted-light); margin-top: 4px;
  flex: 0 0 auto;
}
.community-komentarz-licznik.blisko { color: var(--oro); font-weight: 700; }
.community-slowo-chip {
  background: var(--bg-soft); border: 1px solid var(--border-2); border-radius: 999px;
  padding: 5px 11px; font-size: 0.78rem; font-weight: 600; color: var(--testo);
}
.community-slowo-chip small { color: var(--grigio); font-weight: 500; }
.community-slowo-chip.juz-mam { border-color: var(--verde); border-width: 2px; background: var(--bg-success-soft); }
.community-chip-akcja {
  cursor: pointer; font-family: inherit; border-color: var(--oro); color: var(--oro);
  background: transparent; transition: var(--transition);
}
.community-chip-akcja:hover { background: var(--oro); color: var(--na-akcencie); }
.community-detail-usun {
  margin-top: 14px; width: 100%; padding: 9px 14px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--rosso); background: transparent; color: var(--rosso);
  font-family: inherit; font-size: 0.8rem; font-weight: 700; transition: var(--transition);
}
.community-detail-usun:hover { background: var(--rosso); color: #fff; }
.community-detail-close {
  position: absolute; top: 12px; right: 12px; z-index: 3; width: 34px; height: 34px;
  border-radius: 50%; border: none; background: rgba(15,23,42,0.7); color: #fff;
  cursor: pointer; font-size: 0.9rem;
}
.community-upload-karta {
  position: relative; background: var(--card-bg); border-radius: 22px; padding: 28px 26px;
  max-width: 460px; width: 100%; max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow-hover);
}
.community-upload-karta h2 { margin: 0 0 6px; font-size: 1.15rem; }
.community-upload-hint { color: var(--grigio); font-size: 0.85rem; line-height: 1.55; margin: 0 0 18px; }
.community-upload-pole { display: block; margin-bottom: 14px; }
.community-upload-pole span { display: block; font-size: 0.8rem; font-weight: 700; margin-bottom: 6px; }
.photo-warunki {
  background: var(--bg-warn-soft); border-radius: 14px; padding: 12px 15px; margin-bottom: 14px;
  font-size: 0.78rem; line-height: 1.6; color: var(--muted-dark);
}
.photo-warunki a { color: var(--oro); font-weight: 700; }
.photo-warunki-limit { display: block; margin-top: 6px; }
.photo-duplikat-nota {
  margin-top: 14px; background: var(--bg-warn-soft); border-radius: 12px; padding: 10px 13px;
  font-size: 0.78rem; line-height: 1.5; color: var(--muted-dark);
}
.photo-zgoda.zablokowana { opacity: 0.5; cursor: default; }
.photo-zgoda {
  display: flex; gap: 9px; align-items: flex-start; margin: 12px 0 4px;
  font-size: 0.78rem; line-height: 1.55; color: var(--muted-dark); cursor: pointer;
}
.photo-zgoda input { margin-top: 2px; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--oro); }

.community-upload-jezyk {
  display: flex; align-items: center; gap: 8px; margin: 4px 0 16px;
  padding: 10px 13px; border-radius: 12px; background: var(--bg-info-soft);
  font-size: 0.82rem; color: var(--muted-dark);
}
.pole-z-przyciskiem { display: flex; gap: 8px; align-items: stretch; }
.pole-z-przyciskiem input { flex: 1; min-width: 0; }
.btn-auto-nazwa {
  flex-shrink: 0; border: 2px solid var(--oro); background: transparent; color: var(--oro);
  border-radius: 12px; padding: 0 14px; font-family: inherit; font-size: 0.82rem;
  font-weight: 700; cursor: pointer; transition: var(--transition); white-space: nowrap;
  display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 84px;
}
.btn-auto-nazwa:hover:not(:disabled) { background: var(--oro); color: var(--na-akcencie); }
.btn-auto-nazwa:disabled { opacity: 0.6; cursor: default; }
.btn-auto-nazwa .spinner-w-przycisku { border-color: color-mix(in srgb, var(--oro) 35%, transparent); border-top-color: var(--oro); }

.community-upload-pole input, .community-upload-pole select {
  width: 100%; box-sizing: border-box; padding: 11px 14px; border-radius: 12px;
  border: 2px solid var(--border-2); background: var(--bg-soft); color: var(--testo);
  font-family: inherit; font-size: 0.9rem;
}
.community-upload-pole select option {
  background: var(--card-bg);
  color: var(--testo);
}
#cmtyBtn { width: 100%; margin-top: 6px; }

.community-upload-karta { transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
.community-upload-karta.cmty-szeroka { max-width: 780px; }
.cmty-szkic-uklad { display: grid; grid-template-columns: 250px 1fr; gap: 18px; margin-bottom: 18px; }
.cmty-szkic-podglad { position: relative; }
.cmty-szkic-podglad img {
  display: block; width: 100%; height: auto; max-height: 320px; object-fit: contain;
  border-radius: 14px; background: var(--bg-soft); border: 2px solid var(--border-2);
}
.cmty-zmien-plik {
  width: 100%; margin-top: 8px; border: 2px solid var(--border-2); background: transparent;
  color: var(--grigio); border-radius: 12px; padding: 7px 10px; font-family: inherit;
  font-size: 0.76rem; font-weight: 700; cursor: pointer; transition: var(--transition);
}
.cmty-zmien-plik:hover { border-color: var(--oro); color: var(--oro); }
.cmty-szkic-slowa { display: flex; flex-direction: column; min-width: 0; }
.cmty-szkic-naglowek { font-size: 0.8rem; font-weight: 700; margin-bottom: 8px; }
.cmty-szkic-naglowek span { color: var(--grigio); font-weight: 400; }
.cmty-slowa-lista {
  flex: 1; max-height: 260px; min-height: 90px; overflow-y: auto; display: flex;
  flex-direction: column; gap: 6px; padding-right: 4px;
}
.cmty-slowo-wiersz {
  display: flex; align-items: center; gap: 10px; padding: 7px 11px; border-radius: 11px;
  background: var(--bg-soft); font-size: 0.82rem;
}
.cmty-slowo-tresc { flex: 1; min-width: 0; }
.cmty-slowo-pytanie { font-weight: 700; }
.cmty-slowo-odpowiedz { font-size: 0.75rem; color: var(--grigio); }
.cmty-slowo-wiersz.reczne { border-left: 3px solid var(--oro); }
.cmty-slowo-usun {
  flex-shrink: 0; width: 24px; height: 24px; border: none; border-radius: 50%;
  background: transparent; color: var(--grigio); cursor: pointer; font-size: 0.72rem;
  transition: var(--transition);
}
.cmty-slowo-usun:hover { background: var(--rosso); color: #fff; }
.cmty-slowa-pusto { font-size: 0.8rem; color: var(--grigio); padding: 10px 2px; }
.cmty-dodaj-slowo { display: flex; gap: 6px; margin-top: 10px; }
.cmty-dodaj-slowo input {
  flex: 1; min-width: 0; box-sizing: border-box; padding: 8px 11px; border-radius: 11px;
  border: 2px solid var(--border-2); background: var(--bg-soft); color: var(--testo);
  font-family: inherit; font-size: 0.8rem;
}
.cmty-dodaj-slowo button {
  flex-shrink: 0; width: 38px; border: 2px solid var(--oro); background: transparent;
  color: var(--oro); border-radius: 11px; font-size: 1rem; font-weight: 700; cursor: pointer;
  transition: var(--transition);
}
.cmty-dodaj-slowo button:hover { background: var(--oro); color: var(--na-akcencie); }
.cmty-dodaj-hint { font-size: 0.72rem; color: var(--grigio); line-height: 1.5; margin: 8px 0 0; }

@media (max-width: 720px) {
  .cmty-szkic-uklad { grid-template-columns: 1fr; }
  .cmty-szkic-podglad img { max-height: 200px; }
  .cmty-slowa-lista { max-height: 200px; }
}

.word-chip.z-paczki { border-left: 3px solid var(--oro); }
.chip-paczka { font-size: 0.72rem; opacity: 0.75; margin-left: 4px; cursor: help; }
.chip-artykul { font-size: 0.72rem; opacity: 0.8; margin-left: 4px; text-decoration: none; }
.chip-artykul:hover { opacity: 1; }
.card-zrodlo {
  display: inline-block; max-width: 90%; margin-top: 6px; padding: 3px 10px;
  font-size: 0.7rem; line-height: 1.35; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--grigio); background: var(--bg-soft); border-radius: 999px;
}
.card-zrodlo:hover { color: var(--primary); }

.wordmap-paczki {
  background: var(--bg-info-soft); border-radius: 14px; padding: 13px 16px; margin-bottom: 16px;
}
.wordmap-paczki-tytul { font-size: 0.8rem; font-weight: 700; margin-bottom: 9px; }
.wordmap-paczka-wiersz {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 0; font-size: 0.82rem;
}
.wordmap-paczka-nazwa { font-weight: 700; }
.wordmap-paczka-ile { color: var(--grigio); font-size: 0.76rem; margin-right: auto; }
.wordmap-paczka-usun {
  border: 2px solid var(--border-2); background: transparent; color: var(--grigio);
  border-radius: 10px; padding: 5px 11px; font-family: inherit; font-size: 0.75rem;
  font-weight: 700; cursor: pointer; transition: var(--transition); white-space: nowrap;
}
.wordmap-paczka-usun:hover { border-color: var(--rosso); color: var(--rosso); }
.wordmap-paczka-przejdz {
  border: 2px solid var(--border-2); background: transparent; color: var(--grigio);
  border-radius: 10px; padding: 5px 11px; font-family: inherit; font-size: 0.75rem;
  font-weight: 700; cursor: pointer; transition: var(--transition); white-space: nowrap;
}
.wordmap-paczka-przejdz:hover { border-color: var(--oro); color: var(--oro); }

.paczka-postep { flex-basis: 100%; margin-top: 2px; }
.paczka-pasek {
  display: flex; height: 8px; border-radius: 999px; overflow: hidden;
  background: var(--border); margin-bottom: 6px;
}
.paczka-pasek i { display: block; height: 100%; }
.paczka-lvl-lista { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.72rem; color: var(--grigio); }
.paczka-lvl { display: inline-flex; align-items: center; gap: 5px; }
.paczka-lvl i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.p-latwe   { background: var(--chart-latwe); } .paczka-lvl.p-latwe   { background: none; }
.p-srednie { background: var(--primary); }     .paczka-lvl.p-srednie { background: none; }
.p-trudne  { background: var(--rosso); }       .paczka-lvl.p-trudne  { background: none; }
.p-nowe    { background: var(--border-2); }    .paczka-lvl.p-nowe    { background: none; }
.paczka-lvl.p-latwe i   { background: var(--chart-latwe); }
.paczka-lvl.p-srednie i { background: var(--primary); }
.paczka-lvl.p-trudne i  { background: var(--rosso); }
.paczka-lvl.p-nowe i    { background: var(--border-2); }

.paczka-pasek-trybu.ppt-klikalny { cursor: pointer; }
.paczka-pasek-trybu.ppt-klikalny:hover { border-color: var(--oro); }

.probne-licznik {
  position: fixed; z-index: 1500; left: 20px; bottom: 20px;
  display: inline-flex; align-items: center; gap: 8px;
  max-width: min(280px, calc(100vw - 32px));
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 0.78rem; font-weight: 700; line-height: 1.35; text-align: left;
  color: var(--testo); background: var(--card-bg);
  border: 1px solid var(--oro); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
}
.probne-licznik .ico { color: var(--oro); font-size: 0.95rem; margin: 0; flex-shrink: 0; }
.probne-licznik:hover { border-color: var(--oro); filter: brightness(1.03); }
.probne-licznik.konczy { border-color: var(--rosso); color: var(--rosso); }
.probne-licznik.konczy .ico { color: var(--rosso); animation: probnePuls 2.6s ease-in-out infinite; }
.probne-licznik.laska { border-style: dashed; }
@keyframes probnePuls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); } }
@media (prefers-reduced-motion: reduce) { .probne-licznik.konczy .ico { animation: none; } }
body.tryb-teksty .probne-licznik { bottom: 92px; }
@media (max-width: 767px) {
  .probne-licznik {
    left: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    font-size: 0.72rem; padding: 6px 12px; max-width: 62vw;
  }
  body.tryb-teksty .probne-licznik { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
}

.probne-koniec-opis { margin: 0; font-size: 0.92rem; line-height: 1.6; }
.probne-koniec-strata-tytul { margin-top: 16px; font-weight: 800; font-size: 0.85rem; }
.probne-koniec-lista { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.probne-koniec-lista li { display: flex; gap: 8px; align-items: flex-start; font-size: 0.88rem; line-height: 1.45; }
.probne-koniec-lista .ico { color: var(--grigio); flex-shrink: 0; margin: 2px 0 0; }
.probne-koniec-plany { margin: 18px 0 6px; font-weight: 800; font-size: 0.85rem; }

.wyz-baner {
  position: relative; overflow: hidden;
  background: var(--card-bg); color: var(--testo);
  border: 1px solid var(--border-warm); border-radius: 20px;
  padding: 16px 18px 16px 22px; margin-bottom: 16px;
  box-shadow: 0 6px 20px -8px rgba(15, 23, 42, 0.18);
}
.wyz-baner::before {
  content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 5px;
  background: linear-gradient(180deg, #16A34A, #15803D);
}
.wyz-gora { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.wyz-tytul { font-size: 0.98rem; font-weight: 800; line-height: 1.3; flex: 1; min-width: 200px; }
.wyz-zegar {
  font-size: 0.76rem; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--bg-success-soft); color: var(--verde);
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.wyz-zamknij {
  border: none; background: var(--bg-soft); color: var(--grigio);
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer; flex-shrink: 0;
  font-size: 0.95rem; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.wyz-zamknij:hover { background: var(--border); color: var(--testo); }
.wyz-zamknij:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }

.wyz-liczby {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 0.82rem; margin-bottom: 8px; color: var(--muted-dark);
  font-variant-numeric: tabular-nums;
}
.wyz-liczby b { font-size: 1.22rem; font-weight: 800; color: var(--testo); }
.wyz-liczby .wyz-pct b { color: var(--verde); }
.wyz-pasek-tlo {
  height: 12px; border-radius: 999px; overflow: hidden;
  background: var(--bg-soft); border: 1px solid var(--border-warm);
}
.wyz-pasek {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #16A34A, #15803D);
  transition: width 1.2s cubic-bezier(.22, 1, .36, 1);
  position: relative;
}
.wyz-pasek::after {
  content: ''; position: absolute; inset: 0; border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
  animation: wyzPolysk 2.6s ease-in-out infinite;
}

@keyframes wyzPolysk { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

.wyz-dol {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  margin-top: 12px; min-height: 30px;
}
.wyz-strumien { min-height: 30px; display: flex; align-items: center; min-width: 0; }
.wyz-wpis {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
  background: var(--bg-soft); border: 1px solid var(--border-warm); border-radius: 999px;
  padding: 5px 12px; font-size: 0.76rem; color: var(--muted-dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transition: opacity 0.4s ease;
}
.wyz-wpis.widoczny { opacity: 1; }
.wyz-wpis-kto { font-weight: 700; color: var(--testo); }
.wyz-wpis b { font-weight: 800; color: var(--verde); }
.wyz-wpis-plus {
  font-weight: 800; color: var(--verde);
  background: var(--bg-success-soft); border-radius: 999px; padding: 1px 7px;
}

.wyz-ludzie {
  display: flex; align-items: center; gap: 7px; font-size: 0.76rem;
  color: var(--grigio); flex-shrink: 0; white-space: nowrap;
}
.wyz-ludzie .zywa-kropka {
  width: 7px; height: 7px; border-radius: 50%; background: var(--verde); flex-shrink: 0;
  animation: wyzTetno 1.8s ease-in-out infinite;
}
@keyframes wyzTetno { 50% { opacity: 0.25; transform: scale(0.75); } }

.wyz-baner.zdobyte .wyz-pasek::after { animation: none; opacity: 0; }
.wyz-zdobyte {
  margin-top: 10px; font-size: 0.86rem; font-weight: 700;
  background: var(--bg-success-soft); color: var(--verde);
  border-radius: 12px; padding: 9px 13px;
}

@media (prefers-reduced-motion: reduce) {
  .wyz-pasek::after, .wyz-konfetti i, .wyz-ludzie .zywa-kropka { animation: none; }
  .wyz-wpis { transition: none; opacity: 1; }
  .wyz-pasek { transition: none; }
}

.wyz-konfetti { position: fixed; inset: 0; z-index: 2500; pointer-events: none; overflow: hidden; }
.wyz-konfetti i {
  position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px;
  animation: wyzSpada linear forwards;
}
@keyframes wyzSpada {
  to { transform: translateY(104vh) rotate(var(--obrot, 540deg)); opacity: 0.15; }
}

@media (prefers-reduced-motion: reduce) {
  .wyz-pasek::after, .wyz-konfetti i, .wyz-ludzie .zywa-kropka { animation: none; }
  .wyz-tasma { animation: none; }
  .wyz-pasek { transition: none; }
}


.konto-panel { max-width: 460px; }
.konto-panel .wordmap-body { padding: 0 22px 22px; }

.konto-glowa { text-align: center; padding: 26px 22px 18px; }
.konto-glowa .awatar-pierscien { display: inline-block; padding: 5px; }
.konto-glowa .account-avatar { width: 104px; height: 104px; font-size: 2.4rem; }
.konto-nick { font-size: 1.25rem; font-weight: 800; margin-top: 12px; }
.konto-podpis { font-size: 0.8rem; color: var(--grigio); margin-top: 3px; }

.konto-kafle { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.konto-kafel {
  background: var(--card-bg); border: 1px solid var(--border-warm);
  border-radius: 16px; padding: 13px 12px; text-align: center;
}
.konto-kafel-liczba { font-size: 1.45rem; font-weight: 800; line-height: 1.15; }
.konto-kafel-podpis { font-size: 0.72rem; color: var(--grigio); margin-top: 3px; }

.tw-odznaka {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: 999px;
  font-size: 0.68rem; font-weight: 800; line-height: 1.5;
  white-space: nowrap; vertical-align: middle; flex-shrink: 0;
  border: 1px solid var(--tw-ramka); background: var(--tw-tlo); color: var(--tw-tekst);
}
.tw-odznaka-ikona { font-size: 0.78rem; line-height: 1; }
.tw-odznaka-pct { opacity: 0.72; font-weight: 700; }

.tw-odznaka.braz    { --tw-tlo: #FBEDE3; --tw-ramka: #D8A278; --tw-tekst: #8A5124; }
.tw-odznaka.srebro  { --tw-tlo: #F2F4F7; --tw-ramka: #B4BDC9; --tw-tekst: #4A5567; }
.tw-odznaka.zloto   { --tw-tlo: #FCF3D9; --tw-ramka: #DCB540; --tw-tekst: #7D5F08; }
.tw-odznaka.diament { --tw-tlo: #E4F4FA; --tw-ramka: #7CC4DD; --tw-tekst: #14607B; }
.tw-odznaka.korona  { --tw-tlo: #F0E9FB; --tw-ramka: #A98CDD; --tw-tekst: #5B3A9E; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tw-odznaka.braz    { --tw-tlo: #33231A; --tw-ramka: #8A5A34; --tw-tekst: #E0AC7E; }
  :root:not([data-theme="light"]) .tw-odznaka.srebro  { --tw-tlo: #262C36; --tw-ramka: #5C6879; --tw-tekst: #CBD5E1; }
  :root:not([data-theme="light"]) .tw-odznaka.zloto   { --tw-tlo: #332C16; --tw-ramka: #8F7420; --tw-tekst: #EBC85E; }
  :root:not([data-theme="light"]) .tw-odznaka.diament { --tw-tlo: #16303A; --tw-ramka: #3C7E96; --tw-tekst: #8FD5EA; }
  :root:not([data-theme="light"]) .tw-odznaka.korona  { --tw-tlo: #281E3D; --tw-ramka: #6F55A8; --tw-tekst: #C4ABF0; }
}
:root[data-theme="dark"] .tw-odznaka.braz    { --tw-tlo: #33231A; --tw-ramka: #8A5A34; --tw-tekst: #E0AC7E; }
:root[data-theme="dark"] .tw-odznaka.srebro  { --tw-tlo: #262C36; --tw-ramka: #5C6879; --tw-tekst: #CBD5E1; }
:root[data-theme="dark"] .tw-odznaka.zloto   { --tw-tlo: #332C16; --tw-ramka: #8F7420; --tw-tekst: #EBC85E; }
:root[data-theme="dark"] .tw-odznaka.diament { --tw-tlo: #16303A; --tw-ramka: #3C7E96; --tw-tekst: #8FD5EA; }
:root[data-theme="dark"] .tw-odznaka.korona  { --tw-tlo: #281E3D; --tw-ramka: #6F55A8; --tw-tekst: #C4ABF0; }

.cmty-autor {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 0.72rem; color: var(--grigio); margin-top: 5px; min-width: 0;
}
.cmty-autor-nick { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cmty-autor-link {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  border: none; padding: 0; background: none; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.cmty-autor-foto {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.62rem; font-weight: 800; color: #fff; line-height: 1;
  box-shadow: 0 0 0 1.5px var(--card-bg), 0 1px 3px rgba(0,0,0,0.28);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.cmty-autor-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmty-autor-link:hover .cmty-autor-foto {
  transform: scale(1.01);
  box-shadow: 0 0 0 2px var(--zolty), 0 2px 6px rgba(0,0,0,0.32);
}
.cmty-autor-link:hover .cmty-autor-nick { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .cmty-autor-foto { transition: none; } }

.community-tile-meta .cmty-autor-foto { width: 20px; height: 20px; box-shadow: 0 0 0 1.5px rgba(255,255,255,0.85); }
#communityDetailMeta .cmty-autor-foto { width: 26px; height: 26px; font-size: 0.7rem; }
#communityDetailMeta .cmty-autor-link { vertical-align: middle; margin-right: 2px; }

.community-tile-meta .tw-odznaka { box-shadow: 0 1px 3px rgba(0,0,0,0.35); }

.tw-blokada {
  display: flex; gap: 9px; align-items: flex-start;
  background: var(--bg-error-soft); border: 1px solid var(--rosso);
  border-radius: 13px; padding: 10px 12px; margin-top: 12px;
  font-size: 0.75rem; line-height: 1.5; color: var(--testo);
}

.tw-podpis {
  background: var(--card-bg); border: 1px solid var(--border-warm);
  border-radius: 16px; padding: 13px 15px; margin-bottom: 14px;
}
.tw-podpis-naglowek { font-weight: 800; font-size: 0.86rem; margin-bottom: 5px; }
.tw-podpis-opis { font-size: 0.75rem; color: var(--grigio); line-height: 1.5; }
.tw-podpis-akcje { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.tw-podpis-akcje .btn { flex: 1; min-width: 150px; padding: 9px 14px; font-size: 0.8rem; }

.photo-zgoda-blokada {
  font-size: 0.74rem; line-height: 1.5; color: var(--rosso);
  margin: 6px 0 0 28px; font-weight: 600;
}
.photo-zgoda-blokada.informacja { color: var(--grigio); }

.konto-wklad { display: flex; gap: 8px; margin-bottom: 16px; }
.konto-wklad-poz {
  flex: 1; background: var(--bg-soft); border-radius: 13px; padding: 9px 8px; text-align: center;
  font-size: 0.72rem; color: var(--grigio);
}
.konto-wklad-poz b { display: block; font-size: 0.98rem; color: var(--testo); }

.konto-zglos-otworz {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px; border-radius: 14px; cursor: pointer; font: inherit; font-size: 0.85rem;
  font-weight: 700; color: var(--testo);
  border: 2px dashed var(--border-warm-dash); background: transparent;
  transition: var(--transition);
}
.konto-zglos-otworz:hover { border-color: var(--oro); color: var(--oro); }

.konto-zglos textarea {
  width: 100%; min-height: 104px; padding: 12px 14px; border-radius: 14px;
  border: 2px solid var(--border-warm); background: var(--card-bg); color: var(--testo);
  font: inherit; font-size: 0.86rem; line-height: 1.55; outline: none; resize: vertical;
}
.konto-zglos textarea:focus { border-color: var(--oro); }
.konto-zglos-stopka {
  display: flex; align-items: center; gap: 10px; margin-top: 9px;
  font-size: 0.73rem; color: var(--grigio);
}
.konto-zglos-stopka .btn { width: auto; margin: 0; margin-left: auto; flex-shrink: 0; }
.konto-zglos-licznik.pusto { color: var(--rosso); font-weight: 700; }

.paczka-znacznik {
  align-self: flex-start; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  background: var(--pigulka-tlo); color: var(--pigulka-tekst);
}
.paczka-nazwa { font-size: 0.98rem; font-weight: 800; line-height: 1.3; }
.paczka-opis { font-size: 0.76rem; color: var(--grigio); line-height: 1.5; }
.community-postep-xp {
  margin-top: 8px; font-size: 0.76rem; color: var(--muted-dark); line-height: 1.5;
}
.community-postep-xp span { color: var(--grigio); }

.community-detail-karta.paczka .community-detail-obraz img { display: none; }
.community-detail-karta.paczka .community-detail-obraz {
  align-items: stretch; justify-content: flex-start; padding: 60px 20px 22px; overflow-y: auto;
}
.community-detail-karta.paczka.utwor .community-detail-obraz {
  align-items: center; justify-content: center; padding: 60px 20px 22px; overflow: hidden;
}
.community-detail-karta.paczka.utwor .community-detail-obraz img {
  display: block; width: 100%; max-width: 760px; aspect-ratio: 16 / 9;
  object-fit: cover; border-radius: 18px; margin: 0 auto;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28);
}
.cmty-lekcja-link { font-size: 0.85rem; font-weight: 700; color: inherit; }

.community-zdania {
  display: flex; flex-direction: column; gap: 10px; width: 100%;
  max-height: min(680px, 64vh); overflow-y: auto; padding-right: 4px;
}
.community-zdanie {
  border-radius: 14px; padding: 12px 15px; background: var(--bg-soft);
  border-left: 3px solid var(--verde);
}
.community-zdanie-kontekst {
  font-size: 0.95rem; font-weight: 700; line-height: 1.4; color: var(--testo); margin-bottom: 4px;
}
.community-zdanie-tresc { font-size: 0.8rem; line-height: 1.5; color: var(--grigio); font-style: italic; }
.community-zdanie.bez-kontekstu .community-zdanie-tresc {
  font-size: 0.95rem; font-weight: 700; color: var(--testo); font-style: normal;
}
.community-zdanie.zamkniete { border-left-color: var(--border-2); opacity: 0.85; }
.community-zdanie-brak { font-size: 0.8rem; color: var(--grigio); line-height: 1.5; }
.community-zdanie-brak b { color: var(--muted-dark); }

.community-paczka-opis { font-size: 0.83rem; line-height: 1.6; color: var(--muted-dark); margin: 0 0 12px; }
.community-postep { margin-bottom: 14px; }
.community-postep-tekst { font-size: 0.78rem; font-weight: 700; margin-bottom: 6px; }
.community-postep-tor { height: 8px; border-radius: 999px; background: var(--border-2); overflow: hidden; }
.community-postep-wypelnienie { height: 100%; background: var(--marka-zielony); border-radius: 999px; transition: width 0.4s ease; }

.pz-karta.pz-szeroka { max-width: 900px; }
.pz-sekcja-tytul {
  font-size: 0.8rem; font-weight: 700; margin: 20px 0 8px;
  display: flex; align-items: center; gap: 8px;
}
.pz-sekcja-tytul span { color: var(--grigio); font-weight: 400; }
.pz-wyjasnienie {
  font-size: 0.76rem; line-height: 1.6; color: var(--muted-dark); margin: 0 0 12px;
  padding: 10px 13px; border-radius: 12px; background: var(--bg-info-soft);
}
.pz-slowa { display: flex; flex-wrap: wrap; gap: 6px; max-height: 132px; overflow-y: auto; }
.pz-slowo {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px;
  background: var(--bg-soft); font-size: 0.76rem; white-space: nowrap;
}
.pz-slowo b { font-weight: 700; }
.pz-slowo i { font-style: normal; color: var(--grigio); }

.pz-zdania { display: flex; flex-direction: column; gap: 12px; }
.pz-zdanie {
  border: 2px solid var(--border-2); border-radius: 16px; padding: 14px 16px; background: var(--bg-soft);
  transition: var(--transition);
}
.pz-zdanie.ok { border-color: var(--verde); background: var(--bg-success-soft); }
.pz-zdanie.zly { border-color: var(--rosso); }
.pz-zdanie-gora { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.pz-numer {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--border-2);
  color: var(--muted-dark); font-size: 0.7rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.pz-cel {
  font-size: 0.74rem; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: var(--bg-info-soft); color: var(--muted-dark); white-space: nowrap;
}
.pz-zdanie-akcje { margin-left: auto; display: flex; gap: 6px; }
.pz-akcja {
  border: 2px solid var(--border-2); background: transparent; color: var(--grigio);
  border-radius: 10px; padding: 5px 11px; font-family: inherit; font-size: 0.76rem;
  font-weight: 700; cursor: pointer; transition: var(--transition); white-space: nowrap;
}
.pz-akcja:hover { border-color: var(--oro); color: var(--oro); }
.pz-akcja.zatwierdz:hover { border-color: var(--verde); color: var(--verde); }
.pz-akcja.zatwierdz.aktywna { border-color: var(--verde); background: var(--verde); color: var(--na-akcencie); }
.pz-akcja.usun:hover { border-color: var(--rosso); color: var(--rosso); }
.pz-pole { display: block; margin-bottom: 8px; }
.pz-pole > span { display: block; font-size: 0.7rem; font-weight: 700; color: var(--grigio); margin-bottom: 4px; }
.pz-pole input, .pz-pole textarea {
  width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: 11px;
  border: 2px solid var(--border-2); background: var(--card-bg); color: var(--testo);
  font-family: inherit; font-size: 0.85rem; resize: vertical;
}
.pz-dystraktory { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pz-dystraktory input { font-size: 0.78rem; padding: 7px 10px; }
.pz-problem {
  margin-top: 8px; padding: 8px 11px; border-radius: 10px; background: var(--bg-warn-soft);
  font-size: 0.75rem; line-height: 1.5; color: var(--muted-dark);
}
.pz-lista-paczek { margin-top: 22px; }
.pz-paczka-wiersz {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px;
  background: var(--bg-soft); font-size: 0.82rem; margin-bottom: 6px; cursor: pointer;
  transition: var(--transition);
}
.pz-paczka-wiersz:hover { background: var(--bg-info-soft); }
.pz-paczka-tresc { flex: 1; min-width: 0; }
.pz-paczka-nazwa { font-weight: 700; }
.pz-paczka-meta { font-size: 0.72rem; color: var(--grigio); }
.pz-stopka {
  display: flex; align-items: center; gap: 12px; margin-top: 20px;
  padding-top: 16px; border-top: 2px solid var(--border-2);
}
.pz-stopka .btn { margin: 0; width: auto; }
.pz-podsumowanie { flex: 1; font-size: 0.8rem; color: var(--grigio); line-height: 1.5; }

@media (max-width: 720px) {
  .pz-dystraktory { grid-template-columns: repeat(2, 1fr); }
  .pz-stopka { flex-wrap: wrap; }
}

@media (max-width: 720px) {
  .community-detail-obraz { justify-content: center; }
  .community-detail-panel { min-height: 0; }
  .community-full { padding: 14px 12px 50px; }
  .community-board { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
}
.fiszka-toggles {
  display: flex; align-items: center; flex-wrap: wrap; gap: 16px;
  margin: 0 0 18px; font-size: 0.78rem; font-weight: 600; color: var(--grigio);
}
.fiszka-toggle-chip { display: flex; align-items: center; gap: 7px; }
.card-delete-btn {
  border: none;
  background: none;
  font-size: 1rem;
  cursor: pointer;
  opacity: 0.6;
  transition: var(--transition);
  padding: 2px 4px;
  border-radius: 8px;
}
.card-delete-btn:hover { opacity: 1; background: var(--bg-error-soft); transform: scale(1.1); }
.fiszka-counter {
  background: var(--crema);
  padding: 6px 14px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.85rem;
  border: 1px solid var(--border-warm);
}
.level-badge {
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.admin-quiz-rozklad { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.admin-quiz-wiersz,
.admin-quiz-legenda {
  display: grid; grid-template-columns: 34px 1fr 64px 78px 52px 62px 34px;
  align-items: center; gap: 10px; font-size: 0.8rem;
}
.admin-quiz-wiersz.pusty .admin-quiz-nazwa,
.admin-quiz-wiersz.pusty .admin-quiz-pasek,
.admin-quiz-wiersz.pusty .admin-quiz-pct { opacity: 0.45; }
.admin-quiz-wiersz.wylaczony .admin-quiz-nazwa { text-decoration: line-through; color: var(--grigio); }
.admin-quiz-waga {
  width: 100%; padding: 3px 6px; border-radius: 8px; border: 1px solid var(--border-2);
  background: var(--card-bg); color: var(--testo); font-family: inherit; font-size: 0.75rem;
  text-align: right; font-variant-numeric: tabular-nums;
}
.admin-quiz-wiersz .toggle { transform: scale(0.72); transform-origin: left center; }
.admin-quiz-nazwa { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.admin-quiz-nazwa b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-quiz-nazwa small { font-size: 0.68rem; color: var(--muted-light); line-height: 1.35; }
.admin-quiz-wiersz { align-items: start; padding: 4px 0; }
.admin-quiz-wiersz .toggle, .admin-quiz-wiersz .admin-quiz-waga,
.admin-quiz-wiersz .admin-quiz-pasek, .admin-quiz-wiersz .admin-quiz-pct,
.admin-quiz-wiersz .admin-btn { margin-top: 2px; }
.admin-quiz-pasek { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.admin-quiz-pasek i { display: block; height: 100%; background: var(--primary); }
.admin-quiz-pct { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.admin-quiz-pct.slaby { color: var(--grigio); font-weight: 500; }
.admin-quiz-wiersz .admin-btn { padding: 3px 0; min-width: 0; }
.admin-quiz-legenda { color: var(--grigio); font-size: 0.68rem; margin-top: 2px; }
.admin-quiz-legenda span:nth-child(3), .admin-quiz-legenda span:nth-child(4) { text-align: right; }

.badge-nowe    { background: var(--border-warm-soft); color: var(--muted-dark); }
.badge-latwe   { background: var(--bg-success-soft); color: var(--verde); }
.badge-srednie { background: var(--bg-warn-soft); color: var(--srednie); }
.badge-trudne  { background: var(--bg-error-soft); color: var(--rosso); }

.lvl-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.lvl-dot-latwe   { background: var(--marka-zielony, #35A64D); }
.lvl-dot-srednie { background: var(--marka-niebieski, #2463E9); }
.lvl-dot-trudne  { background: var(--marka-czerwony, #DB2727); }

.flip-container {
  perspective: 1200px;
  width: 100%;
  min-height: 320px;
  cursor: pointer;
  margin-bottom: 20px;
}
.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(.4,0,.2,1);
}
.flip-inner.flipped { transform: rotateY(180deg); }

.flip-front, .flip-back {
  position: absolute;
  width: 100%;
  min-height: 320px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 52px 32px 40px;
  box-shadow: 0 18px 36px -22px rgba(23, 24, 59, 0.45);
}
.flip-container {
  --poziom-ramka: #9A9CB8;
  --poziom-tekst: var(--testo);
}
.flip-container.poziom-latwe   { --poziom-ramka: var(--marka-zielony, #35A64D);   --poziom-tekst: color-mix(in srgb, var(--poziom-ramka) 70%, var(--testo)); }
.flip-container.poziom-srednie { --poziom-ramka: var(--marka-niebieski, #2463E9); --poziom-tekst: color-mix(in srgb, var(--poziom-ramka) 80%, var(--testo)); }
.flip-container.poziom-trudne  { --poziom-ramka: var(--marka-czerwony, #DB2727);  --poziom-tekst: color-mix(in srgb, var(--poziom-ramka) 80%, var(--testo)); }

.flip-front {
  background: var(--card-bg);
  border: 3px solid var(--poziom-ramka);
}
.flip-back {
  background: var(--card-bg);
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--poziom-ramka) 13%, var(--card-bg)) 0%,
    var(--card-bg) 78%);
  border: 3px solid var(--poziom-ramka);
  transform: rotateY(180deg);
}

.card-word {
  font-family: 'Outfit', 'Fredoka', system-ui, sans-serif;
  font-size: 2.8rem;
  font-weight: 800;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin-bottom: 16px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
  align-self: stretch;
}
.card-word-back {
  font-family: 'Outfit', 'Fredoka', system-ui, sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--poziom-tekst);
  text-align: center;
  margin-bottom: 8px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
  align-self: stretch;
}
.card-word.len-medium, .card-word-back.len-medium { font-size: 1.7rem; letter-spacing: normal; line-height: 1.3; }
.card-word.len-long,   .card-word-back.len-long   { font-size: 1.2rem; letter-spacing: normal; line-height: 1.35; }
.card-emotka { font-size: 4rem; margin-bottom: 16px; }
.card-ikona { position: relative; display: inline-block; margin-bottom: 10px; }
.card-ikona-rys { --rys-h: 96px; display: block; } 
.card-ikona-flaga {
  position: absolute; top: -8px; right: -20px; width: 24px; height: 24px;
  border: none; border-radius: 50%; background: var(--bg-soft); color: var(--grigio);
  font-size: 0.72rem; line-height: 1; cursor: pointer; opacity: 0; transition: var(--transition);
}
.card-ikona:hover .card-ikona-flaga, .card-ikona-flaga:disabled { opacity: 1; }
.card-ikona-flaga:hover { color: var(--rosso); background: color-mix(in srgb, var(--rosso) 14%, transparent); }
.card-ikona-klodka { top: 20px; }
.card-ikona-syn    { top: 48px; }
.card-ikona-syn:hover { color: var(--verde); background: color-mix(in srgb, var(--verde) 14%, transparent); }
.card-ikona-klodka.otwarta { color: var(--verde); }
.card-ikona-klodka.otwarta:hover { color: var(--verde); background: color-mix(in srgb, var(--verde) 14%, transparent); }
.card-ikona-klodka.zamknieta, .card-ikona.zablokowana .card-ikona-klodka { opacity: 1; color: var(--rosso); }
.card-ikona-klodka.zamknieta:hover { color: var(--rosso); background: color-mix(in srgb, var(--rosso) 14%, transparent); }
.card-ikona-syn-panel {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 5;
  display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 12px;
  background: var(--card-bg); border: 1px solid var(--border-warm); box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}
.card-ikona-syn-panel input {
  width: 250px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border-warm);
  background: var(--bg-soft); color: var(--testo); font: inherit; font-size: 0.82rem;
}
.card-ikona-syn-panel button {
  padding: 7px 12px; border-radius: 8px; border: none; background: var(--verde); color: var(--na-akcencie);
  font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer;
}
.card-ikona.czeka .card-ikona-rys { opacity: 0.35; }
.card-ikona.czeka .card-ikona-flaga { animation: ikonaCzeka 1s ease-in-out infinite; }
@keyframes ikonaCzeka { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
.card-hint { font-size: 0.9rem; font-weight: 500; color: var(--grigio); margin-top: 14px; }
.card-example {
  font-style: italic;
  font-weight: 500;
  color: var(--testo);
  font-size: 1rem;
  line-height: 1.45;
  text-align: left;
  align-self: stretch;
  margin-top: 16px;
  padding: 12px 16px;
  background: rgba(0,146,70,0.06);
  background: color-mix(in srgb, var(--poziom-ramka) 13%, var(--card-bg));
  border-radius: 14px;
  border-left: 4px solid var(--poziom-ramka);
}
.flip-back .card-example { background: var(--card-bg); font-style: normal; color: var(--grigio); }
.card-example.lvl-latwe   { border-left-color: var(--marka-zielony, #35A64D); }
.card-example.lvl-srednie { border-left-color: var(--marka-niebieski, #2463E9); }
.card-example.lvl-trudne  { border-left-color: var(--marka-czerwony, #DB2727); }
.card-kategoria {
  position: absolute;
  top: 16px;
  left: 16px;
  max-width: calc(100% - 100px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--grigio);
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--crema, #F3F5FB);
}
.flip-back .card-kategoria { background: var(--card-bg); }
.speak-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #17183B;
  color: #FFC83D;
  border: none;
  border-radius: 999px;
  width: 42px;
  height: 42px;
  font-size: 1.05rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  z-index: 10;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.speak-btn:hover { transform: scale(1.06); }
:root[data-theme="dark"] .speak-btn { background: #FFC83D; color: #17183B; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .speak-btn { background: #FFC83D; color: #17183B; }
}
.speak-btn .ico, .speak-btn i { font-style: normal; line-height: 0; margin: 0; }

.flip-inner.flipped .flip-front { pointer-events: none; }
.flip-inner:not(.flipped) .flip-back { pointer-events: none; }

.nav-arrows {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
}
.nav-arrow {
  background: var(--card-bg);
  border: 2px solid var(--border-warm);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 1.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  box-shadow: var(--shadow);
}
.nav-arrow:hover:not(:disabled) { border-color: var(--testo); color: var(--testo); transform: scale(1.1); }
.nav-arrow:disabled { opacity: 0.3; cursor: not-allowed; }
.nav-pos { font-size: 0.9rem; color: var(--grigio); font-weight: 600; min-width: 80px; text-align: center; }

.ocena-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-top: 4px;
  padding-bottom: 4px;
}
.ocena-btn {
  --ocena-kolor: var(--grigio);
  --ocena-napis: #FFFFFF;
  min-height: 58px;
  padding: 14px 8px;
  border-radius: 18px;
  border: none;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  transition: filter 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--ocena-kolor);
  color: var(--ocena-napis);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--ocena-kolor) 72%, #000),
              0 8px 14px color-mix(in srgb, var(--ocena-kolor) 22%, transparent);
}
.ocena-btn:hover { filter: brightness(1.06); }
.ocena-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ocena-kolor) 72%, #000),
              0 2px 4px color-mix(in srgb, var(--ocena-kolor) 22%, transparent);
}
.ocena-btn .lvl-dot { display: none; }
.ocena-btn { position: relative; }
.ocena-btn .ocena-skrot {
  position: absolute; top: 6px; right: 8px; padding: 2px 6px; border-radius: 6px;
  font-family: inherit; font-size: 0.68rem; font-weight: 800; line-height: 1;
  color: var(--ocena-napis); background: color-mix(in srgb, var(--ocena-napis) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--ocena-napis) 45%, transparent); opacity: 0.9;
}
@media (hover: none) { .ocena-btn .ocena-skrot { display: none; } }
.ocena-latwe   { --ocena-kolor: var(--marka-zielony, #35A64D);   --ocena-napis: #17183B; }
.ocena-srednie { --ocena-kolor: var(--marka-niebieski, #2463E9); --ocena-napis: #FFFFFF; }
.ocena-trudne  { --ocena-kolor: var(--marka-czerwony, #DB2727);  --ocena-napis: #FFFFFF; }
@media (prefers-reduced-motion: reduce) {
  .ocena-btn, .ocena-btn:active { transition: none; transform: none; }
}

@media (max-width: 768px) {
  .flip-container, .flip-inner, .flip-front, .flip-back { min-height: 260px; }
  .flip-front, .flip-back { padding: 26px 18px; }
  .card-word { font-size: 2rem; }
  .card-word-back { font-size: 1.7rem; }
  .nav-arrows { justify-content: space-between; gap: 8px; }
  .nav-arrow { width: 54px; height: 54px; }
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--grigio);
}
.empty-state .empty-icon { font-size: 4rem; margin-bottom: 16px; }
.empty-state h3 { font-size: 1.2rem; margin-bottom: 8px; color: var(--testo); }
.empty-state-methods {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin-top: 24px;
}
.empty-state-method {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: 2px dashed var(--border-warm-dash); border-radius: 14px;
  padding: 16px 20px; min-width: 130px;
  background: var(--crema);
}
.empty-state-method-icon { font-size: 1.8rem; margin-bottom: 2px; line-height: 1; }
.empty-state-method-icon .ico { margin-right: 0; color: var(--oro); }
.empty-state-method {
  font-family: inherit; cursor: pointer;
  transition: transform 0.18s cubic-bezier(.22,1,.36,1), border-color 0.18s ease, box-shadow 0.18s ease;
}
.empty-state-method:hover { transform: translateY(-3px); border-color: var(--oro); box-shadow: var(--shadow); }
@media (prefers-reduced-motion: reduce) { .empty-state-method:hover { transform: none; } }
.empty-state-method strong { font-size: 0.85rem; color: var(--testo); }
.empty-state-method small { font-size: 0.72rem; color: var(--grigio); }
.empty-state.dragover { border-radius: 16px; background: var(--bg-success-grad-b); }
.empty-state.dragover .empty-state-method { border-color: var(--oro); background: var(--crema); }

.quiz-topbar { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.quiz-close {
  background: none; border: none; font-size: 1.3rem; color: var(--grigio);
  cursor: pointer; line-height: 1; padding: 4px; flex-shrink: 0;
}
.quiz-close:hover { color: var(--testo); }
.quiz-progress-track {
  flex: 1; height: 12px; border-radius: 999px; background: var(--border-warm-soft); overflow: hidden;
}
.quiz-progress-fill {
  height: 100%; width: 0%; border-radius: 999px; background: var(--marka-zielony);
  transition: width 0.4s cubic-bezier(.4,0,.2,1);
}
.quiz-report-btn {
  background: none; border: none; font-size: 1.1rem; cursor: pointer; line-height: 1;
  padding: 4px; flex-shrink: 0; opacity: 0.55; filter: grayscale(1);
  transition: opacity 0.15s ease, filter 0.15s ease;
}
.quiz-report-btn:hover { opacity: 1; filter: grayscale(0); }
.kartka-zglos { opacity: 0.6; }
.kartka-zglos:hover { opacity: 1; }
.mow-zglos { position: absolute; top: 62px; inset-inline-end: 26px; z-index: 2; }

.es-start { position: fixed; inset: 0; z-index: 2147483000; overflow: hidden; cursor: pointer; background: var(--es-tlo, #17183B); contain: strict; }
.es-start > * { position: absolute; left: 50%; top: 50%; will-change: transform, opacity; }
.es-kolo, .es-kolo-celu { border-radius: 50%; transform: translate(-50%, -50%) scale(0); }
.es-pierscien { width: 195px; height: 195px; border-radius: 50%; border: 3px solid #FFC83D; box-sizing: border-box; opacity: 0; transform: translate(-50%, -50%); }
.es-ksztalt { box-sizing: border-box; opacity: 0; transform: translate(-50%, -50%); }
.es-kafel { width: 132px; height: 132px; transform: translate(-50%, -50%); }
.es-kafel-tlo { position: absolute; inset: 0; border-radius: 42px; background: #FFFFFF; opacity: 0; }
.es-kafel img { position: absolute; left: 6px; top: 6px; width: 120px; height: 120px; display: block; }
.es-napis { display: flex; transform: translate(-50%, -30px); font-family: var(--font-naglowek, 'Outfit', sans-serif); font-weight: 800;
  font-size: 60px; line-height: 1; letter-spacing: 0.02em; white-space: nowrap; }
.es-napis span { display: inline-block; opacity: 0; }
.es-podpis { transform: translate(-50%, 46px); font-family: var(--font-naglowek, 'Outfit', sans-serif); font-weight: 800; font-size: 14px;
  line-height: 1; letter-spacing: 0.42em; padding-left: 0.42em; white-space: nowrap; opacity: 0; }
@media (max-width: 420px) { .es-napis { font-size: 48px; } }

@media (pointer: coarse) {
  .quiz-close, .quiz-report-btn, .wordmap-close {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }

  .ppt-wyjscie, .ppt-akcja { padding: 10px 16px; min-height: 44px; }

  .wordmap-paczka-graj, .wordmap-paczka-przejdz { padding: 10px 16px; min-height: 44px; }

  .bez-audio-btn { padding: 12px 16px; min-height: 44px; }

  .toggle-row { min-height: 40px; }
}
.quiz-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 800;
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--oro); margin-bottom: 8px;
}
.quiz-heading { font-size: 1.5rem; font-weight: 800; color: var(--testo); margin-bottom: 28px; line-height: 1.3; }

.mini-exam-card { text-align: center; }
.mini-exam-input-row { display: flex; flex-direction: column; gap: 14px; max-width: 480px; margin: 0 auto; position: relative; }
.lang-flag-inline { display: inline-flex; vertical-align: middle; margin-left: 6px; position: relative; top: -1px; }
.mini-exam-input-row input {
  padding: 16px 18px; border-radius: 14px; border: 2px solid var(--border-warm);
  background: var(--crema); color: var(--testo); font-size: 1.1rem; text-align: center;
}
.mini-exam-input-row input.correct { border-color: var(--verde); background: var(--bg-success-soft); }
.mini-exam-input-row input.wrong { border-color: var(--rosso); background: var(--bg-error-soft); }
.mini-exam-input-row .btn { width: 100%; padding: 16px; font-size: 1rem; }
.mini-exam-feedback { margin-top: 16px; font-weight: 700; min-height: 1.4em; transition: color 0.2s ease; }
.mini-exam-feedback.correct { color: var(--verde); }
.mini-exam-feedback.wrong { color: var(--rosso); }
.mini-exam-input-row input { transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease; }
.mini-exam-input-row input.sprawdza:not(.glos-pole) { border-color: color-mix(in srgb, var(--oro) 45%, var(--border)); }
.mini-exam-card .btn-dalej:disabled, .mini-exam-card .quiz-dalej:disabled { opacity: 0.5; cursor: progress; }
.mini-exam-input-row .glos-pole.sprawdza { color: var(--grigio); }
.quiz-stan {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 1.6em; margin-top: 4px; overflow: hidden;
  font-size: 0.82rem; font-weight: 600; color: var(--grigio);
}
.quiz-stan-czeka { opacity: 0; animation: quizStanWejscie 0.25s ease-out 0.2s forwards; }
.quiz-stan-dobrze { font-size: 0.95rem; font-weight: 800; color: var(--verde); animation: quizStanDobrze 0.22s ease-out; }
.quiz-stan-znika { animation: quizStanZnika 0.2s ease-in forwards; }
.quiz-kropki { display: inline-flex; gap: 4px; }
.quiz-kropki i { width: 6px; height: 6px; border-radius: 50%; background: var(--oro); opacity: 0.3; animation: quizKropka 1.2s ease-in-out infinite; }
.quiz-kropki i:nth-child(2) { animation-delay: 0.2s; }
.quiz-kropki i:nth-child(3) { animation-delay: 0.4s; }
@keyframes quizStanWejscie { to { opacity: 1; } }
@keyframes quizStanDobrze { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes quizStanZnika { to { height: 0; margin-top: 0; } }
@keyframes quizKropka { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .quiz-stan-czeka { animation: quizStanWejscie 0.01s linear 0.2s forwards; }
  .quiz-stan-dobrze { animation: none; }
  .quiz-stan-znika { animation: none; height: 0; margin-top: 0; }
  .quiz-kropki i { animation: none; opacity: 0.7; }
}
.card-example-tlum { font-style: normal; }

.mini-exam-ai-warning { margin-top: 8px; font-size: 0.82rem; font-weight: 600; color: var(--grigio); }

.quiz-sprawdz { text-transform: uppercase; letter-spacing: 0.03em; }
.btn-dalej { background: var(--primary); color: #FFFFFF; text-transform: none; letter-spacing: 0; }
.btn-dalej:hover { background: var(--primary-dark); }
.quiz-dalej { width: 100%; margin: 14px 0 0; }

.quiz-sprawdz, .btn-dalej, .quiz-dalej {
  --polka-kolor: var(--verde);
  margin-bottom: 4px;
  transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--polka-kolor) 62%, black),
              0 8px 12px color-mix(in srgb, var(--polka-kolor) 18%, transparent);
}
.btn-dalej, .quiz-dalej { --polka-kolor: var(--primary); }
.quiz-sprawdz:hover, .btn-dalej:hover, .quiz-dalej:hover {
  transform: none;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--polka-kolor) 62%, black),
              0 8px 12px color-mix(in srgb, var(--polka-kolor) 18%, transparent);
}
.quiz-sprawdz:active:not(:disabled), .btn-dalej:active:not(:disabled), .quiz-dalej:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--polka-kolor) 62%, black),
              0 2px 4px color-mix(in srgb, var(--polka-kolor) 18%, transparent);
}
.quiz-sprawdz:disabled, .btn-dalej:disabled, .quiz-dalej:disabled {
  transform: translateY(3px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--polka-kolor) 62%, black);
  opacity: 0.75;
}
.quiz-dodatkowo { margin-top: 8px; font-size: 0.82rem; font-weight: 600; color: var(--grigio); }
.glos-scena { display: flex; flex-direction: column; align-items: center; }
.quiz-mik {
  position: relative; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.quiz-mik .ico { line-height: 1; margin: 0; }
.quiz-mik:disabled { opacity: 0.45; cursor: default; }
.quiz-mik-rant { position: absolute; inset: -6px; transform: rotate(-90deg); pointer-events: none; }
.quiz-mik-rant .plyn {
  fill: none; stroke: var(--verde); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 352; stroke-dashoffset: 352; opacity: 0;
}
.quiz-mik.slucha .quiz-mik-rant .plyn { opacity: 1; animation: quizMikRant var(--glos-maks, 8s) linear forwards; }
@keyframes quizMikRant { to { stroke-dashoffset: 0; } }
.glos-tlum { margin-top: 6px; font-size: 0.95rem; font-weight: 600; color: var(--testo); }
.glos-tlum .lang-flag-inline { margin: 0 4px 0 0; }
.glos-tlum-nad {
  max-width: 560px; margin: 0 auto 10px; min-height: 1.35em;
  font-size: 0.9rem; font-weight: 600; line-height: 1.35; color: var(--grigio);
}
.glos-tlum-nad .lang-flag-inline { margin: 0 4px 0 0; }
.mini-exam-input-row .glos-tlum-odczyt { margin-top: 0; }
.quiz-mik.mysli .ico { animation: glosMysli 0.9s ease-in-out infinite; }
@keyframes glosMysli { 50% { opacity: 0.3; } }
.quiz-jeszcze-raz { width: 100%; margin: 12px 0 0; }
@media (prefers-reduced-motion: reduce) {
  .quiz-mik.slucha .quiz-mik-rant .plyn { animation: none; stroke-dashoffset: 0; }
  .quiz-mik.mysli .ico { animation: none; }
}
.mini-exam-done { text-align: center; font-size: 1.6rem; font-weight: 800; color: var(--testo); padding: 40px 0; }

.kartkowka-wiersz {
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: baseline; gap: 10px;
  min-height: 52px; 
}
.kartkowka-nr { font-size: 0.82rem; font-weight: 700; color: var(--muted-light); }
.kartkowka-obce { font-weight: 800; color: var(--testo); overflow-wrap: anywhere; }
.kartkowka-pole { display: flex; flex-direction: column; min-width: 0; }
.kartkowka-input {
  width: 100%; border: none; border-bottom: 2px dashed var(--border-2);
  background: transparent; color: var(--testo); font: inherit; padding: 4px 2px;
  outline: none;
}
.kartkowka-input:focus { border-bottom-color: var(--oro); border-bottom-style: solid; }
.kartkowka-wiersz.dobrze .kartkowka-input { border-bottom-color: var(--verde); color: var(--verde); font-weight: 700; }
.kartkowka-wiersz.zle .kartkowka-input { border-bottom-color: var(--rosso); color: var(--rosso); text-decoration: line-through; }
.kartkowka-poprawna { font-size: 0.82rem; font-weight: 700; color: var(--verde); min-height: 0; transition: color 0.2s ease; }
.kartkowka-input { transition: color 0.2s ease, border-color 0.2s ease; }
.kartkowka-wiersz.sprawdza .kartkowka-input { border-bottom-style: solid; border-bottom-color: color-mix(in srgb, var(--oro) 45%, var(--border-2)); }
.kartkowka-wiersz.sprawdza .kartkowka-poprawna { color: var(--testo); }
.kartkowka-poprawna .quiz-stan { display: inline-flex; height: auto; margin: 0 0 0 8px; vertical-align: middle; font-size: 0.78rem; white-space: nowrap; }
.kartkowka .quiz-sprawdz { width: 100%; max-width: 560px; display: block; margin: 0 auto; padding: 16px; font-size: 1rem; }
@media (max-width: 560px) {
  .kartkowka-wiersz { grid-template-columns: auto minmax(0, 1fr); }
  .kartkowka-pole { grid-column: 2; }
}

.mini-exam-card.koniug { text-align: left; max-width: none; margin: 0; gap: 18px; }
.koniug-glowa { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.koniug-naglowek { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.koniug-czas { font-family: var(--font-tekst); font-size: 17px; font-weight: 600; color: var(--grigio); background: none; padding: 0; }
.koniug-czas { flex-basis: 100%; }
@container quiz (min-width: 600px) {
  .koniug-czas { flex-basis: auto; }
  .koniug-czas::before { content: ', '; margin-left: -8px; }
}
.koniug-licznik { font-family: var(--font-tekst); font-size: 13px; font-weight: 700; color: var(--grigio); }
.koniug-licznik:empty { display: none; }
.koniug-lemat {
  font-family: var(--font-naglowek); font-weight: 800; font-size: 28px; line-height: 1.1;
  letter-spacing: -0.01em; color: var(--testo); overflow-wrap: anywhere;
}
.koniug-tyl { margin: 0; font-family: var(--font-tekst); font-size: 15px; font-weight: 600; color: var(--grigio); overflow-wrap: anywhere; }
.koniug-tabela { list-style: none; margin: 0; padding: 0; border: none; background: none; display: flex; flex-direction: column; gap: 8px; }
.koniug-wiersz {
  display: grid; grid-template-columns: 76px minmax(0, 1fr) 28px; align-items: center; gap: 10px;
  min-height: 56px; padding: 0 14px; border-radius: 16px; border: 2px solid transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.koniug-wiersz + .koniug-wiersz { margin-top: 0; }
.koniug-zaimek-kol { display: flex; flex-direction: column; min-width: 0; }
.koniug-zaimek { font-family: var(--font-tekst); font-weight: 700; font-size: 16px; color: var(--grigio); overflow-wrap: anywhere; }
.koniug-pole { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.koniug-forma { font-family: var(--font-naglowek); font-weight: 700; font-size: 21px; color: var(--testo); overflow-wrap: anywhere; }
.koniug-pusta { color: var(--grigio); font-weight: 600; }
.koniug-wpis { color: var(--grigio); text-decoration: line-through; font-weight: 600; overflow-wrap: anywhere; }
.koniug-pod, .koniug-uwaga { font-family: var(--font-tekst); font-size: 13px; font-weight: 600; color: var(--grigio); }
.koniug-znak { display: inline-flex; align-items: center; justify-content: center; font-size: 20px; }
.koniug-input {
  width: 100%; box-sizing: border-box; padding: 4px 0; border: none; background: transparent; color: var(--testo);
  font-family: var(--font-naglowek); font-size: max(16px, 21px); font-weight: 700;
}
.koniug-input:focus { outline: none; box-shadow: none; }
.koniug-wiersz.aktywny {
  min-height: 64px; background: var(--card-bg); border-color: var(--primary); box-shadow: 0 0 0 4px var(--fokus-pierscien);
}
.koniug-wiersz.aktywny .koniug-zaimek { color: var(--testo); }
.koniug-wiersz.czeka { border: 2px dashed var(--krawedz-kafla); }
.koniug-wiersz.dobrze, .koniug-wiersz.poprawiony { background: var(--bg-success-soft); }
.koniug-wiersz.dobrze .koniug-znak, .koniug-wiersz.poprawiony .koniug-znak { color: var(--verde); }
.koniug-wiersz.zle { background: var(--bg-error-soft); }
.koniug-wiersz.zle .koniug-znak { color: var(--rosso); }
.koniug-wiersz.zle.koniec .koniug-forma { color: var(--testo); }
.koniug-wiersz.koniec { opacity: 1; }
.koniug-kropka { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.koniug-wiersz.blysk { animation: koniugBlysk 0.25s ease-out; }
@keyframes koniugBlysk { from { background: color-mix(in srgb, var(--verde) 30%, var(--bg-success-soft)); } to { background: var(--bg-success-soft); } }
.koniug-input.drga { animation: koniugDrga 0.3s ease-in-out; }
@keyframes koniugDrga { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.koniug-rodzaj { font-size: 13px; font-weight: 600; color: var(--grigio); margin: 0 2px; }
.koniug-zrodlo { margin: 0; text-align: center; font-size: 12px; color: var(--grigio); }
.mini-exam-card.koniug.czeka-dalej .quiz-nie-wiem { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .koniug-wiersz.blysk, .koniug-input.drga { animation: none; }
  .koniug-wiersz { transition: none; }
}
@media (max-width: 560px) {
  .koniug-wiersz { grid-template-columns: minmax(0, 76px) minmax(0, 1fr) 24px; gap: 8px; padding: 0 12px; }
}

.quiz-koniec { padding: 6px 0 4px; }

.quiz-koniec-kafle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.quiz-koniec-kafel {
  background: var(--card-bg); border: 1px solid var(--border-warm);
  border-radius: 16px; padding: 14px 10px; text-align: center;
}
.quiz-koniec-kafel .liczba { font-size: 1.6rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.quiz-koniec-kafel .podpis { font-size: 0.72rem; color: var(--grigio); margin-top: 3px; }
.quiz-koniec-kafel.dobre .liczba { color: var(--verde); }
.quiz-koniec-kafel.zle   .liczba { color: var(--rosso); }
.quiz-koniec-kafel.xp    .liczba { color: var(--oro); }

.quiz-koniec-pasek-tlo {
  height: 8px; border-radius: 999px; background: var(--bg-soft); overflow: hidden; margin-top: 14px;
}
.quiz-koniec-pasek {
  height: 100%; border-radius: 999px; background: var(--marka-zielony);
  width: 0; transition: width 0.9s cubic-bezier(.22, 1, .36, 1);
}
.quiz-koniec-akcje { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.quiz-koniec-akcje .btn { flex: 1; min-width: 150px; }
@media (prefers-reduced-motion: reduce) { .quiz-koniec-pasek { transition: none; } }

.quiz-slowa-lista { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.quiz-slowo-opcja {
  background: var(--bg-soft); border: 2px solid var(--border-2); border-radius: 14px;
  padding: 14px 18px; font-family: inherit; font-size: 1.05rem; font-weight: 700;
  color: var(--testo); cursor: pointer; transition: var(--transition);
}
.quiz-slowo-opcja:hover { border-color: var(--oro); transform: translateY(-2px); }
.quiz-slowa-lista.zablokowane .quiz-slowo-opcja { cursor: default; }
.quiz-slowa-lista.zablokowane .quiz-slowo-opcja:hover { transform: none; border-color: var(--border-2); }
.quiz-slowo-opcja.poprawna { border-color: var(--verde); color: var(--verde); }
.quiz-slowa-lista.zablokowane .quiz-slowo-opcja.poprawna:hover { border-color: var(--verde); }
.quiz-slowo-opcja.bledna { border-color: var(--rosso); opacity: 0.55; }
.quiz-slowa-lista.szesc { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .quiz-slowa-lista.szesc { grid-template-columns: 1fr; } }
.bez-audio-btn svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 3px; }

.quiz-blokada-klikniec { pointer-events: none; }

.stats-grid.mini-exam-locked { position: relative; pointer-events: none; opacity: 0.45; filter: grayscale(0.6); }

.mini-exam-fly {
  position: fixed; z-index: 5000; padding: 6px 14px; border-radius: 999px;
  background: var(--card-bg); border: 2px solid var(--border-warm); font-weight: 700;
  font-size: 0.85rem; color: var(--testo); pointer-events: none;
  transition: top 0.7s cubic-bezier(.4,0,.2,1), left 0.7s cubic-bezier(.4,0,.2,1), opacity 0.7s ease;
}
.mini-exam-fly.correct { border-color: var(--verde); color: var(--verde); }
.mini-exam-fly.wrong { border-color: var(--rosso); color: var(--rosso); }

.sentence-puzzle-loading {
  padding: 30px 10px; color: var(--grigio); font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.sentence-puzzle-prompt { font-size: 1.15rem; font-weight: 700; color: var(--testo); margin-bottom: 22px; text-align: center; }
.sentence-puzzle-answer {
  min-height: 52px; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; justify-content: center;
  padding: 10px; margin-bottom: 20px;
  border-bottom: 2px solid var(--border-warm-dash);
  touch-action: none;
}
.sentence-puzzle-pool { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; touch-action: none; }
.sentence-tile {
  display: inline-block; padding: 9px 12px; border-radius: 8px;
  background: var(--card-bg); border: 2px solid var(--border-warm);
  font-weight: 700; color: var(--testo); cursor: grab; user-select: none;
  touch-action: none;
}
.sentence-tile:hover { border-color: var(--oro); }
.sentence-tile.placed { background: var(--bg-gold-soft); border-color: var(--oro); }
.sentence-tile-ghost {
  position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
  transform: translate(-50%, -50%); box-shadow: 0 6px 18px rgba(0,0,0,0.25); opacity: 0.95;
}

.context-word {
  cursor: pointer; border-bottom: 2px dashed var(--border-warm-dash);
  position: relative; padding-bottom: 1px;
}
.context-word.show-gloss::after {
  content: attr(data-gloss);
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  background: var(--testo); color: var(--card-bg); font-size: 0.7rem; font-weight: 700;
  padding: 4px 9px; border-radius: 8px; white-space: nowrap; margin-bottom: 6px; z-index: 5;
}

.parole-usate {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}
.parola-tag {
  background: var(--bg-success-soft);
  color: var(--verde);
  border-radius: 50px;
  padding: 4px 14px;
  font-size: 0.8rem;
  font-weight: 600;
}

.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast {
  background: var(--card-bg);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
  font-size: 0.9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: slideIn 0.3s ease;
  max-width: 320px;
  border-left: 4px solid var(--verde);
}
.toast.error { border-color: var(--rosso); }
.toast.warning { border-color: var(--oro); }
@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

#cardAreaLoader:not(.hidden) { animation: ladowanieTalii 0.2s ease 0.35s both; }
@keyframes ladowanieTalii { from { opacity: 0; } to { opacity: 1; } }
.loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  color: var(--grigio);
  font-size: 0.9rem;
}
.spinner {
  width: 20px; height: 20px;
  border: 3px solid var(--border-warm);
  border-top-color: var(--oro);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.spinner-w-przycisku {
  width: 14px; height: 14px; border-width: 2px;
  border-color: color-mix(in srgb, currentColor 40%, transparent); border-top-color: currentColor;
  flex-shrink: 0; 
}

.upload-progress {
  display: none;
  margin-top: 12px;
}
.upload-progress.active { display: block; }

.sep {
  border: none;
  border-top: 1px solid var(--border-warm-soft);
  margin: 16px 0;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D4C5B0; border-radius: 6px; }

.hidden { display: none !important; }

html:not(.fon-wyl) .fon[data-fon] {
  display: inline-block; text-align: center; text-indent: 0; vertical-align: baseline; line-height: 1.2;
}
html:not(.fon-wyl) .fon[data-fon]::before {
  content: attr(data-fon); content: attr(data-fon) / ""; display: block;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: max(0.58em, 11px); line-height: 1.2;
  font-weight: 500; font-style: normal; letter-spacing: 0; text-transform: none; text-decoration: none;
  color: var(--grigio); white-space: nowrap;
  padding: 0 0.25em;
  direction: ltr; unicode-bidi: isolate;
  -webkit-user-select: none; user-select: none;
}
html:not(.fon-wyl) :where(.kartka-segment.zrobione .kartka-zrodlo) .fon[data-fon] > .fon-t {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
  text-decoration-color: var(--border-2); text-decoration-skip-ink: none;
}
html:not(.fon-wyl) :is(.trudne-fraza, .ai-wstawka) .fon[data-fon] > .fon-t {
  text-decoration: underline; text-decoration-color: var(--rosso); text-decoration-thickness: 2px;
  text-underline-offset: 3px; text-decoration-skip-ink: none;
}
html:not(.fon-wyl) :is(.czesc-zle, .mow-poprawka-blad) .fon[data-fon] > .fon-t {
  text-decoration: underline wavy var(--rosso); text-decoration-thickness: 2px; text-underline-offset: .22em;
  text-decoration-skip-ink: none;
}
html:not(.fon-wyl) .fon-grupa { white-space: nowrap; }
html:not(.fon-wyl) .fon-czeka.fon-blok { border-top: max(0.7em, 13px) solid transparent; }
html:not(.fon-wyl) .fon-czeka.fon-blok.fon-inline { display: inline-block; }
html:not(.fon-wyl) .kartka.fon-jest .kartka-akapit { line-height: calc(var(--kartka-krok, 26px) * 2); }
html:not(.fon-wyl) .film-zrodlo.fon-jest { line-height: 2.35; }
html:not(.fon-wyl) .mow-bot-tekst.fon-jest { line-height: 2.1; }
html:not(.fon-wyl) .mow-dymek:has(.fon-gotowe, .fon-czeka) { padding-top: 11px; }
html:not(.fon-wyl) .fon-rtl { direction: rtl; unicode-bidi: isolate; }
.kartka.kartka-rtl .kartka-akapit { direction: rtl; }
.kartka.kartka-rtl :is(.kartka-tlumaczenie, .frag-tlumaczenie, .kartka-proba) { direction: ltr; unicode-bidi: isolate; }

.wordmap-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(15, 23, 42, 0.68);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.wordmap-modal {
  background: var(--crema);
  border-radius: 24px;
  width: 100%; max-width: 900px;
  max-height: 85vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,0.3);
  overflow: hidden;
  animation: slideUp 0.3s cubic-bezier(.4,0,.2,1);
}
@keyframes slideUp {
  from { transform: translateY(30px); opacity:0; }
  to   { transform: translateY(0);    opacity:1; }
}

.wordmap-header {
  padding: 20px 24px 16px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border-warm-soft);
  background: var(--card-bg);
  flex-shrink: 0;
}
.wordmap-title {
  font-size: 1.2rem; font-weight: 800; display: flex; align-items: center; gap: 10px;
}
.wordmap-controls {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.wordmap-close {
  background: none; border: none; font-size: 1.4rem;
  cursor: pointer; color: var(--grigio); padding: 4px;
  transition: var(--transition);
}
.wordmap-close:hover { color: var(--rosso); transform: scale(1.2); }

.wordmap-search {
  padding: 8px 16px; border-radius: 50px;
  border: 2px solid var(--border-warm); background: var(--crema);
  font-size: 0.88rem; outline: none;
  flex: 1 1 140px; min-width: 0; max-width: 180px;
  transition: var(--transition);
}
.wordmap-search:focus { border-color: var(--oro); }

.wordmap-body {
  overflow-y: auto; padding: 20px 24px; flex: 1;
}

.film-formularz { max-width: 760px; margin: 0 auto; }
.film-pole { margin-bottom: 14px; }
.film-pole label { display: block; font-size: 0.8rem; font-weight: 800; color: var(--grigio); margin-bottom: 6px; }
.film-jak {
  margin: 0 0 16px; padding: 12px 14px; border-radius: 12px;
  background: var(--crema); border: 1px solid var(--border-warm-soft);
  font-size: 0.82rem; line-height: 1.6; color: var(--grigio);
}
.film-jak b { color: var(--testo); }
.film-jak ol { margin: 8px 0 0; padding-left: 20px; }

.film-ramka {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 14px; overflow: hidden; background: #000; margin-bottom: 14px;
}
.film-ramka iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.film-pasek { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.film-tytul { font-weight: 800; font-size: 1.02rem; flex: 1; min-width: 140px; }

.film-akcje {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border);
}
.film-akcje-lewo, .film-akcje-prawo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.film-akcje .kartka-przelacznik { margin: 0; }
.ppt-akcja-usun:hover { border-color: var(--rosso); color: var(--rosso); }
.film-akcje .ppt-akcja.ppt-mapa { background: var(--oro); border-color: var(--oro); color: var(--na-akcencie); }
.film-akcje .ppt-akcja.ppt-mapa:hover { opacity: 0.9; }
@media (max-width: 640px) {
  .film-akcje { flex-direction: column; align-items: stretch; }
  .film-akcje-lewo, .film-akcje-prawo { justify-content: flex-start; }
}

.film-teraz {
  position: relative; min-height: 104px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 16px 18px; border-radius: 14px;
  background: var(--crema); border: 1px solid var(--border-warm-soft);
}
.film-teraz-kwestia { width: 100%; opacity: 0; transition: opacity 0.75s ease; }
.film-teraz-kwestia.widoczna { opacity: 1; transition: opacity 0.2s ease; }
.film-zrodlo { display: block; font-size: 1.06rem; line-height: 1.55; font-weight: 600; }
.film-slowo { position: relative; }

.film-pileczka {
  position: absolute; left: 0; top: 0; width: 14px; height: 14px;
  margin: -7px 0 0 -7px;              
  pointer-events: none; opacity: 0;
  transition: transform 0.34s cubic-bezier(.34,.9,.4,1), opacity 0.25s ease;
}
.film-pileczka.widoczna { opacity: 1; }
.film-pileczka i {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%,
              color-mix(in srgb, var(--primary) 30%, #fff), var(--primary) 72%);
  box-shadow: 0 3px 7px color-mix(in srgb, var(--primary) 42%, transparent);
  animation: film-skok 1.9s ease-in-out infinite;
}
@keyframes film-skok {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) {
  .film-pileczka i { animation: none; }
  .film-pileczka { transition: opacity 0.25s ease; }
}
.film-tlum { display: block; font-size: 0.76rem; color: var(--grigio); line-height: 1.45; margin-bottom: 5px; }
.film-tlum:empty { display: none; }
.film-teraz.bez-tlumaczenia .film-tlum { display: none; }
.film-teraz-podpowiedz {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 16px 18px; font-size: 0.85rem; color: var(--grigio);
  transition: opacity 0.4s ease;
}

.plan-sciezka { margin-bottom: 12px; }
.plan-modul {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "glowa strzalka" "kolka kolka";
  align-items: center; gap: 12px 14px; padding: 14px 16px 16px; border: none; border-radius: 22px; cursor: pointer;
  background: #2463E9; color: #FFFFFF; font: inherit; text-align: start;
  box-shadow: 0 18px 30px -24px rgba(8, 18, 70, 0.9);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.plan-modul:hover { transform: translateY(-2px); box-shadow: 0 20px 34px -20px rgba(8, 18, 70, 0.95); }
.plan-modul:focus-visible { outline: 3px solid var(--zolty); outline-offset: 3px; }
.plan-modul-glowa { grid-area: glowa; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.plan-modul-tytul {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-naglowek); font-weight: 800; font-size: 1.15rem; line-height: 1.2; letter-spacing: -0.01em;
}
.plan-modul-tytul .ico { margin: 0; color: var(--zolty); }
.plan-modul-meta { font-size: 0.82rem; font-weight: 600; color: #EEF3FF; }
.plan-modul-strzalka {
  grid-area: strzalka; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: #FFFFFF; color: #17183B; transition: background-color 0.15s ease;
}
.plan-modul-strzalka .ico { margin: 0; line-height: 1; }
.plan-modul:hover .plan-modul-strzalka { background: var(--zolty); }
[dir="rtl"] .plan-modul-strzalka .ico { transform: scaleX(-1); }
.plan-kolka { grid-area: kolka; display: flex; align-items: center; flex-wrap: nowrap; min-width: 0; overflow: hidden; padding: 6px; }
.plan-kolko {
  position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: conic-gradient(var(--zolty) calc(var(--pct, 0) * 1%), rgba(255, 255, 255, 0.3) 0);
  display: grid; place-items: center;
}
.plan-kolko::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #FFFFFF; }
.plan-kolko b { position: relative; font-family: var(--font-naglowek); font-weight: 800; font-size: 1rem; line-height: 1; color: #17183B; }
.plan-kolko.zrobiony { background: #FFFFFF; }
.plan-kolko.zrobiony::before { background: var(--zolty); }
.plan-kolko.biezacy { box-shadow: 0 0 0 3px #2463E9, 0 0 0 5px var(--zolty); }
.plan-kolko.zamkniety { background: transparent; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45); }
.plan-kolko.zamkniety::before { background: transparent; }
.plan-kolko.zamkniety b { color: rgba(255, 255, 255, 0.85); }
.plan-kolko-znak {
  position: absolute; right: -4px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.58rem; box-shadow: 0 0 0 2px #2463E9;
}
.plan-kolko-znak .ico { margin: 0; line-height: 1; }
.plan-kolko.zrobiony .plan-kolko-znak { background: #35A64D; color: #17183B; }
.plan-kolko.zamkniety .plan-kolko-znak { background: #17183B; color: #FFFFFF; }
.plan-lacznik { flex: 1 1 8px; min-width: 6px; max-width: 22px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.35); }
.plan-lacznik.przebyty { background: #FFFFFF; }
.plan-kolka-wiecej { flex: none; padding: 0 6px; font-size: 0.8rem; font-weight: 800; color: #EEF3FF; }
@media (prefers-reduced-motion: reduce) { .plan-modul, .plan-modul-strzalka { transition: none; } .plan-modul:hover { transform: none; } }

.plan-modal { max-width: 620px; }
.plan-naglowek { padding: 20px 22px 0; }
.plan-tytul { font-size: 1.06rem; font-weight: 800; margin-bottom: 8px; }
.plan-wstep { font-size: 0.88rem; line-height: 1.65; color: var(--grigio); margin: 0 0 4px; }
.plan-opcje { display: grid; gap: 10px; padding: 16px 22px 4px; }
.plan-opcja {
  display: block; width: 100%; text-align: left; cursor: pointer; font: inherit; color: var(--testo);
  padding: 13px 15px; border-radius: 13px; border: 2px solid var(--border-warm-soft);
  background: var(--card-bg); transition: var(--transition);
}
.plan-opcja:hover { border-color: var(--oro); }
.plan-opcja.wybrana { border-color: var(--oro); background: var(--bg-highlight); }
.plan-opcja-glowa { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.plan-opcja-nazwa { font-weight: 800; font-size: 0.94rem; }
.plan-odznaka {
  font-size: 0.68rem; font-weight: 800; padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--verde) 15%, transparent); color: var(--zielen-gleboka);
}
.plan-odznaka.ostrzezenie { background: color-mix(in srgb, var(--rosso) 15%, transparent); color: var(--rosso); }
.plan-opcja-opis { font-size: 0.79rem; color: var(--grigio); line-height: 1.55; }
.plan-opcja-data { font-size: 0.79rem; font-weight: 700; margin-top: 5px; }
.plan-akcje { display: flex; flex-direction: column; gap: 8px; padding: 14px 22px 20px; }
.plan-akcje .btn { margin: 0; }
.plan-pomin {
  background: none; border: none; font: inherit; font-size: 0.8rem; color: var(--grigio);
  cursor: pointer; text-decoration: underline; padding: 4px;
}
.plan-pomin:hover { color: var(--testo); }

.film-ladowanie {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; padding: 56px 20px; text-align: center; min-height: 320px;
}
.film-ladowanie .spinner { width: 40px; height: 40px; border-width: 4px; }
.film-ladowanie-tytul { font-weight: 800; font-size: 1rem; }
.film-ladowanie-podtytul { font-size: 0.82rem; color: var(--grigio); margin-top: -12px; }
.film-ciekawostka {
  max-width: 480px; min-height: 3.6em; font-size: 0.9rem; line-height: 1.75; color: var(--grigio);
  opacity: 0; transition: opacity 1.4s ease;
  animation: film-tetno 4.2s ease-in-out infinite;
}
.film-ciekawostka.widoczna { opacity: 1; }
@keyframes film-tetno { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.018); } }
@media (prefers-reduced-motion: reduce) { .film-ciekawostka { animation: none; } }

.film-gra { width: 100%; max-width: 480px; }
.wgr-panel .film-gra { margin: 14px auto 0; text-align: left; }
.film-gra-gora {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 0.78rem; color: var(--grigio); margin-bottom: 6px;
}
.film-gra-wynik { font-weight: 800; color: var(--verde); font-variant-numeric: tabular-nums; }
.film-gra-plansza {
  position: relative; height: 150px; overflow: hidden;
  border: 1px dashed var(--border-warm); border-radius: 16px;
  background: var(--bg-soft);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
.film-babel {
  position: absolute; bottom: -40px; left: 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 999px; white-space: nowrap;
  font-size: 0.8rem; font-weight: 700; color: var(--testo);
  background: var(--card-bg); border: 1px solid var(--border-warm);
  box-shadow: 0 3px 10px -4px rgba(15, 23, 42, 0.25);
  cursor: pointer; user-select: none;
  touch-action: manipulation;
  animation: film-babel-plyn var(--czas, 8s) linear forwards;
}
.film-babel:hover { border-color: var(--verde); }
@keyframes film-babel-plyn {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(-1 * var(--droga, 200px))); }
}
.film-babel.pekniety {
  animation: film-babel-pyk 0.42s ease-out forwards;
  pointer-events: none; border-color: var(--verde); color: var(--verde);
}
@keyframes film-babel-pyk {
  0%   { transform: scale(1);    opacity: 1; }
  35%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(0.9);  opacity: 0; }
}
.film-babel-plus { font-weight: 800; color: var(--verde); }
.film-iskra {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: var(--verde); pointer-events: none;
  animation: film-iskra-lot 0.5s ease-out forwards;
}
@keyframes film-iskra-lot {
  from { transform: translate(0, 0) scale(1); opacity: 0.9; }
  to   { transform: translate(var(--x, 0), var(--y, 0)) scale(0.2); opacity: 0; }
}

@media (max-width: 560px) { .film-gra-plansza { height: 120px; } }

@media (prefers-reduced-motion: reduce) {
  .film-babel { animation: none; bottom: auto; }
  .film-babel.pekniety { animation: none; opacity: 0; transition: opacity 0.25s ease; }
  .film-iskra { display: none; }
}

#widokFilmow { position: relative; }
#filmLadowanie.gasnie {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: var(--bg); opacity: 0; transition: opacity 0.4s ease;
}
@media (prefers-reduced-motion: reduce) { #filmLadowanie.gasnie { transition: none; } }

.film-lista, #filmyListaBody {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; align-content: start;
  grid-auto-rows: max-content;   
}
.film-lista { margin-top: 10px; }
#filmyListaBody > .wordmap-empty { grid-column: 1 / -1; }
#filmyListaOverlay .wordmap-modal { max-width: 1080px; }
.film-kafelek {
  position: relative; display: flex; flex-direction: column; min-width: 0; padding: 0; overflow: hidden;
  text-align: left; cursor: pointer; border-radius: 16px; border: 2px solid var(--border-warm);
  background: var(--card-bg); font: inherit; color: var(--testo);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.film-kafelek:hover, .film-kafelek:focus-visible { border-color: var(--oro); transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.film-kafelek:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.film-kafelek.biezacy { border-color: var(--oro); }
.film-kafelek-okladka { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-soft); }
.film-kafelek-okladka img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease;
}
.film-kafelek:hover .film-kafelek-okladka img { transform: scale(1.05); }
.film-kafelek-graj {
  position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(3px); transition: transform .2s ease, background .2s ease;
}
.film-kafelek-graj .ico { margin: 0 0 0 3px; font-size: 1.2rem; }
.film-kafelek:hover .film-kafelek-graj { transform: scale(1.15); background: var(--marka-czerwony); }
.film-kafelek-czas {
  position: absolute; right: 8px; bottom: 12px; padding: 2px 6px; border-radius: 6px;
  background: rgba(15, 23, 42, .78); color: #fff; font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.film-kafelek-pasek { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: rgba(15, 23, 42, .28); }
.film-kafelek-pasek > span { display: block; height: 100%; width: var(--postep, 0%); background: var(--marka-zielony); }
.film-kafelek-usun {
  position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--grigio);
  background: color-mix(in srgb, var(--card-bg) 86%, transparent); backdrop-filter: blur(6px);
}
.film-kafelek-usun:hover, .film-kafelek-usun:focus-visible { color: var(--rosso); }
.film-kafelek-usun .ico { margin: 0; }
.film-kafelek .opis {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; row-gap: 2px; padding: 10px 12px 12px; min-width: 0;
}
.film-kafelek .nazwa {
  flex: 1 1 100%; font-weight: 800; font-size: 0.92rem; line-height: 1.25; overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.film-kafelek .meta { font-size: 0.74rem; color: var(--grigio); margin-top: 2px; }
.film-kafelek .opis > .film-kafelek-ma, .film-kafelek .opis > .film-kafelek-fiszki { flex-basis: 100%; }
.film-kafelek .opis > .film-kafelek-fiszki { justify-content: center; }
@media (max-width: 560px) {
  .film-lista, #filmyListaBody { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .film-kafelek .opis { padding: 8px 10px 10px; }
  .film-kafelek .nazwa { font-size: .86rem; }
  .film-kafelek-graj { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
}
@media (prefers-reduced-motion: reduce) {
  .film-kafelek, .film-kafelek-okladka img, .film-kafelek-graj { transition: none; }
  .film-kafelek:hover, .film-kafelek:focus-visible { transform: none; }
  .film-kafelek:hover .film-kafelek-okladka img, .film-kafelek:hover .film-kafelek-graj { transform: none; }
}
.wordmap-kat-section {
  margin-bottom: 24px;
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}
.wordmap-kat-title {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--grigio);
  margin-bottom: 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border-warm-soft);
  display: flex; align-items: center; justify-content: space-between;
}
.wordmap-kat-delall {
  border: none; background: transparent; cursor: pointer; font-size: 0.9rem;
  opacity: 0.55; padding: 2px 4px; border-radius: 6px; line-height: 1;
}
.wordmap-kat-delall:hover { opacity: 1; background: var(--bg-error-soft); }

.wordmap-grid {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.word-chip {
  background: var(--card-bg);
  border-radius: 50px;
  padding: 7px 16px;
  font-size: 0.88rem; font-weight: 600;
  border: 2px solid var(--border-warm);
  cursor: default;
  transition: border-color .3s cubic-bezier(.4,0,.2,1), background .3s cubic-bezier(.4,0,.2,1), transform .3s cubic-bezier(.4,0,.2,1);
  display: flex; align-items: center; gap: 6px;
  line-height: 1.2;
  user-select: none;
}
.word-chip:hover { border-color: var(--oro); transform: scale(1.04); }
.word-chip .it { color: var(--testo); }
.word-chip .sep-dot { color: var(--muted-light); font-size: 0.7rem; }
.word-chip .pl { color: var(--grigio); font-size: 0.8rem; font-weight: 400; }
.word-chip .emotka { font-size: 1rem; }
.word-chip .chip-del {
  cursor: pointer;
  color: var(--muted-light);
  font-size: 0.85rem;
  margin-left: 2px;
  transition: var(--transition);
}
.word-chip .chip-del:hover { color: var(--rosso); transform: scale(1.2); }
.word-chip.edytowalny { cursor: pointer; }
.word-chip.edytowalny:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.word-chip .chip-edit { font-size: 0.72rem; color: var(--muted-light); opacity: 0; transition: opacity .2s; }
.word-chip.edytowalny:hover .chip-edit, .word-chip.edytowalny:focus-visible .chip-edit { opacity: 1; color: var(--oro); }
@media (hover: none) { .word-chip .chip-edit { opacity: .6; } }
.word-chip.locked {
  background: var(--bg-soft); border-color: var(--border); border-style: dashed;
  opacity: 0.72; cursor: not-allowed;
}
.word-chip.locked:hover { border-color: var(--border); transform: none; }
.word-chip.locked.etap { cursor: pointer; }
.word-chip.locked.etap:hover { border-color: var(--oro); }
.word-chip.locked .it { color: var(--grigio); }
.locked-banner {
  background: var(--bg-info-soft); border: 1px solid var(--border-2); border-radius: 12px;
  padding: 10px 14px; font-size: 0.8rem; color: var(--muted-dark); line-height: 1.5; margin-top: 12px;
}
.locked-banner strong { font-weight: 800; }


.streak-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 7px 13px; border-radius: 50px;
  border: 2px solid var(--border); background: var(--bg-soft);
  color: var(--testo); font-family: inherit; font-size: 0.88rem; font-weight: 800;
  cursor: pointer; transition: var(--transition);
}
.streak-badge:hover { background: var(--border); border-color: var(--border-2); }
#streakFlame { display: inline-block; width: 18px; height: 22px; line-height: 0; }
#streakBigFlame { width: 64px; height: 77px; margin: 0 auto 8px; line-height: 0; font-size: 3.2rem; }
.ogien-inline { display: inline-block; width: 16px; height: 19px; vertical-align: -4px; margin-right: 4px; line-height: 0; }
.streak-wrap { position: relative; }
.streak-popover {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 300; width: 320px; box-sizing: border-box;
  background: var(--card-bg); border: 1.5px solid var(--border); border-radius: 24px; box-shadow: 0 18px 40px -12px rgba(23, 24, 59, 0.28);
  padding: 16px; color: var(--testo);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.streak-wrap:hover .streak-popover { opacity: 1; visibility: visible; transform: translateY(0); }
.streak-popover::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
@media (hover: none) { .streak-popover { display: none; } }

.renew-box {
  margin-top: 12px; padding: 12px 14px; background: var(--crema); border-radius: 12px;
}

.promo-row { display: flex; gap: 6px; margin-top: 10px; }
.promo-row .auth-input { margin-bottom: 0; flex: 1; text-transform: uppercase; }
.promo-row button { width: auto; margin: 0; padding: 0 16px; white-space: nowrap; }
.promo-applied {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 10px; padding: 9px 12px; border-radius: 12px;
  background: var(--bg-success-soft); border: 1px solid var(--zielen-pastel); font-size: 0.8rem; font-weight: 700;
}
.promo-applied .promo-drop {
  background: none; border: none; padding: 0; font-family: inherit; font-size: inherit;
  color: var(--rosso); cursor: pointer; font-weight: 800;
}
.promo-error { margin-top: 8px; font-size: 0.78rem; color: var(--rosso); font-weight: 700; }

.buy-consent {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 14px;
  font-size: 0.78rem; color: var(--grigio); line-height: 1.5; cursor: pointer;
}
.buy-consent input { margin-top: 2px; flex-shrink: 0; width: 15px; height: 15px; accent-color: var(--oro); }
.buy-consent-note {
  margin-top: 6px; padding: 8px 11px; border-radius: 9px;
  background: var(--crema); font-size: 0.73rem; color: var(--grigio); line-height: 1.5;
}
.buy-consent-link {
  margin-top: 5px; font-size: 0.7rem; color: var(--muted-light); line-height: 1.45;
}
.buy-consent-link a { color: var(--grigio); text-decoration: underline; }
.buy-consent-link a:hover { color: var(--testo); }

.buy-consent-note.czeka {
  background: color-mix(in srgb, #D97706 14%, var(--card-bg)); color: var(--testo); font-weight: 600;
  border: 1px solid color-mix(in srgb, #D97706 45%, transparent);
}

.currency-switch {
  display: flex; gap: 4px; justify-content: center; margin: 0 0 12px;
  background: var(--crema); border-radius: 50px; padding: 4px; width: fit-content; margin-inline: auto;
}
.currency-opt {
  border: none; background: transparent; border-radius: 50px; padding: 6px 16px;
  font-family: inherit; font-size: 0.76rem; font-weight: 800; color: var(--grigio);
  cursor: pointer; transition: var(--transition);
}
.currency-opt:hover { color: var(--testo); }
.currency-opt.active { background: var(--zolty); color: var(--granat); }

.add-method-skrot {
  display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 6px;
  padding: 8px 10px; border-radius: 10px; border: 1px dashed var(--border-warm-dash);
  background: none; font-family: inherit; font-size: 0.76rem; font-weight: 700;
  color: var(--grigio); cursor: pointer; transition: var(--transition); text-align: left;
}
.add-method-skrot:first-of-type { margin-top: -6px; }
.add-method-skrot:last-of-type  { margin-bottom: 14px; }
.add-method-skrot:hover { border-color: var(--oro); color: var(--oro); }
.add-method-skrot > span { flex: 1; min-width: 0; }
.add-method-skrot .ico { font-size: 1rem; flex-shrink: 0; }

.tq-panel {
  position: sticky; bottom: 12px; z-index: 60; margin-top: 14px; text-align: left;
  background: var(--card-bg); border: 1px solid var(--border-warm-soft); border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.14); padding: 12px 14px;
  animation: odsluchWjazd 0.35s cubic-bezier(.22,1,.36,1);
}
.tq-gora { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 800;
  color: var(--grigio); margin-bottom: 10px; }
.tq-licznik { margin-left: auto; font-weight: 700; }
.tq-zamknij { border: none; background: transparent; color: var(--grigio); cursor: pointer;
  font-size: 1.15rem; line-height: 1; padding: 0 2px; }
.tq-zamknij:hover { color: var(--testo); }
.tq-opcje { grid-template-columns: 1fr; }
.tq-ocena { margin-top: 10px; font-size: 0.85rem; font-weight: 700; line-height: 1.5; }
.tq-ocena.dobrze { color: var(--verde); }
.tq-ocena.zle { color: var(--rosso); }
.tq-bez-punktow { display: block; font-weight: 600; font-size: 0.76rem; color: var(--grigio); margin-top: 2px; }
.tq-koniec { font-size: 0.95rem; font-weight: 800; text-align: center; margin-bottom: 10px; }

.wordmap-overlay.profil-overlay { justify-content: flex-end; align-items: stretch; padding: 0; }

.profil-panel {
  position: relative;
  background: var(--crema);
  width: 46vw; min-width: 380px; max-width: 720px;
  height: 100%;
  border-radius: 24px 0 0 24px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.32);
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  animation: profilWjazd 0.28s cubic-bezier(.22,1,.36,1);
}
@media (max-width: 560px) {
  .profil-panel { width: 100%; min-width: 0; max-width: none; border-radius: 0; }
}
@keyframes profilWjazd { from { transform: translateX(100%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .profil-panel { animation: none; } }

.profil-tresc { display: flex; flex-direction: column; gap: 14px; padding: 18px; }
.profil-zamknij {
  position: sticky; top: 0; z-index: 3;
  align-self: flex-start; margin: -6px 0 -34px -6px;
  background: var(--card-bg); border-radius: 50%;
}


.profil-lista-gora {
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px; padding-top: 26px;
}
.profil-lista-wroc {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--border-2); background: var(--card-bg); color: var(--testo);
  font-size: 0.9rem; line-height: 1;
}
.profil-osoba {
  display: flex; align-items: center; gap: 10px; width: 100%; cursor: pointer;
  padding: 9px 10px; border: none; border-radius: 12px; background: none;
  font-family: inherit; color: inherit; text-align: left;
}
.profil-osoba:hover { background: var(--bg-soft); }
.profil-osoba-nick { font-weight: 700; font-size: 0.88rem; }
.profil-osoba-xp { margin-left: auto; font-size: 0.76rem; color: var(--grigio); white-space: nowrap; }
.profil-pusto { font-size: 0.82rem; color: var(--grigio); padding: 12px 2px; line-height: 1.5; }

.profil-galeria-wiecej {
  display: block; width: 100%; margin-top: 10px; padding: 9px 14px; cursor: pointer;
  border: 1px solid var(--border-warm-soft); border-radius: 12px; background: var(--crema);
  font-family: inherit; font-size: 0.78rem; font-weight: 700; color: var(--grigio);
  transition: var(--transition);
}
.profil-galeria-wiecej:hover:not(:disabled) { background: var(--bg-soft); color: var(--testo); }
.profil-galeria-wiecej:disabled { cursor: default; opacity: 0.6; }
.profil-galeria-pusto {
  padding: 18px 14px; border-radius: 12px; background: var(--crema);
  border: 1px dashed var(--border-warm-soft);
  font-size: 0.78rem; color: var(--grigio); text-align: center;
}
.profil-awatar-wrap { position: relative; display: inline-block; }
.profil-zapelnienie {
  position: absolute; inset: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, 0.42);
  color: #fff; font-weight: 800; font-size: 0.86rem; letter-spacing: -0.01em;
  pointer-events: none;
}
.profil-wykres { width: 100%; min-width: 0; }
.profil-wykres svg { width: 100%; display: block; }
.profil-naglowek {
  text-align: left; font-weight: 800; font-size: 0.86rem; line-height: 1.35;
  letter-spacing: -0.005em; margin: 18px 0 9px;
}
.kod-pola { display: flex; gap: 8px; justify-content: center; margin: 0 0 14px; }
.kod-pole {
  width: 46px; height: 56px; flex: 0 1 46px; min-width: 0;
  text-align: center; font-size: 1.5rem; font-weight: 800; color: var(--testo);
  font-family: inherit; background: var(--crema);
  border: 2px solid var(--border-warm); border-radius: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -moz-appearance: textfield;
}
.kod-pole::-webkit-outer-spin-button, .kod-pole::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kod-pole:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 3px color-mix(in srgb, var(--oro) 18%, transparent); }
.kod-pole.pelne { border-color: var(--oro); }
@media (max-width: 380px) {
  .kod-pola { gap: 5px; }
  .kod-pole { width: 40px; height: 50px; flex-basis: 40px; font-size: 1.25rem; }
}

.mail-probka { background: var(--crema); border: 1px solid var(--border-warm); border-radius: 10px;
  padding: 11px 13px; margin-bottom: 14px; }

.admin-alarm {
  background: #B91C1C; color: #FFFFFF; padding: 11px 16px; flex-shrink: 0;
  font-size: 0.82rem; line-height: 1.5; border-bottom: 1px solid rgba(0,0,0,0.2);
}
.admin-alarm.uwaga { background: #B45309; }
.admin-alarm.hidden { display: none; }
.admin-alarm-poz { display: flex; gap: 9px; align-items: flex-start; }
.admin-alarm-poz + .admin-alarm-poz { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.28); }
.admin-alarm-tytul { font-weight: 800; }
.admin-alarm-opis { opacity: 0.92; }

.i18n-stan { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px;
  padding: 8px 11px; background: var(--crema); border: 1px solid var(--border-warm);
  border-radius: 10px; font-size: 0.76rem; color: var(--grigio); }
.i18n-stan #i18nStanTekst { flex: 1; min-width: 180px; }
.i18n-stan b { color: var(--testo); }

.hist-kafelki { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.hist-kafelek { background: var(--crema); border: 1px solid var(--border-warm); border-radius: 12px;
  padding: 10px 6px; text-align: center; }
.hist-ikona { font-size: 1.1rem; line-height: 1; }
.hist-liczba { font-size: 1.25rem; font-weight: 800; color: var(--testo); line-height: 1.2; margin-top: 3px; }
.hist-etykieta { font-size: 0.68rem; font-weight: 700; color: var(--grigio); line-height: 1.3; }
.hist-dopisek { font-size: 0.62rem; color: var(--muted-light); margin-top: 2px; }
.hist-prog { margin: 0 0 14px; }
.hist-prog-tor { height: 7px; border-radius: 4px; background: var(--bg-soft); overflow: hidden; }
.hist-prog-fill { height: 100%; border-radius: 4px; background: var(--marka-zielony); transition: width 0.6s ease; }
.hist-prog-opis { font-size: 0.72rem; font-weight: 700; color: var(--grigio); margin-top: 5px; text-align: center; }
.hist-fakty { margin-top: 10px; display: grid; gap: 4px; font-size: 0.74rem; color: var(--grigio); line-height: 1.5; }
.hist-pusto { text-align: center; padding: 18px 12px; background: var(--crema); border-radius: 12px;
  color: var(--grigio); font-size: 0.85rem; line-height: 1.5; }
@media (max-width: 380px) { .hist-kafelki { grid-template-columns: repeat(2, 1fr); } }

.popup-poz { border: 1px solid var(--border-warm); border-radius: 10px; margin-bottom: 8px; background: var(--card-bg); }
.popup-poz > summary { cursor: pointer; padding: 10px 12px; font-weight: 700; font-size: 0.88rem;
  list-style: none; user-select: none; display: flex; align-items: center; gap: 8px; }
.popup-poz > summary::-webkit-details-marker { display: none; }
.popup-poz > summary::before { content: '\25B8'; color: var(--grigio); }
.popup-poz[open] > summary::before { content: '\25BE'; }
.popup-zmieniony { font-size: 0.7rem; font-weight: 800; color: var(--oro); margin-left: auto; }
.popup-tresc { padding: 0 12px 12px; }
.popup-kiedy { font-size: 0.78rem; line-height: 1.6; color: var(--grigio); margin: 0 0 12px;
  border-left: 3px solid var(--border-warm); padding-left: 10px; }
.popup-pole { margin-bottom: 10px; }
.popup-pole label { display: block; font-size: 0.75rem; font-weight: 700; color: var(--grigio); margin-bottom: 4px; }
.popup-pole textarea { width: 100%; box-sizing: border-box; resize: vertical; font-family: inherit; }
.popup-brak { font-size: 0.75rem; color: var(--rosso); font-weight: 700; }
.popup-stan { font-size: 0.75rem; margin: 0; }

.faktura-info { font-size: 0.72rem; color: var(--grigio); line-height: 1.5; margin-top: 8px; }

.wordmap-nowe   .word-chip { border-color: var(--border); }
.wordmap-latwe  .word-chip { border-color: var(--wordmap-latwe-border); background: var(--bg-success-grad-a); }
.wordmap-srednie .word-chip { border-color: var(--wordmap-srednie-border); background: var(--bg-warn-soft); }
.wordmap-trudne  .word-chip { border-color: var(--wordmap-trudne-border); background: var(--bg-error-soft); }

.wordmap-empty {
  text-align: center; padding: 40px; color: var(--grigio); font-size: 0.9rem;
}

.stat-map-btn {
  display: block; width: 100%; margin-top: 6px;
  background: none; border: 1px dashed var(--border-warm-dash);
  border-radius: 8px; padding: 4px;
  font-size: 0.7rem; color: var(--grigio);
  cursor: pointer; transition: var(--transition);
}
.stat-map-btn:hover { background: var(--crema); border-color: var(--oro); color: var(--oro); }

.score-display {
  background: linear-gradient(135deg, var(--zielen-gleboka), var(--zielen-pastel));
  color: white;
  border-radius: 14px;
  padding: 14px;
  text-align: center;
  margin-top: 8px;
}
.score-num { font-size: 2rem; font-weight: 800; }
.score-label { font-size: 0.8rem; opacity: 0.9; }

.game-topbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
@keyframes pulseUrgent {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.game-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 22px;
}
.game-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.game-tile {
  position: relative;
  background: var(--card-bg);
  border: 2px solid var(--border-warm);
  border-radius: 16px;
  padding: 20px 18px;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: var(--transition);
  user-select: none;
}
.game-tile:hover { border-color: var(--oro); transform: translateY(-1px); }
.game-tile.selected { border-color: var(--oro); background: var(--bg-gold-soft); box-shadow: var(--shadow-hover); }
.game-tile.matched {
  background: var(--bg-success-soft);
  border-color: var(--verde);
  color: var(--verde);
  cursor: default;
  opacity: 0.55;
  transform: none;
}
.game-tile.cleared {
  background: transparent;
  border: 2px dashed var(--border-warm);
  box-shadow: none;
  cursor: default;
  opacity: 0.4;
}
.game-tile.wrong {
  border-color: var(--rosso);
  background: var(--bg-error-soft);
  animation: shakeTile 0.35s ease;
}
.game-tile.refilled { animation: popInTile 0.3s ease; }
@keyframes shakeTile {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
@keyframes popInTile {
  0%   { transform: scale(0.85); opacity: 0.4; }
  100% { transform: scale(1);    opacity: 1; }
}
.game-tile.audio-only {
  background: var(--audio-tile-bg);
  border-color: var(--audio-tile-border);
  gap: 4px;
}
.game-tile.audio-only.selected { border-color: var(--oro); background: var(--bg-gold-soft); }
.game-tile.audio-only.matched  { background: var(--bg-success-soft); border-color: var(--verde); }

.audio-wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 26px;
}
.audio-wave span {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: var(--audio-tile-border);
  height: 8px;
  animation: audioIdlePulse 1.4s ease-in-out infinite;
}
.audio-wave span:nth-child(2) { animation-delay: 0.15s; }
.audio-wave span:nth-child(3) { animation-delay: 0.3s; }
.audio-wave span:nth-child(4) { animation-delay: 0.45s; }
.audio-wave span:nth-child(5) { animation-delay: 0.3s; }
.audio-wave span:nth-child(6) { animation-delay: 0.15s; }
.audio-wave span:nth-child(7) { animation-delay: 0s; }
@keyframes audioIdlePulse {
  0%, 100% { height: 6px; opacity: 0.55; }
  50%      { height: 16px; opacity: 1; }
}
.audio-wave.speaking span {
  animation: none;
  background: var(--oro);
  transition: height 0.08s ease;
}
.game-tile.audio-only.selected .audio-wave span { background: var(--oro); }
.game-tile.audio-only.matched  .audio-wave span { background: var(--verde); }

.game-tile[data-side="left"].lvl-latwe::before,
.game-tile[data-side="left"].lvl-srednie::before,
.game-tile[data-side="left"].lvl-trudne::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  border-radius: 16px 0 0 16px;
}
.game-tile[data-side="left"].lvl-latwe::before   { background: var(--verde); }
.game-tile[data-side="left"].lvl-srednie::before { background: var(--srednie); }
.game-tile[data-side="left"].lvl-trudne::before  { background: var(--rosso); }

.diff-slider-row { margin-bottom: 14px; }
.diff-slider-row .diff-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--grigio);
  margin-bottom: 4px;
}
.diff-slider-row input[type="range"] {
  width: 100%;
  accent-color: var(--chart-latwe);
  cursor: pointer;
}

.leaderboard-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.leaderboard-table td { padding: 8px 6px; border-bottom: 1px solid var(--border-warm-2); }
.leaderboard-table tr.leaderboard-subrow td { padding: 0 6px 8px; border-bottom: 1px solid var(--border-warm-2); }
.leaderboard-table tr:nth-last-child(2) td, .leaderboard-table tr:last-child td { border-bottom: none; }
.leaderboard-table tr.leaderboard-divider td {
  padding: 10px 6px 4px; border-bottom: none; font-size: 0.7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--grigio);
}
.leaderboard-rank { font-weight: 800; width: 32px; }
.leaderboard-player { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.leaderboard-avatar-img, .leaderboard-avatar-fallback {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
}
.leaderboard-avatar-img { object-fit: cover; }
.leaderboard-avatar-fallback {
  background: #78828C; color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 800; text-transform: uppercase;
}
.leaderboard-time { font-weight: 700; color: var(--verde); text-align: right; }
.leaderboard-meta { color: var(--grigio); font-size: 0.75rem; }
.leaderboard-sub { color: var(--grigio); font-size: 0.7rem; opacity: 0.85; }
.leaderboard-empty { text-align: center; color: var(--grigio); font-size: 0.85rem; padding: 12px 0; }



@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-marka.wg-motywu { content: url('../../assets/img/logo-biale.webp'); }
}
.app-header { border-bottom: 1.5px solid var(--border); }
.header-theme {
  width: 40px; height: 40px; border: none; background: var(--card-bg); color: var(--testo);
  box-shadow: 0 0 0 1.5px var(--border);
}
.header-theme:hover { background: var(--card-bg); box-shadow: 0 0 0 1.5px var(--oro); }
.header-lang {
  height: 40px; padding: 0 4px 0 8px; gap: 4px; border-radius: 999px;
  background: var(--card-bg); box-shadow: 0 0 0 1.5px var(--border);
}
.header-lang-caret {
  width: 26px; height: 26px; padding: 0; border-radius: 999px; background: transparent;
  color: var(--testo); font-size: 0.72rem; opacity: 1;
}
.header-lang-caret:hover { background: var(--bg-soft); }
.header-lang-menu, .mode-tab-menu, .custom-select-menu, .card-menu {
  border: 1.5px solid var(--border); border-radius: 18px; padding: 6px;
  box-shadow: 0 18px 40px -18px rgba(23, 24, 59, 0.45);
}
.header-lang-item, .mode-tab-item, .custom-select-item, .card-menu-item { border-radius: 12px; }
.mode-tabs { background: var(--card-bg); box-shadow: 0 0 0 1.5px var(--border); padding: 4px; gap: 4px; }
.mode-tab { color: var(--grigio); font-weight: 700; padding: 9px 18px; }
.mode-tab:hover { background: var(--bg-soft); color: var(--testo); }
.mode-tab.active, .mode-tab.active:hover { background: var(--zolty); color: var(--granat); box-shadow: none; }
.mode-tab-item.active { background: var(--bg-highlight); color: var(--testo); }
.mode-tab-item.active b { color: var(--testo); }
.streak-badge {
  border: none; background: var(--card-bg); box-shadow: 0 0 0 1.5px var(--border);
  padding: 8px 14px; min-height: 40px;
}
.streak-badge:hover { background: var(--card-bg); box-shadow: 0 0 0 1.5px var(--oro); border-color: transparent; }
.header-konto { background: var(--card-bg); box-shadow: 0 0 0 1.5px var(--border); }
.header-konto .awatar-pierscien .account-avatar { box-shadow: 0 0 0 2px var(--card-bg); }
.header-konto-akcja { background: transparent; color: var(--testo); width: 34px; height: 34px; }
.header-konto-akcja:hover { background: var(--bg-soft); }
.pw-licznik { border-color: var(--card-bg); }

.ikony-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg.ik {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.ik-kafel {
  --kafel: var(--zolty); --kafel-linia: var(--granat);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; margin: 0; border-radius: 10px; line-height: 0; vertical-align: middle;
  background: var(--kafel); color: var(--kafel-linia);
  transition: background-color .15s ease, color .15s ease;
}
button .ik-kafel { color: var(--kafel-linia); }
.ik-kafel.t-mowienie    { --kafel: #35A64D; }
.ik-kafel.t-filmy       { --kafel: #DB2727; --kafel-linia: #FFFFFF; }
.ik-kafel.t-teksty      { --kafel: #2463E9; --kafel-linia: #FFFFFF; }
.ik-kafel.t-spolecznosc { --kafel: var(--granat); --kafel-linia: #FFFFFF; }

.mode-tabs { align-items: center; }
.mode-tab {
  display: inline-flex; align-items: center; gap: 9px; min-height: 40px;
  padding: 0 16px 0 5px; font-size: 0.94rem; line-height: 1.2;
}
.mode-tab .ik-kafel { margin: 0; }
.mode-tab:not(.active) .ik-kafel { background: var(--bg-soft); color: var(--testo); }
.mode-tab:not(.active):hover .ik-kafel { background: var(--kafel); color: var(--kafel-linia); }
.mode-tab.active .ik-kafel.t-fiszki { background: #FFFFFF; color: var(--granat); }
.mode-tab:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.mode-tab[data-mode="fiszki"] { padding-right: 6px; }
.mode-tab-caret {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; margin: 0 0 0 -2px; padding: 0; border-radius: 999px;
  font-size: inherit; line-height: 0; opacity: 1;
  background: color-mix(in srgb, currentColor 12%, transparent);
  transition: background-color .15s ease;
}
.mode-tab-caret:hover,
#modeFiszkiWrap:has(#modeFiszkiMenu:not(.hidden)) .mode-tab-caret { background: color-mix(in srgb, currentColor 22%, transparent); }
.mode-tab-caret svg.ik { width: 16px; height: 16px; transition: transform .2s ease; }
#modeFiszkiWrap:has(#modeFiszkiMenu:not(.hidden)) .mode-tab-caret svg.ik { transform: rotate(180deg); }

#modeFiszkiMenu { min-width: 280px; padding: 6px; border-radius: 20px; }
#modeFiszkiMenu .mode-tab-item { align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; }
#modeFiszkiMenu .mode-tab-item + .mode-tab-item { margin-top: 2px; }
#modeFiszkiMenu .ik-kafel { width: 40px; height: 40px; border-radius: 12px; }
#modeFiszkiMenu .ik-kafel svg.ik { width: 20px; height: 20px; }
#modeFiszkiMenu .mode-tab-item b { font-family: var(--font-naglowek); font-size: 0.95rem; font-weight: 800; }
#modeFiszkiMenu .mode-tab-item small { font-size: 0.76rem; margin-top: 2px; }
#modeFiszkiMenu .mode-tab-item.active::after {
  content: ''; flex: none; width: 6px; height: 11px; margin: 0 6px 4px auto;
  border: solid var(--testo); border-width: 0 2.5px 2.5px 0; border-radius: 1px; transform: rotate(45deg);
}

.streak-badge {
  gap: 7px; min-height: 48px; padding: 0 16px 0 14px;
  font-family: var(--font-naglowek); font-size: 1.12rem; font-weight: 800; line-height: 1;
}
.streak-badge:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.streak-badge.stan-zgaszony #streakCount, .streak-badge.stan-zabity #streakCount { color: var(--grigio); }

.cmty-nawigacja .mode-tab { font-size: 0.9rem; padding: 0 14px 0 5px; }
.cmty-nawigacja .mode-tab[data-mode="fiszki"] { padding-right: 6px; }
@media (max-width: 768px) {
  .mode-tab:not(.active) { padding-left: 5px; padding-right: 5px; }
  .cmty-nawigacja .mode-tab { padding: 0 5px; }
  .cmty-nawigacja .mode-tab[data-mode="fiszki"] { padding-right: 12px; }
  .header-inner #modeFiszkiMenu { left: 50%; transform: translateX(-50%); width: min(280px, calc(100vw - 24px)); min-width: 0; box-sizing: border-box; }
}
@media (hover: none) and (pointer: coarse) {
  .mode-tab { min-height: 44px; }
  .mode-tab-caret { width: 36px; height: 36px; }
  .mode-tab[data-mode="fiszki"] { padding-right: 4px; }
}
.rank-rail { border-radius: 24px; box-shadow: none; border: 1.5px solid var(--border); background: var(--card-bg); }
.rank-row.me { background: var(--bg-highlight); }

@media (min-width: 1400px) and (max-width: 1715px) {
  body:has(#rankRail:not(.hidden):not(.zwiniety)):not(.focus-mode) .app-body { max-width: calc(100vw - 616px); }
}

.card { border-radius: 24px; border: 1.5px solid var(--border); box-shadow: none; }
.card-title { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; color: var(--grigio); }
.card-menu-btn { border-radius: 999px; }
.auth-input {
  border-radius: 14px; border-width: 1.5px; border-color: var(--border-2);
  background: var(--card-bg); color: var(--testo);
}
.pomoc-rozwijana > summary { border-radius: 14px; }
.upload-zone { border-radius: 18px; border-width: 1.5px; }
.upload-hint-note { border-radius: 14px; }
.spinner { border-color: var(--border); border-top-color: var(--oro); }

.wordmap-overlay { background: var(--zaslona); }
:root[data-theme="dark"] .lp-modal { background: rgba(0, 0, 0, 0.68); }
:root[data-theme="dark"] .sesja-koniec { background: rgba(0, 0, 0, 0.55); }
:root[data-theme="dark"] .cmty-kategorie-tlo { background: rgba(0, 0, 0, 0.4); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lp-modal { background: rgba(0, 0, 0, 0.68); }
  :root:not([data-theme="light"]) .sesja-koniec { background: rgba(0, 0, 0, 0.55); }
  :root:not([data-theme="light"]) .cmty-kategorie-tlo { background: rgba(0, 0, 0, 0.4); }
}
.wordmap-modal { border-radius: 28px; background: var(--crema); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.55); }
.wordmap-header { border-bottom: 1.5px solid var(--border); }
.wordmap-title { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.01em; }
.wordmap-close {
  width: 40px; height: 40px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-soft); color: var(--testo); font-size: 1.2rem; padding: 0;
}
.wordmap-close:hover { color: var(--testo); background: var(--border); transform: none; }

.toast {
  background: var(--testo); color: var(--crema); border-radius: 18px;
  border-left: 5px solid var(--marka-zielony); box-shadow: 0 16px 34px -16px rgba(0, 0, 0, 0.55);
}
.toast.error { border-color: var(--marka-czerwony); }
.toast.warning { border-color: var(--zolty); }
.toast a { color: inherit; }

.fiszka-counter {
  background: var(--card-bg); border: none; box-shadow: 0 0 0 1.5px var(--border);
  font-weight: 800; color: var(--testo); font-variant-numeric: tabular-nums;
}
.fiszka-nav-select {
  background: var(--card-bg); border: 1.5px solid var(--border); font-weight: 700; padding: 7px 14px;
}
.level-badge { padding: 5px 12px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; }
.badge-nowe    { background: var(--border); color: var(--testo); }
.badge-latwe   { background: var(--marka-zielony); color: var(--granat); }
.badge-srednie { background: var(--marka-niebieski); color: #FFFFFF; }
.badge-trudne  { background: var(--marka-czerwony); color: #FFFFFF; }
.fiszka-toggles { font-weight: 700; color: var(--grigio); }
.card-delete-btn { width: 36px; height: 36px; border-radius: 999px; opacity: 0.75; display: inline-flex; align-items: center; justify-content: center; }
.card-delete-btn:hover { background: var(--bg-soft); opacity: 1; transform: none; }
.nav-arrow { border: none; box-shadow: 0 0 0 1.5px var(--border); color: var(--testo); font-size: 1.1rem; }
.nav-arrow:hover:not(:disabled) { box-shadow: 0 0 0 1.5px var(--oro); color: var(--testo); transform: scale(1.06); }
.nav-pos { font-family: var(--font-naglowek); font-weight: 800; color: var(--testo); font-variant-numeric: tabular-nums; }
.odmiana-btn {
  top: 12px; right: 62px; width: 42px; height: 42px; padding: 0; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--card-bg); color: var(--testo); opacity: 1; font-size: 1rem;
  box-shadow: 0 0 0 1.5px var(--border);
}
.odmiana-btn:hover { transform: scale(1.06); box-shadow: 0 0 0 1.5px var(--oro); }
.pokaz-odpowiedz {
  --kolko-strzalka: var(--oko-granatowe);
  display: flex; width: 100%; max-width: 440px; margin: 2px auto 4px;
}
:root[data-theme="dark"] .pokaz-odpowiedz { --kolko-strzalka: var(--oko-zolte); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pokaz-odpowiedz { --kolko-strzalka: var(--oko-zolte); } }
#cardContent:has(#flipInner.flipped) .pokaz-odpowiedz { display: none; }

.add-method-tab {
  border-radius: 14px; border: 1.5px solid var(--border); background: var(--card-bg);
  color: var(--testo); padding: 10px 8px; font-size: 0.78rem;
}
.add-method-tab .ico { color: var(--testo); }
.add-method-tab.active .ico { color: inherit; }
.add-method-skrot {
  border: 1.5px solid var(--border); border-style: solid; background: var(--card-bg);
  border-radius: 16px; color: var(--testo); font-weight: 800; min-height: 48px; padding: 8px 10px 8px 8px;
}
.add-method-skrot > .ico:first-child {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px; margin: 0;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
  background: var(--oro); color: var(--na-akcencie); font-size: 0.95rem;
}
.add-method-skrot > .ico:first-child::before { line-height: 1; }
.add-method-skrot[onclick*="teksty"] > .ico:first-child { background: var(--marka-niebieski); }
.add-method-skrot[onclick*="filmy"] > .ico:first-child { background: var(--marka-czerwony); }
.add-method-skrot:hover { border-color: var(--oro); color: var(--testo); }

.karta-fiszek {
  --kf-tlo: #E9ECF4; --kf-ramka: #E9ECF4; --kf-tekst: #17183B; --kf-etykieta: #2463E9; --kf-liczba: #17183B; --kf-drugi: #4F5270;
  --kf-ramka-mapy: rgba(79, 82, 112, 0.35); --kf-tor: #D3D8E5; --kf-obrys: #17183B; --kf-obrys-hover: #2463E9;
  --kf-banner-tlo: rgba(255, 255, 255, 0.7); --kf-banner-ramka: #DDE1EC; --kf-link: #2463E9;
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--kf-tlo); border-color: var(--kf-ramka); color: var(--kf-tekst);
}
:root[data-theme="dark"] .karta-fiszek {
  --kf-tlo: #262626; --kf-ramka: #303030; --kf-tekst: #E5E5E5; --kf-etykieta: var(--zolty); --kf-liczba: var(--zolty); --kf-drugi: #BDBDBD;
  --kf-ramka-mapy: rgba(212, 212, 212, 0.3); --kf-tor: rgba(255, 255, 255, 0.12); --kf-obrys: rgba(212, 212, 212, 0.7); --kf-obrys-hover: var(--zolty);
  --kf-banner-tlo: rgba(255, 255, 255, 0.06); --kf-banner-ramka: rgba(255, 255, 255, 0.14); --kf-link: var(--zolty);
  --kf-kafel-nowe: #303030; --kf-kafel-latwe: #15331F; --kf-kafel-srednie: #16254F; --kf-kafel-trudne: #3A1620;
  --kf-liczba-nowe: #E5E5E5; --kf-liczba-latwe: #6FD38A; --kf-liczba-srednie: #8FB0FF; --kf-liczba-trudne: #FF8A8A;
  --kf-kafel-etykieta: #D4D4D4; --kf-kafel-wybrany: rgba(255, 200, 61, 0.16);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .karta-fiszek {
    --kf-tlo: #262626; --kf-ramka: #303030; --kf-tekst: #E5E5E5; --kf-etykieta: var(--zolty); --kf-liczba: var(--zolty); --kf-drugi: #BDBDBD;
    --kf-ramka-mapy: rgba(212, 212, 212, 0.3); --kf-tor: rgba(255, 255, 255, 0.12); --kf-obrys: rgba(212, 212, 212, 0.7); --kf-obrys-hover: var(--zolty);
    --kf-banner-tlo: rgba(255, 255, 255, 0.06); --kf-banner-ramka: rgba(255, 255, 255, 0.14); --kf-link: var(--zolty);
    --kf-kafel-nowe: #303030; --kf-kafel-latwe: #15331F; --kf-kafel-srednie: #16254F; --kf-kafel-trudne: #3A1620;
    --kf-liczba-nowe: #E5E5E5; --kf-liczba-latwe: #6FD38A; --kf-liczba-srednie: #8FB0FF; --kf-liczba-trudne: #FF8A8A;
    --kf-kafel-etykieta: #D4D4D4; --kf-kafel-wybrany: rgba(255, 200, 61, 0.16);
  }
}
.karta-fiszek-ilustracja {
  position: absolute; top: 4px; right: -16px; width: 136px; height: 136px; z-index: -1;
  pointer-events: none; user-select: none;
}
.karta-fiszek .card-title { color: var(--kf-etykieta, var(--zolty)); margin-bottom: 6px; max-width: calc(100% - 96px); }
.karta-fiszek .card-title .ico { color: var(--kf-etykieta, var(--zolty)); }
.karta-fiszek-liczba { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 4px 0 18px; min-height: 90px; max-width: calc(100% - 104px); }
.karta-fiszek-liczba b {
  font-family: var(--font-naglowek); font-weight: 800; font-size: 4.4rem; line-height: 0.82;
  letter-spacing: -0.03em; color: var(--kf-liczba, var(--zolty)); font-variant-numeric: tabular-nums;
}
.karta-fiszek-liczba span { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.05rem; line-height: 1.1; color: var(--kf-tekst, #FFFFFF); }
.karta-fiszek .stat-box { background: #FFFFFF; border: 2px solid transparent; border-radius: 16px; }
.karta-fiszek .stat-nowe { background: var(--kf-kafel-nowe, #FFFFFF); }
.karta-fiszek .stat-latwe { background: var(--kf-kafel-latwe, #FFFFFF); }
.karta-fiszek .stat-srednie { background: var(--kf-kafel-srednie, #FFFFFF); }
.karta-fiszek .stat-trudne { background: var(--kf-kafel-trudne, #FFFFFF); }
.karta-fiszek .stat-box .count { font-family: var(--font-naglowek); font-size: 1.7rem; }
.karta-fiszek .stat-box .label { color: var(--kf-kafel-etykieta, #4A4B6B); font-weight: 700; }
.karta-fiszek .stat-nowe .count { color: var(--kf-liczba-nowe, #2E3055); }
.karta-fiszek .stat-latwe .count { color: var(--kf-liczba-latwe, #1F7A35); }
.karta-fiszek .stat-srednie .count { color: var(--kf-liczba-srednie, #2463E9); }
.karta-fiszek .stat-trudne .count { color: var(--kf-liczba-trudne, #DB2727); }
.karta-fiszek .stat-box:hover { border-color: var(--zolty); transform: translateY(-2px); }
.karta-fiszek .stat-box.active-filter { border-color: var(--zolty); background: var(--kf-kafel-wybrany, #FFF4D6); }
.karta-fiszek .stat-map-btn { color: var(--kf-drugi, #D4D5F0); border-color: var(--kf-ramka-mapy, rgba(212, 213, 240, 0.35)); background: transparent; }
.karta-fiszek .stat-map-btn:hover { color: var(--granat); border-color: var(--zolty); background: var(--zolty); }
.karta-fiszek .progress-label { color: var(--kf-drugi, #D4D5F0); font-weight: 700; }
.karta-fiszek .progress-bar { background: var(--kf-tor, rgba(255, 255, 255, 0.16)); }
.karta-fiszek .progress-fill { background: var(--marka-zielony); }
.karta-fiszek .btn-grigio { background: var(--zolty); color: var(--granat); box-shadow: none; }
.karta-fiszek .btn-grigio:hover { box-shadow: 0 10px 22px -12px rgba(255, 200, 61, 0.8); }
.karta-fiszek .btn-kreskowany { background: transparent; color: var(--kf-tekst, #FFFFFF); border: 2px solid var(--kf-obrys, rgba(255, 255, 255, 0.85)); }
.karta-fiszek .btn-kreskowany .ico { color: var(--kf-tekst, #FFFFFF); }
.karta-fiszek .btn-kreskowany:hover { border-color: var(--kf-obrys-hover, var(--zolty)); color: var(--kf-obrys-hover, var(--zolty)); }
.karta-fiszek .btn-kreskowany:hover .ico { color: var(--kf-obrys-hover, var(--zolty)); }
.karta-fiszek .locked-banner { background: var(--kf-banner-tlo, rgba(255, 255, 255, 0.1)); color: var(--kf-tekst, #FFFFFF); border-color: var(--kf-banner-ramka, rgba(255, 255, 255, 0.2)); }
.karta-fiszek .locked-banner a { color: var(--kf-link, var(--zolty)); }
.karta-fiszek .ad-sidebar { border-top-color: var(--kf-banner-ramka, rgba(255, 255, 255, 0.18)); }
.karta-fiszek .ad-sidebar-label { color: var(--kf-drugi, #D4D5F0); }

.empty-state { text-align: left; padding: 8px 0 20px; color: var(--grigio); }
.pusta-talia-glowa {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 28px;
  background: var(--granat); color: #FFFFFF; padding: 30px 32px 28px; min-height: 196px;
}
.pusta-talia-glowa img {
  position: absolute; right: -12px; top: -10px; width: 214px; height: 214px; z-index: -1; pointer-events: none;
}
.pusta-talia-glowa .pusta-talia-etykieta {
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--zolty);
}
.empty-state .pusta-talia-glowa h3 {
  font-family: var(--font-naglowek); font-weight: 800; font-size: 2.4rem; line-height: 1.02; letter-spacing: -0.02em;
  color: #FFFFFF; margin: 8px 0 10px; max-width: 460px;
}
.pusta-talia-glowa p { font-size: 1rem; font-weight: 500; line-height: 1.55; color: #D4D5F0; max-width: 470px; margin: 0; }
.pusta-talia-glowa > :not(img) { max-width: min(470px, calc(100% - 190px)); }
@media (max-width: 768px) {
  .pusta-talia-glowa { padding: 22px 20px; min-height: 0; }
  .pusta-talia-glowa img { width: 128px; height: 128px; top: -6px; right: -14px; }
  .pusta-talia-glowa > :not(img) { max-width: calc(100% - 96px); }
  .empty-state .pusta-talia-glowa h3 { font-size: 1.9rem; }
}
.polmetek.powitanie-dnia {
  --plansza-tlo: var(--granat);
  background: var(--granat); color: #FFFFFF; box-shadow: none; border-radius: 28px;
  align-items: stretch; justify-content: flex-start; padding: 0; overflow-y: auto;
}
.polmetek.powitanie-dnia::before {
  inset: 0; background: radial-gradient(circle at 84% 30%, rgba(255, 200, 61, 0.18) 0, transparent 46%); animation: none;
}
:root[data-theme="dark"] .polmetek.powitanie-dnia { box-shadow: inset 0 0 0 1.5px #2E3068; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .polmetek.powitanie-dnia { box-shadow: inset 0 0 0 1.5px #2E3068; } }
.witaj-karta {
  position: relative; isolation: isolate; width: 100%; min-height: 100%;
  display: flex; flex-direction: column; gap: 14px; padding: 34px 36px 26px; text-align: left;
}
.polmetek.powitanie-dnia.wjazd .witaj-karta { animation: witajWjazd 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes witajWjazd { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.witaj-ilustracja {
  position: absolute; right: -8px; top: -4px; width: 290px; height: 290px; z-index: -1; pointer-events: none;
}
.polmetek.powitanie-dnia.wjazd .witaj-ilustracja { animation: witajPostac 0.7s cubic-bezier(0.22, 1.4, 0.36, 1) 0.1s both; }
@keyframes witajPostac { from { transform: translateY(24px) scale(0.92); opacity: 0; } to { transform: none; opacity: 1; } }
.witaj-karta > :not(.witaj-ilustracja) { max-width: min(520px, calc(100% - 240px)); }
.witaj-etykieta { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--zolty); }
.witaj-tytul {
  font-family: var(--font-naglowek); font-weight: 800; font-size: 2.1rem; line-height: 1.08; letter-spacing: -0.02em;
  color: #FFFFFF; margin-top: -6px; overflow-wrap: anywhere; text-wrap: balance;
}
.witaj-liczba-wiersz { display: flex; align-items: flex-end; gap: 14px; margin-top: 4px; }
.witaj-liczba {
  font-family: var(--font-naglowek); font-weight: 800; font-size: 6.6rem; line-height: 0.8; letter-spacing: -0.03em;
  color: var(--zolty); font-variant-numeric: tabular-nums;
}
.witaj-czeka {
  font-family: var(--font-naglowek); font-weight: 800; font-size: 1.45rem; line-height: 1.12; color: #FFFFFF;
  max-width: 250px; padding-bottom: 2px;
}
.witaj-opis { font-size: 1rem; font-weight: 500; line-height: 1.55; color: #D4D5F0; margin: 0; }
.witaj-pasek { display: flex; gap: 4px; height: 12px; margin-top: 4px; }
.witaj-pasek span { border-radius: 999px; min-width: 6px; }
.witaj-legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.86rem; font-weight: 700; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.witaj-legenda span { display: inline-flex; align-items: center; gap: 7px; }
.witaj-legenda i { display: inline-block; width: 9px; height: 9px; border-radius: 999px; }
.witaj-pasek .witaj-nowe, .witaj-legenda .witaj-nowe { background: #D4D5F0; }
.witaj-pasek .witaj-latwe, .witaj-legenda .witaj-latwe { background: #4CC266; }
.witaj-pasek .witaj-srednie, .witaj-legenda .witaj-srednie { background: #3B82F6; }
.witaj-pasek .witaj-trudne, .witaj-legenda .witaj-trudne { background: #EF4444; }
.witaj-talia { font-size: 0.82rem; font-weight: 600; color: #D4D5F0; }
.polmetek.powitanie-dnia .witaj-akcje { justify-content: flex-start; margin-top: 6px; }
.polmetek.powitanie-dnia .witaj-akcje .btn-strzalka { min-width: 300px; }
.polmetek.powitanie-dnia .witaj-hint { color: #A9ABD6; margin-top: -4px; }
@media (max-width: 768px) {
  .witaj-karta { padding: 24px 20px 20px; gap: 12px; }
  .witaj-ilustracja { width: 140px; height: 140px; right: -12px; top: -4px; }
  .witaj-karta > :not(.witaj-ilustracja) { max-width: 100%; }
  .witaj-karta > .witaj-etykieta, .witaj-karta > .witaj-tytul { max-width: calc(100% - 110px); }
  .witaj-tytul { font-size: 1.7rem; }
  .witaj-liczba { font-size: 5rem; }
  .witaj-czeka { font-size: 1.2rem; }
  .polmetek.powitanie-dnia .witaj-akcje .btn-strzalka { min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .polmetek.powitanie-dnia.wjazd .witaj-karta, .polmetek.powitanie-dnia.wjazd .witaj-ilustracja { animation: none; }
}

.polmetek.koniec-dnia {
  --plansza-tlo: var(--zolty);
  background: var(--zolty); color: var(--granat); box-shadow: none; border-radius: 28px;
  align-items: stretch; justify-content: flex-start; padding: 0; overflow-y: auto;
}
.polmetek.koniec-dnia::before { inset: 0; background: radial-gradient(circle at 82% 28%, rgba(255, 255, 255, 0.38) 0, transparent 46%); animation: none; }
.kd-karta {
  position: relative; isolation: isolate; width: 100%; min-height: 100%;
  display: flex; flex-direction: column; gap: 8px; padding: 30px 36px 26px; text-align: left;
}
.polmetek.koniec-dnia.wjazd .kd-karta { animation: witajWjazd 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.kd-ilustracja { position: absolute; right: -14px; top: -8px; width: 300px; height: 300px; z-index: -1; pointer-events: none; }
.polmetek.koniec-dnia.wjazd .kd-ilustracja { animation: witajPostac 0.7s cubic-bezier(0.22, 1.4, 0.36, 1) 0.1s both; }
.kd-karta > :not(.kd-ilustracja) { max-width: min(520px, calc(100% - 250px)); }
.kd-pigulka {
  align-self: flex-start; padding: 6px 14px; border-radius: 999px; background: #FFFFFF; color: var(--granat);
  font-size: 0.82rem; font-weight: 700;
}
.kd-tytul {
  font-family: var(--font-naglowek); font-weight: 800; font-size: 2.1rem; line-height: 1.08; letter-spacing: -0.02em;
  color: var(--granat); margin-top: 8px; text-wrap: balance;
}
.kd-liczba {
  font-family: var(--font-naglowek); font-weight: 800; font-size: 7rem; line-height: 0.84; letter-spacing: -0.04em;
  color: var(--granat); font-variant-numeric: tabular-nums; margin-top: 8px;
}
.kd-slowka { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.6rem; line-height: 1.1; color: var(--granat); }
.kd-czas { font-size: 1.05rem; font-weight: 700; color: var(--granat); }
.kd-quiz {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
  padding: 5px 14px 5px 5px; border-radius: 999px; background: #FFFFFF; color: var(--granat);
  font-size: 0.95rem; font-weight: 700; line-height: 1.3;
}
.kd-quiz .ico {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 26px; height: 26px; margin: 0;
  border-radius: 50%; background: var(--marka-zielony, #35A64D); color: var(--granat); font-size: 0.8rem; line-height: 1;
}
.kd-opis { font-size: 1rem; font-weight: 500; line-height: 1.55; color: var(--granat); margin: 8px 0 0; }
.polmetek.koniec-dnia .kd-akcje { justify-content: flex-start; margin-top: 8px; }
.polmetek.koniec-dnia .kd-akcje .btn-strzalka { min-width: 300px; }
.polmetek.koniec-dnia .kd-hint { color: #5C4A12; margin-top: -2px; }
.kd-karta > .kd-dalej { max-width: none; margin-top: 14px; }
.kd-dalej-tytul { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.15rem; color: var(--granat); margin-bottom: 10px; }
.kd-kafle { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.kd-kafel {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; font: inherit; cursor: pointer;
  padding: 14px; border-radius: 18px; background: #FFFFFF; color: var(--granat); border: 1.5px solid rgba(23, 24, 59, 0.1);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kd-kafel:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -10px rgba(23, 24, 59, 0.45); }
.kd-kafel:focus-visible { outline: 3px solid var(--granat); outline-offset: 2px; }
.kd-kafel b { font-size: 0.95rem; font-weight: 800; line-height: 1.25; }
.kd-kafel small { font-size: 0.8rem; line-height: 1.4; color: #4A4B6A; }
.kd-kafel-ikona {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px;
  margin-bottom: 6px; font-size: 1.15rem;
}
.kd-kafel-ikona .ico { margin: 0; }
.kd-ik-paczki { background: #2463E9; color: #FFFFFF; }
.kd-ik-spolecznosc { background: #35A64D; color: var(--granat); }
.polmetek.zamrozona .kd-kafel { pointer-events: none; opacity: 0.55; }
@media (prefers-reduced-motion: reduce) { .kd-kafel { transition: none; } .kd-kafel:hover { transform: none; } }
@media (max-width: 768px) {
  .kd-karta { padding: 24px 20px 20px; }
  .kd-ilustracja { width: 150px; height: 150px; right: -14px; top: -6px; }
  .kd-karta > :not(.kd-ilustracja) { max-width: 100%; }
  .kd-karta > .kd-pigulka, .kd-karta > .kd-tytul { max-width: calc(100% - 120px); }
  .kd-tytul { font-size: 1.7rem; }
  .kd-liczba { font-size: 5.2rem; }
  .kd-slowka { font-size: 1.3rem; }
  .polmetek.koniec-dnia .kd-akcje .btn-strzalka { min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .polmetek.koniec-dnia.wjazd .kd-karta, .polmetek.koniec-dnia.wjazd .kd-ilustracja { animation: none; }
}
.empty-state .empty-icon { display: none; }
.empty-state-methods {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
  justify-content: stretch; margin-top: 18px;
}
@media (min-width: 1180px) and (max-width: 1399px), (min-width: 1640px) {
  .empty-state-methods { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 420px) { .empty-state-methods { grid-template-columns: minmax(0, 1fr); } }
.empty-state-method {
  position: relative; overflow: hidden; align-items: flex-start; text-align: left; gap: 6px;
  min-height: 188px; padding: 118px 16px 16px; border: none; border-radius: 24px;
  background: var(--zolty); color: var(--granat); min-width: 0;
}
.empty-state-method:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgba(23, 24, 59, 0.6); }
.empty-state-method img.tryb-ilustracja {
  position: absolute; left: 10px; top: -4px; width: 124px; height: 124px; pointer-events: none;
}
.empty-state-method .empty-state-method-icon { display: none; }
.empty-state-method strong { font-family: var(--font-naglowek); font-size: 1.12rem; font-weight: 800; line-height: 1.12; color: inherit; }
.empty-state-method small { font-size: 0.82rem; font-weight: 500; line-height: 1.4; color: inherit; }
.empty-state-method .tryb-pigulka {
  align-self: flex-start; margin-bottom: 2px;
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px;
  background: #FFFFFF; color: var(--granat); font-size: 0.72rem; font-weight: 800;
}
.empty-state-method.tryb-excel { background: var(--marka-zielony); color: var(--granat); }
.empty-state-method.tryb-czytanie { background: #2463E9; color: #FFFFFF; }
.empty-state-method.tryb-sluchanie { background: #DB2727; color: #FFFFFF; }
.empty-state-method.tryb-excel .tryb-ikona-duza {
  position: absolute; left: 22px; top: 30px; width: 76px; height: 76px; border-radius: 22px;
  display: flex; align-items: center; justify-content: center; font-size: 2.2rem; line-height: 1;
  background: #FFFFFF; color: var(--granat); box-shadow: 0 0 0 2.5px var(--granat);
}
.pusta-talia-spolecznosc {
  display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; min-height: 58px;
  padding: 10px 16px; border: 1.5px solid var(--border); border-radius: 20px; background: var(--card-bg);
  color: var(--testo); font-family: inherit; font-size: 0.98rem; font-weight: 800; text-align: left; cursor: pointer;
  transition: var(--transition);
}
.pusta-talia-spolecznosc:hover { border-color: var(--oro); }
.pusta-talia-spolecznosc .pts-ikona {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: var(--oro); color: var(--na-akcencie);   
}
.pusta-talia-spolecznosc .pts-ikona .ico { margin: 0; }
.pusta-talia-spolecznosc > .ico:last-child { margin-left: auto; color: var(--grigio); }
.empty-state.dragover { border-radius: 28px; background: var(--bg-highlight); }
.empty-state.dragover .empty-state-method { outline: 3px dashed var(--granat); outline-offset: -8px; background: var(--zolty); }

.tryb-hero {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 28px;
  padding: 26px 30px 26px; margin: 0 0 18px; min-height: 176px; text-align: left;
  display: flex; flex-direction: column; justify-content: center;
}
.tryb-hero > :not(img) { max-width: calc(100% - 170px); }
.tryb-hero-ilustracja { position: absolute; right: -8px; top: 50%; width: 200px; height: 200px; margin-top: -100px; z-index: -1; pointer-events: none; }
.tryb-hero-etykieta { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.tryb-hero-tytul {
  font-family: var(--font-naglowek); font-weight: 800; font-size: 2.6rem; line-height: 1; letter-spacing: -0.02em;
  margin: 4px 0 10px;
}
.tryb-hero-opis { font-size: 0.96rem; font-weight: 500; line-height: 1.55; max-width: 560px; margin: 0; }
.tryb-hero-czytanie { background: #2463E9; color: #FFFFFF; }
.tryb-hero-sluchanie { background: #DB2727; color: #FFFFFF; }
.tryb-hero-mowienie { background: #35A64D; color: #17183B; }
.tryb-hero .tryb-hero-opis { color: inherit; opacity: 0.95; }
@media (max-width: 768px) {
  .tryb-hero { padding: 20px 20px 22px; min-height: 0; }
  .tryb-hero-ilustracja { width: 120px; height: 120px; top: -6px; margin-top: 0; right: -18px; opacity: 0.95; }
  .tryb-hero-tytul { font-size: 2rem; }
  .tryb-hero > :not(img) { max-width: calc(100% - 96px); }
}
.tryb-hero .tekst-intro { color: inherit; margin: 0; }
.tekst-formularz-pasek { margin: 0 0 6px; }
.tekst-formularz-pasek .kartka-meta { font-weight: 700; }
#filmFormularz .film-formularz { background: var(--card-bg); border: 1.5px solid var(--border); border-radius: 24px; padding: 20px; }
#filmFormularz .film-pole label { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.05rem; color: var(--testo); }
.mow-mapa .tryb-hero-mowienie { margin-bottom: 16px; }
.mow-mapa .tryb-hero-mowienie .mow-mapa-opis { color: #17183B; text-align: left; font-size: 0.95rem; font-weight: 500; line-height: 1.55; margin: 0; max-width: calc(100% - 170px); }
@media (max-width: 768px) { .mow-mapa .tryb-hero-mowienie .mow-mapa-opis { max-width: calc(100% - 96px); } }
.mow-mapa-podtytul { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.3rem; color: var(--testo); margin: 4px 0 12px; }

.mow-kafelek { border-radius: 24px; border: 1.5px solid var(--border); background: var(--card-bg); box-shadow: none; }
.mow-kafelek-foto { border-radius: 23px 23px 0 0; height: 150px; }
.mow-kafelek:hover { border-color: var(--oro); box-shadow: 0 16px 30px -20px rgba(23, 24, 59, 0.5); }
.mow-kafelek-glowa b { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.12rem; letter-spacing: -0.01em; }
.mow-kafelek-glowa { flex-wrap: wrap; row-gap: 6px; }
.mow-kafelek-glowa b { flex: 1 1 8em; }
.mow-cefr { border: none; background: var(--oro); color: var(--na-akcencie); font-weight: 800; font-size: 0.7rem; padding: 3px 10px; }   
.mow-kafelek-znasz { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; background: var(--zolty); color: var(--granat); font-weight: 800; }
.mow-kafelek-znasz.duzo { color: var(--granat); }
.mow-kafelek-ostatnio { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 0.74rem; font-weight: 600; color: var(--grigio); }
.mow-kafelek-ostatnio .ico { font-size: 0.8rem; margin: 0; line-height: 1; }
.mow-kafelek-ostatnio.najnowszy { padding: 2px 10px; border-radius: 999px; border: 1.5px solid var(--oro); color: var(--oro); font-weight: 800; }
.edycja-znak { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; max-width: 100%; min-width: 0;
  font-size: 0.72rem; font-weight: 600; line-height: 1.3; color: var(--grigio); font-style: normal; letter-spacing: 0; text-transform: none; }
.edycja-znak .ico { font-size: 0.74rem; margin: 0; line-height: 1; flex-shrink: 0; }
.edycja-znak > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tekst-wiersz-txt .edycja-znak { display: flex; margin-top: 3px; }
.community-tile .edycja-znak { margin: 2px 0 4px; }
#communityDetailMeta .edycja-znak { margin-left: 8px; vertical-align: middle; }
.mow-poziom-pill { border-radius: 999px; font-weight: 800; }
.mow-poziom-pill.ukonczony { background: var(--marka-zielony); border-color: var(--marka-zielony); color: var(--granat); }
.mow-poziom-pill:not(.ukonczony):not(.zablokowany) { background: var(--oro); border-color: var(--oro); color: var(--na-akcencie); }
.mow-poziom-pill.zablokowany { background: var(--bg-soft); border-color: var(--bg-soft); color: var(--grigio); }

.quiz-progress-track { height: 8px; background: var(--border); }
.quiz-badge { color: var(--grigio); }
.quiz-heading { font-family: var(--font-naglowek); font-weight: 800; letter-spacing: -0.01em; }
.quiz-sprawdz { --polka-kolor: var(--oro); }
.quiz-slowo-opcja { background: var(--card-bg); border-width: 1.5px; border-color: var(--border); border-radius: 18px; }
.mini-exam-input-row input { border-radius: 16px; border-width: 1.5px; background: var(--card-bg); }
.quiz-koniec-kafel { border-radius: 20px; border-width: 1.5px; }
.quiz-koniec-kafel .liczba { font-family: var(--font-naglowek); font-size: 2rem; }
.quiz-koniec-kafel.dobre { background: var(--marka-zielony); border-color: var(--marka-zielony); }
.quiz-koniec-kafel.dobre .liczba, .quiz-koniec-kafel.dobre .podpis { color: #17183B; }
.quiz-koniec-kafel.zle { background: var(--marka-czerwony); border-color: var(--marka-czerwony); }
.quiz-koniec-kafel.zle .liczba, .quiz-koniec-kafel.zle .podpis { color: #FFFFFF; }
.quiz-koniec { position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; background: var(--zolty); color: var(--granat); padding: 24px 24px 22px; }
.quiz-koniec-ilustracja { display: block; width: 190px; height: 190px; margin: -12px auto 4px; pointer-events: none; }
.quiz-koniec .quiz-koniec-kafel.xp { background: #FFFFFF; border-color: #FFFFFF; }
.quiz-koniec .quiz-koniec-kafel.xp .liczba { color: #17183B; }
.quiz-koniec .quiz-koniec-kafel.xp .podpis { color: #4A4B6B; }
.quiz-koniec .quiz-koniec-pasek-tlo { background: rgba(23, 24, 59, 0.14); }
.quiz-koniec .btn-verde { background: var(--granat); color: #FFFFFF; }
.quiz-koniec .btn-grigio { background: #FFFFFF; color: var(--granat); box-shadow: none; }
.quiz-koniec-zdanie {
  margin: 0 auto 18px; max-width: 480px; text-align: center; text-wrap: balance;
  font-size: 1.12rem; font-weight: 600; line-height: 1.5; color: #17183B;
}
.quiz-koniec-zdanie strong { font-weight: 800; }
.quiz-koniec .quiz-zajawka-pasek { background: rgba(255, 255, 255, 0.55); border-color: rgba(23, 24, 59, 0.2); }

.polmetek { border-radius: 28px; }
.polmetek-pct { font-family: var(--font-naglowek); font-weight: 800; }
.polmetek-tytul { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.6rem; letter-spacing: -0.01em; }
.polmetek.cel-slowek { --cs-akcent: #17183B; background: var(--zolty); color: var(--granat); box-shadow: none; }
.polmetek.cel-slowek::before { display: none; }
.polmetek.cel-slowek.koniec { background: #35A64D; }
.polmetek.cel-slowek .polmetek-tytul { font-size: 2rem; line-height: 1.05; color: #17183B; }
.polmetek.cel-slowek .polmetek-opis { color: #17183B; font-weight: 500; }
.polmetek.cel-slowek .polmetek-hint { color: rgba(23, 24, 59, 0.7); }
.polmetek.cel-slowek .cs-ikona {
  width: 76px; height: 76px; margin: 0 auto 6px; border-radius: 999px; background: #17183B; color: #FFC83D;
  display: flex; align-items: center; justify-content: center; font-size: 2rem;
}
.polmetek.cel-slowek .cs-ikona .ico { margin: 0; }
.cs-ilustracja { display: none; width: 200px; height: 200px; margin: -14px auto 0; pointer-events: none; }
.polmetek.cel-slowek.koniec .cs-ilustracja { display: block; }
.polmetek.cel-slowek.koniec .cs-ikona { display: none; }
.polmetek.cel-slowek .cs-glowny { --polka-kolor: #17183B; background: #17183B; color: #FFFFFF; }
.polmetek.cel-slowek .cs-karta { background: #FFFFFF; color: #17183B; border: none; box-shadow: 0 10px 22px -14px rgba(23, 24, 59, 0.55); }
.polmetek.cel-slowek .cs-karta .cs-tlum { color: #4A4B6B; }
.polmetek.cel-slowek .cs-karta.zaliczone { box-shadow: inset 0 0 0 2.5px #17183B, 0 10px 22px -14px rgba(23, 24, 59, 0.55); }
.polmetek.cel-slowek .cs-karta .cs-fajka {
  top: -9px; right: -9px; width: 24px; height: 24px; margin: 0; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; font-size: 0.7rem; line-height: 1;
  background: #17183B; color: #FFC83D; box-shadow: 0 0 0 2px #FFFFFF;
}
.polmetek.cel-slowek .cs-karta .cs-poziom { background: #FFFFFF; border-color: #C9CAE8; color: #4A4B6B; }
.polmetek.cel-slowek .cs-karta .cs-poziom.latwe { background: #35A64D; border-color: #35A64D; color: #17183B; }
.polmetek.cel-slowek .cs-karta .cs-poziom.srednie { background: #2463E9; border-color: #2463E9; color: #FFFFFF; }
.polmetek.cel-slowek .cs-karta .cs-poziom.trudne { background: #DB2727; border-color: #DB2727; color: #FFFFFF; }
.polmetek.cel-slowek .cs-nie { color: #17183B; }
.cs-dni { display: none; }
.polmetek.cel-slowek.koniec .cs-dni { display: flex; gap: 8px; max-width: 460px; margin: 14px auto 16px; text-align: left; }
.cs-dzien {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px;
  padding: 10px; border-radius: 20px; border: 2px dashed #17183B; background: rgba(255, 255, 255, 0.16); color: #17183B;
}
.cs-dzien.dzis { padding: 12px; border: none; background: #17183B; color: #FFFFFF; }
.cs-dzien-znak {
  width: 28px; height: 28px; box-sizing: border-box; border-radius: 999px; border: 2px dashed #17183B;
  display: flex; align-items: center; justify-content: center;
}
.cs-dzien.dzis .cs-dzien-znak { border: none; background: #FFC83D; color: #17183B; font-size: 0.85rem; }
.cs-dzien-znak .ico { margin: 0; line-height: 1; }
.cs-dzien-kto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cs-dzien-nazwa { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.06rem; line-height: 1.1; }
.cs-dzien-tyg { font-size: 0.78rem; font-weight: 600; line-height: 1.3; }
.cs-dzien.dzis .cs-dzien-tyg { color: #C9CAE8; }
.cs-dzien-stan { display: block; font-size: 0.84rem; font-weight: 800; line-height: 1.25; }
.cs-dzien.dzis .cs-dzien-stan { color: #FFC83D; }
.cs-dzien-kiedy { display: block; font-size: 0.78rem; font-weight: 600; line-height: 1.25; }
.cs-dzien-nazwa, .cs-dzien-tyg { overflow-wrap: anywhere; }
@media (max-width: 420px) { .cs-dzien { padding: 8px; gap: 6px; } .cs-dzien.dzis { padding: 10px; } }

.polmetek.polowa { background: #2463E9; color: #FFFFFF; box-shadow: none; }
.polmetek.polowa::before { background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.22) 0, transparent 55%); }
.polmetek.polowa .polmetek-ilustracja[src] {
  display: block; width: 176px; height: 176px; margin: -8px auto -2px; pointer-events: none;
  filter: drop-shadow(0 14px 16px rgba(8, 18, 70, 0.35));
  animation: brawoPostac 0.9s cubic-bezier(.34, 1.56, .64, 1) 0.1s both;
}
.polmetek.polowa .polmetek-pct { color: var(--zolty); text-shadow: none; }
.polmetek.polowa .polmetek-tytul { color: #FFFFFF; font-size: 2rem; line-height: 1.05; }
.polmetek.polowa .polmetek-opis { color: #EEF3FF; font-weight: 500; }
.polmetek.polowa .polmetek-hint { color: rgba(238, 243, 255, 0.85); }
@media (max-height: 640px), (max-width: 520px) {
  .polmetek.polowa .polmetek-ilustracja[src] { width: 128px; height: 128px; }
  .polmetek.polowa .polmetek-tytul { font-size: 1.6rem; }
}
.polmetek.rekord { background: var(--zolty); color: #17183B; box-shadow: none; }
.polmetek.rekord::before { background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.55) 0, transparent 55%); }
.polmetek.rekord::after { background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, 0.3) 0deg 10deg, transparent 10deg 30deg); }
.polmetek.rekord .polmetek-pct { color: #17183B; text-shadow: none; }
.polmetek.rekord .polmetek-tytul, .polmetek.rekord .polmetek-opis { color: #17183B; }
.polmetek.rekord .polmetek-hint { color: rgba(23, 24, 59, 0.7); }
.polmetek.rekord .rekord-piorun { color: #17183B; }
.polmetek.combo { background: var(--nak-kolor, #2463E9); color: #FFFFFF; box-shadow: none; }
.polmetek.combo::before { background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.22) 0, transparent 55%); }
.polmetek.combo .polmetek-pct { color: var(--zolty); text-shadow: none; }
.polmetek.combo .polmetek-tytul { color: #FFFFFF; }
.polmetek.combo .polmetek-opis { color: #FFFFFF; font-weight: 500; }
.polmetek.combo .polmetek-hint { color: #FFFFFF; }
.polmetek.combo .rekord-piorun { color: var(--zolty); }
.polmetek.combo.auto .polmetek-tresc::after { background: var(--zolty); }
.polmetek:is(.polowa, .rekord, .combo) #polmetekDalej {
  --polka-kolor: #17183B; background: #17183B; color: #FFFFFF;
  --kolko-tlo: var(--zolty); --kolko-strzalka: var(--strzalka-granatowa);
}
.sciezka {
  position: fixed; inset: 0; z-index: 1900;   
  display: flex; flex-direction: column;
  background: #2463E9; color: #FFFFFF; font-family: var(--font-tekst);
}
.sciezka.hidden { display: none !important; }
.sciezka-glowa {
  flex: none; display: flex; align-items: flex-start; gap: 16px;
  width: 100%; max-width: 900px; margin: 0 auto; padding: 18px clamp(16px, 4vw, 32px) 8px;
}
.sciezka-zamknij {
  flex: none; width: 44px; height: 44px; border-radius: 999px; border: none; cursor: pointer; margin-top: 2px;
  background: #FFFFFF; color: #17183B; font-size: 1.25rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 22px -14px rgba(8, 18, 70, 0.9);
}
.sciezka-zamknij .ico { margin: 0; }
.sciezka-zamknij:hover { background: var(--zolty); }
.sciezka :focus-visible { outline: 3px solid var(--zolty); outline-offset: 3px; }
.sciezka-glowa-tresc { min-width: 0; flex: 1; }
.sciezka-pigulka {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 12px; border-radius: 999px;
  background: #FFFFFF; color: #17183B; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.02em;
}
.sciezka-pigulka .ico { margin: 0; color: #2463E9; }
.sciezka-tytul {
  margin: 8px 0 6px; font-family: var(--font-naglowek); font-weight: 800; font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  line-height: 1.05; letter-spacing: -0.02em; color: #FFFFFF; text-wrap: balance; overflow-wrap: anywhere;
}
.sciezka-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 0.92rem; font-weight: 600; color: #EEF3FF; }
.sciezka-meta b { color: #FFFFFF; font-weight: 800; }
.sciezka-meta-pasek { flex: 1 1 140px; max-width: 240px; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.24); overflow: hidden; }
.sciezka-meta-pasek i { display: block; height: 100%; border-radius: inherit; background: var(--zolty); transition: width 0.6s ease; }

.sciezka-plansza { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.sciezka-trasa { position: relative; width: 100%; max-width: 820px; margin: 0 auto; padding: 8px clamp(12px, 3vw, 24px) 28px; }
.sciezka-droga { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.sciezka-droga .przed { fill: none; stroke: rgba(255, 255, 255, 0.5); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 12 14; }
.sciezka-droga .za { fill: none; stroke: #FFFFFF; stroke-width: 8; stroke-linecap: round; }
.sciezka-trasa > :not(.sciezka-droga) { position: relative; }

.sciezka-meta-wezel { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 0 8px; }
.sciezka-meta-wezel img { width: 190px; height: 190px; pointer-events: none; filter: drop-shadow(0 14px 16px rgba(8, 18, 70, 0.35)); }
.sciezka-meta-wezel.komplet img { animation: sciezkaUnos 2.6s ease-in-out infinite alternate; }
.sciezka-meta-napis {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 16px; border-radius: 999px;
  background: #17183B; color: #FFFFFF; font-weight: 800; font-size: 0.9rem;
}
.sciezka-meta-napis .ico { margin: 0; color: var(--zolty); }
.sciezka-meta-wezel.komplet .sciezka-meta-napis { background: var(--zolty); color: #17183B; }
.sciezka-meta-wezel.komplet .sciezka-meta-napis .ico { color: #17183B; }

.sciezka-rzad {
  display: grid; align-items: center; column-gap: 18px; padding: 10px 0;
  grid-template-columns: minmax(0, 17%) 104px minmax(0, 1fr);
  grid-template-areas: "pusto wezel karta";
}
.sciezka-rzad.prawo { grid-template-columns: minmax(0, 1fr) 104px minmax(0, 17%); grid-template-areas: "karta wezel pusto"; }
.sciezka-wezel {
  grid-area: wezel; position: relative; justify-self: center;
  width: 104px; height: 104px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: conic-gradient(var(--zolty) calc(var(--pct, 0) * 1%), rgba(255, 255, 255, 0.3) 0);
  display: grid; place-items: center;
  box-shadow: 0 16px 26px -16px rgba(8, 18, 70, 0.95);
  transition: transform 0.2s cubic-bezier(.34, 1.56, .64, 1);
}
.sciezka-wezel::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: #FFFFFF; }
.sw-nr { position: relative; font-family: var(--font-naglowek); font-weight: 800; font-size: 2.4rem; line-height: 1; color: #17183B; }
.sciezka-wezel:not(.zamkniety):hover { transform: translateY(-3px) scale(1.05); }
.sciezka-wezel.zrobiony { background: #FFFFFF; }
.sciezka-wezel.zrobiony::before { background: var(--zolty); }
.sciezka-wezel.zamkniety { background: #2463E9; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45); cursor: not-allowed; }
.sciezka-wezel.zamkniety::before { background: transparent; }
.sciezka-wezel.zamkniety .sw-nr { color: rgba(255, 255, 255, 0.8); }
.sw-odznaka {
  position: absolute; right: -4px; bottom: 0; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1rem; box-shadow: 0 0 0 4px #2463E9;
}
.sw-odznaka .ico { margin: 0; line-height: 1; }
.sciezka-wezel.zrobiony .sw-odznaka { background: #35A64D; color: #17183B; }
.sciezka-wezel.zamkniety .sw-odznaka { background: #17183B; color: #FFFFFF; }
.sciezka-wezel.biezacy::after {
  content: ''; position: absolute; inset: -12px; border-radius: 50%; border: 4px solid var(--zolty);
  animation: sciezkaPuls 1.9s ease-out infinite; pointer-events: none;
}
@keyframes sciezkaPuls { 0% { transform: scale(0.9); opacity: 1; } 100% { transform: scale(1.2); opacity: 0; } }
.sw-tu {
  position: absolute; left: 50%; bottom: calc(100% + 16px); transform: translateX(-50%);
  white-space: nowrap; padding: 6px 12px; border-radius: 999px; background: var(--zolty); color: #17183B;
  font-size: 0.78rem; font-weight: 800; box-shadow: 0 10px 20px -12px rgba(8, 18, 70, 0.9); pointer-events: none;
}
.sw-tu::after { content: ''; position: absolute; left: 50%; top: 100%; margin-left: -7px; border: 7px solid transparent; border-top-color: var(--zolty); }

.sciezka-karta {
  grid-area: karta; position: relative; min-width: 0; width: 100%; max-width: 360px; text-align: left; cursor: pointer;
  border: none; border-radius: 24px; padding: 16px 18px 14px; font: inherit;
  background: #FFFFFF; color: #17183B;
  box-shadow: 0 18px 30px -22px rgba(8, 18, 70, 0.95);
  transition: transform 0.18s ease;
}
.sciezka-rzad.lewo .sciezka-karta { justify-self: start; }
.sciezka-rzad.prawo .sciezka-karta { justify-self: end; }
.sciezka-karta:not(.zamkniety):hover { transform: translateY(-2px); }
.sk-glowa { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sk-tytul { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.01em; }
.sk-stan {
  flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 0 10px; border-radius: 999px;
  font-size: 0.76rem; font-weight: 800; background: #ECEDF6; color: #17183B;
}
.sk-stan .ico { margin: 0; }
.sk-stan.zrobiony { background: #35A64D; }
.sk-stan.biezacy { background: var(--zolty); }
.sk-meta { margin-top: 4px; font-size: 0.84rem; font-weight: 600; color: #4A4B6B; display: flex; flex-wrap: wrap; gap: 2px 10px; }
.sk-meta .ico { margin: 0 3px 0 0; }
.sk-pasek { margin-top: 10px; height: 8px; border-radius: 999px; background: #E3E4EF; overflow: hidden; }
.sk-pasek i { display: block; height: 100%; border-radius: inherit; background: #35A64D; }
.sk-slowa { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.sk-slowo {
  display: inline-block; max-width: 100%; padding: 4px 11px; border-radius: 999px; font-size: 0.82rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: #FFFFFF; color: #17183B; box-shadow: inset 0 0 0 1.5px #C9CAE8;
}
.sk-slowo.latwe { background: #35A64D; color: #17183B; box-shadow: none; }
.sk-slowo.srednie { background: #2463E9; color: #FFFFFF; box-shadow: none; }
.sk-slowo.trudne { background: #DB2727; color: #FFFFFF; box-shadow: none; }
.sk-slowo.wiecej { background: #17183B; color: #FFFFFF; box-shadow: none; }
.sk-cta { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-weight: 800; font-size: 0.92rem; }
.sk-cta i.ico {
  margin: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: #17183B; color: var(--zolty); font-size: 0.9rem;
}
.sk-zamek { margin-top: 10px; font-size: 0.84rem; font-weight: 700; display: flex; gap: 6px; align-items: flex-start; }
.sk-zamek .ico { margin: 2px 0 0; }
.sciezka-karta.zamkniety { background: #2463E9; color: #FFFFFF; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.3); cursor: not-allowed; }
.sciezka-karta.zamkniety .sk-meta { color: #EEF3FF; }
.sciezka-karta.zamkniety .sk-stan { background: #17183B; color: #FFFFFF; }
.sciezka-karta.zamkniety .sk-pasek { background: rgba(255, 255, 255, 0.22); }
.sciezka-karta.zamkniety .sk-slowo { opacity: 0.6; }
.sk-klodka { display: inline-flex; align-items: center; gap: 4px; }

.sciezka-przerwa { height: 96px; position: relative; }
.sciezka-postac {
  position: absolute; bottom: -56px; width: 17%; max-width: 150px; min-width: 96px; height: auto; aspect-ratio: 1;
  pointer-events: none; user-select: none;
  filter: drop-shadow(0 12px 14px rgba(8, 18, 70, 0.35));
  animation: sciezkaUnos 4.6s ease-in-out infinite alternate;
}
.sciezka-przerwa.lewo .sciezka-postac { left: 0; }
.sciezka-przerwa.prawo .sciezka-postac { right: 0; }
@keyframes sciezkaUnos { from { translate: 0 0; } to { translate: 0 -8px; } }
.sciezka-rzad.sciezka-start { padding: 0 0 4px; }
.sciezka-start span {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 14px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.18); color: #FFFFFF; font-weight: 800; font-size: 0.82rem;
}
.sciezka-start span .ico { margin: 0; }

.sciezka-rzad.trzes .sciezka-wezel, .sciezka-rzad.trzes .sciezka-karta { animation: sciezkaTrzes 0.42s ease; }
@keyframes sciezkaTrzes { 0%, 100% { translate: 0; } 20% { translate: -7px; } 40% { translate: 6px; } 60% { translate: -4px; } 80% { translate: 3px; } }
.sciezka.wjazd .sciezka-rzad { animation: sciezkaWjazd 0.5s cubic-bezier(.34, 1.4, .64, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes sciezkaWjazd { from { opacity: 0; transform: translateY(26px) scale(0.96); } to { opacity: 1; transform: none; } }
.sciezka-wezel.swiezo { animation: sciezkaSwiezo 0.9s cubic-bezier(.34, 1.56, .64, 1) 0.4s both; }
@keyframes sciezkaSwiezo { 0% { transform: scale(0.6) rotate(-12deg); } 60% { transform: scale(1.15) rotate(6deg); } 100% { transform: none; } }

.sciezka-stopka {
  flex: none; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 16px;
  padding: 12px clamp(16px, 4vw, 32px) max(14px, env(safe-area-inset-bottom)); background: #204EB8;
}
.sciezka-legenda { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 0.8rem; font-weight: 700; color: #EEF3FF; }
.sciezka-legenda .sk-slowo { font-size: 0.74rem; padding: 3px 9px; }
.sciezka-zasada { font-size: 0.8rem; color: #EEF3FF; max-width: 380px; }
.sciezka-cala {
  display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 8px 0 18px; border-radius: 999px; border: none;
  cursor: pointer; background: #FFFFFF; color: #17183B; font: inherit; font-weight: 800; font-size: 0.95rem;
}
.sciezka-cala i.ico { margin: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #17183B; color: var(--zolty); }
.sciezka-cala:hover { background: var(--zolty); }
.sciezka-ladowanie { display: flex; justify-content: center; padding: 60px 0; }
.sciezka-ladowanie .spinner { border-color: rgba(255, 255, 255, 0.35); border-top-color: #FFFFFF; }

@media (max-width: 640px) {
  .sciezka-glowa { gap: 12px; padding-top: 14px; }
  .sciezka-zamknij { width: 40px; height: 40px; }
  .sciezka-rzad { grid-template-columns: 78px minmax(0, 1fr); grid-template-areas: "wezel karta"; column-gap: 12px; }
  .sciezka-rzad.prawo { grid-template-columns: minmax(0, 1fr) 78px; grid-template-areas: "karta wezel"; }
  .sciezka-wezel { width: 78px; height: 78px; }
  .sciezka-wezel::before { inset: 7px; }
  .sw-nr { font-size: 1.8rem; }
  .sw-odznaka { width: 30px; height: 30px; font-size: 0.85rem; box-shadow: 0 0 0 3px #2463E9; }
  .sciezka-karta { max-width: none; padding: 14px 14px 12px; }
  .sciezka-przerwa { height: 104px; }
  .sciezka-postac { width: 92px; min-width: 0; bottom: 4px; }
  .sciezka-meta-wezel img { width: 150px; height: 150px; }
  .sciezka-stopka { gap: 8px; }
  .sciezka-zasada { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sciezka-wezel.biezacy::after, .sciezka-postac, .sciezka-meta-wezel.komplet img,
  .sciezka.wjazd .sciezka-rzad, .sciezka-wezel.swiezo, .sciezka-rzad.trzes .sciezka-wezel, .sciezka-rzad.trzes .sciezka-karta { animation: none; }
  .sciezka-wezel, .sciezka-karta { transition: none; }
}

.wp-rog { position: absolute; left: 8px; top: 8px; display: flex; align-items: center; gap: 6px; pointer-events: none; }
.wp-rog .wp-komplet { position: static; }
.wp-poziomy {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 26px; padding: 0 10px; border-radius: 999px; background: #2463E9; color: #FFFFFF;
  font-size: 0.74rem; font-weight: 800; box-shadow: 0 6px 14px -8px rgba(8, 18, 70, 0.8);
}
.wp-poziomy .ico { margin: 0; color: var(--zolty); }

.polmetek-ilustracja, .polmetek-pigulka, .polmetek-licznik-etykieta { display: none; }
.polmetek.brawo {
  background: var(--zolty); color: #17183B; box-shadow: none;
  align-items: flex-start; overflow-y: auto; padding: 22px 24px 18px;
}
.polmetek.brawo::before { display: none; }
.polmetek.brawo .polmetek-tresc {
  width: 100%; max-width: 640px; margin: auto 0; text-align: left;
  display: grid; grid-template-columns: minmax(0, 1fr) 200px; column-gap: 12px;
  grid-template-areas: "pigulka ilustracja" "tytul ilustracja" "opis ilustracja" "licznik licznik" "staty staty" "akcje akcje" "hint hint";
}
.polmetek.brawo .polmetek-ilustracja {
  grid-area: ilustracja; display: block; width: 200px; height: 200px; align-self: center; pointer-events: none;
  animation: brawoPostac 0.9s cubic-bezier(.34, 1.56, .64, 1) 0.15s both;
}
@keyframes brawoPostac { from { transform: translateY(40px) scale(0.6) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
.polmetek.brawo .polmetek-pigulka {
  grid-area: pigulka; justify-self: start; align-self: end; display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 0 14px; border-radius: 999px; background: #17183B; color: #FFFFFF; font-size: 0.82rem; font-weight: 800;
}
.polmetek.brawo .polmetek-pigulka .ico { margin: 0; color: var(--zolty); }
.polmetek.brawo .polmetek-tytul { grid-area: tytul; margin-top: 8px; font-size: clamp(2.2rem, 5vw, 3rem); line-height: 1; letter-spacing: -0.02em; color: #17183B; }
.polmetek.brawo .polmetek-opis { grid-area: opis; color: #17183B; font-weight: 500; margin-top: 8px; }
.polmetek.brawo .polmetek-licznik {
  grid-area: licznik; margin-top: 16px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px;
  padding: 14px 18px; border-radius: 22px; background: #17183B; color: #FFFFFF;
}
.polmetek.brawo .polmetek-licznik::before {
  content: ''; grid-row: span 2; width: 58px; height: 58px; border-radius: 50%; background: var(--zolty);
  background-image: linear-gradient(#17183B, #17183B);
  background-size: 4px 22px; background-repeat: no-repeat; background-position: center 8px;
  box-shadow: inset 0 0 0 4px #FFFFFF;
}
.polmetek.brawo.liczy .polmetek-licznik::before { animation: brawoWskazowka 0.9s linear infinite; }
@keyframes brawoWskazowka { to { transform: rotate(360deg); } }
.polmetek.brawo .polmetek-licznik-etykieta { display: block; font-size: 0.82rem; font-weight: 700; color: #D4D5F0; }
.polmetek.brawo .polmetek-pct {
  font-size: clamp(2.2rem, 6vw, 2.9rem); color: var(--zolty); text-shadow: none; letter-spacing: -0.01em; line-height: 1.05;
}
.polmetek.brawo .polmetek-staty { grid-area: staty; margin: 10px 0 0; max-width: none; background: transparent; border: none; padding: 0; }
.brawo-kafle { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.brawo-kafel { border-radius: 20px; background: #FFFFFF; padding: 12px 16px; min-width: 0; }
.brawo-kafel-etykieta { font-size: 0.78rem; font-weight: 700; color: #4A4B6B; display: flex; align-items: center; gap: 6px; }
.brawo-kafel-etykieta .ico { margin: 0; color: #DB2727; }
.brawo-slowo { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.3rem; color: #17183B; overflow-wrap: anywhere; margin-top: 2px; }
.brawo-slowo small { font-family: var(--font-tekst); font-weight: 600; font-size: 0.85rem; color: #4A4B6B; }
.brawo-kafel-dol { font-size: 0.8rem; font-weight: 700; color: #DB2727; margin-top: 2px; }
.brawo-kafel.xp { background: #35A64D; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.brawo-kafel.xp .brawo-slowo { font-size: 1.6rem; }
.brawo-kafel.xp .brawo-kafel-etykieta { color: #17183B; justify-content: center; }
.polmetek.brawo .polmetek-akcje { grid-area: akcje; justify-content: flex-start; margin-top: 16px; }
.polmetek.brawo #polmetekDalej { --polka-kolor: #17183B; background: #17183B; color: #FFFFFF; }
.polmetek.brawo #polmetekDrugi { background: #FFFFFF; color: #17183B; box-shadow: none; }
.polmetek.brawo .polmetek-hint { grid-area: hint; color: rgba(23, 24, 59, 0.7); }
@media (max-width: 640px) {
  .polmetek.brawo { padding: 18px 16px 14px; }
  .polmetek.brawo .polmetek-tresc { grid-template-columns: minmax(0, 1fr) 118px; }
  .polmetek.brawo .polmetek-ilustracja { width: 118px; height: 118px; }
  .brawo-kafle { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .polmetek.brawo .polmetek-ilustracja, .polmetek.brawo.liczy .polmetek-licznik::before { animation: none; }
}

.polmetek.seria {
  --plansza-tlo: var(--nak-kolor, #2463E9);
  --seria-tekst: #FFFFFF;
  --seria-zamki: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 280'%3E%3Cg fill='%23000' fill-rule='evenodd'%3E%3Cpath d='M30 92V62h3v-5h4v5h3v-5h4v5h3v30h18V72h3v-4h4v4h4v-4h4v4h3v20zM65 92V62h3v-5h4v5h3v-5h4v5h3v30zM53 92v-8a4 4 0 018 0v8z'/%3E%3Cpath d='M262 190v-46h4v-6h5v6h4v-6h5v6h4v46zM272 152v-16h2l8 4-8 4h-2z'/%3E%3Cpath d='M120 252v-22h4v-4h4v4h4v-4h4v4h4v8h14v-6h3v-3h3v3h3v-3h3v3h3v6h14v-8h4v-4h4v4h4v-4h4v4h4v22zM158 252v-7a4 4 0 018 0v7z'/%3E%3C/g%3E%3C/svg%3E");
  --seria-zamek: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40'%3E%3Cpath fill='%2317183B' fill-rule='evenodd' d='M4 38V4h3v4h1.5V4h3v4h1.5V4h3v34zM32 38V4h3v4h1.5V4h3v4h1.5V4h3v34zM16 38V12h3v4h3.5v-4h3v4h3.5v-4h3v26zM20.5 38v-7a3.5 3.5 0 0 1 7 0v7zM8.5 15h3v6h-3zM36.5 15h3v6h-3z'/%3E%3C/svg%3E");
  background: var(--nak-kolor, #2463E9); color: var(--seria-tekst); box-shadow: none;
  align-items: flex-start; overflow-y: auto; padding: 22px 24px 18px;
}
.polmetek.seria.seria-rekord { --seria-tekst: #17183B; }
.polmetek.seria::before {
  inset: 0; transform: none; background: var(--seria-tekst);
  -webkit-mask: var(--seria-zamki) 0 100% / 300px auto repeat; mask: var(--seria-zamki) 0 100% / 300px auto repeat;
  opacity: 0.1; animation: seriaZamkiGasna 2.6s ease-out 0.2s both;
}
@keyframes seriaZamkiGasna { from { opacity: 0.34; } to { opacity: 0.1; } }
.polmetek.seria .polmetek-tresc {
  width: 100%; max-width: 640px; margin: auto 0; text-align: left;
  display: grid; grid-template-columns: minmax(0, 1fr) 190px; column-gap: 14px;
  grid-template-areas: "pigulka ilustracja" "tytul ilustracja" "opis ilustracja" "licznik licznik" "staty staty" "akcje akcje" "hint hint";
}
.polmetek.seria .polmetek-ilustracja {
  grid-area: ilustracja; display: block; width: 190px; height: 190px; align-self: center; pointer-events: none;
  filter: drop-shadow(0 14px 16px rgba(8, 18, 70, 0.3));
  animation: brawoPostac 0.9s cubic-bezier(.34, 1.56, .64, 1) 0.15s both;
}
.polmetek.seria .polmetek-pigulka {
  grid-area: pigulka; justify-self: start; align-self: end; display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 0 14px; border-radius: 999px; background: #17183B; color: #FFFFFF; font-size: 0.82rem; font-weight: 800;
}
.polmetek.seria .polmetek-pigulka .ico { margin: 0; color: var(--zolty); }
.polmetek.seria .polmetek-tytul {
  grid-area: tytul; margin-top: 8px; font-family: var(--font-naglowek); font-size: clamp(2rem, 4.6vw, 2.75rem);
  line-height: 1.02; letter-spacing: -0.02em; color: var(--seria-tekst);
}
.polmetek.seria .polmetek-opis { grid-area: opis; color: var(--seria-tekst); font-weight: 500; margin-top: 8px; }
.polmetek.seria .polmetek-licznik {
  grid-area: licznik; margin-top: 16px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 16px;
  padding: 14px 18px; border-radius: 22px; background: #17183B; color: #FFFFFF;
}
.polmetek.seria .polmetek-licznik::before {
  content: ''; grid-row: span 2; width: 60px; height: 60px; border-radius: 50%;
  background: var(--zolty) var(--seria-zamek) center 64% / 40px auto no-repeat;
  animation: seriaDogasa 2.6s ease-out 0.3s both;
}
@keyframes seriaDogasa {
  from { box-shadow: 0 0 0 6px rgba(255, 200, 61, 0.35), 0 0 34px 10px rgba(255, 200, 61, 0.7); }
  to   { box-shadow: 0 0 0 0 rgba(255, 200, 61, 0), 0 0 0 0 rgba(255, 200, 61, 0); }
}
.polmetek.seria .polmetek-licznik-etykieta { display: block; font-size: 0.85rem; font-weight: 700; color: #D4D5F0; }
.polmetek.seria .polmetek-pct {
  font-family: var(--font-naglowek); font-size: clamp(2.8rem, 7vw, 3.6rem); line-height: 1; letter-spacing: -0.02em;
  color: var(--zolty); text-shadow: none; animation: seriaZar 2.6s ease-out 0.3s both;
}
@keyframes seriaZar { from { text-shadow: 0 0 22px rgba(255, 200, 61, 0.95), 0 0 3px #FFF4D6; } to { text-shadow: 0 0 0 rgba(255, 200, 61, 0); } }
.polmetek.seria .polmetek-staty { grid-area: staty; margin: 10px 0 0; max-width: none; background: transparent; border: none; padding: 0; }
.seria-kafel {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 12px;
  border-radius: 20px; background: #FFFFFF; color: #17183B; padding: 12px 18px 12px 12px;
}
.seria-kafel-ikona {
  width: 40px; height: 40px; border-radius: 50%; background: #17183B; color: var(--zolty);
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.seria-kafel-ikona .ico { margin: 0; line-height: 1; }
.seria-kafel-tekst { display: flex; flex-direction: column; min-width: 0; }
.seria-kafel-etykieta { font-size: 0.78rem; font-weight: 700; color: #4A4B6B; }
.seria-kafel-stan { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.05rem; line-height: 1.2; overflow-wrap: anywhere; }
.seria-kafel.brak .seria-kafel-stan { color: #DB2727; }
.seria-kafel:is(.nowy, .pierwszy, .twoj) .seria-kafel-stan { color: #1F7A35; }
.seria-kafel-liczba { font-family: var(--font-naglowek); font-weight: 800; font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.polmetek.seria .polmetek-akcje { grid-area: akcje; justify-content: flex-start; margin-top: 16px; }
.polmetek.seria #polmetekDalej {
  --polka-kolor: #17183B; background: #17183B; color: #FFFFFF;
  --kolko-tlo: var(--zolty); --kolko-strzalka: var(--strzalka-granatowa);
}
.polmetek.seria .polmetek-hint { grid-area: hint; color: var(--seria-tekst); }
.polmetek.seria.seria-rekord .polmetek-hint { color: rgba(23, 24, 59, 0.7); }
@media (max-width: 640px) {
  .polmetek.seria { padding: 18px 16px 14px; }
  .polmetek.seria .polmetek-tresc { grid-template-columns: minmax(0, 1fr) 112px; }
  .polmetek.seria .polmetek-ilustracja { width: 112px; height: 112px; }
  .seria-kafel-liczba { font-size: 1.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .polmetek.seria::before, .polmetek.seria .polmetek-ilustracja, .polmetek.seria .polmetek-licznik::before, .polmetek.seria .polmetek-pct { animation: none; }
}
.quiz-koniec-seria {
  display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 10px 14px; border-radius: 16px;
  background: var(--granat); color: #FFFFFF; font-weight: 700; font-size: 0.92rem; line-height: 1.35; text-align: left;
}
.quiz-koniec-seria .ico { margin: 0; color: var(--zolty); flex: 0 0 auto; }

#premiumScianaOverlay { background: #17183B; }
#premiumScianaOverlay .sciana-okno { background: #17183B; color: #FFFFFF; }
#premiumScianaOverlay .wordmap-header { background: transparent; border-bottom: none; padding-top: 22px; }
#premiumScianaOverlay .wordmap-title {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 16px; border-radius: 999px;
  background: #FFFFFF; color: #17183B; font-family: var(--font-tekst); font-size: 0.9rem; font-weight: 800;
}
#premiumScianaOverlay .wordmap-title .ico { color: #17183B; }
#premiumScianaOverlay .wordmap-close { background: var(--zolty); color: #17183B; }
#premiumScianaOverlay .wordmap-close:hover { background: #FFD66B; color: #17183B; }
.sciana-glowa { position: relative; min-height: 200px; margin: 0 0 6px; }
.sciana-glowa img { position: absolute; right: -24px; top: -26px; width: 230px; height: 230px; pointer-events: none; }
.sciana-glowa h2 {
  position: relative; max-width: 420px; margin: 12px 0 0; font-family: var(--font-naglowek); font-weight: 800;
  font-size: 2.6rem; line-height: 1.04; letter-spacing: -0.02em; color: #FFFFFF; text-wrap: balance;
}
@media (max-width: 700px) {
  .sciana-glowa {
    display: grid; grid-template-columns: minmax(0, 1fr) clamp(96px, 32vw, 180px); align-items: center; gap: 10px;
    min-height: 0; margin: 0 0 10px;
  }
  .sciana-glowa img { position: static; grid-column: 2; grid-row: 1; width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .sciana-glowa h2 {
    grid-column: 1; grid-row: 1; max-width: none; margin: 0; font-size: clamp(1.6rem, 8vw, 2.6rem);
    overflow-wrap: break-word; hyphens: auto;
  }
}
#premiumScianaOverlay .limit-opis { color: #FFFFFF; font-size: 1rem; }
#premiumScianaOverlay .limit-spokoj { background: #24265A; color: #FFFFFF; border-radius: 22px; padding: 14px 16px; }
#premiumScianaOverlay .limit-spokoj b { color: #FFFFFF; }
.sciana-korzysci { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sciana-korzysci li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 20px; background: #24265A; color: #FFFFFF; }
.sciana-korzysci-ikona { width: 44px; height: 44px; flex: none; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; }
.sciana-korzysci-ikona .ico { margin: 0; font-size: 1.2rem; }
.sciana-korzysci-tekst { display: flex; flex-direction: column; gap: 2px; }
.sciana-korzysci-tekst b { font-size: 1rem; font-weight: 800; }
.sciana-korzysci-tekst span { font-size: 0.86rem; line-height: 1.4; color: #C9CAE8; }
#premiumScianaOverlay .przydzial-kiedy .ico { color: var(--zolty); }
#premiumScianaOverlay .pk-baner { display: none; }
#premiumScianaOverlay .pk-sekcja-tytul { font-family: var(--font-naglowek); font-size: 1.5rem; color: #FFFFFF; margin: 8px 0 12px; }
#premiumScianaOverlay .pk-stan { background: #24265A; border: none; border-radius: 22px; color: #FFFFFF; }
#premiumScianaOverlay .pk-stan-glowa { color: #C9CAE8; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; }
#premiumScianaOverlay .pk-stan-glowa b { font-family: var(--font-naglowek); font-size: 2rem; color: var(--zolty); text-transform: none; letter-spacing: -0.01em; }
#premiumScianaOverlay .pk-pasek { height: 10px; background: rgba(255, 255, 255, 0.14); }
#premiumScianaOverlay .pk-pasek > span, #premiumScianaOverlay .pk-pasek.ostrzezenie > span { background: var(--zolty); }
#premiumScianaOverlay .pk-archiwum, #premiumScianaOverlay .pk-darmowe, #premiumScianaOverlay .pk-darmowe b,
#premiumScianaOverlay .pk-stan-premium { color: #FFFFFF; }
#premiumScianaOverlay .pk-darmowe { color: #C9CAE8; }
#premiumScianaOverlay .pk-archiwum .ico { color: var(--zolty); }
:is(#premiumScianaOverlay, #probneKoniecOverlay) .pk-plan { background: transparent; border: 2px solid rgba(255, 255, 255, 0.35); border-radius: 22px; }
:is(#premiumScianaOverlay, #probneKoniecOverlay) .pk-plan:hover { border-color: #FFFFFF; }
:is(#premiumScianaOverlay, #probneKoniecOverlay) .pk-plan.wybrany, :is(#premiumScianaOverlay, #probneKoniecOverlay) .pk-plan:has(.pk-plan-radio:checked) { background: var(--zolty); border-color: var(--zolty); }
:is(#premiumScianaOverlay, #probneKoniecOverlay) .pk-plan-nazwa { font-family: var(--font-naglowek); font-size: 1.15rem; letter-spacing: 0; text-transform: none; color: #FFFFFF; }
:is(#premiumScianaOverlay, #probneKoniecOverlay) .pk-cena { font-family: var(--font-naglowek); font-size: 2rem; color: #FFFFFF; }
:is(#premiumScianaOverlay, #probneKoniecOverlay) .pk-cena-sufiks, :is(#premiumScianaOverlay, #probneKoniecOverlay) .pk-plan-nota, :is(#premiumScianaOverlay, #probneKoniecOverlay) .pk-cena-stara { color: #D4D5F0; }
:is(#premiumScianaOverlay, #probneKoniecOverlay) .pk-plan.wybrany :is(.pk-plan-nazwa, .pk-cena, .pk-cena-sufiks, .pk-plan-nota, .pk-cena-stara),
:is(#premiumScianaOverlay, #probneKoniecOverlay) .pk-plan:has(.pk-plan-radio:checked) :is(.pk-plan-nazwa, .pk-cena, .pk-cena-sufiks, .pk-plan-nota, .pk-cena-stara) { color: #17183B; }
:is(#premiumScianaOverlay, #probneKoniecOverlay) .pk-plan-radio { accent-color: #17183B; }
:is(#premiumScianaOverlay, #probneKoniecOverlay) .pk-wstazka { background: #DB2727; color: #FFFFFF; }
:is(#premiumScianaOverlay, #probneKoniecOverlay) .currency-opt { color: #FFFFFF; }
:is(#premiumScianaOverlay, #probneKoniecOverlay) .buy-consent, :is(#premiumScianaOverlay, #probneKoniecOverlay) .buy-consent-link, :is(#premiumScianaOverlay, #probneKoniecOverlay) .buy-consent-link a { color: #FFFFFF; }
:is(#premiumScianaOverlay, #probneKoniecOverlay) .buy-consent input { accent-color: var(--zolty); }
:is(#premiumScianaOverlay, #probneKoniecOverlay) .pk-zgoda-nota { color: #C9CAE8; }
:is(#premiumScianaOverlay, #probneKoniecOverlay) .pk-zgoda-nota.czeka { background: rgba(255, 200, 61, 0.14); color: #FFFFFF; }
:is(#premiumScianaOverlay, #probneKoniecOverlay) .pk-zaplac {
  background: var(--zolty); color: #17183B; justify-content: flex-start; min-height: 58px;
  padding: 7px 7px 7px 24px; font-size: 1.05rem; box-shadow: none;
}
:is(#premiumScianaOverlay, #probneKoniecOverlay) .pk-zaplac > .ico:first-child { display: none; }
:is(#premiumScianaOverlay, #probneKoniecOverlay) .pk-zaplac::after {
  content: ''; flex: none; width: 44px; height: 44px; margin-left: auto; border-radius: 999px;
  background: #17183B var(--strzalka-zolta) center / 22px 22px no-repeat;
}
:is(#premiumScianaOverlay, #probneKoniecOverlay) .pk-zaplac-nota { color: #C9CAE8; }
:is(#premiumScianaOverlay, #probneKoniecOverlay) .pk-akordeon { background: #24265A; border-color: #2E3068; border-radius: 18px; }
:is(#premiumScianaOverlay, #probneKoniecOverlay) .pk-akordeon > summary, :is(#premiumScianaOverlay, #probneKoniecOverlay) .pk-akordeon > summary .ico { color: #FFFFFF; }
:is(#premiumScianaOverlay, #probneKoniecOverlay) .pk-akordeon .auth-input { background: #17183B; color: #FFFFFF; border-color: #4A4C80; }
:is(#premiumScianaOverlay, #probneKoniecOverlay) .faktura-info { color: #C9CAE8; }
#premiumScianaOverlay .pk-kafelek { background: transparent; border: none; padding: 6px 0; gap: 14px; }
#premiumScianaOverlay .pk-kafelek > .ico {
  width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  margin: 0; font-size: 1.15rem; line-height: 1; background: var(--zolty); color: #17183B;
}
#premiumScianaOverlay .pk-kafelek:nth-child(4n+2) > .ico { background: #DB2727; color: #FFFFFF; }
#premiumScianaOverlay .pk-kafelek:nth-child(4n+3) > .ico { background: #2463E9; color: #FFFFFF; }
#premiumScianaOverlay .pk-kafelek:nth-child(4n+4) > .ico { background: #35A64D; color: #17183B; }
#premiumScianaOverlay .pk-kafelek b { color: #FFFFFF; font-size: 0.98rem; }
#premiumScianaOverlay .pk-kafelek span { color: #C9CAE8; font-size: 0.84rem; }
#premiumScianaOverlay .limit-droga { background: #24265A; border: none; border-radius: 22px; }
#premiumScianaOverlay .limit-droga-tytul { color: #FFFFFF; }
#premiumScianaOverlay .limit-droga-opis { color: #C9CAE8; }
#premiumScianaOverlay .limit-droga .btn-grigio { background: #FFFFFF; color: #17183B; box-shadow: none; }
#premiumScianaOverlay .limit-pozniej { background: transparent; color: #FFFFFF; box-shadow: none; text-decoration: underline; text-underline-offset: 3px; }
#premiumScianaOverlay .limit-pozniej:hover { color: var(--zolty); box-shadow: none; }
:is(#premiumScianaOverlay, #probneKoniecOverlay) .pk-blad { color: #FFB4B4; }

.pk-sekcja-tytul { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.01em; }
.pk-stan { border-radius: 20px; border-width: 1.5px; border-color: var(--border); }
.pk-plan { border-radius: 20px; border-width: 1.5px; }
.pk-cena { font-family: var(--font-naglowek); }
.pk-wstazka { background: #DB2727; color: #FFFFFF; }
.pk-kafelek { border-radius: 18px; border-width: 1.5px; border-color: var(--border); }
.pk-kafelek > .ico { color: var(--oro); }
.pk-akordeon { border-radius: 16px; border-width: 1.5px; }
.theme-switch-btn { border-radius: 16px; border-width: 1.5px; background: var(--card-bg); }
.theme-switch-btn.active { background: var(--zolty); border-color: var(--zolty); color: var(--granat); }
.settings-title { letter-spacing: -0.01em; }
.settings-title .ico { color: var(--testo); }

#premiumScianaOverlay #scianaIkona { display: none; }
.pk-zaplac { justify-content: flex-start; min-height: 56px; padding: 6px 6px 6px 24px; text-align: left; }
.pk-zaplac > .ico:first-child { display: none; }
.pk-zaplac::after {
  content: ''; flex: none; width: 44px; height: 44px; margin-left: auto; border-radius: 999px;
  background: var(--przycisk-kolko) var(--przycisk-kolko-strzalka) center / 22px 22px no-repeat;
}

.paywall-miekki { background: #17183B; border: 1.5px solid #17183B; border-radius: 22px; color: #FFFFFF; }
:root[data-theme="dark"] .paywall-miekki { border-color: #2E3068; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .paywall-miekki { border-color: #2E3068; } }
.paywall-miekki-tytul { font-family: var(--font-naglowek); font-size: 1.1rem; }
.paywall-miekki-opis { color: #D4D5F0; }
.paywall-miekki .btn-verde { background: var(--zolty); color: var(--granat); }
.paywall-miekki .btn-grigio { background: transparent; color: #FFFFFF; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7); }
.paywall-miekki { align-items: center; }
.paywall-miekki-ilustracja { width: 132px; height: 132px; flex-shrink: 0; margin: -6px -6px -6px -8px; pointer-events: none; }
.paywall-miekki-zdanie { font-weight: 800; font-size: 0.9rem; line-height: 1.4; color: var(--zolty); margin-bottom: 4px; }
@media (max-width: 520px) { .paywall-miekki-ilustracja { width: 96px; height: 96px; } }
@media (max-width: 380px) { .paywall-miekki-ilustracja { display: none; } }
.paczka-pasek-trybu {
  background: #2463E9; color: #FFFFFF; border: none; border-radius: 26px;
  padding: 14px 16px; gap: 10px 14px; font-size: 0.86rem;
  box-shadow: 0 18px 30px -24px rgba(8, 18, 70, 0.9);
}
.paczka-pasek-trybu.ppt-klikalny:hover { border-color: transparent; box-shadow: 0 20px 34px -20px rgba(8, 18, 70, 0.95); }
.ppt-ikona {
  position: relative; width: 56px; height: 56px; border-radius: 50%; border: none;
  background: #FFFFFF; color: #2463E9; font-size: 1.35rem;
}
.ppt-ikona.poziom { background: conic-gradient(var(--zolty) calc(var(--pct, 0) * 1%), rgba(255, 255, 255, 0.32) 0); }
.ppt-ikona.poziom::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: #FFFFFF; }
.ppt-ikona.poziom.zrobiony::before { background: var(--zolty); }
.ppt-ikona.poziom b { position: relative; font-family: var(--font-naglowek); font-weight: 800; font-size: 1.45rem; line-height: 1; color: #17183B; }
.ppt-tytul { color: #EEF3FF; font-weight: 700; display: flex; flex-direction: column; gap: 1px; white-space: normal; }
.ppt-tytul > span { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: #FFF1C7; }
.ppt-tytul b {
  color: #FFFFFF; font-family: var(--font-naglowek); font-size: 1.15rem; letter-spacing: -0.01em; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ppt-meta { color: #EEF3FF; font-size: 0.8rem; margin-top: 6px; }
.ppt-meta b { color: #FFFFFF; }
.ppt-umiesz-tor { width: 76px; height: 7px; background: rgba(255, 255, 255, 0.28); }
.ppt-umiesz-tor i { background: var(--zolty); }
.paczka-pasek-trybu .ppt-akcja, .paczka-pasek-trybu .ppt-wyjscie {
  border: none; background: rgba(255, 255, 255, 0.18); color: #FFFFFF; min-height: 38px; padding: 6px 14px; font-size: 0.82rem;
}
.paczka-pasek-trybu .ppt-akcja:hover, .paczka-pasek-trybu .ppt-wyjscie:hover { background: #FFFFFF; color: #17183B; }
.paczka-pasek-trybu .ppt-akcja.aktywna { background: #FFFFFF; color: #17183B; }
.paczka-pasek-trybu .ppt-akcja.ppt-sciezka { background: var(--zolty); color: #17183B; }
.paczka-pasek-trybu .ppt-akcja.ppt-sciezka:hover { background: #FFFFFF; }
.paczka-pasek-trybu :focus-visible { outline: 3px solid var(--zolty); outline-offset: 2px; }
.ppt-plan { border-top-color: rgba(255, 255, 255, 0.22); color: #EEF3FF; font-size: 0.78rem; padding-top: 10px; gap: 6px; }
.ppt-plan > span:not(.ppt-plan-zasada) { background: rgba(255, 255, 255, 0.14); border: none; color: #FFFFFF; padding: 4px 11px; }
.ppt-plan b { color: #FFFFFF; }
.ppt-plan .ico { color: var(--zolty); }
.ppt-plan-zasada { color: #EEF3FF; font-size: 0.76rem; }
.ppt-plan > span.ppt-cel-gotowy { background: #35A64D; color: #17183B; }
.ppt-plan > span.ppt-cel-gotowy .ico, .ppt-plan > span.ppt-cel-gotowy b { color: #17183B; }
.ppt-plan > span.ppt-premia { background: var(--zolty); color: #17183B; }
.ppt-plan > span.ppt-premia .ico, .ppt-plan > span.ppt-premia b { color: #17183B; }
.paczka-pasek-trybu .ppt-zamek { color: #FFFFFF; }
.paczka-pasek-trybu .ppt-zamek .ico { color: var(--zolty); }
@media (max-width: 720px) {
  .paczka-pasek-trybu { padding: 12px; border-radius: 22px; }
  .ppt-ikona { width: 48px; height: 48px; }
  .ppt-ikona.poziom b { font-size: 1.25rem; }
}

.mow-tworca-btn {
  min-height: 48px; padding: 10px 20px; border: 2px solid var(--oro); border-style: solid;
  background: transparent; color: var(--oro); font-weight: 800; font-size: 0.92rem;
}
.mow-tworca-btn:hover { background: var(--oro); color: var(--na-akcencie); border-style: solid; }
.mow-tworca-btn { border-bottom-width: 2px; box-shadow: none; background-image: none; }
.mow-tworca-btn:active { transform: translateY(1px); box-shadow: none; }
.community-tile { border-radius: 22px; box-shadow: none; }
.community-tile:hover { box-shadow: 0 20px 40px -18px rgba(23, 24, 59, 0.55); }
#communitySearch { border-width: 1.5px; background: var(--card-bg); }
.community-tile-badge { background: rgba(23, 24, 59, 0.78); }
.okno-marki {
  --om-tlo: #FFC83D; --om-tekst: #17183B; --om-tekst2: #2E3055;
  position: relative; display: block; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  width: 100%; max-width: 560px; max-height: min(90vh, 800px);
  background: var(--om-tlo); color: var(--om-tekst); border-radius: 32px; text-align: left;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6);
}
.okno-marki.tlo-zielony   { --om-tlo: #35A64D; --om-tekst2: #17183B; }
.okno-marki.tlo-niebieski { --om-tlo: #2463E9; --om-tekst: #FFFFFF; --om-tekst2: #EEF3FF; }
.okno-marki.tlo-czerwony  { --om-tlo: #DB2727; --om-tekst: #FFFFFF; --om-tekst2: #FFFFFF; }
.okno-marki.tlo-granat    { --om-tlo: #17183B; --om-tekst: #FFFFFF; --om-tekst2: #D4D5F0; }
.om-pasek { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 20px 22px 0; position: relative; z-index: 1; }
.om-pigulka {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; max-width: calc(100% - 60px); padding: 0 16px;
  border-radius: 999px; background: #FFFFFF; color: #17183B; font-size: 0.86rem; font-weight: 800;
}
.om-pigulka .ico { margin: 0; }
.om-zamknij {
  flex: none; margin-left: auto; width: 44px; height: 44px; padding: 0; border: none; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem;
  background: #17183B; color: #FFFFFF; transition: transform 0.15s ease;
}
.om-zamknij .ico { margin: 0; line-height: 1; }
.om-zamknij:hover { transform: scale(1.06); }
.okno-marki.tlo-granat .om-zamknij { background: var(--zolty); color: #17183B; }
.okno-marki :focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
.okno-marki:is(.tlo-zolty, .tlo-zielony) :focus-visible { outline-color: #17183B; }
.om-glowa { position: relative; min-height: 184px; padding: 4px 24px 0; }
.om-ilustracja {
  position: absolute; right: -14px; top: -6px; width: 198px; height: 198px; z-index: 0;
  pointer-events: none; user-select: none;
}
.om-tytul {
  position: relative; z-index: 1; margin: 0; padding-top: 8px; max-width: calc(100% - 186px);
  font-family: var(--font-naglowek); font-weight: 800; font-size: 2.2rem; line-height: 1.04; letter-spacing: -0.02em;
  color: var(--om-tekst); text-wrap: balance; overflow-wrap: anywhere;
}
.om-liczba {
  position: relative; z-index: 1; padding-top: 18px; max-width: calc(100% - 186px);
  font-family: var(--font-naglowek); font-weight: 800; font-size: 5.6rem; line-height: 0.9; letter-spacing: -0.04em;
  color: var(--zolty); font-variant-numeric: tabular-nums;
}
.om-tytul.om-tytul-zdanie { max-width: none; padding-top: 0; font-size: 1.75rem; line-height: 1.12; }
.om-tresc { position: relative; z-index: 1; padding: 16px 24px 24px; }
.om-zdanie { margin: 0 0 8px; font-weight: 800; font-size: 1.08rem; line-height: 1.4; color: var(--zolty); }
.om-opis { margin: 0; font-size: 1rem; font-weight: 500; line-height: 1.6; color: var(--om-tekst); }
.om-opis :is(strong, b) { font-weight: 800; }
.om-podpis { margin: 10px 0 0; font-size: 0.88rem; font-weight: 600; line-height: 1.5; color: var(--om-tekst2); }
.om-akcje { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.om-akcje .btn { margin: 0; }
.okno-marki .btn.om-drugi { background: #FFFFFF; color: #17183B; box-shadow: none; min-height: 52px; margin-top: 0; }
.okno-marki .btn.om-drugi:hover { box-shadow: 0 10px 22px -14px rgba(8, 18, 70, 0.8); }
.okno-marki.tlo-granat .btn.om-drugi {
  background: transparent; color: #FFFFFF; min-height: 44px; text-decoration: underline; text-underline-offset: 3px;
}
.okno-marki.tlo-granat .btn.om-drugi:hover { color: var(--zolty); box-shadow: none; }
.okno-marki .przypomnienie-pasek { height: 12px; margin-top: 18px; border: none; background: rgba(23, 24, 59, 0.14); }
.okno-marki .przypomnienie-fill { background: var(--marka-zielony); }
.okno-marki .przypomnienie-podpis { color: var(--om-tekst2); font-weight: 700; }
#probneKoniecOverlay .probne-koniec-opis { font-size: 1rem; }
.probne-koniec-straty { margin-top: 16px; padding: 16px 18px; border-radius: 22px; background: #24265A; }
#probneKoniecOverlay .probne-koniec-strata-tytul { margin: 0; color: #FFFFFF; font-size: 0.95rem; }
#probneKoniecOverlay .probne-koniec-lista li { color: #FFFFFF; }
#probneKoniecOverlay .probne-koniec-lista .ico { color: var(--zolty); }
#probneKoniecOverlay .probne-koniec-plany { margin: 22px 0 10px; color: #FFFFFF; font-family: var(--font-naglowek); font-size: 1.2rem; line-height: 1.25; }
#probneKoniecOverlay .loader .spinner { border-color: rgba(255, 255, 255, 0.3); border-top-color: var(--zolty); }
@media (max-width: 560px) {
  .okno-marki { border-radius: 28px; max-height: min(92vh, 800px); }
  .om-pasek { min-height: 58px; padding: 16px 16px 0; }
  .om-glowa { min-height: 132px; padding: 2px 18px 0; }
  .om-ilustracja { width: 140px; height: 140px; right: -18px; top: -4px; }
  .om-tytul { font-size: 1.8rem; max-width: calc(100% - 118px); }
  .om-liczba { font-size: 4.4rem; max-width: calc(100% - 118px); }
  .om-tytul.om-tytul-zdanie { font-size: 1.45rem; }
  .om-tresc { padding: 14px 18px 20px; }
}
.onboarding-karta {
  position: relative; overflow-x: hidden; max-width: 600px; padding: 26px 26px 28px; border-radius: 32px;
  background: #2463E9; color: #FFFFFF; text-align: left; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6);
}
.onboarding-karta:has(#onboardingKrok2:not(.hidden)) { background: #FFC83D; color: #17183B; }
.onboarding-ilustracja { position: absolute; right: -18px; top: -6px; width: 188px; height: 188px; pointer-events: none; user-select: none; }
.onboarding-karta .onboarding-krok,
.onboarding-karta h2,
.onboarding-karta h2 + p { position: relative; max-width: calc(100% - 168px); }
.onboarding-karta .onboarding-krok { color: inherit; opacity: 0.92; letter-spacing: 0.08em; }
.onboarding-karta h2 {
  margin: 10px 0 12px; font-family: var(--font-naglowek); font-weight: 800; font-size: 2rem; line-height: 1.05;
  letter-spacing: -0.02em; color: inherit; text-wrap: balance;
}
.onboarding-karta h2 .ico { display: none; }
.onboarding-karta p { color: inherit; font-size: 0.98rem; font-weight: 500; }
.onboarding-karta .onboarding-uwaga { background: #FFF6DC; color: #17183B; border-radius: 16px; padding: 12px 14px; font-size: 0.86rem; }
.onboarding-karta .onboarding-uwaga .ico { color: #8A5A00; }
.onboarding-karta .onboarding-podpowiedz { background: #FFFFFF; color: #17183B; border-radius: 16px; font-size: 0.86rem; }
.onboarding-karta .onboarding-lista { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.onboarding-karta .onboarding-jezyk {
  min-height: 52px; border: none; border-radius: 18px; background: #FFFFFF; color: #17183B; font-size: 0.95rem;
}
.onboarding-karta .onboarding-jezyk:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -14px rgba(8, 18, 70, 0.8); }
.onboarding-karta .onboarding-jezyk.wybrany { background: #17183B; color: #FFFFFF; }
.onboarding-karta .onboarding-jezyk.polecany { box-shadow: 0 0 0 3px #17183B; }
.onboarding-karta .auth-consent { color: #17183B; }
.onboarding-karta .btn-grigio { background: #FFFFFF; color: #17183B; box-shadow: none; }
.onboarding-karta :focus-visible { outline: 3px solid #FFC83D; outline-offset: 2px; }
.onboarding-karta:has(#onboardingKrok2:not(.hidden)) :focus-visible { outline-color: #17183B; }
@media (max-width: 560px) {
  .onboarding-karta { padding: 20px 18px 22px; border-radius: 28px; }
  .onboarding-ilustracja { width: 124px; height: 124px; right: -16px; top: -2px; }
  .onboarding-karta .onboarding-krok, .onboarding-karta h2, .onboarding-karta h2 + p { max-width: calc(100% - 104px); }
  .onboarding-karta h2 { font-size: 1.6rem; }
  .onboarding-karta .onboarding-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.okno-marki.tlo-jasne { --om-tlo: var(--card-bg); --om-tekst: var(--testo); --om-tekst2: var(--grigio); max-width: 480px; }
.okno-marki.tlo-jasne .om-tresc { padding: 26px 26px 24px; }
.okno-marki.tlo-jasne .om-tytul { max-width: none; padding-top: 0; font-size: 1.7rem; line-height: 1.1; margin-bottom: 10px; }
.okno-marki.tlo-jasne .om-opis { font-size: 0.95rem; }
.okno-marki.tlo-jasne :focus-visible { outline-color: var(--fokus); }
.okno-marki.tlo-jasne .btn.om-drugi { background: var(--card-bg); color: var(--testo); box-shadow: inset 0 0 0 1.5px var(--border-2); min-height: 50px; }
.okno-marki.tlo-jasne .btn.om-drugi:hover { box-shadow: inset 0 0 0 1.5px var(--oro); }
.okno-marki.tlo-jasne .btn-rosso { min-height: 54px; margin: 0; }
.okno-marki.tlo-jasne .auth-input { margin: 16px 0 0; }
.okno-marki.tlo-jasne .start-link { margin: 6px auto 0; }
.om-ikona {
  width: 60px; height: 60px; margin: 0 0 16px; border-radius: 20px;
  display: flex; align-items: center; justify-content: center; font-size: 1.7rem; line-height: 1;
  background: #17183B; color: #FFC83D;
}
.om-ikona .ico { margin: 0; }
.om-ikona.ostrzezenie { background: #DB2727; color: #FFFFFF; }
:root[data-theme="dark"] .om-ikona:not(.ostrzezenie) { background: #FFC83D; color: #17183B; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .om-ikona:not(.ostrzezenie) { background: #FFC83D; color: #17183B; } }
.om-flagi { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; min-height: 30px; }
.om-flagi .ico { color: var(--grigio); }
.om-qr { display: block; width: fit-content; min-width: 140px; min-height: 120px; margin: 18px auto 0; padding: 10px; border-radius: 16px; background: #FFFFFF; box-shadow: inset 0 0 0 1.5px var(--border); }
.om-qr-link { text-align: center; word-break: break-all; font-size: 0.75rem; font-weight: 500; margin: 10px 0 0; }
.om-komunikat { font-weight: 600; line-height: 1.7; white-space: pre-line; }
.om-kod { margin: 18px 0 0; }
.om-blad { color: var(--rosso); font-size: 0.82rem; font-weight: 600; min-height: 1.2em; margin: 8px 0 0; text-align: center; }
.om-wskazowka { margin: 4px 0 0; font-size: 0.86rem; font-weight: 500; line-height: 1.5; color: var(--om-tekst); text-align: center; }
.okno-marki.login-okno { max-width: 560px; }
.login-okno .om-pasek { min-height: 150px; padding: 14px 14px 0; align-items: flex-start; background: #FFC83D; overflow: hidden; }
.login-okno .om-pasek .om-pigulka { position: relative; z-index: 1; }
.login-okno .om-zamknij { position: relative; z-index: 1; background: rgba(255, 255, 255, 0.78); color: #17183B; }
.login-okno .om-pasek::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 150px; height: 150px; margin-left: -75px;
  background: url("../../assets/img/ilustracje/kot_karty.webp") center bottom / contain no-repeat; pointer-events: none; }
.okno-marki.login-okno .om-glowa { min-height: 0; padding: 22px 26px 0; }
.okno-marki.login-okno .om-tytul { margin-bottom: 0; }
.okno-marki.login-okno .om-tresc { padding: 12px 26px 26px; }
.okno-marki.login-okno #loginOknoPotwierdz .om-tresc { padding-top: 22px; }
.login-uwaga { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 12px 14px; border-radius: 14px;
  background: #FFF6DC; color: #2A2D4A; font-size: 0.9rem; font-weight: 600; line-height: 1.45; }
.login-uwaga .ico { margin: 2px 0 0; color: #17183B; }
.login-etykieta { display: block; margin: 18px 0 8px; font-weight: 800; font-size: 0.95rem; color: var(--testo); }
.login-pole { display: flex; align-items: center; gap: 2px; height: 54px; padding: 0 14px; border-radius: 14px; background: #FFFFFF;
  box-shadow: inset 0 0 0 2px #C4C8DC; transition: box-shadow 0.15s ease; }
.login-pole:focus-within { box-shadow: inset 0 0 0 2px #2463E9, 0 0 0 3px rgba(36, 99, 233, 0.22); }
.login-pole[data-stan="ok"] { box-shadow: inset 0 0 0 2px #35A64D; }
.login-pole[data-stan="popraw"] { box-shadow: inset 0 0 0 2px #E8A317; }
.login-pole[data-stan="zle"] { box-shadow: inset 0 0 0 2px #DB2727; }
.login-pole > span { font-weight: 800; font-size: 1.15rem; color: #4A5070; }
.login-pole input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent;
  font: 700 1.1rem var(--font-tekst); color: #17183B; }
.login-pole input::placeholder { color: #6B7190; font-weight: 600; }
.login-stan { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 24px; margin: 8px 0 0;
  font-size: 0.92rem; font-weight: 700; line-height: 1.45; }
.login-stan .ok { display: inline-flex; align-items: center; gap: 6px; color: var(--verde); }
.login-stan .zle { color: var(--rosso); }
.login-stan .adres { font-weight: 600; color: var(--grigio); overflow-wrap: anywhere; }
.login-stan .adres b { color: var(--testo); }
.login-propozycja { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1.5px solid #2463E9; background: #EEF3FE;
  color: #17183B; font: 800 0.88rem var(--font-tekst); cursor: pointer; }
.login-propozycja:hover { background: #DCE6FD; }
.login-zasady { margin: 4px 0 0; font-size: 0.86rem; font-weight: 600; line-height: 1.45; color: var(--grigio); }
.login-okno .om-podpis { color: var(--grigio); }
.login-przed-po { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 16px 0 0; }
.login-przed-po > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px 14px; border-radius: 16px;
  background: var(--bg-highlight, #F3F5FB); box-shadow: inset 0 0 0 1.5px var(--border); }
.login-przed-po > .login-po { box-shadow: inset 0 0 0 2px #35A64D; }
.login-przed-po span { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--grigio); }
.login-przed-po b { font-size: 1.05rem; font-weight: 800; color: var(--testo); overflow-wrap: anywhere; }
.login-przed-po small { font-size: 0.82rem; font-weight: 600; color: var(--grigio); overflow-wrap: anywhere; }
.login-skutki { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.login-skutki li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; font-weight: 500; line-height: 1.5; color: var(--testo); }
.login-skutki .ico { flex: none; margin: 3px 0 0; color: var(--grigio); }
.login-skutki b { font-weight: 800; }
@media (max-width: 520px) {
  .login-okno .om-pasek { min-height: 120px; }
  .login-okno .om-pasek::after { width: 118px; height: 118px; margin-left: -59px; }
  .login-przed-po { grid-template-columns: minmax(0, 1fr); }
}
.ustaw-login { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 4px; }
.ustaw-login b { font-size: 1.02rem; font-weight: 800; color: var(--testo); overflow-wrap: anywhere; }
.ustaw-login .btn { width: auto; margin: 0; min-height: 40px; padding: 0 16px; }
#spolecznoscOdOverlay { z-index: 2700; }
.okno-marki .naruszenie-lista { margin-top: 16px; }
.zgl-co { margin: 0 0 4px; font-weight: 700; overflow-wrap: anywhere; }
.zgl-co .zgl-slowo { font-weight: 800; }
.zgl-pole { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 12px; }
.zgl-pole label { font-size: 0.86rem; font-weight: 700; color: var(--om-tekst); }
.okno-marki.tlo-jasne .zgl-pole .auth-input { margin: 0; }
.zgl-pole textarea {
  width: 100%; min-height: 64px; padding: 11px 13px; border-radius: 14px; resize: vertical; box-sizing: border-box;
  border: 1.5px solid var(--border-2); background: var(--crema); color: var(--testo); font: inherit; font-size: 0.92rem;
}
.zgl-pole textarea:focus { outline: none; border-color: var(--oro); }
.zgl-powiadom { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 0; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.zgl-powiadom input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--oro); }
.opinia-ocena { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin: 14px 0 12px; }
.opinia-etykieta { font-size: 0.86rem; font-weight: 700; color: var(--om-tekst); }
.opinia-gwiazdki { display: inline-flex; gap: 4px; }
.opinia-gwiazdka {
  width: 44px; height: 44px; padding: 0; border: none; border-radius: 12px; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.7rem; line-height: 1; color: var(--grigio);
}
.opinia-gwiazdka .ico { margin: 0; }
.opinia-gwiazdka.wybrana { color: #FFC83D; text-shadow: 0 0 1px #17183B, 0 0 1px #17183B; }
.opinia-gwiazdka:hover { background: var(--crema); }
.opinia-licznik { align-self: flex-end; font-size: 0.75rem; font-weight: 600; color: var(--om-tekst2); }
.opinia-nota { margin: 10px 0 0; font-size: 0.8rem; font-weight: 500; line-height: 1.5; color: var(--om-tekst2); }
.ust-opinia-gwiazdki { color: #FFC83D; font-size: 1.1rem; letter-spacing: 2px; }
.ust-opinia-gwiazdki .ico { margin: 0; }
.ust-opinia-tresc { margin: 8px 0; font-size: 0.9rem; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; color: var(--testo); }
.ust-opinia-stan { margin: 0 0 12px; font-size: 0.8rem; font-weight: 600; color: var(--grigio); line-height: 1.5; }
.ust-opinia-akcje { display: flex; flex-wrap: wrap; gap: 8px; }
.ust-opinia-akcje .btn { width: auto; margin: 0; }
.okno-marki .om-cele { margin: 16px 0 0; }
.okno-marki .om-cele .start-cel { border: none; border-radius: 18px; background: #FFFFFF; color: #17183B; }
.okno-marki .om-cele .start-cel:hover { box-shadow: 0 12px 22px -14px rgba(23, 24, 59, 0.6); }
.okno-marki .om-cele .start-cel.wybrany { background: #17183B; color: #FFFFFF; }
.okno-marki .om-cele .start-cel-ptak { color: #FFC83D; }
#streakBigCount { font-family: var(--font-naglowek); font-weight: 800; font-size: 2.2rem; line-height: 1.05; letter-spacing: -0.01em; }
.plan-tytul { font-family: var(--font-naglowek); font-size: 1.5rem; line-height: 1.12; letter-spacing: -0.01em; }
.plan-modal { border-radius: 28px; }

.btn-strzalka.ciasny { min-height: 48px; padding: 4px 4px 4px 18px; font-size: 0.9rem; }
.btn-strzalka.ciasny::after { width: 40px; height: 40px; background-size: 20px 20px; }
.prosba-zgody-okno { max-width: 520px; }
.prosba-zgody-okno:focus { outline: none; }
.prosba-zgody-okno .om-tresc { padding-top: 10px; }
.prosba-zgody-okno.zamrozona :is(.om-akcje .btn, .om-zamknij) { pointer-events: none; }
.prosba-zgody-okno.zamrozona .btn-strzalka { position: relative; overflow: hidden; }
.prosba-zgody-okno.zamrozona .btn-strzalka::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: color-mix(in srgb, var(--om-tlo) 58%, transparent);
  transform-origin: right center; animation: planszaOdmrazanie var(--zamrozenie-ms, 1s) linear forwards;
}
.prosba-zgody-okno.zamrozona .om-drugi { opacity: 0.55; }
.prosba-zgody-okno .btn-strzalka { padding-block: 6px; padding-inline: 24px 6px; }
.prosba-zgody-okno .btn-strzalka::after { margin-left: 0; margin-inline-start: auto; }
.prosba-zgody-okno .om-akcje .om-drugi { min-height: 56px; }
@media (max-width: 560px) { #prosbaZgodyOverlay { padding: 12px; } }
.okno-marki.wroc-okno { display: flex; flex-direction: column; gap: 18px; max-width: 600px; padding: 24px 28px 26px; }
.wroc-okno .om-pasek { min-height: 48px; padding: 0; }
.wroc-okno .om-pigulka { min-height: 38px; padding: 0 14px; font-size: 0.94rem; font-weight: 700; }
.wroc-okno .om-zamknij { width: 48px; height: 48px; }
.wroc-glowa { display: flex; align-items: center; gap: 14px; }
.wroc-napisy { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; }
.wroc-nadtytul { font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--om-tekst); }
.wroc-tytul {
  margin: 0; font-family: var(--font-naglowek); font-weight: 800; font-size: 2.75rem; line-height: 1; letter-spacing: -0.02em;
  color: var(--om-tekst); text-wrap: balance; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.wroc-tytul.dlugi { font-size: 2.1rem; line-height: 1.04; }
.wroc-meta { font-size: 1rem; font-weight: 500; line-height: 1.4; color: var(--om-tekst); }
.wroc-meta[hidden] { display: none; }
.wroc-okladka {
  position: relative; flex: none; box-sizing: border-box; margin-right: 6px;
  border: 6px solid #FFFFFF; border-radius: 22px; background: #FFFFFF;
  box-shadow: 0 10px 24px rgba(23, 24, 59, 0.25); transform: rotate(3deg);
}
.wroc-okladka img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.wroc-okladka.ok-kwadrat { width: 176px; height: 176px; border-radius: 24px; }
.wroc-okladka.ok-kwadrat img { border-radius: 18px; }
.wroc-okladka.ok-kadr { width: 210px; height: 128px; border-radius: 20px; background: #17183B; }
.wroc-okladka.ok-kadr img, .wroc-okladka.ok-mini img { border-radius: 14px; }
.wroc-okladka.ok-mini { width: 196px; height: 124px; border-radius: 20px; background: #E7F4EA; }
.wroc-okladka.ok-kartka {
  width: 168px; height: 176px; border-radius: 20px; padding: 14px 14px 10px;
  display: flex; flex-direction: column; gap: 6px; overflow: hidden;
}
.wroc-okladka.ok-ilustracja { width: 176px; height: 176px; margin-right: -14px; border: 0; background: transparent; box-shadow: none; transform: none; }
.wroc-okladka.ok-ilustracja img { object-fit: contain; border-radius: 0; }
.wroc-okladka-czas {
  position: absolute; right: 8px; bottom: 8px; padding: 3px 8px; border-radius: 8px;
  background: rgba(23, 24, 59, 0.85); color: #FFFFFF; font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.wroc-kartka-tytul { font-family: var(--font-naglowek); font-weight: 800; font-size: 0.88rem; line-height: 1.2; color: #17183B; overflow-wrap: anywhere; }
.wroc-kartka-tekst {
  margin: 0; font-size: 0.7rem; line-height: 1.5; color: #4A4D68; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden;
}
.wroc-postep[hidden] { display: none; }
.wroc-poziomy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wroc-poziomy.kol-1 { grid-template-columns: minmax(0, 1fr); }
.wroc-poziomy.kol-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wroc-poziomy.kol-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wroc-poziomy.kol-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.wroc-poziom {
  display: flex; align-items: center; gap: 8px; min-height: 44px; box-sizing: border-box; padding: 10px 12px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.55); color: #17183B; font-size: 0.94rem; font-weight: 700; line-height: 1.2;
}
.wroc-poziomy.numery .wroc-poziom { justify-content: center; gap: 6px; padding: 10px 0; }
.wroc-poziom.zaliczony { background: #FFFFFF; }
.wroc-poziom.biezacy { background: #17183B; color: #FFFFFF; }
.wroc-kolko {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; box-sizing: border-box;
  border-radius: 999px; border: 2px solid #17183B; font-size: 0.8rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.wroc-poziom.zaliczony .wroc-kolko { border: 0; background: #35A64D; color: #FFFFFF; }
.wroc-poziom.zaliczony .wroc-kolko .ico { margin: 0; font-size: 0.75rem; line-height: 1; }
.wroc-poziom.biezacy .wroc-kolko { border: 0; background: #FFC83D; color: #17183B; }
.wroc-karta { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 18px; background: #FFFFFF; color: #17183B; }
.wroc-karta-wiersz { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.wroc-karta-glowny { font-size: 1rem; font-weight: 700; }
.wroc-karta-boczny { font-size: 0.94rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.wroc-pasek { height: 10px; border-radius: 999px; background: #E3E6F0; overflow: hidden; }
.wroc-pasek-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: #17183B; }
.wroc-okno .wroc-akcje { margin-top: 0; }
.wroc-okno .btn-strzalka.wroc-dalej {
  min-height: 60px; padding: 8px 8px 8px 28px; font-size: 1.12rem; font-weight: 700;
  box-shadow: 0 0 0 3px var(--om-tlo), 0 0 0 5px #17183B;
}
.wroc-okno .btn-strzalka.wroc-dalej:hover { box-shadow: 0 0 0 3px var(--om-tlo), 0 0 0 5px #17183B, 0 12px 24px -14px rgba(8, 18, 70, 0.8); }
.wroc-okno .btn.om-drugi { font-size: 1rem; font-weight: 700; }
@media (max-width: 560px) {
  .okno-marki.wroc-okno { gap: 16px; padding: 16px 18px 20px; }
  .wroc-glowa { flex-direction: column-reverse; align-items: stretch; gap: 16px; }
  .wroc-okladka:is(.ok-kwadrat, .ok-kadr, .ok-mini) { width: 100%; height: 170px; margin: 0; transform: rotate(-1.5deg); }
  .wroc-okladka.ok-kartka { width: 100%; height: auto; max-height: 150px; margin: 0; transform: rotate(-1.5deg); }
  .wroc-okladka.ok-ilustracja { width: 132px; height: 132px; margin: -8px -8px -18px auto; }
  .wroc-tytul { font-size: 2.3rem; }
  .wroc-tytul.dlugi { font-size: 1.8rem; }
  .wroc-poziom { justify-content: center; gap: 6px; padding: 9px 4px; font-size: 0.86rem; }
  .wroc-kolko { width: 22px; height: 22px; }
}

.community-serce { position: relative; }
.community-serce::after { content: ''; position: absolute; inset: -6px; }
.community-tile-overlay {
  background: linear-gradient(0deg, rgba(23, 24, 59, 0.95) 0%, rgba(23, 24, 59, 0.82) 40%, rgba(23, 24, 59, 0.25) 78%, rgba(23, 24, 59, 0) 100%);
}
.community-tile-tytul { font-family: var(--font-naglowek); font-weight: 800; font-size: 0.95rem; color: #FFFFFF; }
.community-tile-meta { color: var(--lawenda); }
.community-tile-overlay .community-btn-zapisz,
.community-tile-overlay .community-btn-przejdz { display: inline-flex; align-items: center; min-height: 30px; padding: 0 13px; font-weight: 800; }
.community-tile-overlay .community-btn-zapisz { background: var(--zolty); color: var(--granat); }
.community-tile-overlay .community-btn-zapisz.zapisane {
  background: rgba(255, 255, 255, 0.18); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7); color: #FFFFFF;
}
.community-tile-overlay .community-btn-przejdz { background: #FFFFFF; color: #17183B; }
.community-tile:not(:is(.tekst, .rozmowa, .paczka)) .community-tile-overlay { padding-bottom: 8px; }
.community-tile:not(:is(.tekst, .rozmowa, .paczka)) .community-tile-overlay {
  -webkit-mask-image: linear-gradient(to bottom, transparent 36px, #000 52px);
  mask-image: linear-gradient(to bottom, transparent 36px, #000 52px);
}
.community-tile:not(:is(.tekst, .rozmowa, .paczka)) .community-tile-overlay :focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }
@media (hover: none) {
  .community-tile[data-typ="foto"]:not(.naruszenie) .community-tile-overlay { display: none; }
  .community-tile:is(.naruszenie, .kandydat) .community-tile-overlay { opacity: 1; }
  .community-tile.kandydat :is(.community-tile-tytul, .community-tile-probka) { display: none; }
  .community-tile:is(.naruszenie, .kandydat) .community-tile-overlay :is(.community-btn-zapisz, .community-btn-przejdz) { min-height: 44px; padding: 0 18px; }
  .community-tile.naruszenie .community-tile-tytul { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .community-tile.naruszenie .community-tile-meta {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 0.72rem;
  }
}

.community-tile .paczka-nazwa { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.08rem; letter-spacing: -0.01em; color: var(--testo); }
.cmty-autor-link { padding-block: 6px; margin-block: -6px; }
@media (pointer: coarse) { .cmty-autor-link { padding-block: 11px; margin-block: -11px; } }
.cmty-zglos { position: relative; }
@media (pointer: coarse) { .cmty-zglos::after { content: ''; position: absolute; inset: -6px 0; } }

.cmty-obserwowani { background: var(--card-bg); border: 1.5px solid var(--border); border-radius: 24px; padding: 16px 18px 18px; margin-bottom: 16px; }
.cmty-obs-tytul { color: var(--testo); font-family: var(--font-naglowek); font-weight: 800; font-size: 1.05rem; }
.cmty-obs-tytul .ico { color: var(--oro); }
.cmty-obs-kafelek { background: var(--crema); border: 1.5px solid var(--border-warm-soft); border-radius: 16px; }
.cmty-obs-kafelek:hover { border-color: var(--oro); }
span.cmty-obs-obraz { background: var(--bg-info-soft); color: var(--testo); }
@media (max-width: 560px) { .cmty-obs-kafelek { flex-basis: 168px; } }
.cmty-polecany {
  background: var(--bg-gold-soft); border: 1.5px solid color-mix(in srgb, var(--zolty) 55%, transparent);
  border-radius: 24px; padding: 16px 18px;
}
.polecany-ikona { background: var(--zolty); color: var(--granat); }
.polecany-powod { color: var(--grigio); font-weight: 700; }
.polecany-tytul { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.05rem; color: var(--testo); }
.wyz-baner { border: 1.5px solid var(--border); border-radius: 24px; box-shadow: none; padding: 18px 20px; }
.wyz-baner::before { display: none; }
.wyz-gora { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: start; }
.wyz-tytul { min-width: 0; font-family: var(--font-naglowek); font-weight: 800; font-size: 1.1rem; }
.wyz-zegar { background: var(--bg-gold-soft); color: var(--testo); }
.wyz-zamknij { width: 40px; height: 40px; background: var(--bg-soft); color: var(--testo); }
.wyz-liczby b { font-family: var(--font-naglowek); }
.wyz-pasek-tlo { background: var(--bg-soft); border: 0; }
.wyz-pasek { background: var(--marka-zielony); }
.wyz-pasek { overflow: hidden; }
@media (max-width: 560px) {
  .wyz-gora { grid-template-columns: minmax(0, 1fr) auto; }
  .wyz-zegar { grid-column: 1; grid-row: 2; justify-self: start; }
}

.cmty-kategorie { width: min(300px, 86vw); max-width: none; border-right: 1.5px solid var(--border); box-shadow: none; }
.cmty-kategorie.otwarty { box-shadow: 18px 0 50px rgba(23, 24, 59, 0.22); }
.cmty-kategorie-tlo { background: rgba(23, 24, 59, 0.4); }
.cmty-kategorie-zamknij {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-soft); color: var(--testo); font-size: 1.1rem;
}
.cmty-kategorie-zamknij:hover { background: var(--border); color: var(--testo); }
.cmty-kategorie-zamknij .ico { margin: 0; }
.cmty-kategoria { min-height: 48px; border-radius: 14px; }
.cmty-kategoria.active { background: var(--bg-highlight); box-shadow: inset 0 0 0 1.5px var(--zolty); color: var(--testo); }
@media (max-width: 720px) {
  .community-board { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .community-full { padding: 12px 12px 50px; }
}
.community-empty {
  max-width: 520px; margin: 24px auto; padding: 28px 24px; text-align: center;
  background: var(--card-bg); border: 1.5px solid var(--border); border-radius: 28px;
  color: var(--grigio); font-weight: 600;
}
.community-empty::before {
  content: ''; display: block; width: 140px; height: 140px; margin: 0 auto 12px;
  background: url('../../assets/img/ilustracje/kot_pytanie.webp') center / contain no-repeat;
}
.cmty-zaproszenie { border: 1.5px dashed var(--border-warm-dash); border-radius: 28px; }
.cmty-zaproszenie.dragover { background: var(--bg-highlight); border-color: var(--oro); }
.cmty-zaproszenie-ikona {
  width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  background: var(--oro); color: var(--na-akcencie); font-size: 1.6rem;
}
.cmty-zaproszenie-ikona .ico { margin: 0; }
.cmty-zaproszenie-tytul { font-family: var(--font-naglowek); }
.cmty-zaproszenie-upusc { color: var(--tekst-neutralny); }
.community-tile.reklama .reklama-etykieta { color: var(--grigio); font-size: 0.68rem; }
.community-full .app-stopka { color: var(--tekst-neutralny); }
.naruszenie-plakietka { background: #DB2727; }
.naruszenie-zgoda, .pochodzenie-zgoda { color: var(--tekst-neutralny); }
#naruszenieLista .naruszenie-poz { border-width: 1.5px; }
#naruszenieLista .naruszenie-poz.wybrany { color: var(--testo); border-color: var(--rosso); }
#naruszenieLista .naruszenie-poz.wybrany .ico { color: var(--rosso); }
.cmty-licznik { background: var(--zolty); color: var(--granat); animation-name: cmtyLicznikPuls; }
@keyframes cmtyLicznikPuls {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--zolty) 55%, transparent); }
  50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--zolty) 0%, transparent); }
}
.cmty-przydzial-notka .ico { color: var(--primary); }

.community-detail-karta.w-siatce { border: 1.5px solid var(--border); border-radius: 24px; box-shadow: 0 24px 48px -28px rgba(23, 24, 59, 0.45); }
.community-detail-wroc {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: #FFFFFF; color: #17183B;
  box-shadow: 0 0 0 1.5px rgba(23, 24, 59, 0.12), 0 4px 12px rgba(23, 24, 59, 0.22);
}
.community-detail-wroc:hover { background: #FFFFFF; }
.community-detail-wroc .ico { margin: 0; }
.community-akcja {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(23, 24, 59, 0.72); border: 1.5px solid rgba(255, 255, 255, 0.34); color: #FFFFFF;
}
.community-akcja .ico { margin: 0; }
.community-akcja:hover { background: rgba(23, 24, 59, 0.9); border-color: #FFFFFF; }
.community-akcja.glowna, .community-akcja.glowna:hover { background: var(--zolty); border-color: var(--zolty); color: var(--granat); }
.community-akcja.glowna:hover { filter: brightness(1.05); border-color: #FFFFFF; }
.community-akcja.polubione, .community-akcja.polubione:hover { background: #FFFFFF; border-color: #FFFFFF; color: #DB2727; }
.community-akcja:is(.zapisane-akcja, .aktywna), .community-akcja:is(.zapisane-akcja, .aktywna):hover { background: #FFFFFF; border-color: #FFFFFF; color: #17183B; }
.community-akcja:is(.polubione, .zapisane-akcja, .aktywna) { box-shadow: 0 0 0 1.5px rgba(23, 24, 59, 0.12), 0 4px 12px rgba(23, 24, 59, 0.22); }
.community-detail-karta.paczka .community-akcja.polubione,
.community-detail-karta.paczka .community-akcja.polubione:hover {
  background: var(--card-bg); border-color: var(--marka-czerwony); color: var(--marka-czerwony); box-shadow: none;
}
.community-detail-karta.paczka .community-akcja:is(.zapisane-akcja, .aktywna),
.community-detail-karta.paczka .community-akcja:is(.zapisane-akcja, .aktywna):hover {
  background: var(--zolty); border-color: var(--zolty); color: var(--granat); box-shadow: none;
}
.community-detail-akcje-gora :focus-visible, .community-detail-wroc:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }
.community-detail-karta.paczka :is(.community-detail-akcje-gora :focus-visible, .community-detail-wroc:focus-visible) { outline-color: var(--oro); }
.cmty-film-graj::before { background: rgba(23, 24, 59, 0.72); }
.community-detail-karta.paczka.utwor .community-detail-obraz:has(> #communityDetailZdania:not(.hidden)) {
  display: grid; grid-template-columns: minmax(0, 760px); justify-content: center; align-content: start; row-gap: 18px;
}
.community-detail-karta.paczka.utwor .community-detail-obraz:has(> #communityDetailZdania:not(.hidden)) > :is(img, .cmty-nalepki) { grid-area: 1 / 1; }
.community-detail-karta.paczka.utwor .community-detail-obraz:has(> #communityDetailZdania:not(.hidden)) > img {
  align-self: stretch; height: 100%; min-height: 0; max-width: none; max-height: none; margin: 0;
  aspect-ratio: 2 / 1; object-position: 50% 35%;
}
.community-detail-karta.paczka.utwor .community-detail-obraz:has(> #communityDetailZdania:not(.hidden)) > .cmty-nalepki {
  position: relative; inset: auto; align-self: end; justify-self: start;
}
.community-detail-karta.paczka.utwor .community-detail-obraz:has(> #communityDetailZdania:not(.hidden)) > #communityDetailZdania {
  grid-area: 2 / 1; width: auto; max-height: none; overflow: visible; padding-right: 0;
}
.community-detail-panel h2 { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.35rem; letter-spacing: -0.01em; }
.community-ai-nota { color: var(--tekst-neutralny); font-size: 0.72rem; }
.community-slowo-chip { border-width: 1.5px; }
.community-slowo-chip:not(.juz-mam):not(.community-chip-akcja) { border-color: var(--border); }
.community-slowo-chip.juz-mam { border-width: 1.5px; }
.community-chip-akcja { position: relative; min-height: 36px; }
@media (pointer: coarse) { .community-chip-akcja::after { content: ''; position: absolute; inset: -4px 0; } }
.community-komentarze-naglowek { font-family: var(--font-naglowek); font-weight: 800; font-size: 1rem; }
.community-komentarz-kiedy, .community-komentarze-pusto, .community-komentarz-licznik { color: var(--tekst-neutralny); }
.community-komentarz-akcje { float: inline-end; margin: -7px 0 0; margin-inline-start: 6px; }
.community-komentarz-akcje button {
  min-height: 32px; padding: 0 8px; border-radius: 999px; color: var(--tekst-neutralny);
}
.community-komentarz-akcje button:hover { background: var(--bg-error-soft); color: var(--testo); }
@media (pointer: coarse) {
  .community-komentarz-akcje { margin-top: -13px; }
  .community-komentarz-akcje button { min-height: 44px; min-width: 44px; }
}
.community-komentarz-form textarea { min-height: 44px; padding: 0 16px; background: var(--card-bg); border: 1.5px solid var(--border-2); }
.community-komentarz-form textarea:focus { border-color: var(--oro); }
.community-komentarz-form button { width: 44px; height: 44px; }
.community-detail-panel .cmty-zglos { min-height: 40px; font-size: 0.78rem; font-weight: 700; color: var(--tekst-neutralny); border-radius: 999px; }
.community-detail-panel .cmty-zglos:hover { background: var(--bg-error-soft); color: var(--testo); }
.community-detail-panel .cmty-zglos:hover .ico { color: var(--rosso); }
.community-detail-usun { min-height: 44px; border-radius: 999px; border-width: 1.5px; }
.community-detail-usun:hover { background: var(--rosso); color: var(--na-akcencie); }

#communitySearch { height: 40px; padding: 0 40px 0 36px; border: 1.5px solid var(--border); }
#communitySearch::placeholder { color: var(--tekst-neutralny); }
.community-search-ico { left: 14px; color: var(--grigio); opacity: 1; }
.community-search-clear {
  right: 4px; width: 32px; height: 32px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.community-search-clear:hover { background: var(--bg-soft); color: var(--testo); }
.community-search-clear .ico { margin: 0; }
@media (pointer: coarse) { .community-search-clear { right: 2px; width: 40px; height: 40px; } }
.community-aparat, .community-kafelki {
  width: 40px; height: 40px; border: none; border-radius: 50%;
  background: var(--card-bg); box-shadow: 0 0 0 1.5px var(--border); color: var(--testo);
}
.community-kafelki { font-size: 0.95rem; }
.community-aparat:hover, .community-kafelki:hover { background: var(--card-bg); color: var(--testo); box-shadow: 0 0 0 1.5px var(--oro); }
.community-kafelki.otwarty { background: var(--bg-highlight); color: var(--testo); box-shadow: 0 0 0 1.5px var(--oro); }
.community-chip, .community-chip.active {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: none;
  background: var(--card-bg); box-shadow: 0 0 0 1.5px var(--border); color: var(--testo);
  font-size: 0.82rem; font-weight: 700;
}
.community-chip .ico { color: var(--grigio); }
.community-chip { max-width: 100%; }
.community-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#communitySearch:placeholder-shown { padding-right: 12px; }
.community-chip:hover { background: var(--card-bg); color: var(--testo); box-shadow: 0 0 0 1.5px var(--oro); }
.community-topbar .header-lang { position: relative; }
.community-topbar .header-lang-caret::before { content: ''; position: absolute; inset: 0; border-radius: 999px; }
body.tryb-goscia .gosc-cta { min-height: 40px; }
@media (max-width: 768px) {
  #communitySearch { height: 44px; }
  .community-topbar :is(.community-aparat, .community-kafelki, .header-theme) { width: 44px; height: 44px; }
  .community-topbar :is(.community-chip, .header-lang) { min-height: 44px; height: auto; }
  body.tryb-goscia .gosc-cta { min-height: 44px; }
  .community-topbar .mode-tabs { padding: 2px; }
  .community-topbar .mode-tab { min-height: 40px; padding-block: 0; }
  .community-topbar .header-konto { padding-block: 2px; }
  .cmty-nawigacja .mode-tab #modeFiszkiLabel {
    display: inline-block; max-width: 8ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
  }
}

.profil-galeria-wiecej {
  min-height: 44px; border: none; border-radius: 999px;
  background: var(--card-bg); box-shadow: inset 0 0 0 1.5px var(--border-2); color: var(--testo);
}
.profil-galeria-wiecej:hover:not(:disabled) { background: var(--card-bg); box-shadow: inset 0 0 0 1.5px var(--oro); color: var(--testo); }
.profil-zapelnienie { background: rgba(23, 24, 59, 0.5); }
.tw-odznaka.szary { --tw-tlo: var(--bg-soft); --tw-ramka: var(--border-2); --tw-tekst: var(--grigio); }
.cmty-wgraj-info { background: var(--bg-info-soft); border: 0; border-radius: 14px; color: var(--muted-dark); }
.cmty-wgraj-info .ico { color: var(--primary); }
#cmtyUploadOverlay .wordmap-header { flex-wrap: nowrap; align-items: flex-start; }
#cmtyUploadOverlay .wordmap-title { min-width: 0; }
#cmtyUploadOverlay .wordmap-close { flex-shrink: 0; }
.community-detail { background: var(--zaslona); }
.community-upload-karta { border-radius: 28px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.55); }
.community-detail-close {
  top: 16px; right: 16px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-soft); color: var(--testo); font-size: 1.1rem;
}
.community-detail-close:hover { background: var(--border); }
.community-detail-close .ico { margin: 0; }
.community-upload-pole input, .community-upload-pole select, .cmty-dodaj-slowo input { border-width: 1.5px; border-radius: 14px; }
.cmty-zmien-plik, #cmtyAutoBtn, .cmty-dodaj-slowo button { border-width: 1.5px; }
.cmty-slowo-usun { width: 32px; height: 32px; }
@media (pointer: coarse) { .cmty-slowo-usun { width: 40px; height: 40px; } }

#adminOverlay.wordmap-overlay { padding: 0; }
.admin-shell { width: 100%; min-width: 0; height: 100vh; height: 100dvh; font-family: var(--font-tekst); position: relative; }
.admin-topbar { background: #17183B; gap: 10px 14px; }
.admin-topbar h2 { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.05rem; letter-spacing: 0; color: #FFFFFF; }
.admin-menu-btn {
  display: none; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,0.22); border-radius: 999px; background: rgba(255,255,255,0.08);
  color: #FFFFFF; cursor: pointer; font-size: 1rem;
}
.admin-szukaj {
  display: inline-flex; align-items: center; gap: 8px; min-width: 230px;
  border: 1.5px solid rgba(255,255,255,0.22); border-radius: 999px; background: rgba(255,255,255,0.08);
  color: #F3F5FB; padding: 6px 8px 6px 14px; font-family: var(--font-tekst); font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.admin-szukaj span { flex: 1; text-align: left; }
.admin-szukaj:hover, .admin-menu-btn:hover { background: rgba(255,255,255,0.16); }
.admin-szukaj kbd, .admin-paleta kbd {
  font-family: var(--font-tekst); font-size: 0.66rem; font-weight: 800; padding: 2px 8px; border-radius: 999px;
  background: rgba(255,255,255,0.16); color: inherit; white-space: nowrap;
}
.admin-szukaj:focus-visible, .admin-menu-btn:focus-visible, .admin-topbar .wordmap-close:focus-visible { outline: 2px solid #FFC83D; outline-offset: 2px; }

.admin-uklad { flex: 1; min-height: 0; display: flex; position: relative; }
.admin-nav {
  width: 240px; flex-shrink: 0; overflow-y: auto; padding: 16px 10px 28px;
  background: var(--bianco); border-right: 1.5px solid var(--border);
  display: flex; flex-direction: column; gap: 14px;
}
.admin-nav-grupa { display: flex; flex-direction: column; gap: 2px; }
.admin-nav-naglowek {
  font-family: var(--font-naglowek); font-weight: 800; font-size: 0.66rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--grigio); padding: 0 12px 4px;
}
.admin-tab {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px;
  border: none; background: transparent; padding: 7px 12px; border-radius: 999px;
  font-family: var(--font-tekst); font-size: 0.86rem; font-weight: 700; color: var(--testo);
  cursor: pointer; text-align: left; transition: background 0.15s ease, color 0.15s ease;
}
.admin-tab .ico { width: 18px; text-align: center; color: var(--grigio); flex-shrink: 0; }
.admin-tab:hover { background: var(--bg-soft); }
.admin-tab.active { background: var(--oro); color: var(--na-akcencie); }
.admin-tab.active .ico { color: var(--na-akcencie); }
.admin-tab:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.admin-tab-nazwa { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-tab-licznik {
  min-width: 22px; padding: 1px 7px; border-radius: 999px; text-align: center;
  font-size: 0.7rem; font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--marka-czerwony); color: #FFFFFF;
}
.admin-tab-licznik:empty { display: none; }
.admin-tab-licznik.cichy { background: var(--bg-soft); color: var(--grigio); }
.admin-nav-zaslona { display: none; }

.admin-body { flex: 1; min-width: 0; overflow-y: auto; padding: 20px 24px 40px; }
.admin-glowa { margin: 0 0 16px; }
.admin-glowa-grupa {
  font-family: var(--font-naglowek); font-weight: 800; font-size: 0.68rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--grigio);
}
.admin-glowa h2 { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.55rem; line-height: 1.15; margin: 2px 0 4px; color: var(--testo); }
.admin-glowa p { margin: 0; max-width: 72ch; font-size: 0.88rem; line-height: 1.5; color: var(--grigio); }
.admin-card { border: 1.5px solid var(--border); border-radius: 16px; }
.admin-card h3 { font-family: var(--font-naglowek); letter-spacing: 0.05em; }
.admin-card.admin-karta-blysk { box-shadow: 0 0 0 3px var(--zolty); transition: box-shadow 0.3s ease; }

.adz-lista { display: flex; flex-direction: column; gap: 8px; }
.adz-poz {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 14px;
  border: 1.5px solid var(--border); border-left: 5px solid var(--border); border-radius: 14px;
  background: var(--bianco); color: var(--testo); font-family: var(--font-tekst); cursor: pointer;
}
button.adz-poz:hover { box-shadow: var(--shadow-hover); }
button.adz-poz:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.adz-poz.pilne { border-left-color: var(--marka-czerwony); }
.adz-poz.uwaga { border-left-color: var(--zolty); }
.adz-poz.info  { border-left-color: var(--marka-niebieski); }
.adz-poz.statyczna { cursor: default; }
.adz-ile {
  min-width: 46px; text-align: center; font-family: var(--font-naglowek); font-weight: 800; font-size: 1.35rem;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.adz-ile .ico { font-size: 1.15rem; }
.adz-poz.pilne .adz-ile { color: var(--marka-czerwony); }
.adz-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.adz-tytul { font-weight: 800; font-size: 0.9rem; }
.adz-opis { font-size: 0.78rem; line-height: 1.45; color: var(--grigio); overflow-wrap: anywhere; }
.adz-idz { font-size: 0.76rem; font-weight: 800; color: var(--grigio); white-space: nowrap; }
.adz-pusto { padding: 14px 16px; border-radius: 14px; background: var(--bg-success-soft); color: var(--verde); font-weight: 700; }
.adz-spokoj { margin-top: 10px; font-size: 0.76rem; color: var(--grigio); }
.adz-spokoj:empty { display: none; }

.admin-paleta {
  position: absolute; inset: 0; z-index: 40; display: flex; align-items: flex-start; justify-content: center;
  padding: 10vh 16px 16px; background: rgba(14, 15, 38, 0.55);
}
.admin-paleta.hidden { display: none; }
.admin-paleta-okno {
  width: min(640px, 100%); max-height: 76vh; display: flex; flex-direction: column; overflow: hidden;
  background: var(--bianco); border: 1.5px solid var(--border); border-radius: 20px;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.5);
}
.admin-paleta-pole { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1.5px solid var(--border); color: var(--grigio); }
.admin-paleta-pole input {
  flex: 1; min-width: 0; border: none; background: transparent; outline: none;
  font-family: var(--font-tekst); font-size: 1rem; font-weight: 600; color: var(--testo);
}
.admin-paleta-pole kbd { background: var(--bg-soft); color: var(--grigio); }
.admin-paleta-lista { overflow-y: auto; padding: 6px; }
.admin-paleta-poz {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: none; border-radius: 12px;
  background: transparent; color: var(--testo); text-align: left; cursor: pointer;
  font-family: var(--font-tekst); font-size: 0.9rem; font-weight: 600;
}
.admin-paleta-poz .ico { width: 18px; text-align: center; color: var(--grigio); flex-shrink: 0; }
.admin-paleta-poz .app-nazwa { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-paleta-poz .app-gdzie { margin-left: auto; padding-left: 10px; font-size: 0.74rem; font-weight: 600; color: var(--grigio); white-space: nowrap; }
.admin-paleta-poz.wybrany { background: var(--oro); color: var(--na-akcencie); }
.admin-paleta-poz.wybrany .ico, .admin-paleta-poz.wybrany .app-gdzie { color: var(--na-akcencie); }
.admin-paleta-pusto { padding: 16px; font-size: 0.86rem; color: var(--grigio); }
.admin-paleta-stopka { padding: 8px 16px; border-top: 1.5px solid var(--border); font-size: 0.72rem; color: var(--grigio); }

@media (max-width: 860px) {
  .admin-menu-btn { display: inline-flex; }
  .admin-topbar { padding: 10px 16px; }
  .admin-topbar h2 { font-size: 0.95rem; }
  .admin-topbar .admin-env { display: none; }
  .admin-szukaj { min-width: 0; padding: 8px 12px; }
  .admin-szukaj span, .admin-szukaj kbd { display: none; }
  .admin-topbar .wordmap-close { order: 5; }
  .admin-daterange { order: 10; width: 100%; }
  .admin-nav {
    position: absolute; top: 0; bottom: 0; left: 0; z-index: 20; width: min(280px, 84vw);
    transform: translateX(-105%); transition: transform 0.22s ease; box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.45);
  }
  .admin-shell.nav-otwarta .admin-nav { transform: none; }
  .admin-shell.nav-otwarta .admin-nav-zaslona { display: block; position: absolute; inset: 0; z-index: 19; background: rgba(14, 15, 38, 0.45); }
  .admin-body { padding: 14px 16px 32px; }
  .admin-glowa h2 { font-size: 1.3rem; }
  .adz-idz { display: none; }
  .adz-poz { padding: 10px 12px; gap: 10px; }
  .admin-paleta { padding-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .admin-nav, .admin-tab, .admin-card.admin-karta-blysk { transition: none; }
}

.admin-shell .admin-hint { font-size: 0.8rem; line-height: 1.5; color: var(--grigio); margin: 0 0 10px; }
.admin-card h3 .admin-hint {
  margin: 0 0 0 6px; font-family: var(--font-tekst); font-size: 0.74rem; font-weight: 600;
  text-transform: none; letter-spacing: 0; color: var(--grigio);
}
.admin-card h3 .admin-hint:empty { display: none; }
.admin-podsumowanie { font-size: 0.78rem; font-weight: 800; color: var(--muted-dark); font-variant-numeric: tabular-nums; }
.admin-etykieta { font-size: 0.78rem; font-weight: 800; color: var(--muted-dark); }
.admin-etykieta-pole { display: inline-flex; align-items: center; gap: 8px; }
.admin-blad-linia { font-size: 0.78rem; font-weight: 700; color: var(--rosso); }
.admin-blad-linia:empty { display: none; }
.admin-daterange-strzalka { color: #94A3B8; margin: 0; }
.admin-glowa-stan {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 10px;
  font-size: 0.78rem; color: var(--grigio); font-variant-numeric: tabular-nums;
}
#adminGlowaOkres { font-weight: 800; color: var(--muted-dark); }
#adminGlowaOkres:empty, #adminGlowaKiedy:empty { display: none; }
.admin-glowa-stan .admin-btn[hidden] { display: none; }
.kpi-sekcje { margin-bottom: 14px; }
.kpi-sekcje .kpi-grid { margin-bottom: 10px; }
.kpi-naglowek {
  font-family: var(--font-naglowek); font-weight: 800; font-size: 0.7rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--grigio); margin: 4px 0 6px;
}
.kpi-naglowek span { font-family: var(--font-tekst); font-weight: 600; letter-spacing: 0; text-transform: none; margin-left: 6px; }
.admin-shell .kpi { border: 1.5px solid var(--border); border-left: 4px solid var(--marka-niebieski); border-radius: 12px; }
.admin-shell .kpi.zysk { border-left-color: var(--marka-zielony); }
.admin-shell .kpi.zysk .kpi-value { color: var(--verde); }
.admin-shell .kpi.uwaga { border-left-color: var(--zolty); }
.admin-shell .kpi.zle { border-left-color: var(--marka-czerwony); }
.admin-shell .kpi .kpi-sub { color: var(--grigio); line-height: 1.4; }
.admin-shell .wykres-siatka { stroke: var(--border); }
.admin-shell .wykres-os { fill: var(--grigio); }
.admin-shell .chart-legend { color: var(--muted-dark); }
.rozbicie { margin-bottom: 14px; }
.rozbicie-tytul { font-size: 0.7rem; font-weight: 800; color: var(--grigio); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.admin-shell .bar-row { grid-template-columns: minmax(92px, max-content) 1fr 54px; }
.admin-shell .bar-nazwa { font-weight: 700; }
.admin-shell .bar-fill { background: var(--marka-niebieski); }
.admin-shell .dt td.mono { white-space: nowrap; }
.admin-shell .dt .dt-podpis { font-size: 0.72rem; color: var(--grigio); white-space: normal; }
.admin-shell .dt .dt-kod { color: var(--testo); font-size: 0.82rem; }
.admin-shell .dt .syn-odrz { font-size: 0.72rem; font-weight: 400; opacity: 0.7; }
.admin-shell .dt-wiecej { margin: 8px 0 0; }
.admin-shell .dt th { color: var(--muted-dark); }
@media (max-width: 860px) {
  .admin-glowa-stan { margin-top: 8px; }
  .admin-shell .kpi .kpi-value { font-size: 1.3rem; }
}

.admin-shell {
  --wyk-1: #2a78d6; --wyk-2: #eb6834; --wyk-3: #1baf7a; --wyk-4: #eda100; --wyk-5: #e87ba4; --wyk-6: #008300; --wyk-inne: #94A3B8;
  --wyk-7: #6250d6; --wyk-8: #e34948;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .admin-shell {
    --wyk-1: #3987e5; --wyk-2: #d95926; --wyk-3: #199e70; --wyk-4: #c98500; --wyk-5: #d55181; --wyk-6: #008300; --wyk-inne: #7C82A8;
    --wyk-7: #9085e9; --wyk-8: #e66767;
  }
}
:root[data-theme="dark"] .admin-shell {
  --wyk-1: #3987e5; --wyk-2: #d95926; --wyk-3: #199e70; --wyk-4: #c98500; --wyk-5: #d55181; --wyk-6: #008300; --wyk-inne: #7C82A8;
  --wyk-7: #9085e9; --wyk-8: #e66767;
}
.wl { position: relative; }
.wl-przewijak { overflow-x: auto; }
.wl-svg { display: block; width: 100%; min-width: 560px; height: auto; touch-action: pan-x pan-y; }
.wl-cel { fill: transparent; cursor: crosshair; }
.wl-linia { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.wl-wypelnienie, .wl-warstwa { pointer-events: none; }
.wl-warstwa { stroke: var(--bianco); stroke-width: 1.5; stroke-linejoin: round; }
.wl-kropka { stroke: var(--bianco); stroke-width: 2; pointer-events: none; }
.wl-prowadnica { stroke: var(--grigio); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0; pointer-events: none; }
.wl-kropka-akt { stroke: var(--bianco); stroke-width: 2.5; opacity: 0; pointer-events: none; }
.wl-kol.aktywna .wl-prowadnica, .wl-kol.aktywna .wl-kropka-akt { opacity: 1; }
.wl-dymek {
  position: absolute; z-index: 3; pointer-events: none; min-width: 150px; max-width: min(300px, 80%);
  padding: 9px 12px; border-radius: 12px; background: var(--bianco); border: 1.5px solid var(--border);
  box-shadow: 0 14px 32px -14px rgba(14, 15, 38, 0.45); color: var(--testo);
  font-size: 0.78rem; line-height: 1.45; font-variant-numeric: tabular-nums;
}
.wl-dymek[hidden] { display: none; }
.wl-dymek b { display: block; font-family: var(--font-naglowek); font-weight: 800; font-size: 0.82rem; }
.wl-dymek > span { display: block; color: var(--muted-dark); font-weight: 700; }
.wl-tabela { margin-top: 6px; font-size: 0.76rem; }
.wl-tabela summary { cursor: pointer; color: var(--grigio); font-weight: 700; width: max-content; }
.wl-tabela .dt-scroll { margin-top: 8px; max-height: 260px; }
.nkc-pasek { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 2px 0 10px; }
.nkc-wymiary { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.nkc-wymiar {
  border: 1.5px solid var(--border-2); background: var(--bianco); color: var(--testo); border-radius: 999px;
  padding: 5px 12px; font: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer;
}
.nkc-wymiar.aktywny { background: var(--oro); border-color: var(--oro); color: var(--na-akcencie); }
.nkc-wymiar:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.op-adm-pasek { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 12px; font-size: 0.86rem; }
.op-adm-pasek b { font-variant-numeric: tabular-nums; }
.op-adm-filtry { margin-bottom: 12px; }
.op-adm-poz { padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--border-2); margin-bottom: 10px; background: var(--bianco); }
.op-adm-poz.usunieta { opacity: 0.72; border-style: dashed; }
.op-adm-glowa { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 0.8rem; color: var(--grigio); }
.op-adm-glowa strong { color: var(--testo); font-size: 0.9rem; }
.op-adm-gw { color: #E0A400; letter-spacing: 1px; font-size: 0.95rem; }
.op-adm-tresc { margin: 8px 0 6px; font-size: 0.9rem; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; color: var(--testo); }
.op-adm-tresc.pusta { color: var(--grigio); font-style: italic; }
.op-adm-podpis { font-size: 0.8rem; color: var(--grigio); }
.op-adm-akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.op-adm-akcje select { width: auto; min-width: 240px; margin: 0; }
.op-adm-wiecej { display: flex; justify-content: center; margin-top: 6px; }
.nkc-legenda { margin: 6px 0 2px; gap: 8px 16px; }
.nkc-legenda span { display: inline-flex; align-items: center; gap: 5px; }
.nkc-legenda span i { margin-right: 0; }
.nkc-legenda b, .nkc-flaga b { font-variant-numeric: tabular-nums; }
.nkc-flaga { display: inline-flex; align-items: center; gap: 3px; margin-right: 8px; white-space: nowrap; }
.nkc-flaga .flag-icon, .nkc-legenda .flag-icon, .nkc-jezyk .flag-icon, .nkc-para .flag-icon { border-radius: 2px; flex: none; }
.nkc-d-wiersz { display: grid; grid-template-columns: 70px 1fr; align-items: start; margin-top: 4px; }
.nkc-d-lista { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; }
.nkc-d-co { padding-top: 1px; font-size: 0.68rem; font-weight: 800; color: var(--grigio); text-transform: uppercase; letter-spacing: 0.04em; }
.nkc-inne { display: inline-flex; align-items: center; margin-left: 4px; padding-left: 6px; border-left: 1px solid var(--border); }
.nkc-inne .nkc-flaga { margin-right: 6px; }
.nkc-zrodlo { white-space: nowrap; }
.nkc-d-stopka { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); color: var(--muted-dark); font-size: 0.74rem; }
.nkc-rozklady { margin-top: 16px; }
.nkc-para { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.nkc-para .ico { color: var(--grigio); font-size: 0.85rem; }
.admin-shell .nkc-rozklady .bar-row { grid-template-columns: minmax(150px, max-content) 1fr 54px; }
.nkc-jezyk { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.nkc-konto { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.nkc-konto .leaderboard-avatar-img, .nkc-konto .leaderboard-avatar-fallback { width: 30px; height: 30px; flex: none; }
.nkc-slowka { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
.nkc-slowka-pasek { width: 54px; height: 6px; border-radius: 3px; background: var(--bg-soft); overflow: hidden; }
.nkc-slowka-pasek i { display: block; height: 100%; border-radius: 3px; background: var(--marka-niebieski); }
.pill.admin { background: var(--oro); color: var(--na-akcencie); }
.pill .ico { font-size: 0.7rem; margin-right: 2px; }
.admin-uprawnienia { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.dt th .dt-sort {
  display: inline-flex; align-items: center; gap: 2px; padding: 0; border: none; background: none; cursor: pointer;
  font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit;
}
.dt th .dt-sort .ico { opacity: 0.35; font-size: 0.8rem; }
.dt th .dt-sort.aktywny { color: var(--testo); }
.dt th .dt-sort.aktywny .ico { opacity: 1; }
.dt th .dt-sort:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; border-radius: 4px; }
.dt th.num .dt-sort { flex-direction: row-reverse; }
.admin-user-stats .uwaga { color: var(--rosso); font-weight: 800; }

.konta-pasek #adminUserSearch { flex: 1 1 220px; min-width: 0; max-width: 340px; }
.konta-pasek .nkc-wymiary { margin-left: auto; }
#adminUserStats { margin: 0 0 10px; line-height: 1.5; }
.konta-scroll { max-height: min(72vh, 760px); transition: opacity 0.15s; }
.konta-scroll.laduje { opacity: 0.6; }
.konta-tabela th, .konta-tabela td { padding-left: 7px; padding-right: 7px; }
.konta-tabela th.konta-zawijaj { white-space: normal; min-width: 64px; line-height: 1.2; }
.konta-tabela td.konta-data { line-height: 1.3; }
.konta-tabela td.konta-data > span { display: block; }
.konta-tabela td.konta-data .dt-podpis { font-size: 0.7rem; }
.konta-tabela td.konta-data .konta-urzadzenie { font-family: inherit; white-space: nowrap; }
.konta-tabela td.nkc-zrodlo .dt-podpis { display: block; }
.konta-tabela .konta-nigdy { color: var(--muted-light); }
.konta-tabela .nkc-slowka-pasek { width: 44px; }
.konta-tabela .nkc-jezyk { gap: 5px; }
.konta-tabela .nkc-konto { min-width: 0; gap: 8px; }
.konta-tabela .konta-kto { min-width: 0; max-width: 160px; }
.konta-tabela td.nkc-zrodlo { white-space: normal; min-width: 64px; line-height: 1.25; }
.konta-tabela .konta-kto strong, .konta-tabela .konta-kto .dt-podpis { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.konta-tabela .konta-mail .pill { margin: 0 4px 0 0; }
.konta-tabela th:first-child, .konta-tabela td:first-child { position: sticky; left: 0; background: var(--bianco); }
.konta-tabela th:first-child { z-index: 2; background: var(--bg-soft); }
.konta-tabela td:first-child { z-index: 1; box-shadow: 1px 0 0 var(--bg-soft); }
.konta-tabela tbody tr:hover td:first-child { background: var(--crema); }
.konta-tabela .konta-akcje { white-space: nowrap; text-align: right; }
.konta-tabela .konta-akcje .admin-btn + .admin-btn { margin-left: 4px; }
.konta-tabela tr.konto-usuniete td { color: var(--grigio); }
.konta-tabela tr.konto-usuniete .leaderboard-avatar-fallback { filter: grayscale(1); opacity: 0.6; }
.konta-tabela .konta-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.konta-wiecej { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (max-width: 640px) {
  .konta-pasek .nkc-wymiary { margin-left: 0; }
  .konta-pasek #adminUserSearch { max-width: none; }
  .konta-tabela .konta-kto { max-width: 112px; }
  .konta-tabela .nkc-konto .leaderboard-avatar-img, .konta-tabela .nkc-konto .leaderboard-avatar-fallback { width: 24px; height: 24px; font-size: 0.7rem; }
}

.kc-pasek { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 2px 0 10px; }
.kc-grupa { display: inline-flex; align-items: center; gap: 8px; }
.kc-pasek .nkc-wymiar:disabled { opacity: 0.45; cursor: not-allowed; }
.kc-pasek .admin-hint { margin: 0; flex-basis: 100%; }
.kc-wykres { border-radius: 10px; }
.kc-wykres:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }
.kc-linia { transition: opacity 0.15s ease; }
.kc-wykres.podswietla .kc-linia:not(.wyroznij) { opacity: 0.16; }
.kc-dymek { min-width: 220px; max-width: min(340px, 88%); }
.kc-d-wiersz { display: grid; grid-template-columns: 26px 1fr; column-gap: 6px; margin-top: 6px; }
.kc-d-znak { display: block; margin-top: 4px; }
.wl-kropka.kc-niepelny, .wl-kropka-akt.kc-niepelny { fill: var(--bianco); stroke-width: 2.2; }
.kc-konta-pole { fill-opacity: 0.07; pointer-events: none; }
.admin-shell .kc-os-podpis { font-weight: 700; }
.kc-objasnienie { margin: 4px 0 0; display: flex; align-items: center; gap: 6px; }
.kc-ob-znak { flex: none; }
.kc-ob-kolko { fill: var(--bianco); stroke: var(--grigio); stroke-width: 2; }
.kc-d-wartosc { font-weight: 800; color: var(--testo); }
.kc-d-nazwa { color: var(--muted-dark); font-weight: 700; }
.kc-d-szcz { grid-column: 2; color: var(--grigio); font-size: 0.72rem; }
.kc-d-zero { opacity: 0.6; }
.kc-d-suma { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--border); font-weight: 800; color: var(--testo); }
.kc-legenda { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 10px 0 4px; }
.kc-leg {
  display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--border-2); background: var(--bianco); color: var(--testo);
  border-radius: 999px; padding: 4px 11px 4px 9px; font: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer;
}
.kc-leg:hover { border-color: var(--grigio); }
.kc-leg:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.kc-leg-znak { flex: none; display: block; }
.kc-leg-suma { font-variant-numeric: tabular-nums; font-weight: 800; }
.kc-leg small { color: var(--grigio); font-weight: 600; font-size: 0.72rem; }
.kc-leg[aria-pressed="false"] { background: transparent; border-style: dashed; color: var(--grigio); }
.kc-leg[aria-pressed="false"] .kc-leg-znak { opacity: 0.3; }
.kc-leg[aria-pressed="false"] .kc-leg-nazwa { text-decoration: line-through; }
.kc-pusto { margin-bottom: 0; }

#adminSciezkiPrzeglad[hidden], #adminSciezkiMapa[hidden] { display: none !important; }
#adminSciezkiTresc.laduje, #adminSciezkiMapa.laduje { opacity: 0.6; transition: opacity 0.15s; }
.sc-filtry { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 14px; }
.sc-filtr-zrodlo { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 700; color: var(--grigio); }
.sc-filtr-zrodlo select { min-width: 0; max-width: 100%; }
.sc-filtr-uwaga { margin: 0; flex-basis: 100%; }
.sc-kafle { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.sc-rzad { display: flex; flex-wrap: wrap; gap: 0 14px; align-items: flex-start; }
.sc-rzad > .admin-card, .sc-rzad > .sc-kolumna { flex: 1 1 380px; min-width: 0; }
.sc-rzad > .sc-szersza { flex: 3 1 520px; }
.sc-kolumna { display: flex; flex-direction: column; }
.sc-opis { margin: -6px 0 12px; font-size: 0.8rem; line-height: 1.45; color: var(--grigio); }
.sc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sc-kropka { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.sc-pasek { display: block; height: 8px; border-radius: 999px; background: var(--bg-soft); overflow: hidden; }
.sc-pasek i { display: block; height: 100%; border-radius: 999px; background: var(--marka-niebieski); }
.sc-pasek i.szary { background: var(--grigio); }
.sc-sciezka { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.sc-kroki { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sc-kroki > .ico { color: var(--grigio); font-size: 0.85rem; }
.sc-krok { font-size: 0.78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--bg-soft); color: var(--testo); }
.sc-krok.pierwsze { background: var(--bg-info-soft); }
.sc-ile { margin-left: auto; font-size: 0.78rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.sc-czas { margin-bottom: 14px; }
.sc-czas-glowa { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; font-size: 0.82rem; }
.sc-czas-glowa span { color: var(--grigio); }
.sc-sklad { display: flex; gap: 2px; height: 26px; border-radius: 8px; overflow: hidden; }
.sc-sklad span { display: block; min-width: 3px; }
.sc-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 0.76rem; font-weight: 600; }
.sc-legenda > span { display: inline-flex; align-items: center; gap: 6px; }
.sc-legenda b { font-variant-numeric: tabular-nums; }
.sc-mapa-przewijak { overflow-x: auto; }
.sc-mapa { min-width: 560px; display: grid; grid-template-columns: 40px repeat(24, minmax(0, 1fr)); gap: 3px; }
.sc-godz, .sc-dzien-tyg { font-size: 0.68rem; font-weight: 700; color: var(--grigio); text-align: center; }
.sc-dzien-tyg { text-align: left; align-self: center; font-size: 0.72rem; }
.sc-k { display: block; height: 18px; border-radius: 4px; background: var(--bg-soft); }
.sc-k.s1 { background: color-mix(in srgb, var(--marka-niebieski) 25%, var(--bg-soft)); }
.sc-k.s2 { background: color-mix(in srgb, var(--marka-niebieski) 50%, var(--bg-soft)); }
.sc-k.s3 { background: color-mix(in srgb, var(--marka-niebieski) 75%, var(--bg-soft)); }
.sc-k.s4 { background: var(--marka-niebieski); }
.sc-skala { display: flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 0.72rem; color: var(--grigio); }
.sc-skala .sc-k { width: 16px; height: 12px; border-radius: 3px; }
.sc-konta td { vertical-align: middle; }
.sc-konta .konta-kto { min-width: 0; max-width: 170px; }
.sc-konta .konta-kto strong, .sc-konta .konta-kto .dt-podpis { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-urzadzenia { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.sc-urzadzenia .pill { white-space: nowrap; }
.sc-dni14 { display: inline-flex; align-items: flex-end; gap: 2px; height: 24px; width: 126px; }
.sc-dni14 i { flex: 1; border-radius: 2px; background: var(--marka-niebieski); }
.sc-dni14 i.zero { background: var(--border); }
.sc-konta .konta-akcje { white-space: nowrap; text-align: right; }
.sc-wstecz { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 14px; }
.sc-wstecz-kto { font-size: 0.85rem; color: var(--grigio); }
.sc-wstecz-kto b { color: var(--testo); }
.sc-glowa { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.sc-glowa > .leaderboard-avatar-img, .sc-glowa > .leaderboard-avatar-fallback { width: 52px; height: 52px; flex: none; font-size: 1.3rem; }
.sc-glowa-kto { flex: 1 1 240px; min-width: 0; }
.sc-nick { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.3rem; line-height: 1.15; color: var(--testo); overflow-wrap: anywhere; }
.sc-podpis { margin-top: 2px; font-size: 0.8rem; color: var(--grigio); overflow-wrap: anywhere; }
.sc-znaczki { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sc-glowa-akcje { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-porownanie { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 0 14px; }
.sc-por { display: flex; flex-direction: column; gap: 6px; }
.sc-por .kpi-label { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--grigio); }
.sc-por .kpi-sub { font-size: 0.72rem; color: var(--grigio); font-weight: 600; }
.sc-por-wartosc { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.45rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sc-por-wiersz { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 0.72rem; font-weight: 700; }
.sc-por-wiersz.sc-sredn { color: var(--grigio); }
.sc-por .kpi-sub.sc-por-opis { font-weight: 500; line-height: 1.4; }
.sc-talia .dt td:first-child { white-space: nowrap; }
.sc-talia .dt tr.razem td { font-weight: 800; border-top: 2px solid var(--border); }
.sc-talia .dt tr.archiwum td { color: var(--grigio); }
.sc-talia .dt th .ico { font-size: 0.75rem; }
.sc-droga { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.sc-droga li { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; line-height: 1.35; }
.sc-droga b { font-size: 0.74rem; color: var(--grigio); }
.sc-droga-znak { display: flex; align-items: center; gap: 6px; }
.sc-droga-znak::after { content: ''; flex: 1; height: 2px; background: var(--border); }
.sc-droga-znak i { width: 14px; height: 14px; border-radius: 999px; flex: none; }
.sc-dzien-glowa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 12px; }
.admin-card h3.sc-dzien-tytul { flex: 1 1 240px; margin: 0; font-size: 1.05rem; text-transform: none; letter-spacing: 0; color: var(--testo); }
.sc-dzien-wybor { display: inline-flex; align-items: center; gap: 6px; }
.sc-dzien-wybor .admin-in { min-width: 0; }
.sc-dni { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.sc-dzien {
  display: flex; flex-direction: column; align-items: center; gap: 3px; width: 60px; min-height: 72px; padding: 7px 4px;
  border: 1.5px solid var(--border-2); border-radius: 12px; background: var(--bianco); color: var(--testo); font: inherit; cursor: pointer;
}
.sc-dzien b { font-size: 0.74rem; }
.sc-dzien small { font-size: 0.68rem; font-weight: 700; }
.sc-dzien[aria-pressed="true"] { background: var(--oro); border-color: var(--oro); color: var(--na-akcencie); }
.sc-dzien:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.sc-slupek { display: flex; align-items: flex-end; width: 100%; height: 20px; }
.sc-slupek i { display: block; width: 100%; border-radius: 3px; background: var(--marka-niebieski); }
.sc-slupek i.zero { background: var(--border); }
.sc-dzien[aria-pressed="true"] .sc-slupek i { background: currentColor; }
.sc-os-przewijak { overflow-x: auto; }
.sc-os { min-width: 640px; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 6px 10px; align-items: center; }
.sc-os-godziny { position: relative; height: 16px; font-size: 0.68rem; font-weight: 700; color: var(--grigio); }
.sc-os-godziny span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.sc-os-godziny span:first-child { transform: none; }
.sc-os-godziny span:last-child { transform: translateX(-100%); }
.sc-pas-nazwa { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 800; }
.sc-pas { position: relative; height: 58px; border-radius: 10px; background: var(--bg-soft); }
.sc-pas-linia { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border); }
.sc-sesja { position: absolute; top: 8px; min-width: 10px; }
.sc-sesja-pasek { display: flex; gap: 1px; height: 24px; border-radius: 6px; overflow: hidden; }
.sc-sesja-pasek i { display: block; min-width: 2px; }
.sc-sesja-podpis { display: block; margin-top: 3px; font-size: 0.68rem; font-weight: 700; white-space: nowrap; color: var(--testo); }
.sc-os-pusto { padding: 18px; }
.sc-uwaga { margin: 10px 0 0; }
.sc-zd { display: grid; grid-template-columns: 46px 28px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--bg-soft); }
.sc-zd:last-child { border-bottom: none; }
.sc-zd-godz { padding-top: 4px; font-size: 0.8rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.sc-zd-ur { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: var(--bg-soft); color: var(--testo); }
.sc-zd-ur.brak { background: none; }
.sc-zd-wiersz { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sc-tryb { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; background: var(--bg-soft); color: var(--muted-dark); font-size: 0.7rem; font-weight: 800; }
.sc-zd-co { font-size: 0.86rem; font-weight: 700; overflow-wrap: anywhere; }
.sc-zd-szcz { margin-top: 2px; font-size: 0.78rem; color: var(--grigio); overflow-wrap: anywhere; }
.sc-zd.miejsce { padding: 5px 0; }
.sc-zd.miejsce .sc-zd-godz { padding-top: 2px; font-weight: 700; color: var(--grigio); }
.sc-zd.miejsce .sc-zd-ur { width: 22px; height: 22px; margin: 0 3px; font-size: 0.75rem; }
.sc-zd.miejsce .sc-zd-co { font-weight: 600; }
.sc-zd.miejsce .sc-zd-szcz { margin-top: 0; }
.sc-miejsce { display: flex; justify-content: space-between; gap: 10px; margin: -2px 0 6px 22px; font-size: 0.78rem; color: var(--grigio); }
.sc-miejsce .num { font-variant-numeric: tabular-nums; font-weight: 700; }
.sc-slowka-grupa { margin-bottom: 12px; }
.sc-slowka-zrodlo { margin-bottom: 6px; font-size: 0.8rem; font-weight: 800; }
.sc-slowka-zrodlo span { color: var(--grigio); font-weight: 700; }
.sc-slowa { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-slowo { padding: 4px 9px; border-radius: 10px; background: var(--bg-soft); border: 1px solid var(--border); font-size: 0.78rem; overflow-wrap: anywhere; }
.sc-slowo span { color: var(--grigio); }
.admin-shell .sc-tryb-nazwa { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 640px) {
  .sc-ile { margin-left: 0; flex-basis: 100%; }
  .sc-dzien { width: calc((100% - 36px) / 7); min-width: 40px; }
  .sc-dzien b { font-size: 0.66rem; }
}

:is(.admin-shell, .iko-okno-tlo) {
  --crema: #F5F5F5; --bianco: #FFFFFF; --card-bg: #FFFFFF; --bg-soft: #EDEDED;
  --border: #E3E3E3; --border-2: #D4D4D4;
  --border-warm: #E3E3E3; --border-warm-soft: #EDEDED; --border-warm-dash: #A3A3A3; --border-warm-2: #EDEDED;
  --testo: #171717; --grigio: #525252; --muted-dark: #262626; --muted-light: #737373; --tekst-neutralny: #6B6B6B;
  --bg-amber-soft: #EFEFEF; --kratka-linia: #E5E5E5; --krawedz-kafla: #CFCFCF; --granat-jasny: #262626;
  --pigulka-tlo: rgba(23, 23, 23, 0.72); --pigulka-tekst: #FFFFFF; --pigulka-cicha: rgba(23, 23, 23, 0.07);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-hover: 0 14px 30px -16px rgba(0, 0, 0, 0.3);
  --oro: #ABD49E; --na-akcencie: #171717; --przycisk: #ABD49E; --na-przycisku: #171717;
  --fokus: #3D6A2F; --fokus-pierscien: rgba(61, 106, 47, 0.18); --bg-highlight: #EEF6EA;
  --kon-akcent: #ABD49E; --kon-akcent-mocniej: #9DCB8E; --kon-na-akcencie: #171717;
  --kon-akcent-linia: #3D6A2F; --kon-akcent-tlo: #EEF6EA; --kon-wybor-obwodka: #3D6A2F;
  --kon-pole: #FFFFFF; --kon-kpi-pasek: #A3A3A3; --kon-zaslona: rgba(0, 0, 0, 0.5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.admin-shell, .iko-okno-tlo) {
    --crema: #171717; --bianco: #1F1F1F; --card-bg: #1F1F1F; --bg-soft: #262626;
    --border: #303030; --border-2: #454545;
    --border-warm: #303030; --border-warm-soft: #262626; --border-warm-dash: #454545; --border-warm-2: #262626;
    --testo: #D4D4D4; --grigio: #9D9D9D; --muted-dark: #BDBDBD; --muted-light: #8A8A8A; --tekst-neutralny: #9D9D9D;
    --bg-amber-soft: #2A2A2A; --kratka-linia: #2A2A2A; --krawedz-kafla: #454545; --granat-jasny: #262626;
    --pigulka-tlo: rgba(212, 212, 212, 0.16); --pigulka-tekst: #D4D4D4; --pigulka-cicha: rgba(212, 212, 212, 0.10);
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.35); --shadow-hover: 0 14px 34px -14px rgba(0, 0, 0, 0.7);
    --oro: #ABD49E; --na-akcencie: #171717; --przycisk: #ABD49E; --na-przycisku: #171717;
    --fokus: #ABD49E; --fokus-pierscien: rgba(171, 212, 158, 0.22); --bg-highlight: rgba(171, 212, 158, 0.14);
    --kon-akcent: #ABD49E; --kon-akcent-mocniej: #BCDDB1; --kon-na-akcencie: #171717;
    --kon-akcent-linia: #ABD49E; --kon-akcent-tlo: rgba(171, 212, 158, 0.14); --kon-wybor-obwodka: transparent;
    --kon-pole: #262626; --kon-kpi-pasek: #5C5C5C; --kon-zaslona: rgba(0, 0, 0, 0.6);
  }
}
:root[data-theme="dark"] :is(.admin-shell, .iko-okno-tlo) {
  --crema: #171717; --bianco: #1F1F1F; --card-bg: #1F1F1F; --bg-soft: #262626;
  --border: #303030; --border-2: #454545;
  --border-warm: #303030; --border-warm-soft: #262626; --border-warm-dash: #454545; --border-warm-2: #262626;
  --testo: #D4D4D4; --grigio: #9D9D9D; --muted-dark: #BDBDBD; --muted-light: #8A8A8A; --tekst-neutralny: #9D9D9D;
  --bg-amber-soft: #2A2A2A; --kratka-linia: #2A2A2A; --krawedz-kafla: #454545; --granat-jasny: #262626;
  --pigulka-tlo: rgba(212, 212, 212, 0.16); --pigulka-tekst: #D4D4D4; --pigulka-cicha: rgba(212, 212, 212, 0.10);
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.35); --shadow-hover: 0 14px 34px -14px rgba(0, 0, 0, 0.7);
  --oro: #ABD49E; --na-akcencie: #171717; --przycisk: #ABD49E; --na-przycisku: #171717;
  --fokus: #ABD49E; --fokus-pierscien: rgba(171, 212, 158, 0.22); --bg-highlight: rgba(171, 212, 158, 0.14);
  --kon-akcent: #ABD49E; --kon-akcent-mocniej: #BCDDB1; --kon-na-akcencie: #171717;
  --kon-akcent-linia: #ABD49E; --kon-akcent-tlo: rgba(171, 212, 158, 0.14); --kon-wybor-obwodka: transparent;
  --kon-pole: #262626; --kon-kpi-pasek: #5C5C5C; --kon-zaslona: rgba(0, 0, 0, 0.6);
}
#adminOverlay.wordmap-overlay { background: rgba(0, 0, 0, 0.6); }
.admin-paleta, .iko-okno-tlo { background: var(--kon-zaslona); }
@media (max-width: 860px) { .admin-shell.nav-otwarta .admin-nav-zaslona { background: var(--kon-zaslona); } }
.admin-topbar { background: #1F1F1F; border-bottom: 1px solid #303030; }
.admin-szukaj { color: #F5F5F5; }
.admin-szukaj:focus-visible, .admin-menu-btn:focus-visible, .admin-topbar .wordmap-close:focus-visible { outline-color: #ABD49E; }
.admin-topbar .wordmap-close:hover { background: rgba(255, 255, 255, 0.18); color: #FFFFFF; }
.admin-daterange input[type="date"] { border-color: #454545; background: #262626; color: #F5F5F5; }
.admin-quick { border-color: #454545; background: #262626; color: #D4D4D4; }
.admin-quick:hover { background: #303030; color: #FFFFFF; }
.admin-quick.active { background: #ABD49E; border-color: #ABD49E; color: #171717; }
.admin-quick:focus-visible, .admin-daterange input[type="date"]:focus-visible { outline: 2px solid #ABD49E; outline-offset: 2px; }
.admin-daterange-strzalka { color: #9D9D9D; }
.admin-tab.active, .nkc-wymiar.aktywny, .sc-dzien[aria-pressed="true"], .admin-paleta-poz.wybrany,
.admin-shell .zgl-admin-zakladki button.aktywna, .admin-shell .mk-chip.akt {
  background: var(--kon-akcent); border-color: var(--kon-akcent); color: var(--kon-na-akcencie);
  box-shadow: inset 0 0 0 1.5px var(--kon-wybor-obwodka);
}
.admin-shell .pus-wezel.wybrany, .admin-shell .pus-tryb.aktywny { border-color: var(--kon-akcent-linia); }
.admin-card.admin-karta-blysk { box-shadow: 0 0 0 3px var(--kon-akcent-linia); }
.admin-shell .admin-btn { background: var(--kon-akcent); color: var(--kon-na-akcencie); }
.admin-shell .admin-btn:hover { background: var(--kon-akcent-mocniej); }
.admin-shell .admin-btn.sec { background: var(--border); color: var(--testo); }
.admin-shell .admin-btn.sec:hover { background: var(--border-2); }
.admin-shell .admin-btn.del { background: var(--bg-error-soft2); color: var(--rosso); }
.admin-shell .admin-btn.del:hover { background: var(--rosso); color: #FFFFFF; }
.admin-shell .admin-btn:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.admin-shell .btn-grigio:hover { box-shadow: inset 0 0 0 1.5px var(--kon-akcent-linia), var(--shadow-hover); }
.admin-shell .admin-in { background: var(--kon-pole); }
.admin-shell .admin-in:focus { border-color: var(--kon-akcent-linia); }
.admin-shell .por-btn:hover { border-color: var(--kon-akcent-linia); color: var(--kon-akcent-linia); }
.admin-shell .por-wiersz:hover { border-color: var(--kon-akcent-linia); }
.admin-shell .toggle input:checked + .toggle-slider { background: var(--kon-akcent-linia); }
.admin-shell input[type="checkbox"], .admin-shell input[type="radio"] { accent-color: var(--kon-akcent-linia); }
.admin-shell .spinner { border-top-color: var(--kon-akcent-linia); }
.admin-shell .wm-szer .aktywny { outline-color: var(--kon-akcent-linia); }
.admin-shell .wm-potwierdzenie { border-color: var(--kon-akcent-linia); }
.admin-shell .wm-pasek-postepu > span { background: var(--kon-akcent-linia); }
.admin-shell .mk-znacznik.zloty { background: var(--kon-akcent-tlo); color: var(--kon-akcent-linia); }
.admin-shell .popup-zmieniony { color: var(--kon-akcent-linia); }
.admin-shell .kpi, .admin-shell .mk-kpi { border-left-color: var(--kon-kpi-pasek); }
.admin-shell .pill.admin { background: #1F1F1F; color: #ABD49E; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .admin-shell .pill.admin { background: var(--kon-akcent-tlo); box-shadow: inset 0 0 0 1px rgba(171, 212, 158, 0.45); }
}
:root[data-theme="dark"] .admin-shell .pill.admin { background: var(--kon-akcent-tlo); box-shadow: inset 0 0 0 1px rgba(171, 212, 158, 0.45); }
.admin-shell .wl-dymek { box-shadow: 0 14px 32px -14px rgba(0, 0, 0, 0.45); }
.admin-shell .iko-karta:hover { box-shadow: 0 8px 18px rgba(0, 0, 0, 0.10); }
.iko-okno-tlo .iko-okno { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }

.dzt-rzad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.dzt-rzad > .loader, .dzt-rzad > .auth-error { grid-column: 1 / -1; }
.dzt-karta { background: var(--bianco); border: 1.5px solid var(--border-2); border-radius: 16px; padding: 16px 18px 14px; min-width: 0; }
.dzt-glowa { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.dzt-glowa .ico { margin: 0; color: var(--grigio); }
.dzt-tytul { font-family: var(--font-naglowek); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--testo); }
.dzt-opis { font-size: 0.76rem; font-weight: 600; color: var(--muted-light); }
.dzt-liczba { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 10px; font-family: var(--font-naglowek); font-weight: 800;
  font-size: 2.6rem; line-height: 1; color: var(--testo); font-variant-numeric: tabular-nums; }
.dzt-jedn { font-size: 0.95rem; font-weight: 700; color: var(--grigio); }
.dzt-pasek { display: flex; gap: 3px; height: 8px; border-radius: 999px; overflow: hidden; background: var(--bg-soft); margin-bottom: 12px; }
.dzt-pasek i { flex: var(--udzial, 1) 1 0; background: var(--kolor); }
.dzt-podzial { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; }
.dzt-podzial li { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 0.84rem; color: var(--grigio); }
.dzt-znak { width: 10px; height: 10px; border-radius: 3px; background: var(--kolor); flex-shrink: 0; }
.dzt-nazwa { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dzt-podzial b { color: var(--testo); font-variant-numeric: tabular-nums; }
.dzt-puls { width: 10px; height: 10px; border-radius: 50%; background: var(--kon-akcent); flex-shrink: 0;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--kon-akcent) 55%, transparent); animation: dztPuls 2s ease-out infinite; }
@keyframes dztPuls {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--kon-akcent) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--kon-akcent) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .dzt-puls { animation: none; } }
.dzt-stopka { grid-column: 1 / -1; margin: 0; font-size: 0.74rem; line-height: 1.5; color: var(--muted-light); }
.wsp-wstep-glowa { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; }
.wsp-wstep-glowa .admin-hint { max-width: 78ch; }
.wsp-suma { margin: 12px 0 0; }
.wsp-pola { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 14px; margin-bottom: 12px; }
.wsp-pola label { display: flex; flex-direction: column; gap: 5px; font-size: 0.76rem; font-weight: 800; color: var(--grigio); }
.wsp-pola .wsp-szeroko { grid-column: 1 / -1; }
.wsp-pola .wsp-aktywna { flex-direction: row; align-items: center; gap: 8px; font-size: 0.84rem; color: var(--testo); }
.wsp-pola textarea { resize: vertical; min-height: 56px; font-family: inherit; }
.wsp-kod-pole { text-transform: uppercase; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.wsp-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; align-items: start; }
.wsp-lista > .loader, .wsp-lista > .auth-error { grid-column: 1 / -1; }
.wsp-karta { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px; border-radius: 16px;
  background: var(--bianco); border: 1.5px solid var(--border-2); }
.wsp-karta.zakonczona { opacity: 0.72; border-style: dashed; }
.wsp-glowa { display: flex; align-items: center; gap: 12px; }
.wsp-awatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: var(--kon-akcent-tlo); color: var(--kon-akcent-linia); font-family: var(--font-naglowek); font-weight: 800; font-size: 1.1rem; }
.wsp-tytul { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wsp-tytul strong { font-family: var(--font-naglowek); font-weight: 800; font-size: 1rem; color: var(--testo); overflow-wrap: anywhere; }
.wsp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 0.78rem; color: var(--grigio); }
#adminPane-wspolprace .pill.info, #adminPane-wspolprace .pill.off { color: var(--testo); }
.wsp-meta a { color: var(--kon-akcent-linia); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.wsp-meta a:hover { text-decoration: underline; }
.wsp-liczby { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wsp-liczby > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 12px; border-radius: 12px; background: var(--bg-soft); }
.wsp-l { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.3rem; line-height: 1.1; color: var(--testo);
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsp-e { font-size: 0.72rem; font-weight: 700; line-height: 1.3; color: var(--grigio); }
.wsp-wiersz { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 0.84rem; color: var(--testo); }
.wsp-etyk { width: 100%; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-light); }
.wsp-kod { padding: 3px 10px; border-radius: 8px; border: 1.5px dashed var(--kon-akcent-linia); background: var(--kon-akcent-tlo);
  color: var(--testo); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.03em; }
.wsp-kopiuj, .wsp-kopiuj-link { border: 0; background: transparent; color: var(--grigio); cursor: pointer; padding: 5px; border-radius: 8px; line-height: 0; }
.wsp-kopiuj:hover, .wsp-kopiuj:focus-visible, .wsp-kopiuj-link:hover, .wsp-kopiuj-link:focus-visible { color: var(--testo); background: var(--bg-soft); }
.wsp-kopiuj .ico, .wsp-kopiuj-link .ico { margin: 0; }
.wsp-login { font-weight: 800; color: var(--testo); }
.wsp-cichy { font-size: 0.78rem; color: var(--muted-light); }
.wsp-przyciski { display: flex; flex-wrap: wrap; gap: 6px; }
.wsp-dni { padding: 6px 13px; border-radius: 999px; border: 1.5px solid var(--border-2); background: var(--bianco); color: var(--testo);
  font-family: inherit; font-weight: 800; font-size: 0.8rem; cursor: pointer; transition: var(--transition); }
.wsp-dni:hover:not(:disabled), .wsp-dni:focus-visible { border-color: var(--kon-akcent-linia); background: var(--kon-akcent-tlo); }
.wsp-dni:disabled { opacity: 0.45; cursor: not-allowed; }
.wsp-premium .wsp-za-co { flex: 1 1 200px; min-width: 0; }
#wspFormularz .wsp-usun { margin-inline-start: auto; }
.wsp-historia { font-size: 0.8rem; color: var(--grigio); }
.wsp-historia summary { cursor: pointer; font-weight: 800; color: var(--grigio); }
.wsp-historia ol { display: grid; gap: 5px; margin: 8px 0 0; padding-left: 18px; }
.wsp-historia li span { margin-left: 6px; }
.wsp-za { color: var(--testo); }
.wsp-notatka { margin: 0; padding-left: 10px; border-left: 3px solid var(--border-2); font-size: 0.8rem; color: var(--grigio);
  white-space: pre-wrap; overflow-wrap: anywhere; }
.wsp-pusto { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 34px 20px; text-align: center;
  border: 1.5px dashed var(--border-2); border-radius: 16px; color: var(--grigio); font-size: 0.86rem; }
.wsp-pusto .ico { font-size: 1.6rem; margin: 0; color: var(--kon-akcent-linia); }
.wsp-pusto strong { color: var(--testo); font-size: 0.95rem; }
.sc-konta-filtry { margin: 4px 0 12px; }
.sc-konta-filtry select { flex: 0 1 240px; }
.sc-konta-filtry input[type="search"] { flex: 1 1 220px; min-width: 0; }
@media (max-width: 760px) {
  .dzt-rzad { grid-template-columns: 1fr; }
  .wsp-lista { grid-template-columns: 1fr; }
  .dzt-liczba { font-size: 2.2rem; }
}
:is(.srw-pasek, .srw-tor) {
  --srw-ok: var(--marka-zielony); --srw-uwaga: var(--zolty); --srw-zle: var(--marka-czerwony); --srw-brak: var(--kon-kpi-pasek, #A3A3A3);
}
.srw-miejsce { margin-bottom: 14px; }
.srw-pasek { background: var(--bianco); border: 1.5px solid var(--border-2); border-radius: 16px; padding: 12px 14px; }
.srw-pasek.uwaga { border-color: var(--srw-uwaga); }
.srw-pasek.zle { border-color: var(--srw-zle); }
.srw-glowa { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.srw-pasek .srw-glowa { margin-bottom: 10px; }
.srw-pasek .srw-glowa:last-child { margin-bottom: 0; }
.srw-tytul { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-naglowek); font-weight: 800; font-size: 0.8rem;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--testo); }
.srw-tytul .ico { margin: 0; color: var(--grigio); }
.srw-zdanie { flex: 1 1 260px; min-width: 0; font-size: 0.84rem; font-weight: 600; color: var(--grigio); }
.srw-pasek.uwaga .srw-zdanie { color: var(--testo); font-weight: 800; }
.srw-pasek.zle .srw-zdanie { color: var(--rosso); font-weight: 800; }
.srw-szczegoly { margin-inline-start: auto; }
.srw-kafle { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.srw-kafel { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px 10px 8px 12px; border-radius: 10px;
  background: var(--bg-soft); border-left: 4px solid var(--srw-kolor, var(--srw-brak)); }
.srw-etyk { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--grigio); }
.srw-wart { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.05rem; line-height: 1.25; color: var(--testo);
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srw-pod { font-size: 0.74rem; line-height: 1.35; color: var(--grigio); overflow-wrap: anywhere; }
.srw-tor { display: block; height: 6px; margin-top: 5px; border-radius: 999px; overflow: hidden; background: var(--border); }
.srw-tor > i { display: block; height: 100%; width: var(--ile, 0%); border-radius: inherit; background: var(--srw-kolor, var(--srw-brak)); }
.srw-tor.duzy { height: 8px; margin-top: 0; }
:is(.srw-kafel, .srw-tor).ok { --srw-kolor: var(--srw-ok); }
:is(.srw-kafel, .srw-tor).uwaga { --srw-kolor: var(--srw-uwaga); }
:is(.srw-kafel, .srw-tor).zle { --srw-kolor: var(--srw-zle); }
.prc-meta { margin: 0 0 10px; font-size: 0.82rem; line-height: 1.5; color: var(--grigio); }
.prc-lista { display: flex; flex-direction: column; border: 1.5px solid var(--border); border-radius: 12px; overflow: hidden; }
.prc-wiersz { display: grid; grid-template-columns: minmax(0, 1fr) 120px 150px 90px; gap: 10px; align-items: center; padding: 8px 12px;
  font-size: 0.84rem; color: var(--testo); }
.prc-naglowek { background: var(--bg-soft); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--grigio); }
.prc-lista > * + * { border-top: 1px solid var(--border); }
.prc-grupa > summary { cursor: pointer; list-style: none; }
.prc-grupa > summary::-webkit-details-marker { display: none; }
.prc-grupa > summary:hover, .prc-grupa > summary:focus-visible { background: var(--bg-soft); }
.prc-nazwa { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; min-width: 0; font-weight: 800; overflow-wrap: anywhere; }
.prc-nazwa small { flex-basis: 100%; font-weight: 600; font-size: 0.74rem; color: var(--grigio); }
.prc-strzalka { margin: 0; color: var(--grigio); transition: transform 0.15s ease; }
.prc-grupa[open] .prc-strzalka { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .prc-strzalka { transition: none; } }
.prc-ile, .prc-ram { color: var(--grigio); font-variant-numeric: tabular-nums; }
.prc-cpu { display: flex; flex-direction: column; gap: 3px; font-variant-numeric: tabular-nums; }
.prc-cpu .srw-tor { margin-top: 0; --srw-kolor: var(--kon-akcent-linia); }
.prc-szczegoly { padding: 0 12px 10px; overflow-x: auto; }
.prc-szczegoly .admin-hint { margin: 6px 0 0; }
.prc-procesy .prc-polecenie { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.78rem; overflow-wrap: anywhere; }
.prc-procesy tr.prc-ja { opacity: 0.7; }
.prc-reszta { color: var(--grigio); }
.prc-brak { display: flex; align-items: center; gap: 8px; padding: 16px 18px; border: 1.5px dashed var(--border-2); border-radius: 12px;
  font-size: 0.86rem; color: var(--grigio); }
.prc-brak .ico { margin: 0; }
@media (max-width: 1100px) { .srw-kafle { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .srw-kafle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prc-wiersz { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 8px; padding: 8px 10px; }
  .prc-wiersz > .prc-nazwa, .prc-naglowek > span:first-child { grid-column: 1 / -1; }
}
#miniExamArea {
  max-width: 640px; margin-inline: auto; min-height: 620px;
  display: flex; flex-direction: column; gap: 22px;
  container: quiz / inline-size;
}
#miniExamArea.hidden { display: none !important; }
@media (max-width: 768px) { #miniExamArea { min-height: calc(100dvh - 140px); } }
#miniExamArea .quiz-topbar { gap: 12px; margin: 0; min-height: 44px; }
#miniExamArea .quiz-close, #miniExamArea .quiz-report-btn {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
  color: var(--tekst-neutralny); opacity: 1; filter: none; font-size: 18px;
}
#miniExamArea .quiz-close:hover, #miniExamArea .quiz-report-btn:hover { color: var(--testo); background: var(--bg-soft); }
#miniExamArea .quiz-close svg { display: block; }
#miniExamArea .quiz-report-btn .ico { margin: 0; font-size: 18px; line-height: 1; }
#miniExamArea .quiz-progress-track { height: 14px; background: var(--border); border-radius: 999px; }
#miniExamArea .quiz-progress-fill {
  background: var(--marka-niebieski); box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.28);
  transition: width 0.25s ease, background-color 0.2s ease;
}
#miniExamArea .quiz-progress-fill.dobrze { background: var(--marka-zielony); }
#miniExamArea .combo-licznik,
#miniExamArea .combo-licznik.combo-t1, #miniExamArea .combo-licznik.combo-t2, #miniExamArea .combo-licznik.combo-t3 {
  gap: 4px; padding: 6px 10px; border: none; box-shadow: none; flex: none;
  background: var(--zolty); color: var(--granat);
  font-family: var(--font-naglowek); font-weight: 800; font-size: 15px; line-height: 1;
}
#miniExamArea .combo-licznik .combo-mnoznik { padding: 0; background: none; font-size: inherit; font-weight: inherit; }
#miniExamArea .combo-licznik .combo-ile-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
#miniExamArea .combo-licznik.combo-t3 .combo-znak { animation: none; }
.quiz-znacznik-wiersz { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.quiz-znacznik-wiersz:not(:has(> :not(.hidden):not(:empty))) { display: none; }
#miniExamArea .quiz-badge:empty { display: none; }
#miniExamArea .quiz-badge, #miniExamArea .quiz-cel-chip, #miniExamArea .quiz-premium-chip {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0; border: none; background: none;
  font-family: var(--font-tekst); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--grigio); line-height: 1.3;
}
#miniExamArea .quiz-badge::before {
  content: ''; flex: none; width: 20px; height: 20px; border-radius: 999px;
  background: var(--zolty) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317183B' stroke-width='3'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}
#miniExamArea .quiz-cel-chip .ico, #miniExamArea .quiz-premium-chip .ico {
  flex: none; width: 20px; height: 20px; border-radius: 999px; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--zolty); color: var(--granat); font-size: 11px;
}
#miniExamArea .quiz-premium-chip.zajawka { cursor: pointer; min-height: 32px; text-decoration: underline; text-underline-offset: 3px; }
@media (pointer: coarse) { #miniExamArea .quiz-premium-chip.zajawka { min-height: 44px; } }
.quiz-polecenie { display: flex; align-items: center; gap: 12px; }
.quiz-polecenie.pusty { display: none; }
.quiz-polecenie-tekst { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.quiz-polecenie-linia { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#miniExamArea .quiz-heading {
  margin: 0; font-family: var(--font-naglowek); font-weight: 800; font-size: 28px; line-height: 1.15;
  letter-spacing: -0.01em; color: var(--testo); overflow-wrap: anywhere;
}
#miniExamArea .quiz-heading:empty { display: none; }
#miniExamArea .quiz-heading.jako-znacznik {
  font-family: var(--font-tekst); font-size: 12px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--grigio); line-height: 1.3;
}
.quiz-polecenie-flaga { display: inline-flex; flex: none; width: 24px; height: 17px; border-radius: 4px; overflow: hidden; line-height: 0; }
.quiz-polecenie-flaga svg { width: 24px; height: 17px; display: block; object-fit: cover; }
.quiz-pod-polecenie:empty { display: none; }
.quiz-postac-obok { flex: none; width: var(--postac-obok, 84px); height: var(--postac-obok, 84px); object-fit: contain; }
@container quiz (min-width: 600px) {
  #miniExamArea .quiz-heading:not(.jako-znacznik) { font-size: 30px; }
  .quiz-postac-obok { width: calc(var(--postac-obok, 84px) + 12px); height: calc(var(--postac-obok, 84px) + 12px); }
}
@media (max-width: 768px) and (max-height: 700px) {
  #miniExamArea .quiz-heading:not(.jako-znacznik) { font-size: 24px; }
  #miniExamArea { gap: 14px; }
}

#miniExamQuestion { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#miniExamQuestion > .mini-exam-card { flex: 1; display: flex; flex-direction: column; gap: 22px; }
#miniExamQuestion > .mini-exam-card.quiz-krok { text-align: left; }
@media (max-width: 768px) and (max-height: 700px) { #miniExamQuestion > .mini-exam-card { gap: 14px; } }

.quiz-scena { display: flex; align-items: flex-end; gap: 4px; min-width: 0; }
.quiz-scena .quiz-postac { flex: none; width: var(--postac-tel, 136px); height: var(--postac-tel, 136px); object-fit: contain; }
.quiz-scena.obok .quiz-dymek { margin-bottom: calc(var(--postac-tel, 136px) * 0.42); }
.quiz-scena.nad { flex-direction: column-reverse; align-items: stretch; gap: 0; }
.quiz-scena.nad .quiz-postac { align-self: flex-start; margin: 2px 0 0 24px; width: calc(var(--postac-tel, 136px) * 0.9); height: calc(var(--postac-tel, 136px) * 0.9); }
.quiz-dymek {
  position: relative; min-width: 0; display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; background: var(--card-bg); color: var(--testo);
  border: 2px solid var(--border); border-radius: 22px;
}
.quiz-dymek::before {
  content: ''; position: absolute; width: 16px; height: 16px; background: var(--card-bg);
  border: 0 solid var(--border); transform: rotate(45deg);
}
.quiz-scena.obok .quiz-dymek::before { left: -10px; bottom: 18px; border-left-width: 2px; border-bottom-width: 2px; }
.quiz-scena.nad .quiz-dymek::before { left: 70px; bottom: -10px; border-right-width: 2px; border-bottom-width: 2px; }
.quiz-dymek:has(.quiz-glosnik) { padding: 12px 18px 12px 12px; }
.quiz-dymek-slowo { display: block; font-family: var(--font-naglowek); font-weight: 700; font-size: 30px; line-height: 1.1; overflow-wrap: normal; min-width: 0; }
.quiz-dymek-slowo.lamany { overflow-wrap: anywhere; }
.quiz-dymek-slowo.sredni { font-size: 25px; }
.quiz-dymek-slowo.maly { font-size: 21px; line-height: 1.2; }
.quiz-dymek-slowo-flaga { display: flex; align-items: center; gap: 10px; min-width: 0; }
.quiz-dymek-flaga { flex-shrink: 0; display: inline-flex; line-height: 0; border-radius: 4px; box-shadow: 0 0 0 1px var(--border); }
.quiz-dymek-kolumna { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.quiz-dymek-zdanie { font-family: var(--font-naglowek); font-weight: 700; font-size: 24px; line-height: 1.35; overflow-wrap: anywhere; }
.quiz-dymek .glos-tlum-nad { margin: 0; max-width: none; min-height: 0; text-align: left; font-family: var(--font-tekst); font-size: 15px; font-weight: 600; color: var(--grigio); }
.quiz-dymek .glos-tlum-nad:empty { display: none; }
.quiz-dymek-emotka { font-size: 28px; line-height: 1; }
.quiz-dymek-z-emotka { gap: 2px; }
.quiz-dymek-z-emotka .quiz-dymek-emotka { font-size: 22px; }
.quiz-postac-kadr { display: block; flex: none; align-self: flex-start; width: 170px; height: 190px; margin-left: 24px; overflow: hidden; }
.quiz-scena .quiz-postac-kadr .quiz-postac { display: block; width: 340px; height: 340px; max-width: none; margin: -120px 0 0 -14px; }
.quiz-glosnik {
  position: relative; flex: none; width: 44px; height: 44px; padding: 0; border: none; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; background: var(--marka-niebieski); color: #FFFFFF;
}
.quiz-glosnik.duzy { width: 64px; height: 64px; margin-bottom: 5px; box-shadow: 0 5px 0 var(--niebieski-ciemny, #204EB8); }
.quiz-glosnik.duzy:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--niebieski-ciemny, #204EB8); }
.quiz-glosnik svg { display: block; }
.quiz-glosnik:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
.quiz-glosnik-fala { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.quiz-glosnik:has(.speaking)::after {
  content: ''; position: absolute; inset: -6px; border-radius: 999px; border: 3px solid var(--marka-niebieski);
  animation: quizGlosnikPuls 1s ease-in-out infinite;
}
@keyframes quizGlosnikPuls { 0%, 100% { opacity: 0.2; transform: scale(0.96); } 50% { opacity: 0.6; transform: scale(1.04); } }
#miniExamQuestion .quiz-tempo {
  position: static; flex: none; width: 48px; height: 48px; padding: 0; border-radius: 999px; cursor: pointer; line-height: 1;
  border: 2px solid var(--border); background: var(--crema); color: var(--testo); box-shadow: none;
  font-family: var(--font-naglowek); font-weight: 800; font-size: 13px; letter-spacing: 0;
}
#miniExamQuestion .quiz-tempo.wolno { border-color: var(--oro); color: var(--testo); }
#miniExamQuestion .quiz-tempo:hover { border-color: var(--border-2); }
#miniExamQuestion .quiz-link {
  min-height: 44px; padding: 0 8px; margin: 0; border: none; background: none; cursor: pointer;
  font-family: var(--font-tekst); font-weight: 700; font-size: 15px; color: var(--grigio); text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
#miniExamQuestion .quiz-link:hover { color: var(--testo); text-decoration: underline; text-underline-offset: 3px; }
#miniExamQuestion > .mini-exam-card > .quiz-link, #miniExamQuestion .mini-exam-input-row > .quiz-link,
#miniExamQuestion .quiz-wybor > .quiz-link { align-self: center; }
#miniExamQuestion .mini-exam-input-row { max-width: none; margin: 0; gap: 10px; align-items: stretch; }
#miniExamQuestion .mini-exam-input-row input:not(.glos-pole) {
  height: 64px; box-sizing: border-box; padding: 0 20px; border: 2px solid var(--border); border-radius: 18px;
  background: var(--card-bg); color: var(--testo); text-align: left;
  font-family: var(--font-naglowek); font-weight: 700; font-size: 24px;
}
#miniExamQuestion .mini-exam-input-row input:not(.glos-pole):focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--fokus-pierscien); }
#miniExamQuestion .mini-exam-input-row input.sprawdza:not(.glos-pole) { border-color: color-mix(in srgb, var(--oro) 45%, var(--border)); box-shadow: none; }
#miniExamQuestion .mini-exam-input-row input.correct:not(.glos-pole) { border-color: var(--marka-zielony); background: var(--bg-success-soft); box-shadow: none; }
#miniExamQuestion .mini-exam-input-row input.wrong:not(.glos-pole) { border-color: var(--rosso); background: var(--bg-error-soft); box-shadow: none; }

#miniExamQuestion .mini-exam-input-row.glos { flex: 1; display: flex; flex-direction: column; gap: 18px; }
#miniExamQuestion .glos-odczyt {
  align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; max-width: 88%; min-width: 0;
}
#miniExamQuestion .mini-exam-input-row .glos-pole,
#miniExamQuestion .mini-exam-input-row .glos-pole.correct,
#miniExamQuestion .mini-exam-input-row .glos-pole.wrong {
  box-sizing: border-box; width: auto; max-width: 100%; min-width: 112px; min-height: 64px; margin: 0; padding: 14px 22px;
  field-sizing: content; border: 2px solid var(--marka-niebieski); border-radius: 22px 22px 6px 22px;
  background: var(--bg-info-soft); color: var(--testo); -webkit-text-fill-color: currentColor; opacity: 1;
  font-family: var(--font-naglowek); font-weight: 700; font-size: 26px; line-height: 1.25; text-align: start;
  box-shadow: none; outline: none; cursor: default; pointer-events: none; resize: none; overflow: hidden;
}
#miniExamQuestion .mini-exam-input-row textarea.glos-pole { font-size: 22px; line-height: 1.35; }
#miniExamQuestion .quiz-scena.nad:has(.quiz-postac-kadr) + .mini-exam-input-row.glos .glos-odczyt { margin-top: -112px; max-width: calc(100% - 206px); }
@container quiz (min-width: 600px) {
  #miniExamQuestion .quiz-scena.nad:has(.quiz-postac-kadr) + .mini-exam-input-row.glos .glos-odczyt { margin-top: -132px; max-width: calc(100% - 240px); }
}
#miniExamQuestion .mini-exam-input-row .glos-pole::placeholder { color: transparent; }
#miniExamQuestion .mini-exam-input-row .glos-pole.niepewne { color: var(--grigio); font-weight: 600; }
#miniExamQuestion .mini-exam-input-row .glos-pole.sprawdza { color: var(--grigio); }
#miniExamQuestion .mini-exam-input-row .glos-pole.correct { border-color: var(--marka-zielony); background: var(--bg-success-soft); color: var(--verde); }
#miniExamQuestion .mini-exam-input-row .glos-pole.wrong { border-color: var(--rosso); background: var(--bg-error-soft); color: var(--czerwien-tekst); }
#miniExamQuestion .mini-exam-input-row .glos-pole:placeholder-shown {
  width: 112px; height: 64px; padding: 0; border: 2px dashed var(--krawedz-kafla);
  background:
    radial-gradient(circle, var(--krawedz-kafla) 3.5px, transparent 4.5px) calc(50% - 14px) 50% / 8px 8px no-repeat,
    radial-gradient(circle, var(--krawedz-kafla) 3.5px, transparent 4.5px) 50% 50% / 8px 8px no-repeat,
    radial-gradient(circle, var(--krawedz-kafla) 3.5px, transparent 4.5px) calc(50% + 14px) 50% / 8px 8px no-repeat;
}
#miniExamQuestion .glos-fala { margin: 0; padding-right: 8px; visibility: hidden; }
#miniExamQuestion .glos-fala.slucha { visibility: visible; }
#miniExamQuestion .glos-fala .audio-wave { gap: 6px; height: 32px; }
#miniExamQuestion .glos-fala .audio-wave span {
  width: 9px; min-height: 8px; max-height: 32px; border-radius: 6px; opacity: 1; animation: none; transition: height 0.05s linear;
}
#miniExamQuestion .glos-fala.slucha:not(.zywa) .audio-wave span { animation: glosOddech 1.1s ease-in-out infinite; transform-origin: center; }
#miniExamQuestion .glos-fala.slucha:not(.zywa) .audio-wave span:nth-child(2) { animation-delay: 0.18s; }
#miniExamQuestion .glos-fala.slucha:not(.zywa) .audio-wave span:nth-child(3) { animation-delay: 0.36s; }
@keyframes glosOddech { 0%, 100% { transform: scaleY(0.55); } 50% { transform: scaleY(1); } }
#miniExamQuestion .glos-fala .audio-wave span:nth-child(1) { height: 18px; background: var(--marka-zielony); }
#miniExamQuestion .glos-fala .audio-wave span:nth-child(2) { height: 26px; background: var(--marka-czerwony); }
#miniExamQuestion .glos-fala .audio-wave span:nth-child(3) { height: 14px; background: var(--marka-niebieski); }
#miniExamQuestion .glos-scena { margin-top: auto; padding-top: 22px; gap: 22px; }
#miniExamQuestion .quiz-mik {
  width: 96px; height: 96px; flex: none; border: none; background: var(--marka-zielony); color: var(--granat);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--marka-zielony) 14%, transparent), 0 6px 0 var(--zielen-gleboka);
  transition: box-shadow 0.18s ease, transform 0.08s ease, filter 0.18s ease;
}
#miniExamQuestion .quiz-mik .ico { font-size: 38px; }
#miniExamQuestion .quiz-mik:hover:not(:disabled) { background: var(--marka-zielony); filter: brightness(1.05); }
#miniExamQuestion .quiz-mik:active:not(:disabled) {
  transform: translateY(4px); box-shadow: 0 0 0 10px color-mix(in srgb, var(--marka-zielony) 14%, transparent), 0 2px 0 var(--zielen-gleboka);
}
#miniExamQuestion .quiz-mik.slucha, #miniExamQuestion .quiz-mik.slucha:hover:not(:disabled) {
  --poziom: 0;
  background: var(--marka-zielony); color: var(--granat);
  box-shadow: 0 0 0 calc(10px + var(--poziom) * 10px) color-mix(in srgb, var(--marka-zielony) 24%, transparent),
              0 0 0 calc(22px + var(--poziom) * 18px) color-mix(in srgb, var(--marka-zielony) 11%, transparent), 0 6px 0 var(--zielen-gleboka);
  transition: box-shadow 0.08s linear, transform 0.08s ease, filter 0.18s ease;
}
#miniExamQuestion .quiz-mik.slucha:not(.zywa) { animation: glosPierscien 1.4s ease-in-out infinite; }
@keyframes glosPierscien { 0%, 100% { --poziom: 0; } 50% { --poziom: 0.55; } }
@property --poziom { syntax: '<number>'; inherits: true; initial-value: 0; }
@media (prefers-reduced-motion: reduce) {
  #miniExamQuestion .glos-fala.slucha:not(.zywa) .audio-wave span { animation: glosOddechCichy 1.6s ease-in-out infinite; transform: none; }
  #miniExamQuestion .quiz-mik.slucha:not(.zywa) { animation: none; --poziom: 0.4; }
  @keyframes glosOddechCichy { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
}
#miniExamQuestion .quiz-mik:focus-visible { outline: 3px solid var(--fokus); outline-offset: 14px; }
#miniExamQuestion .glos-stan {
  min-height: 44px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-tekst); font-weight: 700; font-size: 15px; color: var(--verde);
}
#miniExamQuestion .glos-stan:empty { display: none; }
#miniExamQuestion .glos-stan:not(:empty) + .glos-linki { display: none; }
#miniExamQuestion .glos-linki { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 28px; }
@media (max-width: 768px) {
  #miniExamQuestion > .mini-exam-card:has(.mini-exam-input-row.glos) { gap: 18px; }
  #miniExamQuestion .glos-scena { padding-top: 8px; gap: 16px; }
  #miniExamQuestion .mini-exam-card:has(.mini-exam-input-row.glos) .quiz-postac-kadr { width: 136px; height: 152px; }
  #miniExamQuestion .mini-exam-card:has(.mini-exam-input-row.glos) .quiz-postac-kadr .quiz-postac { width: 272px; height: 272px; margin: -96px 0 0 -11px; }
  #miniExamQuestion .quiz-scena.nad:has(.quiz-postac-kadr) + .mini-exam-input-row.glos .glos-odczyt { margin-top: -104px; max-width: calc(100% - 172px); }
}

#miniExamQuestion .quiz-arkusz {
  margin-top: auto; position: sticky; bottom: 16px; z-index: 1;
  display: flex; flex-direction: column; gap: 16px; border-radius: 24px;
}
#miniExamQuestion .quiz-arkusz[data-stan] {
  padding: 20px 24px; background: var(--bg-soft); box-shadow: var(--shadow-hover);
  animation: quizArkuszWjazd 0.28s cubic-bezier(.2, .8, .2, 1);
}
#miniExamQuestion .quiz-arkusz[data-stan="dobrze"] { background: var(--bg-success-soft); }
#miniExamQuestion .quiz-arkusz[data-stan="zle"] { background: var(--bg-error-soft); }
#miniExamQuestion .quiz-arkusz:not([data-stan]):not(:has(.quiz-akcje > *)):not(:has(.mini-exam-feedback:not(:empty))) { display: none; }
@keyframes quizArkuszWjazd { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.quiz-arkusz-gora { display: flex; align-items: center; gap: 14px; min-width: 0; }
.quiz-arkusz:not([data-stan]) .quiz-arkusz-gora:not(:has(.mini-exam-feedback:not(:empty))) { display: none; }
.quiz-arkusz-postac { flex: none; width: 92px; height: 92px; object-fit: contain; margin: -40px 0 -8px -6px; }
.quiz-arkusz-postac[hidden], .quiz-arkusz-xp[hidden] { display: none; }
.quiz-arkusz-glowa { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.quiz-arkusz-tytul { font-family: var(--font-naglowek); font-weight: 800; font-size: 28px; line-height: 1.2; color: var(--testo); }
.quiz-arkusz-tytul:empty { display: none; }
.quiz-arkusz[data-stan="dobrze"] .quiz-arkusz-tytul { color: var(--verde); }
.quiz-arkusz[data-stan="zle"] .quiz-arkusz-tytul { color: var(--czerwien-tekst); }
#miniExamQuestion .quiz-arkusz .mini-exam-feedback {
  margin: 0; min-height: 0; text-align: left; font-family: var(--font-tekst); font-size: 17px; font-weight: 600; line-height: 1.5;
}
#miniExamQuestion .quiz-arkusz .mini-exam-feedback:empty { display: none; }
#miniExamQuestion .quiz-arkusz[data-stan] .mini-exam-feedback { color: var(--testo); }
#miniExamQuestion .quiz-arkusz .mini-exam-feedback b, #miniExamQuestion .quiz-arkusz .mini-exam-feedback strong { font-weight: 800; }
#miniExamQuestion .quiz-arkusz .quiz-stan { justify-content: flex-start; }
#miniExamQuestion .quiz-arkusz .quiz-stan:not(.quiz-stan-znika) {
  height: auto; min-height: 1.6em; overflow: visible; line-height: 1.3; text-wrap: pretty;
}
#miniExamQuestion .quiz-arkusz .quiz-dodatkowo { text-align: left; font-size: 14px; }
.quiz-arkusz-xp {
  align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--zolty); color: var(--granat);
  font-family: var(--font-naglowek); font-weight: 800; font-size: 14px; line-height: 1.3;
}
#miniExamQuestion .quiz-akcje { display: flex; align-items: center; gap: 12px; }
#miniExamQuestion .quiz-akcje .quiz-nie-wiem { flex: none; }
#miniExamQuestion .quiz-akcje .btn {
  display: inline-flex; align-items: center; flex: 1; width: auto; max-width: none; min-height: 64px; margin: 0; padding: 0 10px 0 28px; border-radius: 999px;
  font-family: var(--font-naglowek); font-weight: 800; font-size: 19px; text-transform: none; letter-spacing: 0;
  box-shadow: none; transform: none;
}
#miniExamQuestion .quiz-akcje .btn:not(.btn-strzalka) { justify-content: center; padding: 0 24px; }
#miniExamQuestion .quiz-akcje .btn.btn-strzalka::after { width: 46px; height: 46px; }
#miniExamQuestion .quiz-akcje .btn-dalej, #miniExamQuestion .quiz-akcje .quiz-dalej { background: var(--oro); color: var(--na-akcencie); }
#miniExamQuestion .quiz-akcje .btn:hover:not(:disabled) { transform: none; box-shadow: var(--shadow-hover); }
#miniExamQuestion .quiz-akcje .btn:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
#miniExamQuestion .quiz-sprawdz:disabled:not(.btn-dalej) {
  background: var(--border); color: var(--tekst-neutralny); opacity: 1; cursor: not-allowed;
  --kolko-tlo: var(--krawedz-kafla); --kolko-strzalka: var(--strzalka-szara);
}
@container quiz (min-width: 600px) {
  .quiz-scena .quiz-postac { width: 168px; height: 168px; }
  .quiz-scena.obok .quiz-dymek { margin-bottom: 70px; max-width: 440px; }
  .quiz-scena.nad .quiz-dymek { max-width: 560px; }
  .quiz-scena.nad .quiz-postac { width: 150px; height: 150px; }
  .quiz-dymek-slowo { font-size: 34px; }
  .quiz-dymek-slowo.sredni { font-size: 28px; }
  .quiz-dymek-slowo.maly { font-size: 23px; }
  .quiz-postac-kadr { width: 200px; height: 224px; }
  .quiz-scena .quiz-postac-kadr .quiz-postac { width: 400px; height: 400px; margin: -142px 0 0 -16px; }
  #miniExamQuestion .quiz-akcje .btn { flex: 0 0 auto; min-width: 240px; margin-left: auto; }
  #miniExamQuestion .quiz-kafle, #miniExamQuestion .mini-exam-input-row:not(.glos), #miniExamQuestion .pf-przyciski { width: 100%; max-width: 560px; margin-inline: auto; }
  #miniExamQuestion .quiz-slowa-lista:not(.siatka):not(.dwie) .quiz-kafel { min-height: 64px; }
  #miniExamQuestion .quiz-arkusz[data-stan] { flex-direction: row; align-items: center; gap: 20px; }
  #miniExamQuestion .quiz-arkusz[data-stan] .quiz-arkusz-gora { flex: 1; }
  #miniExamQuestion .quiz-arkusz[data-stan] .quiz-akcje { flex: none; width: auto; min-width: 240px; }
  #miniExamQuestion .quiz-arkusz[data-stan] .quiz-akcje .btn { white-space: nowrap; }
  #miniExamQuestion .quiz-arkusz[data-stan] .quiz-akcje .btn { min-width: 0; width: 100%; margin: 0; }
  .quiz-arkusz-postac { width: 96px; height: 96px; margin: -44px 0 -8px -6px; }
}
#miniExamQuestion .quiz-kafle { display: flex; flex-direction: column; gap: 12px; margin: 0; }
#miniExamQuestion .quiz-kafle.dwie, #miniExamQuestion .quiz-kafle.siatka,
#miniExamQuestion .intruz-siatka.quiz-kafle, #miniExamQuestion .odm-opcje.quiz-kafle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#miniExamQuestion .rodz-opcje.quiz-kafle { display: grid; grid-template-columns: repeat(var(--kolumn, 4), minmax(0, 1fr)); gap: 10px; }
#miniExamQuestion .quiz-kafel {
  position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 58px; margin: 0; padding: 10px 20px;
  border: 2px solid var(--krawedz-kafla); border-bottom-width: 4px; border-radius: 18px; background: var(--card-bg); color: var(--testo);
  font-family: var(--font-tekst); font-weight: 600; font-size: 19px; line-height: 1.25; text-align: left;
  cursor: pointer; opacity: 1; box-shadow: none; transform: none; outline-offset: 3px;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.08s ease;
}
#miniExamQuestion .quiz-kafel-tekst { min-width: 0; overflow-wrap: anywhere; }
#miniExamQuestion .quiz-kafle.nauka .quiz-kafel { font-family: var(--font-naglowek); font-weight: 700; }
#miniExamQuestion .quiz-kafle.siatka .quiz-kafel, #miniExamQuestion .rodz-opcje .quiz-kafel,
#miniExamQuestion .intruz-siatka .quiz-kafel, #miniExamQuestion .odm-opcje .quiz-kafel { justify-content: center; text-align: center; }
#miniExamQuestion .quiz-kafle.siatka .quiz-kafel { min-height: 76px; }
#miniExamQuestion .rodz-opcje .quiz-kafel { min-height: 76px; padding: 8px; font-size: 26px; font-weight: 800; color: var(--testo); }
#miniExamQuestion .intruz-siatka .quiz-kafel { min-height: 120px; border-bottom-width: 5px; border-radius: 22px; font-size: 22px; }
#miniExamQuestion .odm-opcje .quiz-kafel { min-height: 64px; font-size: 21px; }
#miniExamQuestion .quiz-kafel:hover { border-color: var(--border-2); transform: none; }
#miniExamQuestion .quiz-kafel:active { border-bottom-width: 2px; transform: translateY(2px); }
#miniExamQuestion .quiz-kafel.wybrana { border-color: var(--primary); background: var(--bg-warn-soft); text-shadow: 0.4px 0 0 currentColor, -0.4px 0 0 currentColor; }
#miniExamQuestion .quiz-kafle.zablokowane .quiz-kafel { cursor: default; transform: none; }
#miniExamQuestion .quiz-kafle.zablokowane .quiz-kafel:not(.poprawna):not(.bledna) {
  border-color: var(--border); border-bottom-width: 2px; background: transparent; color: var(--tekst-neutralny);
}
#miniExamQuestion .quiz-kafel.poprawna { border-color: var(--marka-zielony); background: var(--bg-success-soft); color: var(--testo); font-weight: 700; }
#miniExamQuestion .quiz-kafle.zablokowane .quiz-kafel.poprawna:not(.wybrana) { border-style: dashed; border-bottom-width: 2px; background: transparent; }
#miniExamQuestion .quiz-kafel.bledna { border-color: var(--rosso); background: var(--bg-error-soft); color: var(--testo); opacity: 1; font-weight: 700; }
#miniExamQuestion .quiz-kafel.bledna .quiz-kafel-tekst { text-decoration: line-through; text-decoration-thickness: 2px; }
#miniExamQuestion .quiz-kafel.poprawna::after, #miniExamQuestion .quiz-kafel.bledna::after {
  content: ''; flex: none; width: 24px; height: 24px; margin-left: auto;
  -webkit-mask: var(--kafel-znak) center / contain no-repeat; mask: var(--kafel-znak) center / contain no-repeat;
}
#miniExamQuestion .quiz-kafel.poprawna::after {
  background: var(--verde);
  --kafel-znak: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
#miniExamQuestion .quiz-kafel.bledna::after {
  background: var(--czerwien-tekst);
  --kafel-znak: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}
#miniExamQuestion .quiz-kafle.siatka .quiz-kafel::after, #miniExamQuestion .rodz-opcje .quiz-kafel::after,
#miniExamQuestion .intruz-siatka .quiz-kafel::after, #miniExamQuestion .odm-opcje .quiz-kafel::after { position: absolute; right: 10px; top: 10px; width: 20px; height: 20px; }
#miniExamQuestion .quiz-kafel .kl { display: none; }
@media (hover: hover) and (pointer: fine) {
  #miniExamQuestion .quiz-kafel .kl {
    display: inline-flex; flex: none; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px;
    background: var(--bg-soft); color: var(--grigio); font-family: var(--font-tekst); font-size: 12px; font-weight: 700; line-height: 1;
  }
  #miniExamQuestion .quiz-kafle.siatka .quiz-kafel .kl, #miniExamQuestion .rodz-opcje .quiz-kafel .kl,
  #miniExamQuestion .intruz-siatka .quiz-kafel .kl, #miniExamQuestion .odm-opcje .quiz-kafel .kl { position: absolute; left: 8px; top: 8px; }
  #miniExamQuestion .quiz-kafle.siatka .quiz-kafel, #miniExamQuestion .intruz-siatka .quiz-kafel,
  #miniExamQuestion .odm-opcje .quiz-kafel { padding-inline: 34px; }
  #miniExamQuestion .rodz-opcje .quiz-kafel .kl { left: 5px; top: 5px; width: 18px; height: 18px; font-size: 11px; border-radius: 5px; }
  #miniExamQuestion .quiz-kafle.zablokowane .quiz-kafel .kl { visibility: hidden; }
}
#miniExamQuestion .rodz-haslo { margin: 0; text-align: left; font-size: 30px; font-weight: 700; color: var(--testo); }
#miniExamQuestion .rodz-zdanie { margin: 0; max-width: none; text-align: left; }
#miniExamQuestion .rodz-tlum, #miniExamQuestion .odm-bezok { margin: 0; text-align: left; font-family: var(--font-tekst); font-size: 15px; font-weight: 600; color: var(--grigio); }
#miniExamQuestion .rodz-luka, #miniExamQuestion .odm-luka {
  display: inline-flex; align-items: center; justify-content: center; min-height: 38px; margin: 0 8px 0 0; padding: 0 8px; vertical-align: middle;
  border: 2px dashed var(--krawedz-kafla); border-radius: 10px; color: var(--testo); font-weight: 700; line-height: 1.2;
}
#miniExamQuestion .rodz-zdanie .rodz-luka, #miniExamQuestion .odm-luka { margin: 0 4px; min-width: 64px; }
#miniExamQuestion .rodz-luka.podglad, #miniExamQuestion .odm-luka.podglad { border-style: solid; border-color: var(--primary); background: var(--bg-warn-soft); }
#miniExamQuestion .rodz-luka.odslonieta, #miniExamQuestion .odm-luka.dobra { border-style: solid; border-color: var(--marka-zielony); background: var(--bg-success-soft); color: var(--testo); }
#miniExamQuestion .odm-luka.zla { border-style: solid; border-color: var(--rosso); background: var(--bg-error-soft); color: var(--testo); }
#miniExamQuestion .odm-bezok { align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: var(--crema); font-size: 14px; font-weight: 700; }
#miniExamQuestion .odm-karta { margin: 0; padding: 0; border: none; border-radius: 0; text-align: left; font-family: var(--font-naglowek); font-size: 23px; font-weight: 700; line-height: 1.5; }
#miniExamQuestion .odm-tlum-nad { margin: 0; padding: 0; border: none; border-radius: 0; background: none; text-align: left; font-family: var(--font-tekst); font-size: 15px; font-weight: 600; color: var(--grigio); }

#miniExamQuestion .pf-slowo { margin: 0; font-size: 28px; font-weight: 700; color: var(--testo); }
#miniExamQuestion .pf-tlum { margin: 0; font-family: var(--font-tekst); font-size: 18px; font-weight: 700; color: var(--testo); }
#miniExamQuestion .pf-czas { height: 6px; margin: 0; background: var(--border); }
#miniExamQuestion .pf-czas-fill { background: var(--zolty); }
#miniExamQuestion .pf-przyciski { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
#miniExamQuestion .pf-btn {
  position: relative; height: 128px; margin: 0; padding: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border: 2px solid var(--krawedz-kafla); border-bottom-width: 5px; border-radius: 22px; background: var(--card-bg); color: var(--testo);
  font-family: var(--font-naglowek); font-weight: 800; font-size: 20px; cursor: pointer; transform: none; box-shadow: none;
}
#miniExamQuestion .pf-btn:active { border-bottom-width: 2px; transform: translateY(2px); }
#miniExamQuestion .pf-kolo { width: 48px; height: 48px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
#miniExamQuestion .pf-btn.tak .pf-kolo { background: var(--marka-zielony); color: var(--granat); }
#miniExamQuestion .pf-btn.nie .pf-kolo { background: var(--marka-czerwony); color: #FFFFFF; }
#miniExamQuestion .pf-przyciski.zamrozone .pf-btn { opacity: 0.55; }
#miniExamQuestion .pf-przyciski.zablokowane .pf-btn { opacity: 1; cursor: default; transform: none; border-bottom-width: 2px; color: var(--tekst-neutralny); }
#miniExamQuestion .pf-przyciski.zablokowane .pf-btn .pf-kolo { opacity: 0.4; }
#miniExamQuestion .pf-przyciski.zablokowane .pf-btn.poprawna { border-color: var(--marka-zielony); background: var(--bg-success-soft); color: var(--testo); }
#miniExamQuestion .pf-przyciski.zablokowane .pf-btn.bledna { border-color: var(--rosso); background: var(--bg-error-soft); color: var(--testo); }
#miniExamQuestion .pf-przyciski.zablokowane .pf-btn.poprawna .pf-kolo, #miniExamQuestion .pf-przyciski.zablokowane .pf-btn.bledna .pf-kolo { opacity: 1; }
#miniExamQuestion .pf-btn .kl { display: none; }
@media (hover: hover) and (pointer: fine) {
  #miniExamQuestion .pf-btn .kl {
    display: inline-flex; position: absolute; left: 10px; top: 10px; align-items: center; justify-content: center; width: 22px; height: 22px;
    border-radius: 6px; background: var(--bg-soft); color: var(--grigio); font-family: var(--font-tekst); font-size: 12px; font-weight: 700;
  }
}
#miniExamQuestion .anagram-karta { text-align: left; }
#miniExamQuestion .anagram-odliczanie { margin: 0; padding: 0; font-family: var(--font-naglowek); font-weight: 800; font-size: 48px; line-height: 1; color: var(--testo); }
#miniExamQuestion .anagram-litery { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; }
#miniExamQuestion .anagram-odpowiedz { gap: 6px; min-height: 48px; }
#miniExamQuestion .anagram-slot {
  width: 36px; height: 48px; margin: 0; border: none; border-radius: 0; background: none;
  border-bottom: 3px solid var(--krawedz-kafla);
}
#miniExamQuestion .anagram-slot.biezacy { border-bottom-color: var(--primary); }
#miniExamQuestion .anagram-litera.ulozona {
  width: 36px; height: 48px; min-width: 0; padding: 0; margin: 0; border: none; border-radius: 0; background: none;
  border-bottom: 3px solid var(--testo); font-family: var(--font-naglowek); font-weight: 800; font-size: 26px; color: var(--testo);
}
#miniExamQuestion #anagramPula .anagram-litera {
  width: 52px; height: 56px; min-width: 0; padding: 0; margin: 0; border: 2px solid var(--krawedz-kafla); border-bottom-width: 4px;
  border-radius: 14px; background: var(--card-bg); font-family: var(--font-naglowek); font-weight: 800; font-size: 24px; color: var(--testo); transform: none;
}
#miniExamQuestion #anagramPula .anagram-litera:active { border-bottom-width: 2px; transform: translateY(2px); }
#miniExamQuestion #anagramPula .anagram-litera.zuzyta { visibility: visible; border-color: var(--border); background: var(--border); color: transparent; pointer-events: none; }
#miniExamQuestion .anagram-przedrostek { align-self: flex-end; margin: 0 4px 6px 0; font-family: var(--font-naglowek); font-size: 22px; color: var(--grigio); }
#miniExamQuestion .anagram-litery.zablokowane .anagram-litera { cursor: default; }
#miniExamQuestion .anagram-odpowiedz { flex-wrap: nowrap; }
#miniExamQuestion .anagram-odpowiedz .anagram-slot,
#miniExamQuestion .anagram-odpowiedz .anagram-litera.ulozona { flex: 0 1 36px; width: auto; min-width: 16px; }
#miniExamQuestion .anagram-odpowiedz .anagram-litera.ulozona { font-size: min(26px, calc((100cqi - var(--p, 0px) - 6px * (var(--n, 8) - 1)) / var(--n, 8) * 0.8)); }
#miniExamQuestion .anagram-odpowiedz .anagram-przedrostek { flex: none; }
#miniExamQuestion .sentence-puzzle-prompt { margin: 0; text-align: left; }
#miniExamQuestion .sentence-puzzle-answer {
  min-height: 128px; margin: 0; padding: 10px 0 0; display: flex; flex-wrap: wrap; align-content: flex-start; align-items: center; justify-content: flex-start; gap: 8px 8px;
  border: none; background: linear-gradient(transparent 62px, var(--border) 62px, var(--border) 64px, transparent 64px) 0 0 / 100% 64px;
}
#miniExamQuestion .sentence-puzzle-pool { justify-content: center; gap: 10px; }
#miniExamQuestion .sentence-tile {
  position: relative; min-height: 48px; padding: 10px 16px; display: inline-flex; align-items: center; gap: 6px; border-radius: 14px;
  border: 2px solid var(--krawedz-kafla); border-bottom-width: 4px; background: var(--card-bg); color: var(--testo);
  font-family: var(--font-tekst); font-weight: 600; font-size: 19px; line-height: 1.2;
}
#miniExamQuestion .sentence-tile:hover { border-color: var(--border-2); }
#miniExamQuestion .sentence-tile .kl { display: none; }
@media (hover: hover) and (pointer: fine) {
  #miniExamQuestion .sentence-puzzle-pool .sentence-tile .kl {
    display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 5px;
    background: var(--bg-soft); color: var(--grigio); font-size: 11px; font-weight: 700;
  }
}
#miniExamQuestion .quiz-zdanie-glosy { text-align: left; }
#miniExamQuestion .game-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; align-content: center; flex: 1; }
#miniExamQuestion .game-col { display: flex; flex-direction: column; gap: 12px; }
#miniExamQuestion .game-tile {
  min-height: 64px; padding: 8px 12px; display: flex; align-items: center; justify-content: center; text-align: center;
  border: 2px solid var(--krawedz-kafla); border-bottom-width: 4px; border-radius: 18px; background: var(--card-bg); color: var(--testo);
  font-family: var(--font-tekst); font-weight: 600; font-size: 19px; line-height: 1.2; box-shadow: none; transform: none; overflow-wrap: anywhere;
}
#miniExamQuestion .game-col:first-child .game-tile { font-family: var(--font-naglowek); font-weight: 700; }
#miniExamQuestion .game-tile.selected { border-color: var(--primary); background: var(--bg-warn-soft); }
#miniExamQuestion .game-tile.matched { border-color: var(--border); border-bottom-width: 2px; background: transparent; color: var(--tekst-neutralny); opacity: 1; pointer-events: none; }
#miniExamQuestion .game-tile.wrong { border-color: var(--rosso); background: var(--bg-error-soft); }
#miniExamQuestion .kartkowka-kartka { margin: 0; padding: 0; max-width: none; border: none; border-radius: 0; background: none; display: flex; flex-direction: column; gap: 8px; }
#miniExamQuestion .kartkowka-wiersz { grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 0; }
#miniExamQuestion .kartkowka-nr { display: none; }
#miniExamQuestion .kartkowka-obce { font-family: var(--font-tekst); font-weight: 700; font-size: 17px; }
#miniExamQuestion .kartkowka-pole { grid-column: auto; gap: 2px; }
#miniExamQuestion .kartkowka-input {
  height: 50px; box-sizing: border-box; padding: 0 14px; border: 2px solid var(--border); border-radius: 14px; background: var(--card-bg);
  font-family: var(--font-naglowek); font-weight: 700; font-size: max(16px, 19px); color: var(--testo); text-decoration: none;
}
#miniExamQuestion .kartkowka-input:focus { outline: none; border-color: var(--primary); border-style: solid; box-shadow: 0 0 0 4px var(--fokus-pierscien); }
#miniExamQuestion .kartkowka-wiersz.sprawdza .kartkowka-input { border-color: color-mix(in srgb, var(--oro) 45%, var(--border)); border-style: solid; }
#miniExamQuestion .kartkowka-wiersz.dobrze .kartkowka-input { border-color: var(--marka-zielony); background: var(--bg-success-soft); color: var(--testo); }
#miniExamQuestion .kartkowka-wiersz.zle .kartkowka-input { border-color: var(--rosso); background: var(--bg-error-soft); color: var(--testo); text-decoration: line-through; }
#miniExamQuestion .kartkowka-poprawna { font-family: var(--font-tekst); font-size: 14px; }

@media (max-width: 768px) and (max-height: 700px) {
  .quiz-scena .quiz-postac { width: calc(var(--postac-tel, 136px) * 0.72); height: calc(var(--postac-tel, 136px) * 0.72); }
  .quiz-scena.obok .quiz-dymek { margin-bottom: calc(var(--postac-tel, 136px) * 0.3); }
  .quiz-postac-kadr { width: 136px; height: 152px; }
  .quiz-scena .quiz-postac-kadr .quiz-postac { width: 272px; height: 272px; margin: -96px 0 0 -11px; }
  .quiz-dymek-slowo { font-size: 26px; }
}
@media (max-width: 768px) {
  #miniExamQuestion .quiz-arkusz { bottom: 0; }
  #miniExamQuestion .quiz-arkusz:not([data-stan]) { background: var(--crema); padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); border-radius: 0; }
  #miniExamQuestion .quiz-arkusz[data-stan] {
    margin-inline: -20px; border-radius: 28px 28px 0 0; padding: 22px 20px calc(18px + env(safe-area-inset-bottom));
    box-shadow: 0 -10px 30px -18px rgba(23, 24, 59, 0.45);
  }
  body.w-quizie .probne-licznik { bottom: calc(var(--quiz-dol, 150px) + 12px); }
}
@media (prefers-reduced-motion: reduce) {
  #miniExamArea .quiz-progress-fill { transition: none; }
  #miniExamQuestion .quiz-arkusz[data-stan] { animation: none; }
  .quiz-glosnik:has(.speaking)::after { animation: none; opacity: 0.5; }
  #miniExamQuestion .quiz-akcje .btn:active:not(:disabled), .quiz-glosnik.duzy:active { transform: none; }
  #miniExamQuestion .quiz-kafel:active, #miniExamQuestion .pf-btn:active, #miniExamQuestion .quiz-mik:active:not(:disabled) { transform: none; }
  #miniExamQuestion .anagram-odliczanie { animation: none; }
  #miniExamQuestion .quiz-mik { transition: none; }
}

#widokMowienia .mow-scena:not(.wybor) {
  max-width: 680px; width: 100%; margin-inline: auto; box-sizing: border-box;
  justify-content: flex-start; align-items: stretch; text-align: start;
  padding: 22px 28px 28px; min-height: 660px;
  background: var(--card-bg); border: 2px solid var(--border); border-radius: 28px;
}
#widokMowienia .mow-scena:not(.wybor) .mow-srodek,
#widokMowienia .mow-scena:not(.wybor) .mow-linia { display: contents; }
#widokMowienia .mow-scena:not(.wybor) .mow-zaczep { order: 1; }
#widokMowienia .mow-scena:not(.wybor) .mow-pytanie { order: 2; }
#widokMowienia .mow-scena:not(.wybor) .mow-cwiczenie-slot { order: 3; }
#widokMowienia .mow-scena:not(.wybor) .mow-gora { order: 4; }
#widokMowienia .mow-scena:not(.wybor) .mow-dymki { order: 5; }
#widokMowienia .mow-scena:not(.wybor) .mow-mik-obszar { order: 6; }
#widokMowienia .mow-scena:not(.wybor) .mow-swobodna-pasek { order: 7; }
#widokMowienia .mow-scena:not(.wybor) .mow-status { order: 8; }
#widokMowienia .mow-scena:not(.wybor) .mow-status-cichy { order: 9; }
#widokMowienia .mow-scena:not(.wybor) .mow-karta { order: 10; }
#widokMowienia .mow-scena:not(.wybor) .mow-akcje { order: 11; }
#widokMowienia .mow-scena:not(.wybor) .mow-sugestie { order: 12; }
#widokMowienia .mow-scena:not(.wybor) .mow-naglowek { position: static; order: 0; margin: 0 0 20px; margin-inline-end: 170px; }
#widokMowienia .mow-scena:not(.wybor) .mow-od-nowa { top: 20px; right: auto; inset-inline-end: 20px; }
#widokMowienia .mow-naglowek-tytul { font-size: 12.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grigio); }
#widokMowienia .mow-scena:not(.wybor) .mow-zaczep { max-width: none; width: 100%; margin: 0 0 16px; text-align: start; }
#widokMowienia .mow-scena:not(.wybor) .mow-instrukcja {
  font-family: var(--font-naglowek); font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 1.85rem); line-height: 1.15; color: var(--testo);
}
#widokMowienia .mow-scena:not(.wybor) .mow-swobodna-kryteria { justify-content: flex-start; }
#widokMowienia #mowScena[data-postac="k1"] .mow-pytanie::before { background-image: url("../../assets/img/mowienie/postacie/k1.webp"); }
#widokMowienia #mowScena[data-postac="k2"] .mow-pytanie::before { background-image: url("../../assets/img/mowienie/postacie/k2.webp"); }
#widokMowienia #mowScena[data-postac="k3"] .mow-pytanie::before { background-image: url("../../assets/img/mowienie/postacie/k3.webp"); }
#widokMowienia #mowScena[data-postac="k4"] .mow-pytanie::before { background-image: url("../../assets/img/mowienie/postacie/k4.webp"); }
#widokMowienia #mowScena[data-postac="m1"] .mow-pytanie::before { background-image: url("../../assets/img/mowienie/postacie/m1.webp"); }
#widokMowienia #mowScena[data-postac="m2"] .mow-pytanie::before { background-image: url("../../assets/img/mowienie/postacie/m2.webp"); }
#widokMowienia #mowScena[data-postac="m3"] .mow-pytanie::before { background-image: url("../../assets/img/mowienie/postacie/m3.webp"); }
#widokMowienia #mowScena[data-postac="m4"] .mow-pytanie::before { background-image: url("../../assets/img/mowienie/postacie/m4.webp"); }
#widokMowienia .mow-scena:not(.wybor) .mow-linia .mow-pytanie,
#widokMowienia .mow-scena:not(.wybor) .mow-linia.z-statusem .mow-pytanie { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
#widokMowienia .mow-scena:not(.wybor) .mow-linia.pusto .mow-pytanie { display: none; }
#widokMowienia .mow-scena:not(.wybor) .mow-pytanie:not(:empty):not(:has(.mow-bot-opis)) {
  position: relative; align-items: stretch; align-self: stretch; min-height: 64px; box-sizing: border-box;
  margin: 60px 0 32px 124px; padding: 14px 16px 10px; text-align: start;
  background: var(--card-bg); border: 2px solid var(--border); border-radius: 22px;
  transition: border-color .2s var(--mow-ease), box-shadow .2s var(--mow-ease);
}
#widokMowienia .mow-scena:not(.wybor) .mow-pytanie:not(:empty):not(:has(.mow-bot-opis))::before {
  content: ''; position: absolute; left: -122px; bottom: -30px; width: 104px; height: 156px; pointer-events: none;
  background: center bottom / contain no-repeat;
}
:root[data-theme="dark"] #widokMowienia .mow-scena:not(.wybor) .mow-pytanie:not(:empty):not(:has(.mow-bot-opis))::before {
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 0.5px rgba(255, 255, 255, 0.85));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #widokMowienia .mow-scena:not(.wybor) .mow-pytanie:not(:empty):not(:has(.mow-bot-opis))::before {
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 0.5px rgba(255, 255, 255, 0.85));
  }
}
#widokMowienia .mow-scena:not(.wybor) .mow-pytanie:not(:empty):not(:has(.mow-bot-opis))::after {
  content: ''; position: absolute; left: -10px; bottom: 18px; width: 16px; height: 16px; pointer-events: none;
  background: var(--card-bg); border-left: 2px solid var(--border); border-bottom: 2px solid var(--border); transform: rotate(45deg);
  transition: border-color .2s var(--mow-ease);
}
#widokMowienia .mow-scena:has(#mowMikObszar.lektor) .mow-pytanie:not(:empty):not(:has(.mow-bot-opis)) {
  border-color: var(--marka-niebieski); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marka-niebieski) 18%, transparent);
}
#widokMowienia .mow-scena:has(#mowMikObszar.lektor) .mow-pytanie:not(:empty):not(:has(.mow-bot-opis))::after { border-color: var(--marka-niebieski); }
#widokMowienia .mow-scena:not(.wybor) .mow-pytanie-wiersz { justify-content: flex-start; align-items: flex-start; }
#widokMowienia .mow-scena:not(.wybor) .mow-bot-tekst {
  font-family: var(--font-naglowek); font-weight: 700; font-size: clamp(1.2rem, 2vw, 1.4rem); line-height: 1.3;
}
#widokMowienia .mow-scena:not(.wybor) .mow-bot-narzedzia { justify-content: flex-start; }
#widokMowienia .mow-scena:not(.wybor) .mow-pytanie:has(.mow-bot-opis) { align-self: stretch; margin: 6px 0 20px; }
#widokMowienia .mow-scena:not(.wybor) .mow-bot-opis {
  max-width: none; width: 100%; box-sizing: border-box; padding: 18px 20px 14px; border-radius: 26px; border: none;
  background: var(--granat); color: #fff;
}
#widokMowienia .mow-scena:not(.wybor) .mow-bot-opis .mow-bot-tekst { color: #fff; font-weight: 600; font-size: clamp(1.05rem, 1.8vw, 1.2rem); line-height: 1.45; }
#widokMowienia .mow-scena:not(.wybor) .mow-bot-opis .mow-bot-tlum { color: rgba(255, 255, 255, 0.8); }
#widokMowienia .mow-scena:not(.wybor) .mow-bot-opis .mow-glos { color: rgba(255, 255, 255, 0.75); }
#widokMowienia .mow-scena:not(.wybor) .mow-bot-opis .mow-glos:hover, #widokMowienia .mow-scena:not(.wybor) .mow-bot-opis .mow-glos.wl { color: var(--zolty); }
#widokMowienia .mow-scena:not(.wybor) .mow-tlum-wiersz { justify-content: flex-start; }
#widokMowienia .mow-scena:not(.wybor) .mow-bot-opis .mow-tlum-przelacz { border-color: rgba(255, 255, 255, 0.4); color: #fff; }
#widokMowienia .mow-scena:not(.wybor) .mow-bot-opis .mow-tlum-przelacz:hover { border-color: var(--zolty); }
#widokMowienia .mow-scena:not(.wybor) .mow-bot-opis .mow-tlum-przelacz:focus-visible { outline-color: var(--zolty); }
#widokMowienia .mow-scena:not(.wybor) .mow-bot-opis .mow-tlum-przelacz.wl { background: var(--zolty); border-color: var(--zolty); color: var(--granat); }
#widokMowienia .mow-scena:not(.wybor) .mow-opis-etykieta { color: var(--zolty); font-size: 0.75rem; }
:root[data-theme="dark"] #widokMowienia .mow-scena:not(.wybor) .mow-bot-opis { background: var(--granat-jasny); box-shadow: inset 0 0 0 2px var(--border-2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #widokMowienia .mow-scena:not(.wybor) .mow-bot-opis { background: var(--granat-jasny); box-shadow: inset 0 0 0 2px var(--border-2); }
}
#widokMowienia .mow-scena:not(.wybor) .mow-bot-opis .znane-slowo { background: rgba(255, 255, 255, 0.16); color: #fff; }
#widokMowienia .mow-scena:not(.wybor) .mow-bot-opis.ui,
:root[data-theme="dark"] #widokMowienia .mow-scena:not(.wybor) .mow-bot-opis.ui { background: var(--zolty); color: var(--granat); box-shadow: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #widokMowienia .mow-scena:not(.wybor) .mow-bot-opis.ui { background: var(--zolty); color: var(--granat); box-shadow: none; }
}
#widokMowienia .mow-scena:not(.wybor) .mow-bot-opis.ui .mow-bot-tekst,
#widokMowienia .mow-scena:not(.wybor) .mow-bot-opis.ui .mow-opis-etykieta { color: var(--granat); }
#widokMowienia .mow-scena:not(.wybor) .mow-bot-opis.ui .mow-glos { color: rgba(23, 24, 59, 0.7); }
#widokMowienia .mow-scena:not(.wybor) .mow-bot-opis.ui .mow-glos:hover,
#widokMowienia .mow-scena:not(.wybor) .mow-bot-opis.ui .mow-glos.wl { color: var(--granat); }
.mow-opis-etykieta .ico { margin: 0 4px 0 0; }
#widokMowienia .mow-scena:not(.wybor) .mow-gora:not(:empty) {
  align-self: flex-end; max-width: 86%; margin: 0 0 14px; padding: 10px 16px; justify-content: flex-start; text-align: start;
  background: color-mix(in srgb, var(--marka-niebieski) 10%, var(--card-bg)); border: 2px solid var(--marka-niebieski);
  border-radius: 22px 22px 6px 22px; color: var(--testo);
  font-family: var(--font-naglowek); font-weight: 700; font-size: 1.15rem;
  --mow-gora-tlo: color-mix(in srgb, var(--marka-niebieski) 10%, var(--card-bg));
}
#widokMowienia .mow-scena:not(.wybor) .mow-gora:not(:empty) { max-height: calc(4.8em + 24px); }
#widokMowienia .mow-scena:not(.wybor) .mow-srodek.z-cwiczeniem .mow-gora:not(:empty) { max-height: calc(1.6em + 24px); }
#widokMowienia .mow-scena:not(.wybor) .mow-gora.przewija:not(:empty) { -webkit-mask-image: none; mask-image: none; position: relative; }
#widokMowienia .mow-scena:not(.wybor) .mow-srodek.z-cwiczeniem .mow-gora.przewija:not(:empty) { justify-content: flex-end; }
#widokMowienia .mow-scena:not(.wybor) .mow-gora.przewija:not(:empty)::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1.4em; z-index: 1; pointer-events: none;
  border-radius: 20px 20px 0 0; background: linear-gradient(to bottom, var(--mow-gora-tlo), transparent);
}
#widokMowienia .mow-scena:not(.wybor) .mow-srodek.z-cwiczeniem .mow-gora.przewija:not(:empty)::before {
  inset: 0 auto 0 0; width: 22%; height: auto; border-radius: 20px 0 0 20px;
  background: linear-gradient(to right, var(--mow-gora-tlo), transparent);
}
#widokMowienia .mow-scena:not(.wybor) .mow-dymki {
  flex-direction: column; align-items: stretch; justify-content: flex-start; flex-wrap: nowrap;
  width: 100%; min-height: 0; gap: 12px; padding: 0; margin-bottom: 20px;
}
#widokMowienia .mow-scena:not(.wybor) .mow-dymek {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; column-gap: 0; row-gap: 2px; align-items: center;
  width: 100%; max-width: none; box-sizing: border-box; min-height: 58px; padding: 12px 12px 12px 18px; text-align: start;
  background: var(--card-bg); border: 2px solid var(--border); border-radius: 18px; box-shadow: 0 4px 0 var(--border);
  font-family: var(--font-naglowek); font-weight: 700; font-size: 1.15rem; line-height: 1.3; color: var(--testo);
}
#widokMowienia .mow-scena:not(.wybor) .mow-dymek > * { grid-column: 1; }
#widokMowienia .mow-scena:not(.wybor) .mow-dymek:hover { background: var(--card-bg); border-color: var(--marka-niebieski); }
#widokMowienia .mow-scena:not(.wybor) .mow-dymek.uzyty { box-shadow: 0 4px 0 var(--border); }
#widokMowienia .mow-scena:not(.wybor) .mow-dymek-pl,
#widokMowienia .mow-scena:not(.wybor) .mow-duch-dalej { font-family: var(--font-tekst); font-weight: 500; font-size: 0.92rem; }
#widokMowienia .mow-scena:not(.wybor) .mow-dymek.po-naszemu .mow-dymek-tekst { font-family: var(--font-tekst); font-weight: 600; }
#widokMowienia .mow-scena:not(.wybor) .mow-dymek-cel { font-family: var(--font-naglowek); }
#widokMowienia .mow-scena:not(.wybor) .mow-dymek > .mow-plus,
#widokMowienia .mow-scena:not(.wybor) .mow-dymek > .mow-gwiazda,
#widokMowienia .mow-scena:not(.wybor) .mow-dymek > .mow-pomin { position: static; grid-row: 1 / span 3; align-self: center; margin-left: 8px; }
#widokMowienia .mow-scena:not(.wybor) .mow-dymek > .mow-plus {
  grid-column: 2; padding: 3px 9px; font-size: 0.82rem; font-weight: 800; box-shadow: none;
  background: color-mix(in srgb, var(--marka-zielony) 16%, var(--card-bg)); color: var(--verde);
}
#widokMowienia .mow-scena:not(.wybor) .mow-dymek > .mow-gwiazda { grid-column: 3; font-size: 1.2rem; filter: none; }
#widokMowienia .mow-scena:not(.wybor) .mow-dymek > .mow-pomin {
  grid-column: 4; width: 34px; height: 34px; font-size: 0.95rem; border: none; box-shadow: none; background: var(--bg-soft); color: var(--muted-dark);
}
#widokMowienia .mow-scena:not(.wybor) .mow-dymek.trafiony {
  background: color-mix(in srgb, var(--marka-zielony) 14%, var(--card-bg)); border-color: var(--marka-zielony);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--marka-zielony) 70%, var(--granat));
}
#widokMowienia .mow-scena:not(.wybor) .mow-dymek.pominiety {
  background: color-mix(in srgb, var(--zolty) 22%, var(--card-bg)); border-color: var(--zolty); box-shadow: 0 4px 0 color-mix(in srgb, var(--zolty) 70%, var(--granat));
}
#widokMowienia .mow-scena:not(.wybor) .mow-dymek.duch {
  background: transparent; border-style: dashed; box-shadow: none; color: var(--muted-light);
  font-family: var(--font-tekst); font-weight: 700; font-size: 1rem;
}
#widokMowienia .mow-scena:not(.wybor) .mow-dymek.duch:hover { border-color: var(--marka-niebieski); color: var(--muted-dark); }
#widokMowienia .mow-scena:not(.wybor) .mow-mik-obszar { align-self: center; width: 128px; height: 128px; margin-top: auto; }
#widokMowienia .mow-scena:not(.wybor) .mow-mik {
  inset: 16px; background: var(--marka-zielony); color: var(--granat);
  box-shadow: 0 6px 0 color-mix(in srgb, var(--marka-zielony) 70%, var(--granat)), 0 0 0 10px color-mix(in srgb, var(--marka-zielony) 14%, transparent);
}
#widokMowienia .mow-scena:not(.wybor) .mow-mik:hover:not(:disabled) { background: color-mix(in srgb, var(--marka-zielony) 88%, #fff); }
#widokMowienia .mow-scena:not(.wybor) .mow-mik.slucha, #widokMowienia .mow-scena:not(.wybor) .mow-mik.slucha:hover {
  background: var(--marka-zielony); color: var(--granat);
  box-shadow: 0 6px 0 color-mix(in srgb, var(--marka-zielony) 70%, var(--granat)),
              0 0 0 calc(10px + var(--moc, 0) * 10px) color-mix(in srgb, var(--marka-zielony) 22%, transparent),
              0 0 0 calc(22px + var(--moc, 0) * 14px) color-mix(in srgb, var(--marka-zielony) 10%, transparent);
}
#widokMowienia .mow-scena:not(.wybor) .mow-mik:disabled { background: var(--bg-soft); color: var(--muted-light); box-shadow: none; }
#widokMowienia .mow-scena:not(.wybor) .mow-mik .ico { font-size: 2rem; }
#widokMowienia .mow-scena:not(.wybor) .mow-fala { color: var(--marka-zielony); }
#widokMowienia .mow-scena:not(.wybor) .mow-odliczanie { inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
#widokMowienia .mow-scena:not(.wybor) .mow-lektor, #widokMowienia .mow-scena:not(.wybor) .mow-dalej { inset: 16px; }
#widokMowienia .mow-scena:not(.wybor) .mow-status { align-self: center; margin-top: 14px; text-align: center; }
#widokMowienia .mow-scena:not(.wybor) .mow-linia:not(.z-statusem) .mow-status:empty { display: none; }
#widokMowienia .mow-scena:not(.wybor) .mow-status.ok { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.5rem; color: var(--verde); }
#widokMowienia .mow-scena:not(.wybor) .mow-status-cichy, #widokMowienia .mow-scena:not(.wybor) .mow-swobodna-pasek { align-self: center; text-align: center; }
#widokMowienia .mow-scena:not(.wybor) .mow-cwiczenie-slot .mow-cwiczenie:not(.mow-poprawka-karta) { padding: 0; margin-bottom: 16px; }
#widokMowienia .mow-scena:not(.wybor) .mow-poprawka-karta {
  max-width: none; width: 100%; box-sizing: border-box; align-items: flex-start; text-align: start; padding: 16px 48px 14px 20px; margin: 0 0 16px;
  border: 2px solid var(--border); border-radius: 22px; box-shadow: 0 4px 0 var(--border);
}
#widokMowienia .mow-scena:not(.wybor) .mow-pomylka-karta {
  background: color-mix(in srgb, var(--marka-czerwony) 9%, var(--card-bg)); border-color: transparent; box-shadow: none;
}
#widokMowienia .mow-scena:not(.wybor) .mow-cwiczenie-zdanie { font-family: var(--font-naglowek); font-weight: 700; font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.4; }
#widokMowienia .mow-scena:not(.wybor) .mow-fragment-slowo { color: var(--testo); background: color-mix(in srgb, var(--zolty) 30%, transparent); border-radius: 8px; padding: 0 6px; }
#widokMowienia .mow-scena:not(.wybor) .mow-pomylka-dalej { text-align: start; }

#widokTekstow .czyt-arena { margin: 0 0 14px; gap: 14px; }
#widokTekstow .czyt-arena .kartka-pasek { margin: 0; gap: 6px; flex-wrap: wrap; row-gap: 10px; }
#widokTekstow .czyt-arena .kartka-wroc { order: 0; }
#widokTekstow .czyt-arena .kartka-tytul-blok { order: 1; flex: 1 1 200px; margin: 0 6px; }
#widokTekstow .czyt-arena .kartka-ikona { order: 2; }
#widokTekstow .czyt-arena .kartka-akcje { order: 3; align-items: center; }
#widokTekstow .czyt-arena .kartka-tytul {
  font-family: var(--font-naglowek); font-weight: 800; font-size: 1.32rem; line-height: 1.25; letter-spacing: -0.01em; color: var(--fa-tekst, #17183B);
}
#widokTekstow .czyt-arena .kartka-meta { margin-top: 2px; font-size: 0.86rem; font-weight: 600; color: var(--fa-tekst2, #4F5270); }
#widokTekstow .czyt-arena .fa-btn.zablokowany { opacity: 0.4; cursor: not-allowed; }
#widokTekstow .czyt-arena .kartka-akcje .btn {
  min-height: 42px; border: 0; border-radius: 14px; box-shadow: none; background: var(--fa-szklo, #FFFFFF); color: var(--fa-tekst, #17183B);
}
#widokTekstow .czyt-arena .kartka-akcje .btn:hover { background: var(--fa-szklo-mocne, #F6F7FB); transform: none; }
#widokTekstow .czyt-arena .pochodzenie-pytanie { color: var(--fa-tekst2, #4F5270); }
#widokTekstow .czyt-arena .kartka-postep { height: 6px; margin: 0; border-radius: 3px; background: var(--fa-tor, #D3D8E5); }
#widokTekstow .czyt-arena .kartka-postep-fill { border-radius: 3px; background: #FFC83D; box-shadow: none; }
.czyt-dymek-fiszki {
  position: absolute; z-index: 30; width: min(300px, calc(100% - 16px)); box-sizing: border-box; padding: 14px 16px 12px;
  border-radius: 18px; background: #17183B; color: #FFFFFF; box-shadow: 0 12px 32px rgba(23, 24, 59, 0.28);
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; animation: czdfWejscie 0.28s cubic-bezier(.22,1,.36,1);
}
.czyt-dymek-fiszki::after {
  content: ''; position: absolute; left: calc(var(--czdf-strzalka, 50%) - 8px); bottom: -7px; width: 16px; height: 16px;
  background: #17183B; transform: rotate(45deg); border-radius: 3px;
}
.czyt-dymek-fiszki.pod::after { bottom: auto; top: -7px; }
.czdf-cta {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  color: #FFC83D; font-family: var(--font-naglowek); font-weight: 800; font-size: 1.05rem; line-height: 1.25; text-align: start;
}
.czdf-cta .ico { margin: 0; font-size: 1rem; }
.czdf-cta:hover span { text-decoration: underline; text-underline-offset: 3px; }
.czdf-opis { margin: 0; font-size: 0.88rem; line-height: 1.4; color: rgba(255, 255, 255, 0.82); }
.czdf-nie {
  align-self: flex-end; margin: 2px 0 0; padding: 4px 2px; border: 0; background: none; cursor: pointer;
  color: rgba(255, 255, 255, 0.62); font-size: 0.82rem; font-weight: 600;
}
.czdf-nie:hover { color: #FFFFFF; }
.czdf-cta:focus-visible, .czdf-nie:focus-visible { outline: 2px solid #FFC83D; outline-offset: 2px; border-radius: 6px; }
@keyframes czdfWejscie { from { opacity: 0; transform: translateY(6px) scale(0.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .czyt-dymek-fiszki { animation: none; } }
@media (max-width: 600px) {
  #widokTekstow .czyt-arena .kartka-tytul-blok { flex-basis: calc(100% - 60px); }
  #widokTekstow .czyt-arena { padding: 14px; border-radius: 24px; }
  #widokTekstow .czyt-arena .fa-btn { width: 40px; height: 40px; border-radius: 13px; }
  #widokTekstow .czyt-arena .kartka-tytul { font-size: 1.12rem; }
}

#widokTekstow .kartka.z-poziomami { padding-inline-start: 72px; }
body.focus-mode #widokTekstow .kartka.z-poziomami { padding-inline-start: 84px; }
.kartka-poziomy { position: absolute; inset-block: 0; inset-inline-start: 0; width: 64px; pointer-events: none; }
.kp-poziom {
  --kp-barwa: var(--oro); position: absolute; inset-inline-start: 20px; width: 36px; padding: 0; border: 0; background: none;
  cursor: pointer; pointer-events: auto; display: flex; flex-direction: column; align-items: center;
}
.kp-poziom::after {
  content: ''; flex: 1 1 auto; width: 3px; margin-top: 6px; border-radius: 2px;
  background: color-mix(in srgb, var(--kp-barwa) 55%, transparent);
}
.kp-nr {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--kp-barwa); color: var(--na-akcencie); font-family: var(--font-naglowek); font-weight: 800; font-size: 0.95rem;
  transition: transform 0.15s ease;
}
.kp-nr .ico { margin: 0; line-height: 1; font-size: 0.85rem; }
.kp-poziom:hover .kp-nr, .kp-poziom:focus-visible .kp-nr { transform: scale(1.1); }
.kp-poziom:focus-visible { outline: none; }
.kp-poziom:focus-visible .kp-nr { box-shadow: 0 0 0 3px var(--fokus, #2463E9); }
.kp-poziom.zaliczony { --kp-barwa: var(--verde); }
.kp-poziom.zaliczony .kp-nr { color: #FFFFFF; }
.kp-poziom.zamkniety { --kp-barwa: var(--border-2); cursor: default; }
.kp-poziom.zamkniety .kp-nr { color: var(--grigio); }
@media (prefers-reduced-motion: reduce) { .kp-nr { transition: none; } .kp-poziom:hover .kp-nr { transform: none; } }
#widokTekstow .kartka.kartka-rtl.z-poziomami { padding-inline-start: 32px; padding-inline-end: 72px; }
body.focus-mode #widokTekstow .kartka.kartka-rtl.z-poziomami { padding-inline-start: 60px; padding-inline-end: 84px; }
.kartka.kartka-rtl .kartka-poziomy { inset-inline-start: auto; inset-inline-end: 0; }
.kartka.kartka-rtl .kp-poziom { inset-inline-start: auto; inset-inline-end: 20px; }
@media (max-width: 600px) {
  #widokTekstow .kartka.z-poziomami, body.focus-mode #widokTekstow .kartka.z-poziomami { padding-inline-start: 50px; }
  #widokTekstow .kartka.kartka-rtl.z-poziomami, body.focus-mode #widokTekstow .kartka.kartka-rtl.z-poziomami { padding-inline-start: 16px; padding-inline-end: 50px; }
  .kartka-poziomy { width: 44px; }
  .kp-poziom { inset-inline-start: 10px; width: 28px; }
  .kartka.kartka-rtl .kp-poziom { inset-inline-start: auto; inset-inline-end: 10px; }
  .kp-nr { width: 26px; height: 26px; font-size: 0.8rem; }
}

#widokTekstow .kartka {
  background-image: none; background-color: var(--card-bg);
  border: 2px solid var(--border); border-radius: 28px; box-shadow: none; padding: 30px 32px;
}
#widokTekstow .kartka::before { display: none; }
#widokTekstow .kartka-akapit { padding-left: 0; line-height: 1.8; }
[dir="rtl"] #widokTekstow .kartka-akapit { padding-right: 0; }
#widokTekstow .kartka-akapit + .kartka-akapit { margin-top: 18px; }
#widokTekstow .kartka-postep { height: 12px; border-radius: 999px; background: var(--border); overflow: hidden; }
#widokTekstow .kartka-postep-fill { background: var(--marka-niebieski); border-radius: 999px; box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.25); }
#widokTekstow .kartka-segment.aktywny {
  margin: 16px 0; padding: 14px 16px; border-radius: 22px; box-shadow: none;
  background: color-mix(in srgb, var(--marka-niebieski) 7%, var(--card-bg)); border: 2px solid var(--marka-niebieski);
}
#widokTekstow .kartka-proba-wnetrze { gap: 10px; padding-top: 10px; padding-bottom: 10px; }
#widokTekstow .kartka-segment.aktywny .kartka-zrodlo { color: var(--testo); font-family: var(--font-naglowek); font-weight: 700; font-size: calc(var(--kartka-pismo, 16.32px) * 1.13); line-height: 1.4; }
#widokTekstow .proba-linia { display: flex; flex-direction: column; align-items: stretch; gap: 10px; line-height: 1.45; }
#widokTekstow .proba-pole {
  display: block; min-height: 52px; box-sizing: border-box; padding: 13px 16px; border-radius: 16px;
  background: var(--card-bg); border: 2px solid var(--marka-niebieski); font-size: calc(var(--kartka-pismo, 16.32px) * 1.03);
}
#widokTekstow .proba-ikony { display: flex; align-items: center; gap: 10px; white-space: normal; }
#widokTekstow .proba-ikona {
  width: 52px; height: 52px; margin: 0; border-radius: 999px; font-size: 1.25rem;
  display: inline-flex; align-items: center; justify-content: center;
}
#widokTekstow .proba-ikona.mik { order: 1; background: var(--marka-zielony); border: none; color: var(--granat); box-shadow: 0 4px 0 color-mix(in srgb, var(--marka-zielony) 70%, var(--granat)); }
#widokTekstow .proba-ikona.mik:hover { border: none; color: var(--granat); }
#widokTekstow .proba-ikona.nie { order: 2; background: var(--card-bg); border: 2px solid var(--border); color: var(--testo); box-shadow: 0 4px 0 var(--border); }
#widokTekstow .proba-ikona.ok { order: 3; margin-inline-start: auto; width: 64px; background: var(--oro); border: none; color: var(--na-akcencie); box-shadow: 0 4px 0 color-mix(in srgb, var(--oro) 70%, #000); }
#widokTekstow .proba-ikona.ok:hover, #widokTekstow .proba-ikona.nie:hover, #widokTekstow .proba-ikona.mik:hover { transform: translateY(-1px); }
#widokTekstow .proba-pole-wrap { position: relative; display: block; }
#widokTekstow .proba-pole-wrap .proba-ikona.mik,
#widokTekstow .proba-pole-wrap .proba-ikona.mik:hover {
  position: absolute; inset-inline-start: 8px; top: 8px; z-index: 1; width: 36px; height: 36px; font-size: 1.15rem;
  background: none; border: none; box-shadow: none; color: var(--grigio); transform: none;
}
#widokTekstow .proba-pole-wrap .proba-ikona.mik:hover { color: var(--testo); }
#widokTekstow .proba-pole-wrap .proba-ikona.mik:focus-visible { outline: 2px solid var(--fokus, #2463E9); outline-offset: 0; border-radius: 10px; }
#widokTekstow .proba-pole-wrap .proba-ikona.mik.slucha { color: var(--rosso); transform: scale(calc(1 + var(--moc, 0) * 0.25)); }
#widokTekstow .proba-pole-wrap .proba-ikona.mik.mysli { color: var(--primary); }
#widokTekstow .proba-pole-wrap:has(.proba-ikona.mik) .proba-pole:empty { padding-inline-start: 46px; }
#widokTekstow .proba-pole-wrap:has(.proba-pole:not(:empty)) .proba-ikona.mik { display: none; }
@media (prefers-reduced-motion: reduce) { #widokTekstow .proba-pole-wrap .proba-ikona.mik.slucha { transform: none; } }
#widokTekstow .proba-pole-wrap .proba-ikony {
  position: absolute; inset-inline-end: 8px; bottom: 8px; z-index: 1; display: flex; flex-direction: row; gap: 2px;
}
#widokTekstow .proba-pole-wrap .proba-ikona.ok,
#widokTekstow .proba-pole-wrap .proba-ikona.nie {
  width: 36px; height: 36px; margin: 0; font-size: 1.15rem; background: none; border: none; box-shadow: none;
  color: var(--grigio); transform: none;
}
#widokTekstow .proba-pole-wrap .proba-ikona.nie { order: 1; }
#widokTekstow .proba-pole-wrap .proba-ikona.ok { order: 2; margin-inline-start: 0; }
#widokTekstow .proba-pole-wrap .proba-ikona.nie:hover { color: var(--testo); transform: none; }
#widokTekstow .proba-pole-wrap:has(.proba-pole:not(:empty)) .proba-ikona.ok { color: var(--marka-niebieski); }
#widokTekstow .proba-pole-wrap .proba-ikona.ok:hover { color: var(--verde); transform: none; }
#widokTekstow .proba-pole-wrap .proba-ikona:focus-visible { outline: 2px solid var(--fokus, #2463E9); outline-offset: 0; border-radius: 10px; }
#widokTekstow .proba-pole-wrap .proba-pole { padding-inline-end: 88px; }
@media (hover: none) and (pointer: coarse) {
  #widokTekstow .proba-pole { font-size: max(16px, calc(var(--kartka-pismo, 16.32px) * 1.03)) !important; }
}
#widokTekstow .proba-czesci { font-size: 0.85rem; }
@media (prefers-reduced-motion: reduce) {
  #widokTekstow .proba-ikona:hover { transform: none; }
}
@media (max-width: 600px) {
  #widokMowienia .mow-scena:not(.wybor) { padding: 20px 16px 20px; border-radius: 22px; }
  #widokMowienia .mow-scena:not(.wybor) .mow-naglowek { margin-inline-end: 0; margin-top: 46px; }
  #widokMowienia .mow-scena:not(.wybor) .mow-zglos { top: 18px; inset-inline-end: auto; inset-inline-start: 12px; }
  #widokMowienia .mow-scena:not(.wybor) .mow-pytanie:not(:empty):not(:has(.mow-bot-opis)) { margin: 12px 0 24px 68px; }
  #widokMowienia .mow-scena:not(.wybor) .mow-pytanie:not(:empty):not(:has(.mow-bot-opis))::before { left: -70px; bottom: -20px; width: 60px; height: 90px; }
  #widokMowienia .mow-scena:not(.wybor) .mow-dymek { padding: 10px 10px 10px 14px; font-size: 1.05rem; }
  #widokMowienia .mow-scena:not(.wybor) .mow-dymek > .mow-pomin { width: 30px; height: 30px; }
  #widokMowienia .mow-scena:not(.wybor) .mow-dymek > .mow-plus,
  #widokMowienia .mow-scena:not(.wybor) .mow-dymek > .mow-gwiazda,
  #widokMowienia .mow-scena:not(.wybor) .mow-dymek > .mow-pomin { margin-left: 6px; }
  #widokTekstow .kartka { padding: 20px 16px; border-radius: 22px; }
}

.community-topbar .cmty-rodzaje {
  flex: 1 0 100%; order: 99; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 2px 0 2px; margin-top: 2px;
}
.community-topbar .cmty-rodzaje::-webkit-scrollbar { display: none; }
.cmty-rodzaj {
  flex: none; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 999px;
  border: 2px solid var(--border); background: var(--card-bg); color: var(--testo); cursor: pointer;
  font: inherit; font-weight: 800; font-size: 0.86rem; white-space: nowrap;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.cmty-rodzaj:hover { border-color: var(--border-2); background: var(--bg-soft); }
.cmty-rodzaj.active, .cmty-rodzaj.active:hover { background: var(--oro); border-color: var(--oro); color: var(--na-akcencie); }
.cmty-rodzaj:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
.cmty-rodzaj .ico { margin: 0; font-size: 0.85rem; }
.cmty-rodzaj-kropka { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.6); }
.cmty-rodzaj-ile { font-weight: 700; opacity: 0.62; font-variant-numeric: tabular-nums; }
a.cmty-rodzaj-konto, a.cmty-rodzaj-konto:hover { text-decoration: none; color: var(--testo); }
.community-topbar { position: relative; }
.cmty-filtr-btn .cmty-sort-strzalka { margin: 0 -4px 0 -2px; font-size: 0.8rem; opacity: 0.7; }
.cmty-filtr-btn .cmty-filtr-swiat { font-size: 0.8rem; opacity: 0.85; }
.cmty-filtr-panel {
  position: absolute; z-index: 5; width: 264px; max-width: calc(100% - 8px); box-sizing: border-box;
  display: flex; flex-direction: column; gap: 2px; padding: 10px 8px 8px; border-radius: 18px;
  background: var(--card-bg); border: 1px solid var(--border); box-shadow: 0 16px 36px -12px rgba(23, 24, 59, 0.32);
}
.cmty-filtr-panel[hidden], .cmty-filtr-jezyki[hidden] { display: none; }
.cmty-filtr-tytul {
  padding: 2px 10px 6px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--grigio);
}
.cmty-filtr-lista, .cmty-filtr-jezyki { display: flex; flex-direction: column; gap: 2px; }
.cmty-filtr-jezyki { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border); }
.cmty-filtr-opcja {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 10px; border: none;
  border-radius: 12px; background: none; color: var(--testo); font: inherit; font-weight: 700; font-size: 0.88rem;
  text-align: start; cursor: pointer;
}
.cmty-filtr-opcja:hover { background: var(--bg-soft); }
.cmty-filtr-opcja:focus-visible { outline: 3px solid var(--oro); outline-offset: -3px; }
.cmty-filtr-opcja > span:not(.cmty-rodzaj-kropka):not(.cmty-rodzaj-ile):not(.cmty-filtr-suwak) { flex: 1; min-width: 0; }
.cmty-filtr-opcja .ico { margin: 0; font-size: 0.85rem; }
.cmty-filtr-opcja .cmty-filtr-znak { visibility: hidden; color: var(--oro); }
.cmty-filtr-opcja.active { background: var(--bg-soft); }
.cmty-filtr-opcja.active .cmty-filtr-znak { visibility: visible; }
.cmty-filtr-suwak {
  position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: var(--border-2);
  transition: background .15s ease;
}
.cmty-filtr-suwak::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--card-bg); transition: transform .15s ease;
}
#cmtyMixBtn.wlaczony .cmty-filtr-suwak { background: var(--zolty); }
#cmtyMixBtn.wlaczony .cmty-filtr-suwak::after { background: var(--granat); transform: translateX(14px); }
@media (prefers-reduced-motion: reduce) { .cmty-filtr-suwak, .cmty-filtr-suwak::after { transition: none; } }
#communitySortBtn .cmty-sort-strzalka { margin: 0 -2px 0 2px; font-size: 0.8rem; opacity: 0.7; }
.community-topbar .community-search-wrap { max-width: 1040px; }
.community-topbar .community-search-wrap #communitySearch { padding-right: 88px; }
.community-topbar .community-search-wrap .community-aparat {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 36px; height: 36px; min-width: 0;
  border: none; border-radius: 50%; background: var(--zolty); color: var(--granat); box-shadow: none;
}
.community-topbar .community-search-wrap .community-aparat:hover { background: #F2B21C; color: var(--granat); box-shadow: none; }
.community-topbar .community-search-wrap .community-aparat .ico { margin: 0; }
.community-topbar .community-search-wrap .community-search-clear { right: 46px; }
body.tryb-goscia .community-topbar .community-search-wrap #communitySearch { padding-right: 40px; }
body.tryb-goscia .community-topbar .community-search-wrap .community-search-clear { right: 8px; }

#communityBoard.community-board { column-gap: 6px; row-gap: 0; grid-auto-rows: 2px; }
#communityBoard .community-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(23, 24, 59, 0.22); }
#communityBoard .community-tile.otwarty:hover { transform: none; }

body.tryb-goscia #communityBoard .community-tile .cmty-pokrycie { display: none; }

@media (prefers-reduced-motion: reduce) {
  #communityBoard .community-tile:hover { transform: none; }
}

#communityBoard.community-board { column-gap: 10px; }
#communityBoard .community-tile.pin.pin {
  background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; display: block;
}
#communityBoard .community-tile.pin.pin:hover { transform: none; box-shadow: none; }
#communityBoard .community-tile.pin.menu-otwarte { z-index: 30; }
#communityBoard .community-tile.pin.otwarty { outline: none; }
#communityBoard .community-tile.pin.otwarty .pin-ok { outline: 3px solid var(--oro); outline-offset: 2px; }

#communityBoard .pin-ok { position: relative; display: block; overflow: hidden; border-radius: 16px; background: var(--bg-soft); }
#communityBoard .pin-ok > img { display: block; width: 100%; height: auto; }
#communityBoard .pin-ok-utwor { aspect-ratio: 1 / 1; background: #17183B; }
#communityBoard .pin-ok-utwor > img, #communityBoard .pin-ok-rozmowa.z-obrazem > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
#communityBoard .pin-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%; background: #FFFFFF; color: #17183B;
  display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}
#communityBoard .pin-play .ico { margin: 0 0 0 2px; font-size: 1rem; }
#communityBoard .pin-zrodlo {
  position: absolute; left: 10px; bottom: 9px; padding: 2px 7px; border-radius: 999px;
  background: rgba(23, 24, 59, 0.72); color: #FFFFFF; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.02em;
}
#communityBoard .pin-ok-rozmowa { background: #35A64D; }
#communityBoard .pin-ok-rozmowa.z-obrazem { aspect-ratio: 4 / 3; }
#communityBoard .pin-ok-rozmowa:not(.z-obrazem) { padding: 10px 10px 2px; }
#communityBoard .pin-ok-rozmowa .pin-ilustracja { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
#communityBoard .pin-znak-ai { position: absolute; left: 10px; bottom: 9px; z-index: 3; }
#communityBoard .pin-ok:has(> .pin-znak-ai) .pin-nak-wiersz { padding-left: 30px; }
#communityBoard .pin-ok-tekst {
  min-height: 160px; box-sizing: border-box; padding: 12px 14px 16px;
  background: var(--card-bg); border: 1.5px solid var(--border);
}
#communityBoard .pin-cudz {
  display: block; height: 20px; font-family: var(--font-naglowek); font-weight: 800; font-size: 2.1rem; line-height: 1;
  color: var(--marka-niebieski);
}
#communityBoard .pin-wyc {
  margin: 4px 0 0; font-style: italic; font-size: 0.8rem; line-height: 1.5; color: var(--testo);
  display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}

#communityBoard .pin-nak {
  position: absolute; inset: 0; z-index: 2; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: space-between; gap: 8px; padding: 10px;
  background: rgba(23, 24, 59, 0.7); color: #FFFFFF;
  opacity: 0; pointer-events: none; transition: opacity 0.15s ease;
}
@media (hover: hover) {
  #communityBoard .community-tile.pin:is(:hover, :focus-within) .pin-nak { opacity: 1; pointer-events: auto; }
}
@media (hover: none) {
  #communityBoard .pin-nak { display: none; }
}
#communityBoard .pin-nak-gora { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
#communityBoard .pin-typ {
  padding: 4px 9px; border-radius: 999px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; white-space: nowrap;
}
#communityBoard .pin-typ.tekst { background: #2463E9; color: #FFFFFF; }
#communityBoard .pin-typ.utwor { background: #DB2727; color: #FFFFFF; }
#communityBoard .pin-typ.rozmowa { background: #35A64D; color: #17183B; }
#communityBoard .pin-akcje { margin: 0; }
#communityBoard .pin-nak .community-btn-zapisz {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 13px; border-radius: 999px;
  background: #FFC83D; color: #17183B; font-size: 0.78rem; font-weight: 800; box-shadow: none;
}
#communityBoard .pin-nak .community-btn-zapisz:hover { background: #FFD566; filter: none; }
#communityBoard .pin-nak .community-btn-zapisz.zapisane {
  background: rgba(255, 255, 255, 0.18); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.75); color: #FFFFFF;
}
#communityBoard .pin-nak-dol { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
#communityBoard .pin-chipy { display: flex; flex-wrap: wrap; gap: 4px; }
#communityBoard .pin-chip {
  display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.94); color: #17183B; font-size: 0.66rem; font-weight: 800; white-space: nowrap;
}
#communityBoard .pin-chip .ico { margin: 0; font-size: 0.7rem; }
#communityBoard .pin-nak-wiersz { display: flex; align-items: center; gap: 8px; min-width: 0; }
#communityBoard .pin-autor { flex: 1; min-width: 0; display: flex; color: #FFFFFF; font-size: 0.74rem; font-weight: 700; }
#communityBoard .pin-autor .cmty-autor-link { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: #FFFFFF; }
#communityBoard .pin-autor .cmty-autor-nick { color: #FFFFFF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#communityBoard .pin-autor .cmty-autor-foto { width: 20px; height: 20px; flex: none; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85); }
#communityBoard .pin-licznik { display: inline-flex; align-items: center; gap: 3px; flex: none; font-size: 0.74rem; font-weight: 800; color: #FFFFFF; }
#communityBoard .pin-licznik .ico { margin: 0; font-size: 0.8rem; }
#communityBoard .pin-nak .community-serce {
  flex: none; min-height: 32px; padding: 5px 10px 5px 8px; background: #FFFFFF; box-shadow: none;
}
#communityBoard .pin-nak .community-serce:hover { background: #FFFFFF; }
#communityBoard .pin-nak .community-serce svg { width: 18px; height: 18px; }
#communityBoard .pin-nak .community-serce path { stroke: #17183B; }
#communityBoard .pin-nak .community-serce-ile { color: #17183B; font-size: 0.72rem; font-weight: 800; }
#communityBoard .pin-nak .community-serce-ile:empty { display: none; }
#communityBoard .pin-nak .community-serce.lubie path { fill: #DB2727; stroke: #DB2727; }
#communityBoard .pin-nak .community-serce.lubie .community-serce-ile { color: #DB2727; }
#communityBoard .pin-nak :focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }

#communityBoard .community-tile.pin .pin-pod {
  position: relative; display: flex; flex-direction: row; align-items: flex-start; gap: 4px; padding: 8px 2px 4px;
}
#communityBoard .pin-pod-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#communityBoard .pin-tytul {
  font-weight: 700; font-size: 0.84rem; line-height: 1.3; color: var(--testo);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
#communityBoard .pin-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0;
  font-size: 0.74rem; line-height: 1.3; color: var(--tekst-neutralny); font-variant-numeric: tabular-nums;
}
#communityBoard .pin-flaga svg { display: block; border-radius: 3px; }
#communityBoard .pin-poziom { font-weight: 800; color: var(--testo); }
#communityBoard .pin-znasz { display: inline-flex; align-items: center; gap: 5px; }
#communityBoard .pin-pierscien { width: 14px; height: 14px; flex: none; }
#communityBoard .pin-pierscien circle { fill: none; stroke: var(--border); stroke-width: 2.5; }
#communityBoard .pin-pierscien .pin-pierscien-luk { stroke: var(--marka-niebieski); stroke-linecap: round; }
#communityBoard .pin-nowe { font-weight: 700; color: var(--verde); }
#communityBoard .pin-nowe.znane { color: var(--tekst-neutralny); }
#communityBoard .pin-tylko-gosc { display: none; }
body.tryb-goscia #communityBoard .pin-tylko-gosc { display: inline; }
body.tryb-goscia #communityBoard .pin-nowe,
body.tryb-goscia #communityBoard .pin-nak .community-serce { display: none; }
#communityBoard .community-tile.pin .edycja-znak { margin: 0; }
#communityBoard .pin-wiecej {
  flex: none; width: 32px; height: 32px; margin: -4px -4px 0 0; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--testo); display: grid; place-items: center; cursor: pointer;
}
#communityBoard .pin-wiecej:hover, #communityBoard .menu-otwarte .pin-wiecej { background: var(--pigulka-cicha); }
#communityBoard .pin-wiecej:focus-visible { outline: 3px solid var(--oro); outline-offset: 1px; }
#communityBoard .pin-wiecej .ico { margin: 0; font-size: 1rem; }
@media (pointer: coarse) { #communityBoard .pin-wiecej { width: 40px; height: 40px; margin: -8px -8px 0 0; } }
#communityBoard .pin-menu {
  display: none; position: absolute; right: -2px; top: calc(100% - 2px); z-index: 5; min-width: 200px;
  flex-direction: column; padding: 6px; border-radius: 14px;
  background: var(--card-bg); border: 1.5px solid var(--border); box-shadow: 0 14px 34px -10px rgba(23, 24, 59, 0.4);
}
#communityBoard .menu-otwarte .pin-menu { display: flex; }
#communityBoard .pin-menu :is(.pin-menu-poz, .cmty-zglos) {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; margin: 0; padding: 0 10px;
  border: 0; border-radius: 10px; background: transparent; color: var(--testo);
  font: inherit; font-size: 0.84rem; font-weight: 700; text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap;
}
#communityBoard .pin-menu :is(.pin-menu-poz, .cmty-zglos):hover { background: var(--bg-soft); }
#communityBoard .pin-menu .cmty-zglos { color: var(--rosso); }
#communityBoard .pin-menu .ico { margin: 0; font-size: 0.95rem; }
@media (max-width: 720px) {
  #communityBoard.community-board { column-gap: 8px; }
  #communityBoard .pin-ok-tekst { min-height: 130px; padding: 10px 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  #communityBoard .pin-nak { transition: none; }
}

.znak-si {
  position: relative; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  padding: 3px 5px; border-radius: 6px; background: rgba(23, 24, 59, 0.62); color: #FFFFFF;
  font-size: 0.625rem; font-weight: 800; line-height: 1; letter-spacing: 0.06em; cursor: help;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.znak-si[hidden] { display: none; }
.znak-si::before { content: ''; position: absolute; inset: -8px -6px; }
.znak-si:focus { outline: none; }
.znak-si:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.znak-si-dymek {
  position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 1; box-sizing: border-box;
  width: max-content; max-width: min(180px, calc(50vw - 36px)); padding: 6px 9px; border-radius: 10px;
  background: #17183B; color: #FFFFFF; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  font-size: 0.72rem; font-weight: 600; line-height: 1.35; letter-spacing: 0; text-align: left; white-space: normal;
  opacity: 0; visibility: hidden; transform: translateY(2px); pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s linear 0.12s;
}
.znak-si.pokaz .znak-si-dymek,
.znak-si:focus-visible .znak-si-dymek { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: hover) {
  .znak-si:hover .znak-si-dymek { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}
.znak-si.schowany .znak-si-dymek { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .znak-si-dymek { transition: none; }
}

#communityDetailZdania:has(> .cmty-zw-slowka) { max-height: none; overflow: visible; gap: 26px; padding-right: 0; }
.cmty-zw-glowa { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; margin-bottom: 12px; }
.cmty-zw-glowa h3 { margin: 0; font-family: var(--font-naglowek); font-weight: 800; font-size: 1.2rem; letter-spacing: -0.01em; color: var(--testo); }
.cmty-zw-glowa > span { font-size: 0.82rem; color: var(--grigio); }
.cmty-zwiastun { display: flex; flex-direction: column; gap: 12px; }
.cmty-zwiastun .cmty-zw-glowa { margin-bottom: 0; }
.cmty-zw-rzad { display: flex; align-items: flex-start; gap: 12px; }
.cmty-zw-ty { justify-content: flex-end; }
.cmty-zw-awatar {
  flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--marka-zielony); color: #17183B; font-size: 1.1rem;
}
.cmty-zw-awatar .ico { margin: 0; }
.cmty-zw-awatar.ty { background: var(--zolty); }
.cmty-zw-kolumna { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 580px; }
.cmty-zw-ty .cmty-zw-kolumna { width: min(100%, 470px); }
.cmty-zw-kto { font-size: 0.78rem; font-weight: 700; color: var(--grigio); }
.cmty-zw-ty .cmty-zw-kto { text-align: right; }
.cmty-zw-dymek {
  display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px;
  background: var(--bg-soft); border-radius: 6px 20px 20px 20px;
}
.cmty-zw-tekst { flex: 1; min-width: 0; font-size: 1.05rem; font-weight: 600; line-height: 1.4; color: var(--testo); }
.cmty-zw-pl { padding-left: 16px; font-size: 0.85rem; line-height: 1.4; color: var(--grigio); }
.cmty-zw-odp {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 44px;
  padding: 10px 16px 11px; text-align: left; font: inherit; color: var(--testo); cursor: pointer;
  background: var(--card-bg); border: 2px solid var(--marka-zielony); border-radius: 20px 20px 6px 20px;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--marka-zielony) 45%, var(--card-bg));
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease, opacity 0.2s ease;
}
.cmty-zw-odp:hover { transform: translateY(-1px); box-shadow: 0 4px 0 color-mix(in srgb, var(--marka-zielony) 45%, var(--card-bg)); }
.cmty-zw-odp:active { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--marka-zielony) 45%, var(--card-bg)); }
.cmty-zw-odp.wybrana { background: var(--bg-success-soft); border-color: var(--verde); box-shadow: 0 3px 0 var(--verde); }
.cmty-zw-odp.zgaszona { opacity: 0.45; }
.cmty-zw-odp.zgaszona:hover { opacity: 0.8; }
.cmty-zw-odp-t { font-size: 0.98rem; font-weight: 700; line-height: 1.35; }
.cmty-zw-odp-pl { font-size: 0.8rem; line-height: 1.35; color: var(--grigio); }
:is(.cmty-zw-odp, .cmty-zw-dalej button, .cmty-zw-oko):focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.cmty-zw-zacheta, .cmty-zw-dalej { display: flex; align-items: center; gap: 12px; border-radius: 16px; font-size: 0.9rem; line-height: 1.4; }
.cmty-zw-zacheta { padding: 12px 16px; border: 2px dashed var(--border-2); color: var(--grigio); }
.cmty-zw-zacheta .ico { margin: 0; flex: none; color: var(--primary); font-size: 1.15rem; }
.cmty-zw-dalej { padding: 10px 10px 10px 16px; background: var(--oro); color: var(--na-akcencie); }
.cmty-zw-dalej > span { flex: 1; min-width: 0; }
.cmty-zw-dalej .ico { margin: 0; flex: none; color: var(--przycisk-kolko); font-size: 1.15rem; }
.cmty-zw-dalej button {
  flex: none; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--card-bg); color: var(--testo); font: inherit; font-size: 0.85rem; font-weight: 700;
}
.cmty-zw-rzad.wjazd, .cmty-zw-dalej.wjazd { animation: cmtyZwWjazd 0.35s ease-out both; }
@keyframes cmtyZwWjazd { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.cmty-zw-znasz { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; line-height: 1.3; color: var(--testo); }
.cmty-zw-znasz span { color: var(--grigio); }
.cmty-zw-znasz b { color: var(--testo); }
.cmty-zw-znasz svg { flex: none; }
.cmty-zw-znasz circle { fill: none; stroke-width: 6; }
.cmty-zw-znasz .tlo { stroke: var(--bg-highlight); }
.cmty-zw-znasz .pasek { stroke: var(--zolty); stroke-linecap: round; }
.cmty-zw-siatka { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.cmty-zw-slowo {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 12px; min-width: 0;
  border: 1.5px solid var(--border); border-radius: 14px; background: var(--card-bg);
  transition: background 0.25s ease, border-color 0.25s ease;
}
.cmty-zw-slowo.uzyte { background: var(--bg-highlight); border-color: var(--zolty); }
.cmty-zw-slowo-teksty { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cmty-zw-slowo .t { font-size: 0.92rem; font-weight: 700; line-height: 1.3; color: var(--testo); overflow-wrap: break-word; }
.cmty-zw-slowo .pl { font-size: 0.78rem; line-height: 1.3; color: var(--grigio); overflow-wrap: break-word; }
.cmty-zw-znak { flex: none; font-size: 0.7rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.cmty-zw-znak.znasz { color: var(--verde); background: var(--bg-success-soft); }
.cmty-zw-znak.nowe { color: var(--primary); background: var(--bg-warn-soft); }
.cmty-zw-wiecej { display: flex; min-width: 0; }
.cmty-zw-wiecej button {
  flex: 1; min-width: 0; min-height: 44px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1px;
  padding: 8px 10px 8px 12px; text-align: left; font: inherit; cursor: pointer;
  border: 1.5px dashed var(--border-2); border-radius: 14px; background: var(--bg-soft); color: var(--testo);
  transition: border-color 0.2s ease;
}
.cmty-zw-wiecej button:hover { border-color: var(--oro); }
.cmty-zw-wiecej button:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.cmty-zw-wiecej .t { font-size: 0.92rem; font-weight: 800; line-height: 1.3; color: var(--testo); }
.cmty-zw-wiecej .pl { font-size: 0.78rem; font-weight: 700; line-height: 1.3; color: var(--primary); }
.cmty-zw-pigulka {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  font-size: 0.75rem; font-weight: 700; line-height: 1.2;
}
.cmty-zw-pigulka .ico { margin: 0; font-size: 0.8rem; }
.cmty-zw-pigulka.poziom { background: #FFC83D; color: #17183B; }
.cmty-nalepki .znak-si { pointer-events: auto; }
.cmty-zw-oko {
  display: inline-grid; place-items: center; width: 32px; height: 32px; margin-left: 4px; vertical-align: middle; cursor: pointer;
  border: 1.5px solid var(--border); border-radius: 50%; background: var(--card-bg); color: var(--grigio);
}
.cmty-zw-oko .ico { margin: 0; font-size: 0.85rem; }
.cmty-zw-oko[aria-expanded="true"] { color: var(--testo); border-color: var(--testo); }
.cmty-zw-opis-pl:not([hidden]) { display: block; margin-top: 6px; font-size: 0.85rem; color: var(--grigio); }
#communityDetailSlowa:has(> .cmty-zw-liczby) { display: block; flex: 0 0 auto; max-height: none; overflow: visible; padding-right: 0; margin-bottom: 0; }
.cmty-akcja-slowka .cmty-zw-ile {
  margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--bg-warn-soft); color: var(--primary);
  font-size: 0.72rem; font-weight: 800; white-space: nowrap;
}
.cmty-akcja-slowka:has(.cmty-zw-ile) > .ico { display: none; }
.cmty-akcja-slowka > span:not(.cmty-zw-ile) { white-space: nowrap; }
.cmty-zw-grali { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; font-size: 0.82rem; color: var(--grigio); }
.cmty-zw-grali .ico { margin: 0; color: var(--verde); }
.community-detail-karta.w-siatce:not(.pion):has(.cmty-zw-slowka) { overflow: clip; }
.community-detail-karta.w-siatce:not(.pion):has(.cmty-zw-slowka) > .community-detail-panel {
  position: sticky; align-self: flex-start;
  top: calc(var(--cmty-pasek-h, 0px) + 12px);
  max-height: calc(100vh - var(--cmty-pasek-h, 0px) - 28px);
  transition: top 0.26s cubic-bezier(.22, 1, .36, 1), max-height 0.26s cubic-bezier(.22, 1, .36, 1);
}
body.cmty-pasek-schowany .community-detail-karta.w-siatce:not(.pion):has(.cmty-zw-slowka) > .community-detail-panel {
  top: 16px; max-height: calc(100vh - 32px);
}
.cmty-zw-liczby { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 14px; }
.cmty-zw-liczba { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 16px; background: var(--bg-soft); min-width: 0; }
.cmty-zw-liczba b { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.6rem; line-height: 1; color: var(--testo); }
.cmty-zw-liczba span { font-size: 0.75rem; line-height: 1.25; color: var(--grigio); }
.cmty-zw-liczba.zdania { background: var(--bg-success-soft); }
.cmty-zw-liczba.zdania :is(b, span) { color: var(--verde); }
@media (max-width: 640px) {
  .cmty-zw-tekst { font-size: 0.98rem; }
  .cmty-zw-awatar { width: 34px; height: 34px; font-size: 0.95rem; }
  .cmty-zw-ty .cmty-zw-kolumna { width: 100%; }
  .cmty-zw-siatka { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .cmty-zw-slowo { flex-direction: column; align-items: flex-start; gap: 5px; }
  .cmty-zw-slowo-teksty { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cmty-zw-odp, .cmty-zw-slowo, .cmty-zw-wiecej button { transition: none; }
  .cmty-zw-odp:is(:hover, :active) { transform: none; }
  .cmty-zw-rzad.wjazd, .cmty-zw-dalej.wjazd { animation: none; }
  .community-detail-karta.w-siatce > .community-detail-panel { transition: none; }
}

.community-komentarze-sekcja { gap: 10px; padding-top: 16px; border-top: 1.5px solid var(--border); }
.community-komentarze-naglowek { display: flex; align-items: center; gap: 8px; margin: 0; }
.community-komentarze-naglowek > span:first-child { color: var(--testo); font-weight: 800; }
.community-komentarze-ile:empty { display: none; }
.community-komentarze-ile {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px;
  background: var(--bg-soft); font-family: var(--font-tekst); font-size: 0.78rem; font-weight: 800; color: var(--testo);
}
.community-komentarze-naglowek .community-komentarze-ile { color: var(--testo); font-weight: 800; }
.community-komentarze-lista { margin: 0; }
.community-komentarze-pusto {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px;
  background: var(--bg-soft); color: var(--grigio); font-size: 0.85rem; line-height: 1.4;
}
.community-komentarze-pusto .ico { margin: 0; flex: none; font-size: 1.3rem; color: var(--primary); }
.community-komentarz { gap: 10px; padding: 10px 0; }
.community-komentarz-poziom {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  background: var(--bg-highlight); color: var(--testo); font-size: 0.68rem; font-weight: 700; vertical-align: 1px;
}
.community-komentarz-poziom .ico { margin: 0; font-size: 0.7rem; }
.community-komentarz-form {
  align-items: flex-end; gap: 6px; padding: 4px; border: 1.5px solid var(--border-2); border-radius: 28px; background: var(--card-bg);
}
.community-komentarz-form:focus-within { border-color: var(--oro); }
.community-komentarz-ja { flex: none; width: 34px; height: 34px; display: grid; place-items: center; }
.community-komentarz-ja :is(img, span) {
  width: 34px; height: 34px; margin: 0; border-radius: 50%; object-fit: cover;
  display: grid; place-items: center; font-size: 0.85rem; font-weight: 800; color: #FFFFFF;
}
.community-komentarz-ja:empty { display: none; }
.community-komentarz-ja { margin-bottom: 3px; }
.community-komentarz-form textarea {
  display: block; flex: 1; min-width: 0; height: 40px; min-height: 40px; max-height: 100px; padding: 10px 6px;
  border: 0; border-radius: 0; background: transparent; line-height: 20px; resize: none; overflow-y: hidden; scrollbar-width: thin;
}
.community-komentarz-form textarea:focus { border: 0; outline: none; }
.community-komentarz-form button { width: 40px; height: 40px; }
.community-komentarz-form button:disabled { background: var(--bg-soft); color: var(--muted-light); cursor: default; filter: none; }
.community-komentarz-licznik { margin-top: -4px; }
@media (pointer: coarse) {
  .community-komentarz-form button { width: 44px; height: 44px; }
  .community-komentarz-form textarea { height: 44px; min-height: 44px; max-height: 104px; padding: 12px 6px; }
  .community-komentarz-ja { margin-bottom: 5px; }
}

.community-detail-karta.w-siatce:not(.pion) > .community-detail-panel:has(> #communityDetailAkcje > .cmty-akcje):not(:has(.cmty-zw-liczby)) {
  overflow-y: auto;
}

#communityDetailAkcje { flex: 0 0 auto; margin-bottom: 14px; }
#communityDetailAkcje:empty { display: none; }
.cmty-akcje { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.cmty-akcje .btn { width: 100%; min-height: 44px; margin: 0; }
#communityDetailAkcje > .cmty-lekcja { margin-top: 10px; }

.profil-tresc { container-type: inline-size; }
.pp-glowa { display: flex; flex-direction: column; gap: 18px; margin: -32px -18px 0; padding: 14px 24px 24px; border-radius: 0 0 28px 28px; background: #1F1F1F; color: #FFFFFF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pp-glowa { box-shadow: inset 0 -1.5px 0 rgba(255, 255, 255, 0.08); } }
:root[data-theme="dark"] .pp-glowa { box-shadow: inset 0 -1.5px 0 rgba(255, 255, 255, 0.08); }
#playerProfileModal .profil-zamknij { align-self: flex-end; margin: -4px -4px -36px 0; background: #383838; color: #FFFFFF; }
#playerProfileModal .profil-zamknij:hover { background: #4A4A4A; color: #FFFFFF; }
#playerProfileModal .profil-zamknij:focus-visible { outline: 3px solid var(--zolty); outline-offset: 2px; }
.pp-glowa-gora { display: flex; align-items: center; min-height: 40px; padding-right: 52px; }
.pp-twoj { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #B0B0B0; }
.pp-ja { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; text-align: center; }
.pp-awatar { flex: none; }
.pp-awatar .leaderboard-avatar-img, .pp-awatar .leaderboard-avatar-fallback {
  box-sizing: border-box; width: 104px; height: 104px; border: 4px solid var(--zolty); border-radius: 999px; object-fit: cover;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-naglowek); font-weight: 800; font-size: 2.6rem; color: #FFFFFF;
}
.pp-awatar .profil-zapelnienie { inset: auto auto -8px 50%; transform: translateX(-50%); padding: 3px 10px; border: 2px solid #1F1F1F; border-radius: 999px;
  background: var(--zolty); color: #17183B; font-family: var(--font-naglowek); font-size: 0.8rem; line-height: 1.2; }
.pp-imie { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; margin-top: 6px; }
.pp-imie h2 { margin: 0; font-family: var(--font-naglowek); font-weight: 800; font-size: 1.85rem; line-height: 1.1; color: #FFFFFF; overflow-wrap: anywhere; }
.pp-imie .rank-row-flag { flex: none; line-height: 0; }
.pp-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.pp-nick { font-size: 0.94rem; font-weight: 500; color: #B0B0B0; overflow-wrap: anywhere; }
.pp-pigulka { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.14);
  font-size: 0.75rem; font-weight: 700; color: #FFFFFF; }
.pp-glowa .tw-odznaka { --tw-tlo: var(--zolty); --tw-ramka: transparent; --tw-tekst: #17183B; min-height: 26px; padding: 0 10px; font-size: 0.75rem; }
.pp-opis { margin: 2px 0 0; max-width: 470px; font-size: 1rem; line-height: 1.55; color: #CFCFCF; white-space: pre-line; overflow-wrap: anywhere; }
.pp-obserwuj { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px;
  background: var(--zolty); color: var(--granat); font: inherit; font-size: 0.95rem; font-weight: 800; cursor: pointer; transition: transform 0.15s ease; }
.pp-obserwuj:hover { transform: translateY(-1px); }
.pp-obserwuj.obserwujesz { background: rgba(255, 255, 255, 0.12); color: #FFFFFF; }
.pp-obserwuj .ico { margin: 0; }
.pp-obserwuj:focus-visible, .pp-glowa .profil-liczba:focus-visible { outline: 3px solid var(--zolty); outline-offset: 2px; }
.pp-akcje { display: flex; flex-wrap: wrap; gap: 10px; }
.pp-akcje > * { flex: 1 1 0; min-width: 150px; min-height: 50px; justify-content: center; }
.pp-zobacz-konto, .pp-edytuj { display: inline-flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 20px; border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.4); color: #FFFFFF; font-size: 0.95rem; font-weight: 800; text-decoration: none; }
.pp-zobacz-konto:hover, .pp-edytuj:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1.5px #FFFFFF; }
.pp-zobacz-konto.glowny { background: var(--zolty); color: #17183B; box-shadow: none; }
.pp-zobacz-konto.glowny:hover { background: #FFD66B; color: #17183B; box-shadow: none; }
.pp-zobacz-konto .ico, .pp-edytuj .ico { margin: 0; }
.pp-zobacz-konto:focus-visible, .pp-edytuj:focus-visible { outline: 3px solid var(--zolty); outline-offset: 2px; }
.pp-prywatnosc { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.pp-prywatnosc > .ico { flex: none; margin: 0; font-size: 1.15rem; }
.pp-prywatnosc > span { flex: 1; min-width: 0; font-size: 0.94rem; font-weight: 600; }
.pp-prywatnosc button { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--zolty); font: inherit; font-size: 0.875rem; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pp-prywatnosc button:focus-visible { outline: 3px solid var(--zolty); outline-offset: 2px; border-radius: 6px; }
.pp-pryw { align-items: center; gap: 12px; padding: 36px 24px 30px; text-align: center; }
.pp-pryw-awatar .leaderboard-avatar-img, .pp-pryw-awatar .leaderboard-avatar-fallback {
  width: 96px; height: 96px; border-radius: 999px; object-fit: cover; box-shadow: 0 0 0 4px var(--card-bg), 0 8px 22px rgba(23, 24, 59, 0.16);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-naglowek); font-weight: 800; font-size: 2.4rem; color: #FFFFFF;
}
.pp-pryw h2 { margin: 6px 0 0; font-family: var(--font-naglowek); font-weight: 800; font-size: 1.65rem; line-height: 1.15; color: var(--testo); overflow-wrap: anywhere; }
.pp-pryw-login { margin-top: -6px; font-size: 0.95rem; font-weight: 600; color: var(--grigio); overflow-wrap: anywhere; }
.pp-pryw-pigulka { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 14px 0 11px; border-radius: 999px; background: var(--bg-soft); color: var(--testo); font-size: 0.85rem; font-weight: 700; }
.pp-pryw-pigulka .ico { margin: 0; }
.pp-pryw p { margin: 0; max-width: 380px; font-size: 0.95rem; line-height: 1.55; color: var(--grigio); }
.pp-pryw-akcje { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.pp-pryw-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 1.5px solid var(--border); border-radius: 999px;
  background: var(--bg-soft); color: var(--testo); font: inherit; font-size: 0.95rem; font-weight: 800; cursor: pointer; }
.pp-pryw-btn:hover { border-color: var(--testo); }
.pp-pryw-btn .ico { margin: 0; }
.pp-pryw-btn:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.pp-pryw-ramka { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 18px; background: #FFF4D6; color: #17183B; }
.pp-pryw-ramka > .ico { flex: none; margin: 2px 0 0; font-size: 1.1rem; }
.pp-pryw-ramka b { display: block; font-size: 0.95rem; }
.pp-pryw-ramka span { display: block; margin-top: 2px; font-size: 0.85rem; line-height: 1.45; color: #3B3F63; }
.pp-pryw-ramka button { margin-top: 10px; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 16px; border: 1.5px solid #E5C97A; border-radius: 999px;
  background: #FFFFFF; color: #17183B; font: inherit; font-size: 0.85rem; font-weight: 800; cursor: pointer; }
.pp-pryw-ramka button .ico { margin: 0; }
.pp-pryw-ramka button:focus-visible { outline: 3px solid var(--granat); outline-offset: 2px; }
.pryw-okno-lista { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 0; padding: 0; list-style: none; }
.pryw-okno-lista li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.92rem; line-height: 1.45; color: var(--testo); }
.pryw-okno-lista .ico { flex: none; margin: 3px 0 0; color: var(--oro); }
.pp-skrot-kafle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pp-kafel { --pp-k: var(--marka-niebieski); display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px; border-radius: 18px; background: var(--crema); }
.pp-kafel-ikona { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px;
  background: color-mix(in srgb, var(--pp-k) 14%, var(--card-bg)); color: var(--pp-k); }
.pp-kafel-ikona .ico { margin: 0; font-size: 1.15rem; line-height: 1; }
.pp-kafel-passa { --pp-k: var(--marka-czerwony); }
.pp-kafel-slowka { --pp-k: #1F7A35; }
.pp-kafel-xp { --pp-k: #8A6400; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pp-kafel-slowka { --pp-k: var(--marka-zielony); }
  :root:not([data-theme="light"]) .pp-kafel-xp { --pp-k: var(--zolty); }
}
:root[data-theme="dark"] .pp-kafel-slowka { --pp-k: var(--marka-zielony); }
:root[data-theme="dark"] .pp-kafel-xp { --pp-k: var(--zolty); }
.pp-kafel-teksty { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pp-kafel-liczba { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.5rem; line-height: 1; color: var(--testo);
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-kafel-liczba small { font-size: 0.95rem; }
.pp-kafel-podpis { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 0.8rem; font-weight: 600; line-height: 1.3; color: var(--grigio); }
.pp-trend { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; background: var(--bg-soft); color: var(--testo); font-size: 0.8rem; }
.pp-trend .ico { margin: 0; font-size: 0.9rem; }
.pp-kafel-passa .profil-passa-ogien { display: inline-block; width: 22px; height: 26px; line-height: 0; }
.pp-kafel-passa.stan-zabity { opacity: 0.75; }
.pp-postep { display: flex; flex-direction: column; gap: 8px; }
.pp-postep-wiersz { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 0.88rem; }
.pp-postep-wiersz b { font-weight: 700; }
.pp-postep-wiersz span { color: #B9BCD6; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-postep-tor { height: 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.pp-postep-tor > div { height: 100%; border-radius: 999px; background: var(--zolty); transition: width 0.6s cubic-bezier(.22, 1, .36, 1); }
.pp-postep-jasny .pp-postep-wiersz span { color: var(--grigio); }
.pp-postep-jasny .pp-postep-tor { height: 10px; background: var(--bg-soft); }
.pp-postep-jasny .pp-postep-tor > div { background: var(--marka-niebieski); }
.pp-glowa .profil-liczby { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 18px; background: rgba(255, 255, 255, 0.08); }
.pp-glowa .profil-liczba { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; min-height: 68px;
  padding: 10px 4px; border: 0; border-radius: 18px; background: none; color: #FFFFFF; font: inherit; text-align: center; }
.pp-glowa .profil-liczba:disabled { opacity: 1; cursor: default; }
.pp-glowa .profil-liczba.klik { cursor: pointer; }
.pp-glowa .profil-liczba.klik:hover { background: rgba(255, 255, 255, 0.08); }
.pp-glowa .profil-liczba b { display: block; font-family: var(--font-naglowek); font-weight: 800; font-size: 1.375rem; line-height: 1.1; }
.pp-glowa .profil-liczba span { display: block; font-size: 0.8rem; font-weight: 600; line-height: 1.2; color: #B0B0B0; overflow-wrap: anywhere; }
.pp-glowa .profil-liczba.klik span { text-decoration: underline; text-underline-offset: 3px; }
.pp-najnowszy { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px; border: 1.5px solid var(--border); border-radius: 24px;
  background: var(--card-bg); color: var(--testo); font: inherit; text-align: left; cursor: pointer; }
.pp-najnowszy:hover { border-color: var(--border-2); }
.pp-najnowszy:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.pp-najn-okladka { flex: none; display: flex; align-items: center; justify-content: center; width: 92px; height: 72px; border-radius: 14px; overflow: hidden;
  background: color-mix(in srgb, var(--marka-niebieski) 14%, var(--card-bg)); }
.pp-najn-okladka img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pp-najn-teksty { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pp-najn-etykieta { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grigio); }
.pp-najn-tytul { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.06rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-najn-meta { font-size: 0.875rem; line-height: 1.3; color: var(--grigio); }
.pp-chevron { flex: none; margin: 0; font-size: 1.2rem; line-height: 1; color: var(--testo); }
.pp-lista, .pp-pomoc { display: flex; flex-direction: column; padding: 6px 18px; border: 1.5px solid var(--border); border-radius: 24px; background: var(--card-bg); color: var(--testo); }
.pp-sek + .pp-sek, .pp-pomoc > * + * { border-top: 1px solid var(--border); }
.pp-sek > summary { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 8px 0; list-style: none; cursor: pointer; }
.pp-sek > summary::-webkit-details-marker { display: none; }
.pp-sek > summary:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; border-radius: 12px; }
.pp-sek > summary .pp-chevron { transition: transform 0.2s ease; }
.pp-sek[open] > summary .pp-chevron { transform: rotate(90deg); }
.pp-sek-teksty { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pp-sek-teksty b { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.pp-sek-teksty span { font-size: 0.875rem; line-height: 1.35; color: var(--grigio); overflow-wrap: anywhere; }
.pp-sek-tresc { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 2px 0 20px; }
.pp-sek-tresc > .pp-h:first-child, .pp-sek-tresc .pp-karta-glowa:first-child > .pp-h:first-child { display: none; }
.pp-pomoc-wiersz { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 58px; padding: 8px 0; border: 0; background: none;
  color: var(--testo); font: inherit; text-align: left; cursor: pointer; }
.pp-pomoc-wiersz > .ico:first-child { flex: none; margin: 0; font-size: 1.15rem; }
.pp-pomoc-wiersz b { flex: 1; min-width: 0; font-size: 1rem; font-weight: 700; line-height: 1.3; }
.pp-pomoc-wiersz:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; border-radius: 12px; }
.pp-pomoc .konto-zglos textarea { margin-top: 12px; }
.pp-pomoc .konto-zglos-stopka { margin-bottom: 12px; }
.pp-pomoc .konto-zglos > .konto-zglos-otworz { margin: 12px 0; }
.pp-karta { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 20px 22px; border-radius: 24px;
  background: var(--card-bg); border: 1.5px solid var(--border); color: var(--testo); }
.pp-karta-glowa { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.pp-h { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-naglowek); font-weight: 800; font-size: 1.2rem; line-height: 1.2; color: var(--testo); }
.pp-maly { font-size: 0.82rem; color: var(--grigio); }
.pp-licznik { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 26px; padding: 0 8px; border-radius: 999px;
  background: var(--bg-soft); font-family: var(--font-body, inherit); font-size: 0.8rem; font-weight: 800; }
.pp-suma { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.pp-suma b { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.75rem; line-height: 1.1; }
.pp-suma span { font-size: 0.85rem; color: var(--grigio); }
.pp-przelacznik { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: var(--bg-soft); }
.pp-przelacznik button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px;
  background: transparent; color: var(--grigio); font: inherit; font-size: 0.86rem; font-weight: 700; cursor: pointer; }
.pp-przelacznik button .ico { margin: 0; }
.pp-przelacznik button b { font-weight: 800; }
.pp-przelacznik button.aktywna { background: var(--zolty); color: var(--granat); font-weight: 800; }
.pp-przelacznik button:focus-visible { outline: 3px solid var(--oro); outline-offset: 1px; }
.pp-wyk-linia { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; }
.pp-wyk-linia.zero { stroke: var(--border-2); stroke-width: 1.5; stroke-dasharray: none; }
.pp-wyk-os { fill: var(--grigio); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.pp-wyk-dzien { fill: var(--testo); font-size: 11px; font-weight: 700; }
.pp-wyk-wartosc { fill: var(--grigio); font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pp-slupek { fill: color-mix(in srgb, var(--marka-niebieski) 45%, var(--card-bg)); }
.pp-slupek.max, .pp-slupek.oni { fill: var(--marka-niebieski); }
.pp-slupek.dzis, .pp-slupek.ja { fill: var(--zolty); }
.pp-slupek.minus { fill: var(--marka-czerwony); }
.pp-slupek.zero { fill: var(--border); }
.pp-wyk-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 4px; font-size: 0.82rem; font-weight: 700; color: var(--grigio); }
.pp-wyk-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.pp-kropka { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.pp-kropka.oni { background: var(--marka-niebieski); }
.pp-kropka.ja { background: var(--zolty); }
.pp-poz-latwe { --pp-poz: var(--marka-zielony); }
.pp-poz-srednie { --pp-poz: var(--marka-niebieski); }
.pp-poz-trudne { --pp-poz: var(--marka-czerwony); }
.pp-poz-nowe { --pp-poz: #9EA3BE; }
.pp-duza { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pp-duza b { font-family: var(--font-naglowek); font-weight: 800; font-size: 2.3rem; line-height: 1; }
.pp-duza span { font-size: 0.88rem; color: var(--grigio); }
.pp-pasek { display: flex; gap: 2px; height: 14px; border-radius: 999px; overflow: hidden; background: var(--bg-soft); }
.pp-pasek span { display: block; height: 100%; background: var(--pp-poz); }
.pp-poziomy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pp-poziom { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--pp-poz) 15%, var(--card-bg)); }
.pp-poziom b { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.25rem; color: var(--testo); }
.pp-poziom span { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: var(--testo); }
.pp-poziom span::before { content: ''; width: 8px; height: 8px; flex: none; border-radius: 999px; background: var(--pp-poz); }
.pp-tematy { display: flex; flex-direction: column; gap: 12px; }
.pp-temat { display: flex; flex-direction: column; gap: 5px; }
.pp-temat-wiersz { display: flex; justify-content: space-between; gap: 8px; font-size: 0.9rem; }
.pp-temat-wiersz span { min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-temat-wiersz b { font-weight: 800; font-variant-numeric: tabular-nums; }
.pp-temat-tor { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--marka-niebieski) 14%, var(--card-bg)); overflow: hidden; }
.pp-temat-tor span { display: block; height: 100%; border-radius: 999px; background: color-mix(in srgb, var(--marka-niebieski) 62%, var(--card-bg)); }
.pp-temat-tor span.pierwszy { background: var(--marka-niebieski); }
.pp-trudne { display: flex; flex-direction: column; }
.pp-trudne-poz { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1.5px solid var(--bg-soft); }
.pp-trudne-poz:first-child { padding-top: 0; border-top: 0; }
.pp-flaga { flex: none; line-height: 0; }
.pp-flaga svg { border-radius: 2px; }
.pp-trudne-slowo { flex: 1; min-width: 0; font-size: 0.98rem; line-height: 1.4; overflow-wrap: anywhere; }
.pp-trudne-slowo b { font-weight: 800; }
.pp-trudne-slowo span { color: var(--grigio); }
.pp-trudne-tor { flex: none; width: 84px; height: 6px; border-radius: 999px; background: var(--bg-error-soft); overflow: hidden; }
.pp-trudne-tor span { display: block; height: 100%; border-radius: 999px; background: var(--marka-czerwony); }
.pp-trudne-ile { flex: none; min-width: 84px; text-align: right; font-size: 0.82rem; font-weight: 800; color: var(--rosso); }
.pp-pusto { margin: 0; font-size: 0.88rem; color: var(--grigio); }
.pp-rekordy { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.pp-rekord { display: flex; flex-direction: column; gap: 3px; padding: 14px; border-radius: 18px; background: color-mix(in srgb, var(--pp-rek) 16%, var(--card-bg)); }
.pp-rekord-passa { --pp-rek: var(--zolty); --pp-rek-ikona: var(--marka-czerwony); }
.pp-rekord-combo { --pp-rek: var(--marka-niebieski); --pp-rek-ikona: var(--marka-niebieski); }
.pp-rekord-celnosc { --pp-rek: var(--marka-zielony); --pp-rek-ikona: var(--marka-zielony); }
.pp-rekord-dni { --pp-rek: #9EA3BE; --pp-rek-ikona: var(--testo); }
.pp-rekord-ikona .ico { margin: 0; font-size: 1.2rem; color: var(--pp-rek-ikona); }
.pp-rekord b { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.35rem; line-height: 1.15; }
.pp-rekord > span:last-child { font-size: 0.8rem; font-weight: 600; color: var(--testo); }
.pp-jezyki { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.88rem; }
.pp-jezyki > span:first-child { font-weight: 600; color: var(--grigio); }
.pp-jezyk { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--border); font-weight: 700; }
.pp-jezyk svg { border-radius: 2px; }
.pp-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.pp-gal-kafel { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 0; border: 0; background: none; color: var(--testo); font: inherit; text-align: left; cursor: pointer; }
.pp-gal-okladka { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 18px; overflow: hidden; background: var(--bg-soft); }
.pp-gal-okladka img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s ease; }
.pp-gal-kafel:hover .pp-gal-okladka img { transform: scale(1.04); }
.pp-gal-kafel:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; border-radius: 18px; }
.pp-gal-flaga { position: absolute; left: 8px; top: 8px; z-index: 1; line-height: 0; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); }
.pp-gal-liczby { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; justify-content: space-evenly; gap: 2px; padding: 18px 6px 7px;
  background: linear-gradient(180deg, rgba(23, 24, 59, 0) 0%, rgba(23, 24, 59, 0.72) 62%); color: #FFFFFF; font-size: 0.72rem; font-weight: 800; pointer-events: none; }
.pp-gal-liczby > span { display: inline-flex; align-items: center; gap: 4px; }
.pp-gal-liczby .ico { margin: 0; font-size: 0.75rem; }
.pp-gal-liczby > span.pusto { opacity: 0.5; }
.pp-gal-film { background: #111111; }
.pp-gal-play { position: absolute; left: 50%; top: 44%; z-index: 1; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  border-radius: 999px; background: #FFFFFF; color: var(--marka-czerwony); transform: translate(-50%, -50%); }
.pp-gal-play .ico { margin: 0 0 0 2px; }
.pp-gal-zrodlo { position: absolute; left: 8px; top: 8px; z-index: 1; padding: 3px 8px; border-radius: 999px; background: rgba(23, 24, 59, 0.6); color: #FFFFFF; font-size: 0.68rem; font-weight: 800; }
.pp-gal-kartka { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; padding: 16px 16px 34px;
  background: color-mix(in srgb, var(--marka-niebieski) 12%, var(--card-bg)); }
.pp-gal-cudzyslow { font-family: var(--font-naglowek); font-weight: 800; font-size: 3rem; line-height: 0.6; color: var(--marka-niebieski); }
.pp-gal-poziom { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; background: var(--card-bg); font-size: 0.8rem; font-weight: 800; }
.pp-gal-tytul { font-size: 0.9rem; font-weight: 800; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pp-gal-meta { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--grigio); }
.pp-gal-meta svg { border-radius: 2px; }
.pp-wskaznik { align-self: flex-start; padding: 4px 12px; border-radius: 999px; background: var(--bg-soft); font-size: 0.85rem; font-weight: 800; }
.pp-wskaznik.dobry { color: var(--verde); }
.pp-wskaznik.sredni { color: #9A6407; }
.pp-wskaznik.slaby { color: var(--rosso); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pp-wskaznik.sredni { color: #E5B23C; } }
:root[data-theme="dark"] .pp-wskaznik.sredni { color: #E5B23C; }
.pp-tw-kafle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pp-tw-kafel { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 14px; border-radius: 16px; border: 1.5px solid var(--border); }
.pp-tw-kafel b { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.35rem; }
.pp-tw-kafel span { font-size: 0.8rem; line-height: 1.35; color: var(--grigio); }
.pp-tw-status { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--grigio); }
.pp-karta .tw-blokada { margin-top: 0; }
@media (prefers-reduced-motion: reduce) {
  .pp-gal-kafel:hover .pp-gal-okladka img, .pp-obserwuj:hover { transform: none; }
  .pp-postep-tor > div { transition: none; }
  .pp-sek > summary .pp-chevron { transition: none; }
}
@container (max-width: 560px) {
  .pp-glowa { padding: 12px 18px 22px; }
  .pp-imie h2 { font-size: 1.6rem; }
  .pp-glowa .profil-liczba b { font-size: 1.15rem; }
  .pp-glowa .profil-liczba span { font-size: 0.72rem; }
  .pp-karta { padding: 18px; }
  .pp-kafel { gap: 10px; padding: 12px; }
  .pp-kafel-liczba { font-size: 1.25rem; }
  .pp-trudne-tor { display: none; }
  .pp-trudne-ile { min-width: 0; }
  .pp-tw-kafle { gap: 8px; }
  .pp-tw-kafel { padding: 10px 12px; }
}
@container (max-width: 380px) {
  .pp-kafel { flex-direction: column; align-items: flex-start; gap: 8px; }
  .pp-kafel-ikona { width: 34px; height: 34px; }
}

.ps-dymek-glowa { display: flex; align-items: center; gap: 12px; }
.ps-dymek-ogien { display: flex; align-items: center; justify-content: center; flex: none; width: 50px; height: 50px; border-radius: 16px;
  background: color-mix(in srgb, var(--zolty) 24%, var(--card-bg)); }
.ps-ogien-host { display: inline-block; width: 28px; height: 33px; line-height: 0; }
.ps-dymek-teksty { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ps-dymek-teksty b { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.4rem; line-height: 1.1; }
.ps-stan { font-size: 0.8rem; font-weight: 700; }
.ps-stan.tak { color: var(--verde); }
.ps-stan.nie { color: var(--rosso); }
.ps-zamr-chip { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 5px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--marka-niebieski) 16%, var(--card-bg)); color: var(--marka-niebieski); font-size: 0.8rem; font-weight: 800; }
.ps-zamr-chip .ico { margin: 0; }
.ps-sekcja { margin-top: 14px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--grigio); }
.ps-tydzien { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: 6px; }
.ps-tydz-dzien { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.ps-tydz-dzien > span { font-size: 0.72rem; font-weight: 700; color: var(--grigio); }
.ps-rekord { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.ps-rekord-wiersz { display: flex; justify-content: space-between; gap: 8px; font-size: 0.82rem; }
.ps-rekord-wiersz span { color: var(--grigio); white-space: nowrap; }
.ps-rekord-tor { height: 8px; border-radius: 999px; background: var(--bg-soft); overflow: hidden; }
.ps-rekord-tor > div { height: 100%; border-radius: 999px; background: var(--zolty); }
.ps-dymek-stopka { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 12px;
  border-top: 1.5px solid var(--bg-soft); font-size: 0.8rem; color: var(--grigio); }
.ps-link { display: inline-flex; align-items: center; gap: 2px; flex: none; padding: 0; border: 0; background: none; color: var(--marka-niebieski);
  font: inherit; font-size: 0.82rem; font-weight: 800; cursor: pointer; }
.ps-link .ico { margin: 0; }
.ps-dzien { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 42px; }
.ps-kolko { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; box-sizing: border-box;
  border-radius: 999px; background: var(--card-bg); color: var(--grigio); font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ps-kolko .ico { margin: 0; font-size: 0.95rem; line-height: 1; }
.ps-nauka .ps-kolko { background: var(--zolty); }
.ps-zamrozenie .ps-kolko { background: color-mix(in srgb, var(--marka-niebieski) 22%, var(--card-bg)); color: var(--marka-niebieski); }
.ps-pusty .ps-kolko { border: 1.5px solid var(--border); }
.ps-przyszly .ps-kolko { border: 1.5px dashed var(--border-2); background: transparent; }
.ps-dzien.dzis .ps-kolko { box-shadow: 0 0 0 2.5px var(--card-bg), 0 0 0 5px var(--testo); }
.ps-pusty.dzis .ps-kolko { border-style: dashed; }
.ps-plomyk { display: block; width: 16px; height: 18px; }
.ps-pas { position: absolute; top: 9px; bottom: 9px; left: 50%; right: 50%; background: color-mix(in srgb, var(--zolty) 45%, var(--card-bg)); }
.ps-pas.lewo { left: 0; }
.ps-pas.prawo { right: 0; }
.ps-okno { max-width: 460px; --card-bg: #FFFFFF; --testo: #17183B; --grigio: #4A4B6B; --border: #E3E4EF; --border-2: #C9CCE0; --bg-soft: #EEF0F7; }
.ps-glowa { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 24px 4px; text-align: center; }
.ps-okno #streakBigFlame { width: 92px; height: 108px; margin: -16px auto 0; font-size: 3.4rem; line-height: 0; }
.ps-okno #streakBigCount.ps-liczba { font-family: var(--font-naglowek); font-weight: 800; font-size: 4.6rem; line-height: 0.95; letter-spacing: -0.03em;
  color: var(--granat); font-variant-numeric: tabular-nums; }
.ps-liczba-podpis { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.2rem; color: var(--granat); }
.ps-stan-pigulka { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; margin-top: 10px; padding: 0 16px; border-radius: 999px;
  background: #FFFFFF; color: var(--granat); font-size: 0.9rem; font-weight: 700; }
.ps-stan-pigulka .ico { margin: 0; }
.ps-stan-pigulka.tak .ico { color: #1F7A35; }
.ps-stan-pigulka.nie .ico { color: var(--marka-czerwony); }
.ps-tresc { display: flex; flex-direction: column; gap: 14px; }
.ps-kafle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ps-kafel { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px; border-radius: 18px; background: #FFFFFF; color: var(--granat); }
.ps-kafel .ico { margin: 0 0 4px; font-size: 1.05rem; line-height: 1; }
.ps-kafel b { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.3rem; line-height: 1.15; }
.ps-kafel span { font-size: 0.78rem; font-weight: 600; color: #4A4B6B; }
.ps-kafel.zamrozenia .ico, .ps-kafel.zamrozenia b { color: var(--marka-niebieski); }
.ps-kafel.teraz { background: var(--granat); color: #FFFFFF; }
.ps-kafel.teraz span { color: #D4D5F0; }
.ps-kafel.teraz .ico { color: var(--zolty); }
.ps-kal { padding: 16px; border-radius: 22px; background: #FFFFFF; color: var(--granat); }
.ps-kal-tytul { margin: 0 0 10px; font-family: var(--font-naglowek); font-weight: 800; font-size: 1.05rem; }
.ps-kal-dni { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-bottom: 4px; text-align: center; font-size: 0.72rem; font-weight: 700; color: var(--grigio); }
.ps-kal-siatka { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 4px; }
.ps-legenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 10px; font-size: 0.74rem; font-weight: 600; color: var(--grigio); }
.ps-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.ps-leg { display: inline-block; width: 12px; height: 12px; box-sizing: border-box; border-radius: 999px; }
.ps-leg.nauka { background: var(--zolty); }
.ps-leg.zamrozenie { background: color-mix(in srgb, var(--marka-niebieski) 22%, var(--card-bg)); }
.ps-leg.pusty { border: 1.5px solid var(--border); }
.ps-leg.pas { width: 20px; height: 8px; background: color-mix(in srgb, var(--zolty) 45%, var(--card-bg)); }
.ps-kal-podsumowanie { margin-top: 8px; text-align: center; font-size: 0.86rem; font-weight: 800; }
.ps-zasady { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 20px; background: rgba(255, 255, 255, 0.55);
  color: var(--granat); font-size: 0.9rem; line-height: 1.5; }
.ps-zasady > div { display: flex; align-items: flex-start; gap: 12px; }
.ps-zasady .ico { flex: none; margin: 3px 0 0; }
.ps-zasady strong { font-weight: 800; }
.ps-okno .om-akcje { margin-top: 4px; }
@media (max-width: 420px) {
  .ps-kafle { gap: 6px; }
  .ps-kafel { padding: 10px; }
  .ps-kafel b { font-size: 1.1rem; }
  .ps-kolko { width: 32px; height: 32px; }
}

.cmty-polecany.odk {
  display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 16px;
  background: var(--card-bg); border: 1.5px solid var(--border); border-radius: 24px; padding: 20px 20px 22px;
}
.odk-glowa { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 20px; }
.odk-glowa-tekst { flex: 1 1 420px; min-width: 0; }
.odk-naglowek { margin: 0; font-family: var(--font-naglowek); font-weight: 800; font-size: 1.45rem; line-height: 1.15; color: var(--testo); }
.odk-opis { margin: 4px 0 0; font-size: 0.9rem; color: var(--grigio); }
.odk-opis b { color: var(--testo); font-weight: 800; }
.odk-przyciski { display: flex; flex-wrap: wrap; gap: 8px; }
.odk-maly {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; margin: 0; border-radius: 999px;
  border: 1.5px solid var(--border); background: var(--card-bg); color: var(--testo);
  font: inherit; font-size: 0.84rem; font-weight: 700; cursor: pointer;
}
.odk-maly:hover { border-color: var(--oro); }
.odk-maly .ico { margin: 0; }
.odk-karty { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; min-width: 0; }
.odk-karta {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border: 1.5px solid var(--border); border-radius: 20px; background: var(--card-bg);
}
.odk-okladka {
  position: relative; display: block; width: 100%; height: 150px; padding: 0; margin: 0; border: 0; overflow: hidden; cursor: pointer;
  background: var(--k); --k: var(--marka-niebieski);
}
.odk-okladka.odk-zielony, .odk-kropka.odk-zielony { --k: var(--marka-zielony, #35A64D); }
.odk-okladka.odk-zolty, .odk-kropka.odk-zolty { --k: var(--zolty); }
.odk-okladka.odk-niebieski, .odk-kropka.odk-niebieski { --k: var(--marka-niebieski); }
.odk-okladka.odk-czerwony, .odk-kropka.odk-czerwony { --k: var(--marka-czerwony); }
.odk-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.odk-ilustracja { position: absolute; right: 8px; bottom: 0; height: 140px; width: auto; transition: transform .35s ease; }
.odk-okladka:hover .odk-foto, .odk-okladka:hover .odk-ilustracja { transform: scale(1.04); }
.odk-cytat {
  position: absolute; left: 14px; top: 44px; right: 104px; text-align: left;
  font-style: italic; font-size: 0.8rem; line-height: 1.45; color: #FFFFFF;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.odk-tryb {
  position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px; border-radius: 999px; background: #FFFFFF; color: var(--granat);
  font-weight: 800; font-size: 0.75rem;
}
.odk-kropka { width: 8px; height: 8px; border-radius: 50%; background: var(--k); }
.odk-najlepiej {
  position: absolute; right: 10px; top: 10px; display: inline-flex; align-items: center; height: 28px; padding: 0 12px;
  border-radius: 999px; background: var(--granat); color: var(--zolty); font-weight: 800; font-size: 0.75rem;
}
.odk-tresc { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; min-width: 0; }
.odk-powod { margin: 0; display: flex; align-items: flex-start; gap: 6px; font-size: 0.78rem; font-weight: 700; color: var(--grigio); }
.odk-powod .ico { margin: 2px 0 0; color: var(--marka-niebieski); }
.odk-tytul { margin: 0; font-family: var(--font-naglowek); font-weight: 700; font-size: 1.05rem; line-height: 1.25; }
.odk-tytul button {
  padding: 0; margin: 0; border: 0; background: none; font: inherit; color: var(--testo); text-align: left; cursor: pointer;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.odk-tytul button:hover { text-decoration: underline; }
.odk-meta { margin: 0; font-size: 0.8rem; color: var(--grigio); }
.odk-akcja {
  margin: auto 0 0; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 5px 0 16px; border: 0; border-radius: 999px; background: var(--oro); color: var(--na-akcencie, #FFFFFF);
  font: inherit; font-weight: 800; font-size: 0.86rem; cursor: pointer;
}
.odk-tresc .odk-akcja { margin-top: 8px; }
.odk-kolko {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--przycisk-kolko) var(--przycisk-kolko-strzalka) center / 18px 18px no-repeat;
}
[dir="rtl"] .odk-kolko, [dir="rtl"] .mow-kafelek-odblokuj-kolko, [dir="rtl"] .cmty-zw-premium-kolko { transform: scaleX(-1); }
@media (max-width: 1100px) { .odk-karty { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .cmty-polecany.odk { padding: 16px 0 18px; border-radius: 20px; }
  .odk-glowa { padding: 0 16px; }
  .odk-naglowek { font-size: 1.25rem; }
  .odk-karty { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 0 16px 4px; scrollbar-width: none; }
  .odk-karty::-webkit-scrollbar { display: none; }
  .odk-karta { flex: 0 0 82%; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .odk-foto, .odk-ilustracja { transition: none; } }

.start-polecane { margin: 18px 0 0; }
.start-polecane .odk-karty { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.start-polecane .odk-okladka { height: 128px; }
.start-polecane .odk-ilustracja { height: 118px; }
.start-polecane .odk-maly.start-polecane-ukryj { width: 40px; padding: 0; justify-content: center; }

.mow-kafelek.premium-kwestii .mow-kafelek-foto img { filter: saturate(.35); }
.mow-kafelek { position: relative; }
.mow-kafelek-zamek {
  position: absolute; left: 14px; top: 14px; z-index: 2; width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; background: var(--granat); color: var(--zolty);
}
.mow-kafelek-zamek .ico { margin: 0; }
.mow-kafelek-kwestii-premium { font-weight: 800; color: var(--testo); }
.mow-kafelek-odblokuj {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 5px 0 14px; margin: 0; border: 0;
  border-radius: 999px; background: var(--zolty); color: var(--granat); font: inherit; font-weight: 800; font-size: 0.8rem; cursor: pointer;
  white-space: nowrap;
}
.mow-kafelek.premium-kwestii .mow-kafelek-glowa > .ico { color: var(--granat); }
.mow-kafelek-odblokuj-kolko, .cmty-zw-premium-kolko {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--granat) var(--strzalka-zolta) center / 18px 18px no-repeat;
}
.tekst-wiersz.premium-kwestii .tekst-poziom { background: var(--granat); color: var(--zolty); }
.pin-premium {
  position: absolute; left: 10px; top: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 11px; border-radius: 999px; background: var(--granat); color: var(--zolty);
  font-weight: 800; font-size: 0.75rem; pointer-events: none;
}
.pin-premium .ico { margin: 0; font-size: 0.8rem; }
.pin-kwestii-premium { font-weight: 800; color: var(--testo); }
.cmty-zw-pigulka.premium { background: var(--granat); color: var(--zolty); display: inline-flex; align-items: center; gap: 6px; }
.cmty-zw-pigulka.premium .ico { margin: 0; }
.cmty-zw-liczba.premium { background: color-mix(in srgb, var(--zolty) 18%, var(--card-bg)); border-color: var(--zolty); }
.cmty-zw-liczba.premium b { display: inline-flex; align-items: center; gap: 6px; }
.cmty-zw-liczba.premium b .ico { margin: 0; font-size: 0.85rem; }
.cmty-zw-premium {
  display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 22px;
  background: var(--granat); color: #FFFFFF;
}
.cmty-zw-premium-tresc { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cmty-zw-premium-pigulka {
  align-self: flex-start; height: 24px; padding: 0 10px; border-radius: 999px; display: inline-flex; align-items: center;
  background: var(--zolty); color: var(--granat); font-weight: 800; font-size: 0.72rem;
}
.cmty-zw-premium h3 { margin: 0; font-family: var(--font-naglowek); font-weight: 800; font-size: 1.2rem; line-height: 1.2; color: #FFFFFF; }
.cmty-zw-premium p { margin: 0; font-size: 0.88rem; line-height: 1.5; color: #D9DCEC; }
.cmty-zw-premium-akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 6px; }
.cmty-zw-premium-btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 5px 0 18px; margin: 0; border: 0;
  border-radius: 999px; background: var(--zolty); color: var(--granat); font: inherit; font-weight: 800; font-size: 0.88rem; cursor: pointer;
}
.cmty-zw-premium-link {
  padding: 0; margin: 0; border: 0; background: none; color: #FFFFFF; font: inherit; font-weight: 700; font-size: 0.88rem;
  text-decoration: underline; cursor: pointer; min-height: 44px;
}
.cmty-zw-premium-img { flex: none; width: 96px; height: auto; align-self: flex-end; }
.cmty-akcje:has(> .cmty-zw-premium) { container-type: inline-size; }
@container (max-width: 380px) { .cmty-zw-premium-img { display: none; } }

.mow-kafelek-probka, .pin-premium.pin-probka, .cmty-zw-pigulka.probka {
  display: inline-flex; align-items: center; gap: 6px; background: #FFC83D; color: #17183B; font-weight: 800;
}
.mow-kafelek-probka { min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: 0.74rem; white-space: nowrap; }
.mow-kafelek-probka .ico, .cmty-zw-pigulka.probka .ico { margin: 0; font-size: 0.8rem; }
.sciana-cta { margin: 6px 0 4px; }
.sciana-cta .sciana-do-planow { width: 100%; max-width: 360px; }
#premiumScianaOverlay .sciana-okno.zamrozona :is(.wordmap-close, #scianaPozniej, .sciana-do-planow) { pointer-events: none; }
#premiumScianaOverlay .sciana-okno.zamrozona .sciana-do-planow { position: relative; overflow: hidden; }
#premiumScianaOverlay .sciana-okno.zamrozona .sciana-do-planow::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: color-mix(in srgb, #17183B 58%, transparent);
  transform-origin: right center; animation: planszaOdmrazanie var(--zamrozenie-ms, 1s) linear forwards;
}
#premiumScianaOverlay .sciana-okno.zamrozona :is(.wordmap-close, #scianaPozniej) { opacity: 0.55; }

.zdj-czeka { margin: 12px 0 0; }
.zdj-czeka:focus { outline: none; }   
.zdj-czeka-karta {
  display: flex; align-items: center; gap: 14px; text-align: start;
  padding: 14px 16px; border-radius: 18px; border: 1.5px solid var(--granat);
  background: var(--granat); color: #FFFFFF;
  box-shadow: 0 16px 32px -20px rgba(23, 24, 59, 0.6);
  animation: zdjCzekaWejscie 0.24s cubic-bezier(.22,1,.36,1);
}
:root[data-theme="dark"] .zdj-czeka-karta { border-color: #2E3068; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .zdj-czeka-karta { border-color: #2E3068; } }
.zdj-czeka-znak {
  position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: rgba(255, 200, 61, 0.12);
}
.zdj-czeka-znak::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid rgba(212, 213, 240, 0.2); border-top-color: #FFC83D; border-right-color: #FFC83D;
  animation: zdjCzekaObrot 0.9s linear infinite;
}
.zdj-czeka-znak .ico { margin: 0; font-size: 1.1rem; line-height: 1; color: #FFC83D; }
.zdj-czeka-tekst { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.zdj-czeka-etap { font-family: var(--font-naglowek); font-weight: 800; font-size: 0.95rem; line-height: 1.25; color: #FFFFFF; }
.zdj-czeka-opis { font-size: 0.76rem; line-height: 1.4; color: #D4D5F0; }
.zdj-czeka-kroki { display: flex; gap: 5px; margin-top: 4px; }
.zdj-czeka-kroki:empty { display: none; }
.zdj-czeka-kroki span { width: 7px; height: 7px; border-radius: 999px; background: rgba(212, 213, 240, 0.28); transition: width 0.3s ease, background-color 0.3s ease; }
.zdj-czeka-kroki span.byl { background: #D4D5F0; }
.zdj-czeka-kroki span.teraz { width: 20px; background: #FFC83D; }
.zdj-czeka.nakladka {
  position: absolute; inset: 0; z-index: 3; margin: 0; padding: 12px; border-radius: inherit;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--card-bg) 72%, transparent);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.zdj-czeka.nakladka .zdj-czeka-karta { max-width: 100%; }
.tworca-okladka-plyta .zdj-czeka.nakladka { padding: 6px; }
.tworca-okladka-plyta .zdj-czeka-karta { gap: 10px; padding: 10px 12px; border-radius: 14px; }
.tworca-okladka-plyta .zdj-czeka-znak { width: 34px; height: 34px; }
.tworca-okladka-plyta .zdj-czeka-znak .ico { font-size: 0.9rem; }
.tworca-okladka-plyta .zdj-czeka-etap { font-size: 0.8rem; }
.tworca-mini2:has(input:disabled) { opacity: .5; cursor: default; }
.account-row .zdj-czeka { margin: 0; }
.zdj-czeka-schowany { display: none !important; }
.zdj-czeka.zdj-czeka-spoczynek {
  position: absolute !important; inset: auto !important; width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: none;
}
.zdj-czeka-spoczynek .zdj-czeka-karta, .zdj-czeka-spoczynek .zdj-czeka-znak::before, .zdj-czeka-spoczynek .zdj-czeka-znak .ico { animation: none; }
.upload-zone.zdj-czeka-trwa, .upload-zone.zdj-czeka-trwa:hover { cursor: progress; border-style: solid; border-color: var(--zolty); background: var(--bg-highlight); }
.zdj-podglad { position: relative; display: block; width: fit-content; max-width: 100%; margin: 0 auto; line-height: 0; }
.zdj-czeka-trwa .zdj-podglad { clip-path: inset(8px 0 0 0 round 10px); }
.zdj-czeka-trwa .zdj-podglad::before, .zdj-czeka-trwa .zdj-podglad::after {
  content: ''; position: absolute; left: 0; right: 0; top: 8px; bottom: 0; pointer-events: none;
}
.zdj-czeka-trwa .zdj-podglad::before { background: rgba(23, 24, 59, 0.22); }
.zdj-czeka-trwa .zdj-podglad::after {
  background: linear-gradient(180deg, rgba(255, 200, 61, 0) 0%, rgba(255, 200, 61, 0) 55%, rgba(255, 200, 61, 0.34) 91%,
                              #FFC83D 91%, #FFC83D 93.5%, rgba(255, 200, 61, 0) 93.5%);
  transform: translateY(-100%); animation: zdjCzekaSkan 2s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes zdjCzekaObrot { to { transform: rotate(360deg); } }
@keyframes zdjCzekaSkan { from { transform: translateY(-100%); } to { transform: translateY(10%); } }
@keyframes zdjCzekaWejscie { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes zdjCzekaPuls { from { opacity: 1; } to { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .zdj-czeka-karta { animation: none; }
  .zdj-czeka-znak::before { animation: none; border-color: rgba(255, 200, 61, 0.55); }
  .zdj-czeka-znak .ico { animation: zdjCzekaPuls 1.4s ease-in-out infinite alternate; }
  .zdj-czeka-trwa .zdj-podglad::after { animation: none; display: none; }
  .zdj-czeka-kroki span { transition: none; }
  .zdj-czeka-przycisk .spinner-w-przycisku { animation: zdjCzekaPuls 1.4s ease-in-out infinite alternate; border-color: currentColor; }
}

.mow-mapa-podtytul-wiersz { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 14px; margin: 4px 0 12px; }
.mow-mapa-podtytul-wiersz .mow-mapa-podtytul { margin: 0; }
.mws-wejscie {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px;
  border: 1.5px solid var(--border); background: var(--card-bg); color: var(--testo); font: inherit; font-weight: 700; font-size: 0.9rem; cursor: pointer;
}
.mws-wejscie .ico { margin: 0; font-size: 1rem; color: var(--marka-zielony); }
.mws-wejscie:hover { border-color: var(--marka-zielony); }
.mws [hidden] { display: none !important; }   
.mws {
  max-width: 560px; margin: 0 auto; padding: 4px 4px 0; display: flex; flex-direction: column;
  min-height: min(780px, calc(100dvh - 140px)); color: var(--testo);
}
.mws .ico { margin: 0; }
.mws button:focus-visible, .mws-wejscie:focus-visible, .mws input:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.mws-glowa { display: flex; align-items: center; gap: 10px; }
.mws-glowa-tekst { flex: 1; min-width: 0; }
.mws-tytul { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.2rem; line-height: 1.1; }
.mws-jezyk { margin-top: 2px; font-size: 0.85rem; font-weight: 600; color: var(--grigio); }
.mws-kolko {
  width: 44px; height: 44px; flex-shrink: 0; padding: 0; border-radius: 50%; border: 1.5px solid var(--border);
  background: var(--card-bg); color: var(--testo); display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; cursor: pointer;
}
.mws-kolko[aria-expanded="true"] { background: var(--przycisk); border-color: var(--przycisk); color: var(--na-przycisku); }
.mws-flaga {
  height: 44px; padding: 0 15px 0 13px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--card-bg); color: var(--testo);
  display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-naglowek); font-weight: 800; font-size: 1.05rem; cursor: pointer;
}
.mws-flaga .ico { font-size: 1rem; }
.mws-flaga.ma { background: var(--zolty); border-color: var(--zolty); color: var(--granat); }
.mws-flaga[aria-expanded="true"] { background: var(--granat); border-color: var(--granat); color: var(--zolty); }
.mws-flaga.mrug { animation: mwsMrug .6s ease-out; }
@keyframes mwsMrug { 40% { transform: scale(1.18); } }

.mws-scena { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 20px 0 8px; }
.mws.z-panelem .mws-scena { display: none; }
.mws.z-panelem .mws-dol { opacity: .35; pointer-events: none; }
.mws-polecenie {
  margin: 0 4px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-family: var(--font-naglowek); font-weight: 800;
  font-size: 1.7rem; line-height: 1.12; letter-spacing: -.01em; color: var(--testo);
}
.mws-polecenie-flaga { display: inline-flex; line-height: 0; }
.mws-rozmowca { display: flex; align-items: flex-end; gap: 4px; }
.mws-postac { width: 88px; height: 132px; flex-shrink: 0; }
.mws-postac img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
:root[data-theme="dark"] .mws-postac img { filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 0.5px rgba(255, 255, 255, 0.85)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mws-postac img { filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 0.5px rgba(255, 255, 255, 0.85)); }
}
.mws-dymek {
  position: relative; flex: 1; min-width: 0; margin-bottom: 38px; display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 16px 10px 10px; border-radius: 22px; background: var(--card-bg); border: 2px solid var(--border); transition: box-shadow .2s;
}
.mws-dymek::before {
  content: ''; position: absolute; left: -10px; bottom: 18px; width: 16px; height: 16px; background: inherit;
  border-left: 2px solid; border-bottom: 2px solid; border-color: inherit; transform: rotate(45deg);
}
.mws-dymek.bez-glosnika { padding-left: 18px; }
.mws-dymek.z-pytaniem { padding-right: 8px; }
.mws-dymek-kom { margin: 0 0 2px; font-size: 0.95rem; font-weight: 700; color: var(--grigio); }
.mws-dymek.zielony .mws-dymek-kom { color: var(--verde); }
.mws-oko-dymku { align-self: flex-start; }
.mws-zacheta { margin: 0 4px; font-size: 0.95rem; line-height: 1.45; color: var(--grigio); }
.mws-uczen-bylo { opacity: .7; }
.mws-dymek.zielony { background: var(--bg-success-soft); border-color: var(--marka-zielony); }
.mws-dymek.zolty { background: var(--bg-gold-soft); border-color: var(--zolty); }
.mws-dymek.mowi { box-shadow: 0 0 0 4px color-mix(in srgb, var(--marka-niebieski) 18%, transparent); }
.mws-glosnik {
  width: 44px; height: 44px; flex-shrink: 0; padding: 0; border-radius: 50%; border: 0; background: var(--bg-warn-soft);
  color: var(--marka-niebieski); display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; cursor: pointer;
}
.mws-dymek.zielony .mws-glosnik, .mws-dymek.zolty .mws-glosnik, .mws-glosnik.bialy { background: var(--card-bg); }
.mws-dymek.mowi .mws-glosnik { background: var(--marka-niebieski); color: #FFFFFF; }
.mws-dymek-tresc { flex: 1; min-width: 0; padding-top: 7px; }
.mws-dymek-tekst { margin: 0; font-family: var(--font-naglowek); font-weight: 800; font-size: 1.25rem; line-height: 1.22; color: var(--testo); overflow-wrap: anywhere; }
.mws-dymek-pod { margin: 4px 0 0; font-size: 0.95rem; font-style: italic; color: var(--grigio); }
.mws-tresc { display: flex; flex-direction: column; gap: 14px; }
.mws-tresc:empty { display: none; }
.mws-uczen {
  align-self: flex-end; max-width: 88%; padding: 12px 18px; border-radius: 22px 22px 6px 22px; border: 2px solid var(--marka-niebieski);
  background: var(--bg-warn-soft); font-family: var(--font-naglowek); font-weight: 700; font-size: 1.18rem; line-height: 1.32;
  color: var(--testo); overflow-wrap: anywhere;
}
.mws-uczen.na-zywo { border-style: dashed; }
.mws-uczen.trafiony { border-color: var(--marka-zielony); background: var(--bg-success-soft); color: var(--verde); }
.mws-uczen.z-okiem { padding-right: 8px; }
.mws-uczen-wiersz { display: flex; align-items: flex-start; gap: 6px; }
.mws-uczen-wiersz > span { flex: 1; min-width: 0; padding-top: 3px; }
.mws-oko {
  width: 36px; height: 36px; flex-shrink: 0; margin: -4px 0 -4px 0; padding: 0; border: 0; border-radius: 50%; background: transparent;
  color: inherit; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; cursor: pointer; opacity: .75;
}
.mws-oko:hover, .mws-oko[aria-pressed="true"] { opacity: 1; background: color-mix(in srgb, var(--marka-zielony) 14%, transparent); }
.mws-uczen-sens { margin: 6px 0 2px; font-family: var(--font-tekst); font-weight: 600; font-size: 0.97rem; line-height: 1.4; color: var(--grigio); }
.mws-uczen.klikalny { cursor: pointer; }
.mws-uczen.klikalny:hover { box-shadow: 0 0 0 4px color-mix(in srgb, var(--marka-zielony) 16%, transparent); }
.mws-uczen.zmienia { width: 88%; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; color: var(--testo); }
.mws-zmiana-tytul { font-family: var(--font-tekst); font-size: 0.86rem; font-weight: 800; color: var(--verde); }
.mws-zmiana-pole {
  display: block; width: 100%; box-sizing: border-box; min-height: 64px; padding: 10px 12px; border: 2px solid var(--marka-zielony);
  border-radius: 14px; background: var(--card-bg); color: var(--testo); font-family: var(--font-tekst); font-weight: 600; font-size: 1rem;
  line-height: 1.4; resize: vertical; outline: none;
}
.mws-zmiana-pole:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--marka-zielony) 22%, transparent); }
.mws-zmiana-nauka { margin: 0; min-height: 1.4em; font-family: var(--font-naglowek); font-weight: 700; font-size: 1.12rem; line-height: 1.35; color: var(--verde); }
.mws-zmiana-blad { font-family: var(--font-tekst); font-weight: 700; font-size: 0.95rem; color: var(--rosso); }
.mws-zmiana-akcje { display: flex; flex-wrap: wrap; gap: 8px; }
.mws-uczen.zmienia .mws-obrys { color: var(--testo); border-color: color-mix(in srgb, var(--testo) 28%, transparent); font-family: var(--font-tekst); }
.mws-uczen.zmienia .mws-obrys:hover { background: color-mix(in srgb, var(--card-bg) 60%, transparent); }
.mws-kropki { display: inline-flex; gap: 5px; padding: 6px 0; }
.mws-kropki i { width: 8px; height: 8px; border-radius: 50%; background: var(--marka-niebieski); opacity: .4; animation: mwsKropka 1s ease-in-out infinite; }
.mws-kropki i:nth-child(2) { animation-delay: .15s; }
.mws-kropki i:nth-child(3) { animation-delay: .3s; }
.mws-karta { border-radius: 24px; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.mws-karta-popraw { background: var(--bg-error-soft); }
.mws-karta-glowa { display: flex; align-items: center; gap: 8px; }
.mws-etykieta { font-size: 0.8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--grigio); }
.mws-licznik-zdan { padding: 2px 8px; border-radius: 999px; background: var(--card-bg); font-size: 0.78rem; font-weight: 800; color: var(--testo); }
.mws-odstep { flex: 1; }
.mws-zdanie { margin: 0; font-family: var(--font-naglowek); font-weight: 700; font-size: 1.42rem; line-height: 1.45; color: var(--testo); overflow-wrap: anywhere; }
.mws-pk {
  font-weight: 800; color: var(--verde); background: var(--bg-success-soft); border-radius: 7px; padding: 0 4px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.mws-brak, .mws-pk.mws-brak {
  font-weight: 800; color: var(--marka-czerwony); background: none; padding: 0; text-decoration-line: underline; text-decoration-style: dotted;
  text-decoration-color: var(--marka-czerwony); text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-skip-ink: none;
}
.mws-zle {
  font-weight: 800; color: var(--rosso); text-decoration-line: line-through; text-decoration-color: var(--rosso);
  text-decoration-thickness: 3px; text-decoration-skip-ink: none; background: color-mix(in srgb, var(--card-bg) 70%, transparent);
  border-radius: 7px; padding: 0 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.mws-dodane {
  font-weight: 800; color: var(--verde); background: var(--bg-success-soft); text-decoration: none; border-radius: 7px; padding: 0 4px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.mws-oko-karty { color: var(--grigio); }
.mws-oko-karty[aria-pressed="true"] { color: var(--testo); }
.mws-karta-sens { margin: -2px 0 0; font-size: 1rem; line-height: 1.45; font-weight: 600; color: var(--grigio); }
.mws-kosz { color: var(--grigio); }
.mws-kosz:hover { color: var(--rosso); }
.mws-karta-pamiec { background: var(--zolty); color: var(--granat); }
.mws-wiecej {
  width: 40px; height: 40px; flex-shrink: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .55); color: var(--granat);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; cursor: pointer;
}
.mws-wiecej:hover, .mws-wiecej[aria-expanded="true"] { background: #FFFFFF; }
.mws-sens-pole { display: block; width: 100%; box-sizing: border-box; border: 2px solid var(--granat); resize: vertical; min-height: 90px; outline: none; }
.mws-sens-pole:focus { box-shadow: 0 0 0 4px rgba(23, 24, 59, .18); }
.mws-sens-blad { margin: 0; padding: 8px 12px; border-radius: 12px; background: #FFFFFF; color: #B91C1C; font-weight: 700; font-size: 0.95rem; }
.mws-pigulka-flagi {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px 6px 11px; border-radius: 999px;
  background: var(--granat); color: var(--zolty); font-weight: 800; font-size: 0.9rem;
}
.mws-sens {
  margin: 0; padding: 16px 18px; border-radius: 20px 20px 20px 6px; background: #FFFFFF; color: var(--granat);
  font-family: var(--font-naglowek); font-weight: 700; font-size: 1.35rem; line-height: 1.35;
}
.mws-karta-akcje { display: flex; flex-wrap: wrap; gap: 8px; }
.mws-obrys {
  min-height: 44px; padding: 0 15px 0 12px; border-radius: 999px; border: 1.5px solid rgba(23, 24, 59, .28); background: transparent;
  color: var(--granat); display: inline-flex; align-items: center; gap: 7px; font: inherit; font-weight: 700; font-size: 0.92rem; cursor: pointer;
}
.mws-obrys:hover { background: rgba(255, 255, 255, .45); }

.mws-dol { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0 18px; }
.mws-dok { width: 100%; max-width: 420px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; justify-items: center; }
.mws-dok-bok { display: flex; justify-content: center; min-width: 0; padding-top: 36px; }
.mws-dok-btn {
  min-width: 76px; padding: 0; border: 0; background: transparent; color: var(--testo); font: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.mws-dok-btn[hidden], .mws-dok-zegar[hidden] { display: none; }
.mws-dok-kolko {
  width: 60px; height: 60px; border-radius: 50%; border: 1.5px solid var(--border); background: var(--card-bg); box-shadow: var(--shadow);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; transition: transform .1s, border-color .15s;
}
.mws-dok-btn:hover .mws-dok-kolko { border-color: var(--border-2); }
.mws-dok-btn:active .mws-dok-kolko { transform: scale(.94); }
.mws-dok-btn:focus-visible { outline: none; }
.mws-dok-btn:focus-visible .mws-dok-kolko { outline: 3px solid var(--marka-niebieski); outline-offset: 3px; }
.mws-dok-napis { font-weight: 700; font-size: 0.88rem; line-height: 1.2; text-align: center; }
.mws-dok-btn.turla .ico { animation: mwsTurla .6s cubic-bezier(.3, .7, .4, 1); }
.mws-dok-btn.czeka .ico { animation: mwsTurla .9s linear infinite; }
@keyframes mwsTurla { 50% { transform: rotate(200deg) scale(1.2); } 100% { transform: rotate(360deg); } }
.mws-dok-zegar { display: flex; flex-direction: column; align-items: center; gap: 1px; min-height: 60px; justify-content: center; }
.mws-dok-zegar b { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.25rem; color: var(--testo); font-variant-numeric: tabular-nums; }
.mws-dok-zegar span { font-size: 0.8rem; font-weight: 600; color: var(--grigio); }
.mws-dopowiedz {
  min-height: 40px; padding: 0 14px 0 10px; border-radius: 999px; border: 1.5px dashed var(--marka-zielony); background: var(--card-bg);
  color: var(--verde); display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 700; font-size: 0.9rem; cursor: pointer;
}
.mws-dopowiedz:hover { border-style: solid; }
.mws-uczen-blok { align-self: flex-end; max-width: 88%; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.mws-uczen-blok > .mws-uczen { max-width: 100%; }
.mws-karta-popraw .mws-dopowiedz { align-self: flex-start; border-color: color-mix(in srgb, var(--testo) 35%, transparent); color: var(--testo); }
.mws-mik-obszar { position: relative; width: 132px; height: 132px; display: flex; align-items: center; justify-content: center; }
.mws-mik {
  position: relative; width: 88px; height: 88px; padding: 0; border-radius: 50%; border: 0; background: var(--przycisk); color: var(--na-przycisku);
  display: inline-flex; align-items: center; justify-content: center; font-size: 2rem; cursor: pointer;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--zolty) 50%, transparent); transition: transform .1s, background .15s, box-shadow .15s;
}
.mws-mik:active { transform: scale(.95); }
.mws .mws-mik:focus-visible { outline-offset: 8px; }
.mws-mik-stop, .mws-mik-krec, .mws-mik-ok { display: none; }
.mws-mik-stop { width: 26px; height: 26px; border-radius: 6px; background: var(--granat); }
.mws-mik-krec { width: 34px; height: 34px; border-radius: 50%; border: 3.5px solid color-mix(in srgb, var(--marka-zielony) 25%, transparent); border-top-color: var(--marka-zielony); animation: mwsKrec .8s linear infinite; }
@keyframes mwsKrec { to { transform: rotate(360deg); } }
.mws-mik-obszar.slucha .mws-mik {
  background: var(--marka-zielony); color: var(--granat);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--marka-zielony) 22%, transparent), 0 0 0 22px color-mix(in srgb, var(--marka-zielony) 10%, transparent);
}
.mws-mik-obszar.slucha.odlicza .mws-mik { box-shadow: 0 0 0 10px color-mix(in srgb, var(--marka-zielony) 22%, transparent); }
.mws-mik-obszar.slucha .mws-mik-ikona { display: none; }
.mws-mik-obszar.slucha .mws-mik-stop { display: block; }
.mws-mik-obszar.wlacza .mws-mik { background: var(--bg-success-soft); color: var(--verde); box-shadow: 0 0 0 2px var(--marka-zielony); }
.mws-mik-obszar.mysli .mws-mik { background: var(--bg-soft); color: var(--grigio); box-shadow: none; cursor: default; }
.mws-mik-obszar.mysli .mws-mik-ikona { display: none; }
.mws-mik-obszar.mysli .mws-mik-krec { display: block; }
.mws-mik-obszar.dobrze .mws-mik { background: var(--marka-zielony); color: var(--granat); box-shadow: none; animation: mwsWyskok .5s cubic-bezier(.2, 1.6, .4, 1); }
.mws-mik-obszar.dobrze .mws-mik-ikona { display: none; }
.mws-mik-obszar.dobrze .mws-mik-ok { display: inline-flex; }
@keyframes mwsWyskok { 0% { transform: scale(.8); } 55% { transform: scale(1.16); } 100% { transform: scale(1); } }
.mws-mik-obszar.wylaczony .mws-mik { opacity: .5; }
.mws-krag { position: absolute; inset: 22px; border-radius: 50%; border: 3px solid var(--marka-zielony); pointer-events: none; opacity: 0; }
.mws-mik-obszar.dobrze .mws-krag { animation: mwsKrag .65s ease-out; }
@keyframes mwsKrag { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }
.mws-pierscien { position: absolute; inset: 0; width: 132px; height: 132px; transform: rotate(-90deg); pointer-events: none; display: none; }
.mws-mik-obszar.odlicza .mws-pierscien { display: block; }
.mws-pierscien circle { fill: none; stroke-width: 4; }
.mws-pierscien .tor { stroke: var(--border); }
.mws-pierscien .postep { stroke: var(--marka-zielony); stroke-linecap: round; stroke-dasharray: 389.6; stroke-dashoffset: 389.6; }
.mws-mik-obszar.odlicza .mws-pierscien .postep { animation: mwsOdlicz 2s linear forwards; }
@keyframes mwsOdlicz { to { stroke-dashoffset: 0; } }
.mws-lektor {
  display: none; position: absolute; width: 88px; height: 88px; padding: 0; border-radius: 50%; border: 2px solid var(--border);
  background: var(--card-bg); align-items: center; justify-content: center; gap: 8px; cursor: pointer;
}
.mws-lektor span { width: 14px; height: 14px; border-radius: 50%; background: var(--marka-zielony); animation: mwsKropka .8s ease-in-out infinite; }
.mws-lektor span:nth-child(2) { background: var(--marka-czerwony); animation-delay: .18s; }
.mws-lektor span:nth-child(3) { background: var(--marka-niebieski); animation-delay: .36s; }
@keyframes mwsKropka { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(-6px); opacity: 1; } }
.mws-mik-obszar.lektor .mws-mik { visibility: hidden; }
.mws-mik-obszar.lektor .mws-lektor { display: inline-flex; }
@media (prefers-reduced-motion: reduce) { .mws-lektor span, .mws-kropki i { animation: none; opacity: 1; } }
.mws-status { margin: 2px 0 0; min-height: 22px; max-width: 460px; text-align: center; color: var(--grigio); font-size: 0.93rem; font-weight: 600; }
.mws-status.slucha { color: var(--verde); }
.mws-status.blad { color: var(--marka-czerwony); }
.mws-pole { margin-top: 8px; width: 100%; display: flex; gap: 8px; }
.mws-pole input {
  flex: 1; min-width: 0; height: 46px; padding: 0 14px; border-radius: 14px; border: 1.5px dashed var(--border-warm-dash);
  background: var(--card-bg); color: var(--testo); font: inherit; font-size: 1rem;
}
.mws-pole button { height: 46px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--przycisk); color: var(--na-przycisku); font: inherit; font-weight: 800; cursor: pointer; }
.mws-pole button:disabled { opacity: .45; cursor: default; }
.mws-panel { margin: 14px 0 0; padding: 18px 16px 10px; border-radius: 26px; background: var(--card-bg); border: 1.5px solid var(--border); box-shadow: 0 12px 30px rgba(23, 24, 59, .12); }
.mws-panel h2 { margin: 0 0 12px; font-family: var(--font-naglowek); font-weight: 800; font-size: 1.35rem; color: var(--testo); }
.mws-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mws-lista li { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; border-radius: 18px; background: var(--bg-soft); }
.mws-lista-tresc { flex: 1; min-width: 0; }
.mws-lista-zdanie { font-size: 1.02rem; line-height: 1.5; font-weight: 600; color: var(--testo); overflow-wrap: anywhere; }
.mws-lista-zdanie .mws-pk { color: inherit; background: none; padding: 0; text-decoration: underline; text-decoration-color: var(--zolty); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.mws-lista-sens { margin-top: 2px; font-size: 0.88rem; color: var(--grigio); }
.mws-lista-mik {
  width: 44px; height: 44px; flex-shrink: 0; padding: 0; border-radius: 50%; border: 0; background: var(--przycisk); color: var(--na-przycisku);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; cursor: pointer;
}
.mws-lista-mik:disabled { opacity: .45; cursor: default; }
.mws-lista-usun {
  width: 44px; height: 44px; flex-shrink: 0; padding: 0; border-radius: 50%; border: 0; background: transparent; color: var(--grigio);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; cursor: pointer;
}
.mws-lista-usun:hover:not(:disabled) { color: var(--rosso); background: var(--bg-error-soft); }
.mws-lista-usun:disabled { opacity: .45; cursor: default; }
.mws-zakladki { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 12px; }
.mws-zakladka {
  min-height: 44px; padding: 0 2px; border: 0; background: transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-naglowek); font-weight: 800; font-size: 1.25rem; color: var(--grigio); box-shadow: inset 0 -3px 0 transparent;
}
.mws-zakladka[aria-selected="true"] { color: var(--testo); box-shadow: inset 0 -3px 0 var(--zolty); }
.mws-zakladka-n { min-width: 24px; padding: 1px 7px; border-radius: 999px; background: var(--bg-soft); font-family: inherit; font-size: 0.82rem; color: var(--testo); }
.mws-pusto { margin: 0 0 8px; color: var(--grigio); }
.mws-panel-stopka { display: flex; justify-content: center; margin-top: 6px; }
.mws-wyczysc { min-height: 44px; padding: 0 14px; border: 0; background: transparent; color: var(--marka-czerwony); font: inherit; font-weight: 700; font-size: 0.93rem; cursor: pointer; }
.mws-wiersz { padding: 12px 0; border-top: 1px solid var(--border-warm-soft); }
.mws-wiersz:first-of-type { border-top: 0; }
.mws-wiersz.obok { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mws-ust-etykieta { display: flex; align-items: center; gap: 8px; font-size: 0.97rem; font-weight: 700; color: var(--testo); }
.mws-segment { display: grid; grid-template-columns: repeat(var(--mws-n, 3), minmax(0, 1fr)); gap: 4px; margin-top: 8px; padding: 4px; border-radius: 20px; background: var(--bg-soft); }
.mws-segment button {
  min-height: 44px; padding: 6px 4px; border-radius: 16px; border: 0; background: transparent; color: var(--testo); font: inherit; font-weight: 700;
  font-size: 0.93rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer;
}
.mws-segment small { font-weight: 600; font-size: 0.78rem; color: var(--grigio); }
.mws-segment button[aria-pressed="true"] { background: var(--przycisk); color: var(--na-przycisku); }
.mws-segment button[aria-pressed="true"] small { color: inherit; opacity: .85; }
.mws-przelacznik {
  width: 52px; height: 32px; flex-shrink: 0; padding: 0 4px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--bg-soft);
  display: inline-flex; align-items: center; justify-content: flex-start; cursor: pointer;
}
.mws-przelacznik span { width: 22px; height: 22px; border-radius: 50%; background: var(--tekst-neutralny); }
.mws-przelacznik[aria-checked="true"] { justify-content: flex-end; background: var(--przycisk); border-color: var(--przycisk); }
.mws-przelacznik[aria-checked="true"] span { background: var(--na-przycisku); }
@media (max-width: 420px) {
  .mws-postac { width: 72px; height: 108px; }
  .mws-polecenie { font-size: 1.5rem; }
  .mws-zdanie { font-size: 1.28rem; }
  .mws-sens { font-size: 1.2rem; }
}
#pstartOverlay {
  --zielen-gleboka: #1F7A35; --zielen-pastel: #9AD2A6; --zielen-tlo: rgba(53, 166, 77, 0.10); --primary: #2463E9; --primary-dark: #204EB8;
  --verde: #1F7A35; --rosso: #DB2727; --marka-czerwony: #DB2727; --marka-niebieski: #2463E9; --srednie: #2463E9; --bianco: #FFFFFF;
  --crema: #F3F5FB; --oro: #17183B; --na-akcencie: #FFFFFF; --fokus: #2463E9; --przycisk-kolko: #FFC83D;
  --przycisk-kolko-strzalka: var(--strzalka-granatowa); --testo: #17183B; --grigio: #4A4B6B; --card-bg: #FFFFFF;
  --shadow: 0 1px 2px rgba(23, 24, 59, 0.05); --shadow-hover: 0 14px 30px -16px rgba(23, 24, 59, 0.35); --border: #E3E4EF;
  --border-2: #D4D5F0; --bg-soft: #ECEDF6; --muted-light: #9A9CB8; --muted-dark: #2E3055; --border-warm: #E3E4EF;
  --border-warm-soft: #EDEEF6; --border-warm-dash: #9A9CB8; --border-warm-2: #EDEEF6; --bg-error-soft: #FBE6E6;
  --bg-error-soft2: #F8D9D9; --ai-wstawka-znak: #B81E1E; --bg-success-soft: #E4F3E7; --bg-warn-soft: #E6EDFC;
  --bg-amber-soft: #EEEFF5; --bg-info-soft: #E6EDFC; --pigulka-tlo: rgba(23, 24, 59, 0.72); --pigulka-tekst: #FFFFFF;
  --pigulka-cicha: rgba(23, 24, 59, 0.07); --kratka-linia: #E3E6F2; --tekst-neutralny: #6B6D8A; --bg-highlight: #FFF4D6;
  --bg-gold-soft: #FFF6DC; --bg-success-grad-a: #EEF8F0; --bg-success-grad-b: #E4F3E7; --chart-latwe: #35A64D;
  --audio-tile-bg: #EEEDFB; --audio-tile-border: #C9CAE8; --wordmap-latwe-border: #A8DBB3; --wordmap-srednie-border: #A9C1F5;
  --wordmap-trudne-border: #F0A9A9; --krawedz-kafla: #CBD0E1; --fokus-pierscien: rgba(36, 99, 233, 0.14); --czerwien-tekst: #B81E1E;
  --strzalka-szara: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8DAA' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6.5l5.5 5.5-5.5 5.5'/%3E%3C/svg%3E");
  --przycisk: var(--oro); --na-przycisku: var(--na-akcencie); --zaslona: rgba(23, 24, 59, 0.62);
  color-scheme: light;
}
.pstart {
  position: fixed; inset: 0; z-index: 3100; display: flex; flex-direction: column;
  background: var(--crema); color: var(--testo); font-family: var(--font-tekst);
}
.pstart.hidden { display: none !important; }
#pstartOverlay.wordmap-overlay {
  position: fixed; inset: 0; z-index: 3100; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  padding: 0; background: var(--crema);
}
.pstart.wjazd { animation: pstartWjazd 0.32s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes pstartWjazd { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.pstart-gora {
  flex: none; position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 88px; padding: 10px clamp(16px, 3.9vw, 56px); background: var(--crema); transition: box-shadow 0.2s ease;
}
.pstart.przewiniety .pstart-gora { box-shadow: 0 1px 0 #E3E6F0, 0 12px 24px -20px rgba(23, 24, 59, 0.45); }
.pstart-marka { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pstart-sygnet { flex: none; width: 44px; height: 44px; border-radius: 13px; background: #17183B; display: flex; align-items: center; justify-content: center; }
.pstart-nazwa { font-family: var(--font-naglowek); font-weight: 800; font-size: 20px; line-height: 1.15; }
.pstart-pomin {
  flex: none; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; border: 1px solid #E3E6F0; border-radius: 14px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F8FC 100%); box-shadow: 0 3px 0 #D5D9E8; color: #17183B; cursor: pointer;
  font-family: var(--font-naglowek); font-weight: 700; font-size: 15px;
}
.pstart-pomin:hover { background: #FFFFFF; }
.pstart-pomin:active { transform: translateY(2px); box-shadow: 0 1px 0 #D5D9E8; }
.pstart :focus-visible { outline: 3px solid #2463E9; outline-offset: 3px; }
.pstart-przewijak { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.pstart-przewijak:focus { outline: none; }
.pstart-sekcja { padding: clamp(40px, 4.5vw, 64px) clamp(16px, 6vw, 120px); }
.pstart-sekcja.biala { background: #FFFFFF; }
.pstart-sekcja.blekitna { background: #E8EFFD; }
.pstart-sekcja.zolta { background: #FFF4D2; }
.pstart-wnetrze { max-width: 1200px; margin: 0 auto; }
.pstart-nr {
  flex: none; width: 56px; height: 56px; border-radius: 18px; background: #17183B; color: #FFC83D; box-shadow: 0 4px 0 #0B0C24;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-naglowek); font-weight: 800; font-size: 28px;
}
.pstart-h2 { margin: 0; font-family: var(--font-naglowek); font-weight: 800; font-size: clamp(32px, 3.9vw, 56px); line-height: 1.04; letter-spacing: -0.027em; text-wrap: balance; }
.pstart-opis { margin: 0; font-size: clamp(18px, 1.55vw, 22px); line-height: 1.36; font-weight: 600; color: #4A4B6B; }
.pstart-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.pstart-rzad-tytul { display: flex; align-items: center; gap: 22px; }
.pstart-hero { padding-top: 8px; }
.pstart-hero .pstart-wnetrze { display: flex; align-items: center; gap: clamp(24px, 4.2vw, 60px); min-height: 480px; }
.pstart-hero-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.pstart-hero .pstart-powitanie {
  margin: 0; font-family: var(--font-naglowek); font-weight: 800; font-size: clamp(44px, 6.4vw, 92px); line-height: 1;
  letter-spacing: -0.033em; overflow-wrap: break-word; text-wrap: balance;
}
.pstart-hero .pstart-powitanie.dlugie { font-size: clamp(38px, 4.6vw, 66px); }
.pstart-podtytul { margin: 0; font-size: clamp(19px, 1.8vw, 26px); line-height: 1.3; font-weight: 600; color: #2E3055; }
.pstart-chipy { display: flex; flex-wrap: wrap; gap: 10px; }
.pstart-chipy:empty { display: none; }
.pstart-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: #FFFFFF; box-shadow: 0 3px 0 #D5D9E8; font-weight: 800; font-size: 16px; line-height: 1.2; }
.pstart-chip-flaga { display: inline-flex; border-radius: 3px; overflow: hidden; line-height: 0; }
.pstart-hero-obraz { position: relative; flex: none; width: clamp(240px, 36vw, 520px); aspect-ratio: 520 / 480; }
.pstart-plama { position: absolute; display: block; }
.pstart-plama.zolta { left: 7.7%; top: 8.3%; width: 84.6%; height: 83.3%; border-radius: 27% / 30%; background: #FFC83D; transform: rotate(-6deg); }
.pstart-plama.niebieska { left: 63.5%; top: 2.1%; width: 28.8%; height: 25%; border-radius: 22.7% / 28.3%; background: #2463E9; transform: rotate(12deg); }
.pstart-plama.zielona { left: 1.9%; top: 68.75%; width: 25%; height: 22.9%; border-radius: 23% / 27%; background: #35A64D; transform: rotate(-14deg); }
.pstart-hero-obraz img { position: absolute; left: 11.5%; top: 6.25%; width: 80.8%; height: 87.5%; object-fit: contain; }
.pstart-ilu { position: relative; display: block; width: 100%; aspect-ratio: var(--pst-w) / var(--pst-h); overflow: hidden; background: #FFFFFF; }
.pstart-ilu.czeka { background: linear-gradient(110deg, #EEF1F8 30%, #F8F9FD 50%, #EEF1F8 70%) 0 0 / 300% 100%; animation: pstartCzeka 1.4s linear infinite; }
@keyframes pstartCzeka { to { background-position: -300% 0; } }
.pstart-ilu[data-ilu="powitanie"] { --pst-w: 556; --pst-h: 628; border-radius: 28px; background: #17183B; }
.pstart-ilu[data-ilu="fiszka"] { --pst-w: 588; --pst-h: 500; border-radius: 28px; background: #F3F5FB; }
.pstart-ilu:is([data-ilu="quiz1"], [data-ilu="quiz2"], [data-ilu="pary"]) { --pst-w: 596; --pst-h: 634; border-radius: 26px; background: #F3F5FB; }
.pstart-ilu[data-ilu="sciezka"] { --pst-w: 920; --pst-h: 1000; border-radius: 32px; background: #2463E9; }
.pstart-ilu:is([data-ilu="czytanie"], [data-ilu="sluchanie"], [data-ilu="mowienie"]) { border-radius: 26px; background: #F3F5FB; }
.pstart-ilu[data-ilu="czytanie"] { --pst-w: 440; --pst-h: 550; }
.pstart-ilu[data-ilu="sluchanie"] { --pst-w: 520; --pst-h: 650; }
.pstart-ilu[data-ilu="mowienie"] { --pst-w: 600; --pst-h: 750; }
.pstart-ilu[data-ilu="zdjecie"] { --pst-w: 300; --pst-h: 500; background: transparent; overflow: visible; }
.pstart-ilu[data-ilu="paletka"] { --pst-w: 720; --pst-h: 490; border-radius: 26px; background: #F3F5FB; }
.pstart-ilu[data-ilu="zestaw"] { --pst-w: 340; --pst-h: 440; border-radius: 22px; background: #FFFFFF; }
.pstart-s1 .pstart-wnetrze { display: flex; align-items: center; gap: clamp(24px, 4.2vw, 60px); }
.pstart-kadr-porcja { position: relative; flex: none; width: min(680px, 56%); aspect-ratio: 680 / 540; }
.pstart-kadr-porcja .pstart-fig { position: absolute; margin: 0; }
.pstart-fig-powitanie { left: 0; top: 1.85%; width: 58.8%; transform: rotate(-3deg); }
.pstart-fig-fiszka { left: 42.6%; top: 35.2%; width: 57.4%; transform: rotate(3deg); }
.pstart-fig-powitanie .pstart-ilu { box-shadow: 0 30px 60px -30px rgba(23, 24, 59, 0.45), 0 0 0 1px #E3E6F0; }
.pstart-fig-fiszka .pstart-ilu { box-shadow: 0 30px 60px -28px rgba(23, 24, 59, 0.5), 0 0 0 1px #E3E6F0; }
.pstart-trzy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.5vw, 36px); align-items: start; margin-top: 36px; }
.pstart-fig { margin: 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pstart-fig.hidden { display: none !important; }
.pstart-fig figcaption { font-family: var(--font-naglowek); font-weight: 800; font-size: 20px; line-height: 1.25; text-align: center; }
.pstart-quizy .pstart-ilu { box-shadow: 0 26px 50px -28px rgba(23, 24, 59, 0.45), 0 0 0 1px #D6DFF5; }
.pstart-quizy .pstart-fig:nth-child(1) { transform: rotate(-2deg); }
.pstart-quizy .pstart-fig:nth-child(2) { margin-top: -18px; }
.pstart-quizy .pstart-fig:nth-child(3) { transform: rotate(2deg); }
.pstart-tryby .pstart-ilu { box-shadow: 0 26px 50px -28px rgba(120, 80, 0, 0.45), 0 0 0 1px #F0DFA8; }
.pstart-tryby .pstart-fig { gap: 16px; }
.pstart-tryby figcaption, .pstart-dodaj figcaption { display: flex; align-items: center; gap: 12px; font-size: 24px; text-align: start; }
.pstart-dodaj figcaption { font-size: 22px; line-height: 1.2; }
.pstart-podpis-ikona { flex: none; width: 48px; height: 48px; object-fit: contain; }
.pstart-podpis-ikona.granat { border-radius: 14px; background: #17183B; color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.pstart-podpis-ikona.granat .ico { margin: 0; line-height: 1; }
.pstart-s3 .pstart-wnetrze { display: flex; align-items: center; gap: clamp(24px, 5.6vw, 80px); }
.pstart-fig-sciezka { flex: none; width: min(560px, 48%); }
.pstart-fig-sciezka .pstart-ilu { box-shadow: 0 34px 60px -30px rgba(23, 24, 59, 0.5); }
.pstart-s5-glowa { display: flex; flex-direction: column; gap: 10px; }
.pstart-s5-glowa .pstart-opis { margin-inline-start: 78px; }
.pstart-dodaj { display: grid; grid-template-columns: 300px minmax(0, 1fr) 300px; gap: clamp(24px, 3.3vw, 48px); align-items: stretch; margin-top: 40px; }
.pstart-dodaj .pstart-fig { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.pstart-dodaj .pstart-ilu { align-self: center; }
.pstart-fig-zdjecie .pstart-ilu { transform: rotate(-1.5deg); }
.pstart-fig-paletka .pstart-ilu { box-shadow: 0 34px 60px -30px rgba(23, 24, 59, 0.5), 0 0 0 1px #E3E6F0; }
.pstart-fig-zestaw .pstart-ilu { transform: rotate(2deg); box-shadow: 0 26px 50px -28px rgba(23, 24, 59, 0.45), 0 0 0 1px #E3E6F0; }
.pstart-koniec { background: #17183B; color: #FFFFFF; }
.pstart-koniec .pstart-wnetrze { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 172px; }
.pstart-koniec h2 { margin: 0; font-family: var(--font-naglowek); font-weight: 800; font-size: clamp(32px, 3.75vw, 54px); line-height: 1.07; letter-spacing: -0.02em; }
.pstart-zaczynam {
  flex: none; display: flex; align-items: center; gap: 22px; height: 72px; padding: 0 10px 0 30px; border: 0; border-radius: 22px; cursor: pointer;
  background: linear-gradient(180deg, #FFD866 0%, #FFC83D 100%); color: #17183B;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 5px 0 #B88410, 0 18px 30px -12px rgba(0, 0, 0, 0.6);
  font-family: var(--font-naglowek); font-weight: 800; font-size: 22px;
}
.pstart-zaczynam:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 2px 0 #B88410, 0 10px 20px -12px rgba(0, 0, 0, 0.6); }
.pstart-zaczynam-kolko { width: 54px; height: 54px; border-radius: 16px; background: linear-gradient(180deg, #2A2C66 0%, #17183B 100%); display: flex; align-items: center; justify-content: center; }
.pstart .pstart-koniec :focus-visible { outline-color: #FFC83D; }
[dir="rtl"] .pstart-zaczynam-kolko svg, [dir="rtl"] .pstart-pomin svg { transform: scaleX(-1); }
.pstart.zamrozona :is(.pstart-pomin, .pstart-zaczynam) { pointer-events: none; }
.pstart.zamrozona .pstart-pomin { position: relative; overflow: hidden; }
.pstart.zamrozona .pstart-pomin::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; background: color-mix(in srgb, #FFFFFF 62%, transparent);
  transform-origin: right center; animation: planszaOdmrazanie var(--zamrozenie-ms, 1s) linear forwards;
}
@media (max-width: 1180px) {
  .pstart-dodaj { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); }
  .pstart-fig-zestaw { grid-column: 1 / -1; justify-self: center; width: min(340px, 100%); }
}
@media (max-width: 900px) {
  .pstart-hero .pstart-wnetrze, .pstart-s1 .pstart-wnetrze, .pstart-s3 .pstart-wnetrze { flex-direction: column; align-items: stretch; min-height: 0; }
  .pstart-hero-obraz { width: min(420px, 82%); align-self: center; }
  .pstart-s1 .pstart-tekst { order: -1; }
  .pstart-kadr-porcja { width: min(680px, 100%); align-self: center; }
  .pstart-fig-sciezka { width: min(560px, 100%); align-self: center; }
  .pstart-s5-glowa .pstart-opis { margin-inline-start: 0; }
}
@media (max-width: 700px) {
  .pstart-trzy, .pstart-dodaj { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .pstart-trzy .pstart-fig, .pstart-dodaj .pstart-fig { width: min(420px, 100%); }
  .pstart-quizy .pstart-fig:nth-child(2) { margin-top: 0; }
  .pstart-fig-zestaw { grid-column: auto; }
  .pstart-nazwa { font-size: 17px; }
  .pstart-rzad-tytul { gap: 14px; }
  .pstart-nr { width: 46px; height: 46px; font-size: 23px; border-radius: 15px; }
  .pstart-koniec .pstart-wnetrze { flex-direction: column; align-items: stretch; text-align: center; }
  .pstart-zaczynam { justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .pstart.wjazd, .pstart-ilu.czeka { animation: none; }
}
.wow-scena { display: block; width: 100%; height: 100%; pointer-events: none; }
.wow-scena svg { display: block; width: 100%; height: 100%; overflow: visible; }
.polmetek .rekord-wow { position: relative; left: 50%; translate: -50% 0; width: min(88vw, clamp(260px, (100vh - 300px) * 1.8, 600px)); aspect-ratio: 720 / 400; margin: -34px 0 -40px; z-index: 0; }
.wow-warstwa { position: fixed; z-index: 9990; translate: -50% -50%; pointer-events: none; }
.mow-wow { width: min(100%, 520px); aspect-ratio: 640 / 400; margin: 0 auto 6px; }
.sciezka-wow { position: absolute; left: 50%; top: 50%; width: 640px; height: 400px; translate: -50% -50%; z-index: 3; pointer-events: none; }
.sciezka-rzad.wow-nad { position: relative; z-index: 2; }
.sciezka-wezel.otwiera { background: #2463E9; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45); }
.sciezka-wezel.otwiera::before { background: transparent; }
.sciezka-wezel.otwiera .sw-nr { color: rgba(255, 255, 255, 0.8); }
@media (max-width: 640px) { .sciezka-wow { width: 480px; height: 300px; } }
.czyt-koniec-karta { display: flex; justify-content: center; margin: 0 auto 14px; width: min(100%, 560px); border-radius: 28px; background: #2463E9; overflow: hidden; }
.czyt-koniec-wow { width: min(100%, 480px); aspect-ratio: 720 / 405; }
.pstart-prezent { position: absolute; left: -11.538%; top: -8.333%; width: 123.077%; height: 116.667%; pointer-events: none; }
.pstart-hero-obraz.prezent > :is(.pstart-plama, img) { visibility: hidden; }
.witaj-premium-okno { max-width: 640px; text-align: center; }
.witaj-premium-okno:focus { outline: none; }
.witaj-premium-okno .om-pasek { padding-bottom: 0; }
.witaj-premium-scena { position: relative; width: 100%; aspect-ratio: 720 / 400; margin-top: -40px; }
.witaj-premium-okno.bez-sceny .witaj-premium-scena { display: none; }
.witaj-premium-zapas { display: none; width: 180px; height: 180px; margin: 0 auto; }
.witaj-premium-okno.bez-sceny .witaj-premium-zapas { display: block; }
.witaj-premium-blysk { position: absolute; inset: 0; z-index: 4; border-radius: inherit; background: #FFFFFF; opacity: 0; pointer-events: none; }
.witaj-premium-okno .om-tytul { max-width: none; padding: 0 24px; text-align: center; }
.witaj-premium-okno .om-opis { text-align: center; color: var(--om-tekst2); }
.witaj-premium-korzysci { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; text-align: start; }
.witaj-premium-korzysci li { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 18px; background: rgba(255, 255, 255, 0.55); font-weight: 800; font-size: 0.9rem; line-height: 1.25; }
.witaj-premium-korzysci .ico { flex: none; width: 34px; height: 34px; margin: 0; border-radius: 999px; display: grid; place-items: center; background: #17183B; color: var(--zolty); }
.witaj-premium-okno .om-akcje { flex-direction: row; flex-wrap: wrap; }
.witaj-premium-okno .om-akcje .btn { flex: 1 1 200px; }
.witaj-premium-okno.zamrozona :is(.om-akcje .btn, .om-zamknij) { pointer-events: none; }
.witaj-premium-okno.zamrozona .btn-strzalka { position: relative; overflow: hidden; }
.witaj-premium-okno.zamrozona .btn-strzalka::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: color-mix(in srgb, var(--om-tlo) 58%, transparent);
  transform-origin: right center; animation: planszaOdmrazanie var(--zamrozenie-ms, 1s) linear forwards;
}
.witaj-premium-okno.zamrozona .om-drugi { opacity: 0.55; }
@media (max-width: 560px) {
  .witaj-premium-korzysci { grid-template-columns: minmax(0, 1fr); }
  .witaj-premium-scena { margin-top: -24px; }
}
.cs-wow { width: min(100%, 480px); aspect-ratio: 720 / 300; margin: -14px auto 0; pointer-events: none; }
.polmetek.cel-slowek.wow .cs-ilustracja { display: none; }
.polmetek.brawo.ostatni .polmetek-tresc { grid-template-columns: minmax(0, 1fr) 240px; }
.polmetek.brawo .puchar-wow { grid-area: ilustracja; width: 240px; height: 200px; align-self: center; pointer-events: none; }
.polmetek.brawo.ostatni .polmetek-ilustracja { display: none; }
@media (max-width: 640px) {
  .polmetek.brawo.ostatni .polmetek-tresc { grid-template-columns: minmax(0, 1fr) 142px; }
  .polmetek.brawo .puchar-wow { width: 142px; height: 118px; }
}
.film-teraz.film-koniec { min-height: 200px; }
.film-teraz.film-koniec > :is(.film-teraz-kwestia, .film-teraz-podpowiedz, .film-pileczka) { visibility: hidden; }
.film-klaps-wow { position: absolute; inset: 0; pointer-events: none; }
.mws-scena { position: relative; }
.mws-flaga-wow { position: absolute; left: 50%; top: 50%; z-index: 2; width: min(100%, 480px); height: 300px; translate: -50% -50%; pointer-events: none; }
.sciana-wow { position: absolute; right: -52.75px; top: -54.75px; width: 287.5px; height: 287.5px; pointer-events: none; }
.sciana-glowa.wow > img { visibility: hidden; }
@media (max-width: 700px) {
  .sciana-wow { grid-column: 2; grid-row: 1; inset: -12.5%; width: auto; height: auto; }
}
.fq-rzad {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 14px;
  padding: 10px 14px 10px 12px; border-radius: 18px; background: var(--card-bg); border: 1px solid var(--border-warm-soft);
}
.fq-przelacznik {
  flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px 0 14px; border: 0;
  border-radius: 999px; background: var(--zolty); color: var(--granat); cursor: pointer;
  font-family: var(--font-tekst); font-weight: 800; font-size: 15px; line-height: 1.2;
}
.fq-przelacznik .ico { margin: 0; font-size: 18px; line-height: 1; }
.fq-przelacznik:focus-visible, .fq-rzad .ppt-akcja:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
.fq-suwak { position: relative; flex: none; width: 40px; height: 24px; border-radius: 999px; background: var(--granat); transition: background 0.2s ease; }
.fq-suwak > span {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--zolty);
  transition: transform 0.2s ease;
}
.fq-przelacznik[aria-checked="true"] .fq-suwak > span { transform: translateX(16px); }
[dir="rtl"] .fq-suwak > span { left: auto; right: 3px; }
[dir="rtl"] .fq-przelacznik[aria-checked="true"] .fq-suwak > span { transform: translateX(-16px); }
.fq-przelacznik[aria-checked="false"] { background: var(--bg-soft); color: var(--testo); }
.fq-przelacznik[aria-checked="false"] .fq-suwak { background: var(--krawedz-kafla); }
.fq-przelacznik[aria-checked="false"] .fq-suwak > span { background: #FFFFFF; }
.fq-os { position: relative; flex: 1 1 140px; min-width: 120px; height: 24px; direction: ltr; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; border-radius: 6px; }
.fq-os::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; }
.fq-os:focus-visible { outline: 3px solid var(--fokus); outline-offset: 4px; }
.fq-os-tor, .fq-os-postep { position: absolute; left: 0; top: 10px; height: 4px; border-radius: 999px; pointer-events: none; }
.fq-os:is(:hover, :focus-visible) :is(.fq-os-tor, .fq-os-postep) { top: 9px; height: 6px; }
.fq-os-tor { right: 0; background: var(--border); }
.fq-os-postep { width: 0; background: var(--testo); }
.fq-kropka {
  position: absolute; top: 5px; width: 14px; height: 14px; margin-left: -7px; box-sizing: border-box; border-radius: 50%;
  background: var(--card-bg); border: 3px solid var(--zolty);
}
.fq-kropka.dobrze { background: var(--marka-zielony); border-color: var(--marka-zielony); }
.fq-kropka.zle { border-color: var(--rosso); }
.fq-kropka.pominiete { border-color: var(--krawedz-kafla); }
.fq-kropka.teraz { box-shadow: 0 0 0 3px color-mix(in srgb, var(--zolty) 40%, transparent); }
.fq-os.gesto .fq-kropka { top: 7px; width: 10px; height: 10px; margin-left: -5px; border-width: 2px; }
.fq-licznik { flex: none; font-weight: 700; font-size: 14px; white-space: nowrap; color: var(--testo); }
.fq-info { flex: 1 1 160px; font-size: 14px; font-weight: 600; color: var(--grigio); }
.fq-rzad .ppt-akcja { margin: 0; }
.film-napisy-auto {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: 0 0 14px; padding: 12px 14px 12px 16px;
  border-radius: 18px; background: var(--bg-gold-soft); color: var(--testo); border: 1px solid color-mix(in srgb, var(--zolty) 55%, transparent);
}
.film-napisy-auto > .ico { flex: none; margin: 0; font-size: 20px; line-height: 1; color: var(--testo); }
.film-napisy-auto-tekst { flex: 1 1 260px; min-width: 0; margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.film-napisy-auto-tekst b { font-weight: 800; margin-right: 4px; }
.film-napisy-auto-ok { flex: none; margin: 0; min-height: 40px; padding: 0 18px; font-size: 14.5px; }
#filmOdtwarzacz.fq-pytanie > .fq-rzad, #filmOdtwarzacz.fq-pytanie:not(.fq-koniec) > .film-teraz { display: none; }
.film-teraz.fq-bez-zrodla :is(.film-zrodlo, .film-pileczka), .film-teraz.fq-bez-tlum .film-tlum { visibility: hidden; }
#filmOdtwarzacz.fq-bez-napisow :is(.film-teraz-kwestia, .film-pileczka) { visibility: hidden; }
.fq-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.fq-karta {
  margin: 0 0 14px; border-radius: 28px; background: var(--card-bg); color: var(--testo);
  border: 1px solid var(--border-warm-soft); box-shadow: var(--shadow); overflow: hidden;
}
.fq-tresc { display: flex; flex-direction: column; gap: 16px; padding: 22px 26px 24px; min-width: 0; }
.fq-glowa { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.fq-znacznik {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--zolty); color: var(--granat);
  font-family: var(--font-naglowek); font-weight: 800; font-size: 13px; line-height: 1.2;
}
.fq-znacznik .ico { margin: 0; font-size: 13px; }
.fq-postep { display: flex; flex: 1 1 120px; justify-content: flex-end; gap: 5px; min-width: 0; max-width: 360px; }
.fq-postep > span { flex: 0 1 26px; min-width: 6px; height: 6px; border-radius: 999px; background: var(--border); }
.fq-postep > .dobrze { background: var(--marka-zielony); }
.fq-postep > .zle { background: var(--rosso); }
.fq-postep > .pominiete { background: var(--krawedz-kafla); }
.fq-postep > .teraz { background: var(--zolty); }
.fq-zdanie-wiersz { display: flex; align-items: center; gap: 14px; min-width: 0; }
.fq-zdanie-wiersz.start { align-items: flex-start; }
.fq-zdanie-kol { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.fq-glosnik {
  position: relative; flex: none; width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; background: var(--oro); color: var(--przycisk-kolko);
}
.fq-glosnik .ico { margin: 0; font-size: 22px; line-height: 1; }
.fq-glosnik.maly { width: 46px; height: 46px; }
.fq-glosnik.maly .ico { font-size: 18px; }
.fq-glosnik:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
.fq-glosnik.gra::after {
  content: ''; position: absolute; inset: -6px; border-radius: 999px; border: 3px solid var(--marka-niebieski);
  animation: quizGlosnikPuls 1s ease-in-out infinite;
}
.fq-polecenie { font-weight: 700; font-size: 14px; color: var(--grigio); }
.fq-polecenie:focus, .fq-polecenie-duze:focus, .fq-pasek-tytul:focus, .fq-podsum-tytul:focus, .fq-sr:focus { outline: none; }
.fq-polecenie-duze { margin: 0; font-family: var(--font-naglowek); font-weight: 800; font-size: 26px; line-height: 1.15; color: var(--testo); }
.fq-zdanie {
  margin: 0; font-family: var(--font-naglowek); font-weight: 800; font-size: 30px; line-height: 1.15; color: var(--testo);
  overflow-wrap: anywhere; cursor: pointer;
}
.fq-zdanie.sredni { font-size: 26px; }
html:not(.fon-wyl) .fq-zdanie.fon-jest { line-height: 2.05; }
.fq-tlum { font-size: 15px; font-weight: 600; color: var(--grigio); }
.fq-tlum.duzy { font-size: 17px; }
.fq-notatka { font-size: 14px; font-weight: 600; color: var(--grigio); }
.fq-opcje { display: flex; flex-direction: column; gap: 10px; }
.fq-opcja {
  position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 56px; margin: 0; padding: 10px 18px;
  border: 2px solid var(--krawedz-kafla); border-bottom-width: 4px; border-radius: 18px; background: var(--card-bg); color: var(--testo);
  font-family: var(--font-tekst); font-weight: 600; font-size: 17px; line-height: 1.3; text-align: start; cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.fq-opcja:hover { border-color: var(--border-2); }
.fq-opcja:active { border-bottom-width: 2px; transform: translateY(2px); }
.fq-opcja[aria-checked="true"] { border-color: var(--primary); background: var(--bg-warn-soft); text-shadow: 0.4px 0 0 currentColor, -0.4px 0 0 currentColor; }
.fq-opcja:focus-visible, .fq-kafel:focus-visible, .fq-pomin:focus-visible, .fq-tempo button:focus-visible, .fq-mik:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
.fq-opcja-tekst { min-width: 0; overflow-wrap: anywhere; }
.fq-opcja .kl, .fq-kafel .kl { display: none; }
@media (hover: hover) and (pointer: fine) {
  .fq-opcja .kl, .fq-kafel .kl {
    display: inline-flex; flex: none; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px;
    background: var(--bg-soft); color: var(--grigio); font-family: var(--font-tekst); font-size: 12px; font-weight: 700; line-height: 1;
  }
  .fq-kafel .kl { width: 18px; height: 18px; font-size: 11px; border-radius: 5px; }
}
.fq-ulozone {
  min-height: 64px; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px;
  border-radius: 18px; background: var(--crema); border: 2px dashed var(--krawedz-kafla);
}
.fq-ulozone.dobrze { border-style: solid; border-color: var(--marka-zielony); background: var(--bg-success-soft); }
.fq-ulozone.zle { border-style: solid; border-color: var(--rosso); background: var(--bg-error-soft); }
.fq-slot { width: 60px; height: 4px; border-radius: 999px; background: var(--krawedz-kafla); }
.fq-pula { display: flex; flex-wrap: wrap; gap: 8px; }
.fq-kafel {
  display: inline-flex; align-items: center; gap: 6px; min-height: 48px; box-sizing: border-box; margin: 0; padding: 4px 16px;
  border: 2px solid var(--krawedz-kafla); border-bottom-width: 4px; border-radius: 12px; background: var(--card-bg); color: var(--testo);
  font-family: var(--font-tekst); font-weight: 600; font-size: 18px; line-height: 1.2; cursor: pointer;
}
.fq-kafel:hover { border-color: var(--border-2); }
.fq-ulozone .fq-kafel { border-color: var(--primary); border-bottom-width: 2px; font-weight: 700; }
.fq-ulozone .fq-kafel.dobry { border-color: var(--marka-zielony); }
.fq-ulozone .fq-kafel.zly { border-color: var(--rosso); }
.fq-kafel:disabled { cursor: default; opacity: 1; color: var(--testo); }
.fq-kafel-t { min-width: 0; overflow-wrap: anywhere; }
.fq-ulozone { position: relative; }
.fq-ulozone .fq-kafel:not(:disabled), .fq-pula .fq-kafel { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; cursor: grab; }
.fq-kafel.fq-podniesiony { display: none !important; }
.fq-kafel.fq-uniesiony { visibility: hidden; }
.fq-miejsce { flex: none; box-sizing: border-box; border: 2px dashed var(--primary); border-radius: 12px; background: var(--bg-warn-soft); }
.fq-duch {
  position: fixed; left: 0; top: 0; z-index: 9999; margin: 0; pointer-events: none; cursor: grabbing;
  border-color: var(--primary); box-shadow: 0 12px 26px rgba(23, 24, 59, 0.28);
}
body.fq-przeciaga, body.fq-przeciaga * { cursor: grabbing !important; }
.fq-wyrazenie { padding: 0 3px; border-radius: 6px; background: var(--bg-gold-soft); color: inherit; box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--zolty) 70%, transparent); }
.fq-luka {
  display: inline-block; width: var(--luka, 6ch); height: 0.95em; margin: 0 0.12em; vertical-align: -0.12em; border-radius: 8px;
  background: var(--bg-gold-soft); box-shadow: inset 0 -4px 0 var(--zolty);
}
.fq-kropka.zwrot { border-radius: 3px; transform: rotate(45deg) scale(0.86); }
.fq-zwrot-znaczenie b { font-weight: 800; color: var(--testo); }
.fq-odczyt.zakryte span[data-i] {
  background-image: linear-gradient(90deg, var(--verde) 0 50%, transparent 50% 100%);
  border-bottom: 3px dashed var(--krawedz-kafla);
}
.fq-odczyt.zakryte span[data-i].traf { border-bottom-color: transparent; }
@media (forced-colors: active) {
  .fq-luka { background: none; box-shadow: none; border-bottom: 3px solid CanvasText; }
  .fq-odczyt.zakryte span[data-i]:not(.traf) { color: transparent; -webkit-text-fill-color: transparent; }
}
.fq-tempo { display: flex; flex: none; gap: 6px; }
.fq-tempo button {
  height: 36px; padding: 0 12px; border: 2px solid var(--border); border-radius: 999px; background: var(--card-bg); color: var(--testo);
  font-family: var(--font-tekst); font-weight: 700; font-size: 13px; cursor: pointer;
}
.fq-tempo button[aria-pressed="true"] { background: var(--oro); border-color: var(--oro); color: var(--na-akcencie); }
.fq-glos { display: flex; align-items: center; gap: 18px; padding: 16px 20px; border-radius: 22px; background: var(--crema); }
.fq-mik {
  --poziom: 0;
  flex: none; width: 76px; height: 76px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; background: var(--marka-zielony); color: var(--granat);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--marka-zielony) 14%, transparent), 0 5px 0 var(--zielen-gleboka);
  transition: box-shadow 0.08s linear, transform 0.08s ease;
}
.fq-mik .ico { margin: 0; font-size: 30px; line-height: 1; }
.fq-mik:active { transform: translateY(3px); }
.fq-mik.slucha {
  box-shadow: 0 0 0 calc(8px + var(--poziom) * 10px) color-mix(in srgb, var(--marka-zielony) 24%, transparent),
              0 0 0 calc(16px + var(--poziom) * 16px) color-mix(in srgb, var(--marka-zielony) 11%, transparent), 0 5px 0 var(--zielen-gleboka);
}
.fq-mik.mysli { opacity: 0.7; cursor: progress; }
.fq-glos-kol { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.fq-glos-stan { font-weight: 700; font-size: 16px; color: var(--testo); }
.fq-odczyt { font-size: 20px; font-weight: 700; line-height: 1.35; color: var(--tekst-neutralny); overflow-wrap: anywhere; }
.fq-odczyt span[data-i] {
  color: transparent; -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, var(--verde) 0 50%, var(--tekst-neutralny) 50% 100%);
  background-size: 200% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text;
  transition: background-position 0.35s ease-out;
}
.fq-odczyt span[data-i].traf { background-position: 0 0; }
@media (prefers-reduced-motion: reduce) { .fq-odczyt span[data-i] { transition: none; } }
@media (forced-colors: active) {
  .fq-odczyt span[data-i] { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
  .fq-odczyt span[data-i].traf { color: Highlight; -webkit-text-fill-color: Highlight; }
}
.fq-wskazowka { font-size: 14px; color: var(--grigio); }
.fq-akcje { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.fq-akcje.koniec { justify-content: flex-end; }
.fq-pomin {
  min-height: 48px; padding: 0 4px; border: 0; background: none; cursor: pointer;
  font-family: var(--font-tekst); font-weight: 600; font-size: 15px; color: var(--testo);
}
.fq-pomin:hover { text-decoration: underline; text-underline-offset: 3px; }
.fq-akcje .btn { width: auto; min-width: 200px; margin: 0 0 0 auto; font-family: var(--font-naglowek); font-weight: 800; font-size: 17px; }
.fq-akcje .btn:disabled {
  background: var(--border); color: var(--tekst-neutralny); opacity: 1; cursor: not-allowed;
  --kolko-tlo: var(--krawedz-kafla); --kolko-strzalka: var(--strzalka-szara);
}
.fq-odliczanie { font-size: 14px; color: var(--grigio); }
.fq-pasek { display: flex; align-items: center; gap: 14px; padding: 18px 26px; }
.fq-pasek.dobrze { background: #35A64D; color: #17183B; }
.fq-pasek.zle { background: #DB2727; color: #FFFFFF; }
.fq-pasek.powrot { padding: 16px 26px; background: #2463E9; color: #FFFFFF; }
.fq-pasek > .ico { margin: 0; font-size: 24px; line-height: 1; }
.fq-pasek-ikona { flex: none; width: 46px; height: 46px; border-radius: 50%; background: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; }
.fq-pasek-ikona .ico { margin: 0; font-size: 22px; line-height: 1; }
.fq-pasek.dobrze .fq-pasek-ikona { color: #1F7A35; }
.fq-pasek.zle .fq-pasek-ikona { color: #B81E1E; }
.fq-pasek-kol { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fq-pasek-tytul { flex: 1; min-width: 0; margin: 0; font-family: var(--font-naglowek); font-weight: 800; font-size: 32px; line-height: 1.15; }
.fq-pasek-tytul.maly { font-size: 20px; }
.fq-pasek-opis { font-size: 14px; color: #EEF3FF; }
.fq-pasek-pigulka { flex: none; padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: 14px; white-space: nowrap; }
.fq-pasek.dobrze .fq-pasek-pigulka { background: rgba(23, 24, 59, 0.12); }
.fq-pasek.zle .fq-pasek-pigulka { background: rgba(255, 255, 255, 0.22); }
.fq-pasek.dobrze .fq-pasek-pigulka.fq-xp { background: var(--zolty); color: #17183B; }
.fq-porownanie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fq-porownanie > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 16px; background: var(--crema); }
.fq-porownanie > .teraz { background: var(--bg-success-soft); }
.fq-porownanie > .teraz.zle { background: var(--bg-error-soft); }
.fq-etykieta { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--grigio); }
.fq-porownanie > .teraz .fq-etykieta { color: var(--verde); }
.fq-porownanie > .teraz.zle .fq-etykieta { color: var(--czerwien-tekst); }
.fq-wartosc { font-size: 16px; font-weight: 600; }
.fq-porownanie > .teraz .fq-wartosc { font-weight: 700; }
.fq-podsum-glowa { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding: 20px 26px; background: #17183B; color: #FFFFFF; border-bottom: 1px solid var(--border); }
.fq-podsum-kol { display: flex; flex-direction: column; gap: 4px; flex: 1 1 260px; min-width: 0; }
.fq-podsum-nad { font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--zolty); }
.fq-podsum-tytul { margin: 0; font-family: var(--font-naglowek); font-weight: 800; font-size: 28px; line-height: 1.15; color: #FFFFFF; }
.fq-podsum-liczby { flex: none; display: flex; align-items: center; gap: 12px; }
.fq-podsum-liczby > .ico { margin: 0; font-size: 26px; line-height: 1; color: var(--zolty); }
[dir="rtl"] .fq-podsum-liczby > .ico { transform: scaleX(-1); }
.fq-liczba { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.fq-liczba b { font-family: var(--font-naglowek); font-weight: 800; font-size: 34px; line-height: 1.1; white-space: nowrap; }
.fq-liczba.przed b { color: #B4B6D8; }
.fq-liczba.po b { color: var(--zolty); }
.fq-liczba > span { font-size: 12px; color: #D4D5F0; }
.fq-lista { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.fq-wiersz { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border-radius: 16px; background: var(--crema); }
.fq-znak { flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--krawedz-kafla); color: var(--granat); }
.fq-znak .ico { margin: 0; font-size: 14px; line-height: 1; }
.fq-znak:is(.dobrze, .poprawione) { background: #35A64D; color: #17183B; }
.fq-znak.zle { background: #DB2727; color: #FFFFFF; }
.fq-wiersz-tekst { display: flex; flex-direction: column; flex: 1 1 200px; min-width: 0; }
.fq-wiersz-tekst b { font-weight: 700; font-size: 17px; overflow-wrap: anywhere; }
.fq-wiersz-tekst > span { font-size: 14px; color: var(--grigio); }
.fq-odznaka { margin-inline-start: auto; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.fq-odznaka.poprawione { background: #2463E9; color: #FFFFFF; }
.fq-odznaka.glos { background: var(--bg-gold-soft); color: var(--testo); }
.fq-odznaka.zle { background: var(--bg-error-soft); color: var(--czerwien-tekst); }
.fq-odznaka.pominiete { background: var(--bg-soft); color: var(--grigio); }
.fq-podsum-stopka { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.fq-podsum-stopka > span { flex: 1 1 220px; max-width: 380px; font-size: 14px; color: var(--grigio); }
.fq-podsum-stopka .btn { flex: none; width: auto; margin: 0 0 0 auto; font-family: var(--font-naglowek); font-weight: 800; font-size: 17px; }
@media (prefers-reduced-motion: reduce) {
  .fq-glosnik.gra::after { animation: none; opacity: 0.5; }
  .fq-suwak, .fq-suwak > span, .fq-mik { transition: none; }
}
@media (max-width: 640px) {
  .fq-rzad { padding: 8px 10px; gap: 8px 10px; }
  .fq-przelacznik { font-size: 14px; padding-left: 12px; }
  .fq-tresc { gap: 14px; padding: 18px 16px 20px; }
  .fq-zdanie { font-size: 24px; }
  .fq-zdanie.sredni { font-size: 22px; }
  .fq-polecenie-duze { font-size: 21px; }
  .fq-glosnik { width: 48px; height: 48px; }
  .fq-zdanie-wiersz { flex-wrap: wrap; }
  .fq-zdanie-wiersz > .fq-zdanie-kol { flex: 1 1 180px; }
  .fq-pasek { padding: 14px 16px; gap: 12px; flex-wrap: wrap; }
  .fq-pasek.powrot { padding: 14px 16px; }
  .fq-pasek-tytul { font-size: 26px; }
  .fq-pasek-ikona { width: 40px; height: 40px; }
  .fq-glos { gap: 12px; padding: 12px; }
  .fq-mik { width: 64px; height: 64px; }
  .fq-odczyt { font-size: 18px; }
  .fq-akcje .btn, .fq-podsum-stopka .btn { flex: 1 1 100%; min-width: 0; margin: 0; }
  .fq-podsum-glowa { padding: 16px; }
  .fq-podsum-tytul { font-size: 22px; }
  .fq-liczba b { font-size: 28px; }
}

:is(.mow-prop-sekcja, .mow-prop-inne, .mow-prop-wszystkie, .mow-moje-licznik, .mow-bok-licznik, .mow-stworz-premium, .mow-menu)[hidden],
.mow-usun-okno [hidden] { display: none !important; }
.mow-mapa-podtytul-wiersz .mow-mapa-podtytul { display: inline-flex; align-items: center; gap: 10px; }
.mow-mapa-odstep { flex: 1 1 0; min-width: 0; }
.mow-moje-licznik, .mow-bok-licznik {
  display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 26px; padding: 0 10px;
  border-radius: 999px; border: 1px solid var(--border); background: var(--card-bg); color: var(--grigio);
  font-family: var(--font-tekst); font-weight: 800; font-size: 0.82rem; line-height: 1;
}
.card-title .mow-bok-licznik { margin-left: 6px; height: 22px; min-width: 26px; padding: 0 8px; background: var(--bg-soft); border: 0; font-size: 0.74rem; }
.mow-stworz {
  display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 8px 0 14px; margin: 0;
  border: 1px solid var(--border-2); border-radius: 16px; background: var(--card-bg); color: var(--testo);
  box-shadow: 0 3px 0 var(--border-2); font: inherit; font-weight: 800; font-size: 0.92rem; cursor: pointer;
}
.mow-stworz .ico { margin: 0; color: var(--primary); font-size: 1rem; }
.mow-stworz:hover { border-color: var(--oro); }
.mow-stworz:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--border-2); }
.mow-stworz-premium { padding: 3px 9px; border-radius: 999px; background: var(--zolty); color: var(--granat); font-size: 0.72rem; font-weight: 800; }
.mow-mapa-lista.pusta { display: block; }
.mow-pusto {
  display: flex; flex-wrap: wrap; align-items: center; gap: 22px; padding: 28px 26px; border: 2px dashed var(--border-2);
  border-radius: 26px; background: var(--card-bg);
}
.mow-pusto-ikona {
  flex: none; width: 104px; height: 104px; border-radius: 28px; display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--primary) 10%, var(--card-bg)); color: var(--primary); font-size: 2.8rem;
}
.mow-pusto-ikona .ico { margin: 0; line-height: 1; }
.mow-pusto-txt { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mow-pusto-tytul { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.4rem; line-height: 1.2; color: var(--testo); }
.mow-pusto-opis { font-size: 0.95rem; line-height: 1.55; color: var(--grigio); }
.mow-pusto-wszystkie, .mow-prop-wszystkie {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; margin: 0; border: 1px solid var(--border-2);
  border-radius: 16px; background: var(--card-bg); color: var(--testo); box-shadow: 0 3px 0 var(--border-2);
  font: inherit; font-weight: 800; font-size: 0.9rem; cursor: pointer; white-space: nowrap;
}
.mow-pusto-wszystkie:hover, .mow-prop-wszystkie:hover { border-color: var(--oro); }
.mow-kafelek-menu {
  position: absolute; top: 12px; right: 12px; z-index: 3; width: 40px; height: 40px; padding: 0; margin: 0; border: 0;
  border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: color-mix(in srgb, var(--card-bg) 92%, transparent); color: var(--testo); box-shadow: 0 2px 8px rgba(23, 24, 59, 0.16);
}
.mow-kafelek-menu .ico { margin: 0; font-size: 1rem; line-height: 1; }
.mow-kafelek-menu:hover, .mow-kafelek-menu[aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--oro); }
.mow-kafelek-menu:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.mow-kafelek:not(:has(> .mow-kafelek-foto)) .mow-kafelek-glowa { padding-right: 46px; }
.mow-kafelek-menu:not(.na-foto) { background: var(--bg-soft); box-shadow: none; }
.mow-bok-pusto {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 14px; text-align: center;
  border: 2px dashed var(--border-2); border-radius: 18px; color: var(--grigio); font-size: 0.85rem; line-height: 1.45;
}
.mow-bok-pusto .ico { margin: 0 0 2px; font-size: 1.9rem; color: var(--muted-light); }
.mow-bok-pusto b { color: var(--testo); font-weight: 800; font-size: 0.92rem; }
.mow-bok-menu .ico { font-size: 0.95rem; }
.mow-prop-sekcja { margin-top: 26px; text-align: left; }
.mow-prop-naglowek { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-bottom: 14px; }
.mow-prop-naglowek-txt { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mow-prop-naglowek .mow-mapa-podtytul { margin: 0; }
.mow-prop-podtytul { font-size: 0.9rem; color: var(--grigio); }
.mow-prop-inne {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; margin: 0; border: 0; border-radius: 14px;
  background: transparent; color: var(--primary); font: inherit; font-weight: 800; font-size: 0.92rem; cursor: pointer;
}
.mow-prop-inne .ico { margin: 0; }
.mow-prop-inne:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.mow-prop-lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.mow-prop-sekcja.duze .mow-prop-lista { grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 16px; }
.mow-prop {
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border: 1.5px solid var(--border); border-radius: 24px; background: var(--card-bg);
  box-shadow: 0 16px 28px -24px rgba(23, 24, 59, 0.45);
}
.mow-prop-foto { position: relative; display: block; height: 150px; background: var(--bg-soft); }
.mow-prop-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mow-prop-foto.plansza { display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 2.6rem; }
.mow-prop-foto.plansza .ico { margin: 0; }
.mow-prop-x {
  position: absolute; top: 10px; right: 10px; z-index: 2; width: 40px; height: 40px; padding: 0; margin: 0; border: 0;
  border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: color-mix(in srgb, var(--card-bg) 92%, transparent); color: var(--testo); box-shadow: 0 2px 8px rgba(23, 24, 59, 0.16);
}
.mow-prop-x .ico { margin: 0; font-size: 1.1rem; line-height: 1; }
.mow-prop-x:hover { box-shadow: inset 0 0 0 2px var(--oro); }
.mow-prop-tresc { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; min-width: 0; }
.mow-prop-glowa { display: flex; align-items: center; gap: 10px; }
.mow-prop-tytul { flex: 1; min-width: 0; font-family: var(--font-naglowek); font-weight: 800; font-size: 1.15rem; line-height: 1.25; color: var(--testo); overflow-wrap: anywhere; }
.mow-prop-t { margin-top: -6px; font-size: 0.86rem; color: var(--grigio); }
.mow-prop-dlaczego {
  display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 14px;
  background: color-mix(in srgb, var(--primary) 9%, var(--card-bg)); color: var(--testo);
  font-size: 0.86rem; line-height: 1.4; font-weight: 700;
}
.mow-prop-dlaczego .ico { margin: 2px 0 0; flex: none; color: var(--primary); font-size: 0.9rem; }
.mow-prop-slowka { display: flex; flex-wrap: wrap; gap: 6px; }
.mow-prop-stopka { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; padding-top: 2px; }
.mow-prop-kwestii { font-size: 0.82rem; font-weight: 700; color: var(--grigio); }
.mow-prop-zacznij {
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 6px 0 16px; margin: 0 0 0 auto; border: 0;
  border-radius: 16px; background: var(--przycisk); color: var(--na-przycisku); box-shadow: 0 4px 0 color-mix(in srgb, var(--przycisk) 70%, #000);
  font-family: var(--font-naglowek); font-weight: 700; font-size: 0.95rem; cursor: pointer; white-space: nowrap;
}
.mow-prop-zacznij:active { transform: translateY(2px); box-shadow: 0 2px 0 color-mix(in srgb, var(--przycisk) 70%, #000); }
.mow-prop-zacznij:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.mow-prop-kolko {
  flex: none; width: 36px; height: 36px; border-radius: 12px;
  background: var(--przycisk-kolko) var(--przycisk-kolko-strzalka) center / 18px 18px no-repeat;
}
[dir="rtl"] .mow-prop-kolko { transform: scaleX(-1); }
.mow-prop.kompakt { flex-direction: row; align-items: center; gap: 14px; padding: 12px; border-radius: 22px; }
.mow-prop.kompakt .mow-prop-foto { flex: none; width: 96px; height: 96px; border-radius: 16px; overflow: hidden; align-self: center; }
.mow-prop.kompakt .mow-prop-foto.plansza { font-size: 2rem; }
.mow-prop.kompakt .mow-prop-tresc { padding: 0; gap: 6px; }
.mow-prop.kompakt .mow-prop-dlaczego { padding: 0; background: none; font-size: 0.84rem; color: var(--primary); }
.mow-prop.kompakt .mow-prop-dlaczego .ico { display: none; }
.mow-prop.kompakt .mow-prop-zacznij { margin-left: 0; min-height: 42px; padding: 0 14px; box-shadow: none; }
.mow-prop.kompakt .mow-prop-kolko { display: none; }
.mow-prop.kompakt .mow-prop-x { position: static; order: 3; align-self: flex-start; flex: none; background: var(--bg-soft); box-shadow: none; }
.mow-prop.kompakt .mow-prop-glowa { padding-right: 0; }
.mow-prop-brak {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 18px 20px;
  border: 1.5px dashed var(--border-2); border-radius: 20px; color: var(--grigio); font-size: 0.92rem; line-height: 1.5;
}
.mow-prop-brak > span { flex: 1 1 240px; }
.mow-prop-notka { margin: 14px 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--grigio); }
.mow-menu {
  position: fixed; z-index: 2600; width: 270px; max-width: calc(100vw - 16px); padding: 8px; display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 20px; background: var(--card-bg); color: var(--testo);
  box-shadow: 0 22px 40px -18px rgba(23, 24, 59, 0.45);
}
.mow-menu-poz {
  display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 12px; margin: 0; border: 0; border-radius: 14px;
  background: transparent; color: inherit; font: inherit; font-weight: 700; font-size: 0.92rem; text-align: left; cursor: pointer;
}
.mow-menu-poz .ico { margin: 0; font-size: 1rem; flex: none; }
.mow-menu-poz:hover, .mow-menu-poz:focus-visible { background: var(--bg-soft); outline: none; }
.mow-menu-poz.usun { color: var(--rosso); font-weight: 800; }
.mow-menu-kreska { height: 1px; margin: 6px 8px; background: var(--border); }
.okno-marki.tlo-jasne.mow-usun-okno { max-width: 600px; }
.mow-usun-glowa {
  position: relative; height: 136px; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: #DB2727;
}
.mow-usun-glowa::before, .mow-usun-glowa::after { content: ''; position: absolute; border-radius: 40px; }
.mow-usun-glowa::before { left: -40px; top: -30px; width: 180px; height: 140px; background: #E85050; transform: rotate(-14deg); }
.mow-usun-glowa::after { right: -30px; bottom: -40px; width: 160px; height: 130px; background: #B81F1F; transform: rotate(16deg); }
.mow-usun-ikona {
  position: relative; z-index: 1; width: 78px; height: 78px; border-radius: 24px; display: inline-flex; align-items: center; justify-content: center;
  background: #FFFFFF; color: #DB2727; font-size: 2.2rem; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.18);
}
.mow-usun-ikona .ico { margin: 0; line-height: 1; }
.okno-marki .om-zamknij.mow-usun-zamknij { position: absolute; top: 14px; right: 14px; z-index: 2; background: rgba(255, 255, 255, 0.22); color: #FFFFFF; }
.okno-marki .om-zamknij.mow-usun-zamknij:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }
.mow-usun-okno .om-tytul { overflow-wrap: anywhere; }
.mow-usun-czeka { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 0.9rem; color: var(--grigio); }
.mow-usun-czeka .spinner { width: 18px; height: 18px; border-width: 2px; flex: none; }
.mow-usun-slowka {
  display: flex; flex-direction: column; gap: 12px; margin-top: 16px; padding: 16px 18px; border-radius: 22px;
  border: 2px solid var(--oro); background: color-mix(in srgb, var(--zolty) 16%, var(--card-bg));
}
.mow-usun-pole { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.mow-usun-pole input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: #DB2727; cursor: pointer; }
.mow-usun-pole-txt { display: flex; flex-direction: column; gap: 2px; font-size: 0.86rem; line-height: 1.45; color: var(--grigio); }
.mow-usun-pole-txt b { font-size: 0.98rem; font-weight: 800; color: var(--testo); }
.mow-usun-chipy { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 34px; }
.mow-usun-chipy.zostaja { opacity: 0.55; }
.mow-usun-chip { padding: 4px 11px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--zolty) 55%, var(--border)); background: var(--card-bg); font-size: 0.86rem; color: var(--testo); }
.mow-usun-chip.cichy { color: var(--grigio); }
.mow-usun-zostaja { display: flex; align-items: flex-start; gap: 8px; padding-left: 34px; font-size: 0.86rem; line-height: 1.45; color: var(--testo); }
.mow-usun-zostaja .ico { margin: 3px 0 0; flex: none; color: var(--verde); }
.okno-marki.tlo-jasne .om-akcje.mow-usun-akcje { flex-direction: row; flex-wrap: wrap; }
.mow-usun-akcje .btn-rosso { flex: 1 1 240px; }
.mow-usun-akcje .btn.om-drugi { flex: 1 1 140px; }
.mow-usun-akcje .mow-usun-wycofaj { flex-basis: 100%; }
.mow-usun-notka { margin-top: 12px; }
@media (max-width: 560px) {
  .mow-pusto { padding: 20px 18px; gap: 16px; }
  .mow-pusto-ikona { width: 72px; height: 72px; border-radius: 20px; font-size: 2rem; }
  .mow-prop-lista, .mow-prop-sekcja.duze .mow-prop-lista { grid-template-columns: minmax(0, 1fr); }
  .mow-prop.kompakt .mow-prop-foto { width: 72px; height: 72px; }
  .mow-usun-glowa { height: 112px; }
  .mow-usun-chipy, .mow-usun-zostaja { padding-left: 0; }
}
.fiszki-arena, .czyt-arena {
  --fa-tlo: #E9ECF4; --fa-tekst: #17183B; --fa-tekst2: #4F5270; --fa-tekst3: #3A3D5C;
  --fa-szklo: #FFFFFF; --fa-szklo-mocne: #F6F7FB; --fa-akcja: #E9ECF4; --fa-akcja-hover: #DDE1EC;
  --fa-panel: #F6F7FB; --fa-panel-hover: #FFFFFF; --fa-panel-ramka: #DDE1EC;
  --fa-panel-ramka-mocna: #B9BFD3; --fa-tor: #D3D8E5; --fa-tor-slaby: #D3D8E5;
  --fa-tor-mocny: #C9CEDF; --fa-akcent-tekst: #17183B; --fa-etykieta: #2463E9; --fa-fokus: var(--fokus, #2463E9); --fa-krawedz: #E9ECF4;
  --fa-kropka: #2463E9; --fa-okl-ramka: #FFFFFF; --fa-okl-ramka-hover: #2463E9; --fa-combo: #FFFFFF;
  --fa-zasada: rgba(79, 82, 112, 0.6); --fa-plama1: 0; --fa-plama2: 0; --fa-tlo-obraz: none;
  --fa-cien: none;
  position: relative; display: flex; flex-direction: column; gap: 12px; margin: 0 0 18px; padding: 16px 18px 18px;
  border-radius: 30px; background: var(--fa-tlo); color: var(--fa-tekst); box-shadow: var(--fa-cien);
}
:root[data-theme="dark"] .fiszki-arena, :root[data-theme="dark"] .czyt-arena {
  --fa-tlo: #262626; --fa-tekst: #E5E5E5; --fa-tekst2: #BDBDBD; --fa-tekst3: #D4D4D4;
  --fa-szklo: rgba(255, 255, 255, 0.07); --fa-szklo-mocne: rgba(255, 255, 255, 0.14); --fa-akcja: rgba(255, 255, 255, 0.1); --fa-akcja-hover: #D4D4D4;
  --fa-panel: rgba(255, 255, 255, 0.05); --fa-panel-hover: rgba(255, 255, 255, 0.09); --fa-panel-ramka: rgba(255, 255, 255, 0.1);
  --fa-panel-ramka-mocna: rgba(255, 255, 255, 0.26); --fa-tor: rgba(255, 255, 255, 0.12); --fa-tor-slaby: rgba(255, 255, 255, 0.09);
  --fa-tor-mocny: rgba(255, 255, 255, 0.16); --fa-akcent-tekst: #FFC83D; --fa-etykieta: #FFC83D; --fa-fokus: #FFC83D; --fa-krawedz: #262626;
  --fa-kropka: #FFC83D; --fa-okl-ramka: rgba(255, 255, 255, 0.3); --fa-okl-ramka-hover: #D4D4D4; --fa-combo: rgba(255, 255, 255, 0.8);
  --fa-zasada: rgba(212, 212, 212, 0.35); --fa-plama1: 0; --fa-plama2: 0; --fa-tlo-obraz: none;
  --fa-cien: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fiszki-arena, :root:not([data-theme="light"]) .czyt-arena {
    --fa-tlo: #262626; --fa-tekst: #E5E5E5; --fa-tekst2: #BDBDBD; --fa-tekst3: #D4D4D4;
    --fa-szklo: rgba(255, 255, 255, 0.07); --fa-szklo-mocne: rgba(255, 255, 255, 0.14); --fa-akcja: rgba(255, 255, 255, 0.1); --fa-akcja-hover: #D4D4D4;
    --fa-panel: rgba(255, 255, 255, 0.05); --fa-panel-hover: rgba(255, 255, 255, 0.09); --fa-panel-ramka: rgba(255, 255, 255, 0.1);
    --fa-panel-ramka-mocna: rgba(255, 255, 255, 0.26); --fa-tor: rgba(255, 255, 255, 0.12); --fa-tor-slaby: rgba(255, 255, 255, 0.09);
    --fa-tor-mocny: rgba(255, 255, 255, 0.16); --fa-akcent-tekst: #FFC83D; --fa-etykieta: #FFC83D; --fa-fokus: #FFC83D; --fa-krawedz: #262626;
    --fa-kropka: #FFC83D; --fa-okl-ramka: rgba(255, 255, 255, 0.3); --fa-okl-ramka-hover: #D4D4D4; --fa-combo: rgba(255, 255, 255, 0.8);
    --fa-zasada: rgba(212, 212, 212, 0.35); --fa-plama1: 0; --fa-plama2: 0; --fa-tlo-obraz: none;
    --fa-cien: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  }
}
.fa-tlo { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.fa-tlo::before, .fa-tlo::after { content: ''; position: absolute; }
.fa-tlo::before { left: -70px; top: -60px; width: 220px; height: 180px; border-radius: 52px; background: #2463E9; opacity: var(--fa-plama1, 0.35); transform: rotate(-16deg); }
.fa-tlo::after { right: -60px; top: 70px; width: 200px; height: 170px; border-radius: 50px; background: #35A64D; opacity: var(--fa-plama2, 0.22); transform: rotate(18deg); }
.fa-tlo.z-okladka::before, .fa-tlo.z-okladka::after { content: none; }
.fa-tlo-okladka { display: var(--fa-tlo-obraz, block); position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.22; }
.fa-tlo-przejscie { display: var(--fa-tlo-obraz, block); position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23, 24, 59, 0.55) 0%, #17183B 85%); }
.fa-okladka-miejsce { flex: none; display: inline-flex; }
.fa-okladka-miejsce:empty { display: none; }
.fa-okladka {
  display: block; width: 57px; height: 57px; box-sizing: border-box; border-radius: 17px; border: 2px solid var(--fa-okl-ramka, rgba(255, 255, 255, 0.4));
  object-fit: cover; background: var(--fa-szklo, rgba(255, 255, 255, 0.12));
}
.fa-okladka-btn { position: relative; display: block; flex: none; margin: 0; padding: 0; border: 0; border-radius: 17px; background: none; cursor: pointer; }
.fa-okladka-btn:hover .fa-okladka { border-color: var(--fa-okl-ramka-hover, #FFFFFF); }
.fa-okladka-znak {
  position: absolute; right: -5px; bottom: -5px; width: 24px; height: 24px; border-radius: 50%; background: #FFC83D; color: #17183B;
  box-shadow: 0 0 0 2px var(--fa-krawedz, #17183B); display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; line-height: 1;
}
.fa-okladka-znak .ico { margin: 0; line-height: 1; }
.fa-okladka-plansza { display: inline-flex; align-items: center; justify-content: center; color: #FFFFFF; font-size: 1.4rem; border-color: transparent; }
.fa-okladka-plansza .ico { margin: 0; line-height: 1; }
.fa-okl-film { background: #2B2D5C; }
.fa-okl-tekst { background: #2463E9; }
.fa-okl-zdjecie { background: #DB2727; }
.fa-okl-rozmowa { background: #35A64D; }
.fa-glowa, .fa-postep-wiersz, .fiszki-arena .paczka-pasek-trybu, .fa-wyscig { position: relative; }
.fa-glowa { z-index: 3; display: flex; align-items: center; gap: 12px; }
.fa-tytuly { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fa-tytul {
  font-family: var(--font-naglowek); font-weight: 800; font-size: 1.32rem; line-height: 1.25; letter-spacing: -0.01em; color: var(--fa-tekst, #FFFFFF);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fa-podpis {
  font-size: 0.86rem; font-weight: 600; color: var(--fa-tekst2, #C9CBE6); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fa-akcje { flex: none; display: flex; align-items: center; gap: 6px; }
.fiszki-arena .fa-btn, .czyt-arena .fa-btn {
  flex: none; position: relative; width: 42px; height: 42px; padding: 0; margin: 0; border: 0; border-radius: 14px;
  background: var(--fa-szklo, rgba(255, 255, 255, 0.12)); color: var(--fa-tekst, #FFFFFF); opacity: 1; font-size: 1.02rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s ease;
}
.fiszki-arena .fa-btn:hover, .fiszki-arena .fa-btn[aria-expanded="true"], .czyt-arena .fa-btn:hover { background: var(--fa-szklo-mocne, rgba(255, 255, 255, 0.24)); transform: none; }
.fiszki-arena .fa-btn .ico, .czyt-arena .fa-btn .ico { margin: 0; line-height: 1; }
.fiszki-arena :focus-visible, .czyt-arena :focus-visible { outline: 3px solid var(--fa-fokus, #FFC83D); outline-offset: 2px; }
.fiszki-arena .fa-pelny-wyjdz { display: none; }
body.focus-mode .fiszki-arena .fa-pelny-wyjdz { display: inline-flex; }
.fa-menu-btn.zawezona::after {
  content: ''; position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--fa-kropka, #FFC83D); box-shadow: 0 0 0 2px var(--fa-krawedz, #17183B);
}
#widokFiszek:has(#miniExamArea:not(.hidden)) .fiszki-arena :is(.fa-karta, .fa-menu-wrap, .fa-combo),
#widokFiszek:has(#cardContent.hidden) .fiszki-arena .fa-karta { display: none; }

.fa-postep-wiersz { z-index: 1; display: flex; align-items: center; gap: 10px; min-height: 6px; }
.fa-postep { flex: 1 1 auto; min-width: 0; display: flex; gap: 5px; }
.fa-seg { flex: 1 1 0; height: 6px; border-radius: 3px; background: var(--fa-tor, rgba(255, 255, 255, 0.18)); transition: background 0.3s ease; }
.fa-seg.zrobiona { background: #35A64D; }
.fa-seg.biezaca { background: #FFC83D; }
.fa-tor { flex: 1 1 auto; display: block; height: 6px; border-radius: 3px; background: var(--fa-tor, rgba(255, 255, 255, 0.18)); overflow: hidden; }
.fa-tor > i { display: block; height: 100%; border-radius: 3px; background: #FFC83D; transition: width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.fa-combo {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px;
  background: var(--fa-combo, rgba(255, 255, 255, 0.85)); color: #17183B; font-family: var(--font-naglowek); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.02em;
}
.fa-combo.combo { background: #FFC83D; }
.fa-combo .ico { margin: 0; color: #DB2727; }

.fiszki-arena .paczka-pasek-trybu {
  z-index: 2; margin: 0; padding: 12px 14px; border-radius: 22px; background: var(--fa-panel, rgba(255, 255, 255, 0.08));
  box-shadow: inset 0 0 0 1px var(--fa-panel-ramka, rgba(255, 255, 255, 0.14));
}
.fiszki-arena .paczka-pasek-trybu.ppt-klikalny:hover { box-shadow: inset 0 0 0 1px var(--fa-panel-ramka-mocna, rgba(255, 255, 255, 0.34)); }
.fiszki-arena .paczka-pasek-trybu .ppt-akcja:not(.ppt-sciezka) { background: var(--fa-akcja, rgba(255, 255, 255, 0.18)); color: var(--fa-tekst, #FFFFFF); }
.fiszki-arena .paczka-pasek-trybu .ppt-akcja:not(.ppt-sciezka):hover { background: var(--fa-akcja-hover, #FFFFFF); color: #17183B; }
.fiszki-arena .paczka-pasek-trybu .ppt-zamek { color: var(--fa-tekst, #FFFFFF); }
.fiszki-arena .ppt-tytul {
  display: block; color: var(--fa-tekst, #FFFFFF); font-family: var(--font-naglowek); font-weight: 800; font-size: 1rem; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fiszki-arena .ppt-tytul > span { font-size: inherit; font-weight: inherit; letter-spacing: 0; text-transform: none; color: inherit; }
.fiszki-arena #paczkaTrybNazwa { display: none; }
.fiszki-arena .ppt-meta { margin-top: 6px; color: var(--fa-akcent-tekst, #FFC83D); font-size: 0.86rem; font-weight: 700; }
.fiszki-arena .ppt-meta:empty { display: none; }
.fiszki-arena .ppt-umiesz-tor { width: 110px; background: var(--fa-tor-slaby, rgba(255, 255, 255, 0.16)); }
.ppt-prawa { margin-left: auto; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.ppt-prawa .ppt-akcje { margin-left: 0; }
.ppt-prawa .ppt-akcje:empty { display: none; }
@media (max-width: 520px) {
  .ppt-prawa { flex-basis: 100%; margin-left: 0; }
  .ppt-prawa .ppt-akcje { flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
  .ppt-prawa .ppt-akcja { justify-content: center; text-align: center; }
}
.fiszki-arena .paczka-pasek-trybu .ppt-wyjscie { background: transparent; color: var(--fa-tekst2, #C9CBE6); box-shadow: inset 0 0 0 1.5px var(--fa-tor-mocny, rgba(255, 255, 255, 0.22)); }
.fiszki-arena .paczka-pasek-trybu .ppt-wyjscie:hover { background: var(--fa-szklo, rgba(255, 255, 255, 0.12)); color: var(--fa-tekst, #FFFFFF); }
.fiszki-arena .ppt-plan { border-top: 0; margin-top: -2px; padding-top: 0; }
.fiszki-arena .ppt-plan-zasada { color: var(--fa-zasada, rgba(201, 203, 230, 0.45)); font-size: 0.74rem; font-weight: 500; }
.fiszki-arena .ppt-ikona { width: 48px; height: 48px; }
.fiszki-arena .ppt-ikona:not(.poziom) { background: var(--fa-szklo, rgba(255, 255, 255, 0.14)); color: var(--fa-etykieta, #FFC83D); }
.fiszki-arena .ppt-ikona.poziom { background: conic-gradient(#FFC83D calc(var(--pct, 0) * 1%), var(--fa-tor-mocny, rgba(255, 255, 255, 0.22)) 0); }
.fiszki-arena .ppt-ikona.poziom b { font-size: 1.25rem; }

.fa-wyscig { z-index: 1; }
.fa-wyscig:empty { display: none; }
.wys-pasek {
  position: relative; display: flex; width: 100%; margin: 0; border: 0; font: inherit; color: var(--fa-tekst, #FFFFFF); text-align: left; cursor: pointer;
  background: var(--fa-panel, rgba(255, 255, 255, 0.08)); box-shadow: inset 0 0 0 1px var(--fa-panel-ramka, rgba(255, 255, 255, 0.14)); transition: background 0.15s ease;
}
.wys-pasek:hover { background: var(--fa-panel-hover, rgba(255, 255, 255, 0.13)); }
.wys-kompakt { align-items: center; gap: 12px; padding: 10px 14px; border-radius: 18px; }
.wys-trojka { flex: none; display: flex; }
.wys-trojka .wys-awatar { border-color: var(--fa-krawedz, #17183B); }
.wys-trojka .wys-awatar.ja { border: 2px solid #FFC83D; z-index: 1; }
.wys-trojka .wys-awatar + .wys-awatar { margin-left: -8px; }
.wys-srodek { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.wys-cel-krotko { font-size: 0.84rem; font-weight: 700; color: var(--fa-tekst3, #D8DAF0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wys-mini-tor { display: block; height: 5px; border-radius: 999px; background: var(--fa-tor-slaby, rgba(255, 255, 255, 0.14)); overflow: hidden; }
.wys-mini-tor > i { display: block; height: 100%; border-radius: 999px; background: #FFC83D; transition: width 0.8s cubic-bezier(0.3, 1.4, 0.5, 1); }
.wys-xp-pole { position: relative; flex: none; display: flex; align-items: center; gap: 10px; }
.wys-miejsce {
  flex: none; padding: 2px 9px; border-radius: 999px; background: #FFC83D; color: #17183B;
  font-family: var(--font-naglowek); font-weight: 800; font-size: 0.78rem; white-space: nowrap;
}
.wys-xp { flex: none; font-family: var(--font-naglowek); font-weight: 800; font-size: 1.05rem; color: var(--fa-tekst, #FFFFFF); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wys-xp small { font-size: 0.72rem; font-weight: 800; color: var(--fa-tekst2, #C9CBE6); }
.wys-pelny { flex-direction: column; gap: 6px; padding: 14px 16px 12px; border-radius: 24px; }
.wys-pelny-glowa { display: flex; align-items: center; gap: 10px; }
.wys-etykieta { font-family: var(--font-naglowek); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fa-etykieta, #FFC83D); }
.wys-odstep { flex: 1 1 auto; }
.wys-pelny .wys-miejsce { font-size: 0.82rem; }
.wys-pelny .wys-xp { font-size: 1.5rem; line-height: 1.1; }
.wys-pelny .wys-xp small { font-size: 0.86rem; }
.wys-tor-pole { position: relative; display: block; height: 78px; margin: 0 26px; }
.wys-tor-linia, .wys-smuga { position: absolute; left: 4px; top: 30px; height: 8px; border-radius: 4px; }
.wys-tor-linia { right: 4px; background: var(--fa-tor-slaby, rgba(255, 255, 255, 0.14)); }
.wys-smuga { background: #FFC83D; transition: width 0.8s cubic-bezier(0.3, 1.4, 0.5, 1); }
.wys-zaw {
  position: absolute; top: 14px; width: 64px; margin-left: -32px; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 2px; transition: left 0.8s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.wys-zaw.lider { top: 0; }
.wys-zaw.ja { top: 6px; z-index: 3; }
.wys-zaw.ja.lider { top: -8px; }
.wys-korona { display: block; color: #FFC83D; font-size: 0.95rem; line-height: 1; margin-bottom: -3px; }
.wys-korona .ico { margin: 0; }
.wys-awatar-pole { position: relative; display: block; line-height: 0; }
.wys-nick { max-width: 64px; font-size: 0.7rem; font-weight: 800; color: var(--fa-tekst3, #D8DAF0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wys-zaw.ja .wys-nick { color: var(--fa-etykieta, #FFC83D); }
.wys-zaw.ja .wys-awatar-pole::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; background: #FFC83D;
  animation: wysPuls 1.6s ease-in-out infinite alternate;
}
@keyframes wysPuls { from { opacity: 0.55; transform: scale(1); } to { opacity: 0; transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .wys-zaw.ja .wys-awatar-pole::before { animation: none; opacity: 0; } }
.wys-zaw.skok > .wys-awatar-pole { animation: wysSkok 0.6s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes wysSkok { 0% { transform: translateY(0); } 37% { transform: translateY(-18px); } 100% { transform: translateY(0); } }
.wys-cel { font-size: 0.86rem; font-weight: 600; line-height: 1.35; color: var(--fa-tekst3, #D8DAF0); }

.wys-awatar {
  --r: 30px; flex: none; position: relative; box-sizing: border-box; width: var(--r); height: var(--r); border-radius: 50%;
  border: 2px solid #FFFFFF; background: #FFFFFF; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-naglowek); font-weight: 800; font-size: calc(var(--r) * 0.42); line-height: 1; color: #FFFFFF;
}
.wys-awatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wys-awatar.ja { border: 3px solid #FFC83D; }
.wys-awatar.anon { background: #2463E9; }
.wys-awatar.r28 { --r: 28px; } .wys-awatar.r30 { --r: 30px; } .wys-awatar.r42 { --r: 42px; } .wys-awatar.r46 { --r: 46px; }
.wys-awatar.r50 { --r: 50px; } .wys-awatar.r52 { --r: 52px; } .wys-awatar.r64 { --r: 64px; }

.wys-plus {
  position: absolute; right: -6px; top: -16px; z-index: 4; padding: 2px 9px; border-radius: 999px; background: #35A64D; color: #FFFFFF;
  font-family: var(--font-naglowek); font-weight: 800; font-size: 0.82rem; white-space: nowrap; pointer-events: none;
  animation: wysPlus 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes wysPlus {
  0% { opacity: 0; transform: translateY(8px) scale(0.6); }
  25% { opacity: 1; transform: translateY(-6px) scale(1.15); }
  100% { opacity: 0; transform: translateY(-34px) scale(1); }
}

.fiszki-arena > .wys-wyprzedzenie-miejsce { position: absolute; left: 18px; right: 18px; top: calc(100% - 14px); z-index: 40; pointer-events: none; }
.wys-wyprzedzenie {
  display: flex; align-items: center; gap: 14px; max-width: 520px; margin: 0 auto; padding: 16px; border-radius: 26px;
  background: #FFC83D; color: #17183B; border-bottom: 6px solid #C99413; box-shadow: 0 26px 44px -14px rgba(23, 24, 59, 0.55);
  animation: wysWyprzedzenie 2s cubic-bezier(0.3, 1.4, 0.5, 1) forwards;
}
@keyframes wysWyprzedzenie {
  0% { opacity: 0; transform: translateY(-24px) scale(0.9); }
  18% { opacity: 1; transform: translateY(0) scale(1); }
  85% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-10px) scale(1); }
}
.wys-wyp-awatary { position: relative; flex: none; width: 74px; height: 56px; }
.wys-wyp-awatary .wys-awatar { position: absolute; }
.wys-wyp-awatary .wys-awatar:first-child { left: 0; top: 8px; opacity: 0.7; border-width: 3px; }
.wys-wyp-awatary .wys-awatar:last-child { right: 0; top: 0; border: 3px solid #17183B; }
.wys-wyp-tekst { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wys-wyp-tytul { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.3rem; line-height: 1.2; overflow-wrap: anywhere; }
.wys-wyp-opis { font-size: 0.9rem; font-weight: 700; color: #4A3200; }

.fa-menu-wrap { position: relative; flex: none; }
.fiszki-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 300px; max-width: calc(100vw - 32px); padding: 10px;
  display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--border); border-radius: 20px; background: var(--card-bg);
  color: var(--testo); box-shadow: 0 22px 40px -18px rgba(23, 24, 59, 0.45); text-align: left;
}
.fiszki-menu[hidden] { display: none; }
.fiszki-menu { max-height: calc(100vh - 160px); overflow-y: auto; overscroll-behavior: contain; }
.fm-paczka[hidden], .fm-paczka-akcje:empty, .fm-fakty:empty { display: none; }
.fm-akcja {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; margin: 0; padding: 0 10px; border: 0; border-radius: 14px;
  background: transparent; color: var(--testo); font: inherit; font-size: 0.92rem; font-weight: 700; text-align: left; cursor: pointer;
}
.fm-akcja:hover { background: var(--bg-soft); }
.fm-akcja .ico { margin: 0; width: 18px; color: #2463E9; }
.fm-akcja > span:first-of-type { flex: 1 1 auto; }
.fm-akcja.aktywna { background: var(--bg-soft); box-shadow: inset 0 0 0 2px #2463E9; }
.fm-akcja-ile { color: var(--grigio); font-variant-numeric: tabular-nums; }
.fm-fakty { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 10px 10px; }
.fm-fakty > span {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: var(--bg-soft); color: var(--testo);
  font-size: 0.76rem; font-weight: 600; white-space: nowrap;
}
.fm-fakty .ico { margin: 0; color: var(--grigio); }
.fm-fakty b { font-weight: 800; font-variant-numeric: tabular-nums; }
.fm-fakty > span.ppt-cel-gotowy, .fm-fakty > span.ppt-cel-gotowy .ico { background: #E3F4E7; color: #1E6B31; }
.fm-fakty > span.ppt-premia, .fm-fakty > span.ppt-premia .ico { background: #FFF1C7; color: #6B4A00; }
.fiszki-menu :focus-visible { outline: 3px solid var(--fokus, #2463E9); outline-offset: 2px; }
.fm-tytul {
  padding: 6px 10px 8px; font-family: var(--font-naglowek); font-weight: 800; font-size: 0.76rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--grigio);
}
.fm-pole { display: flex; flex-direction: column; gap: 4px; padding: 2px 6px 8px; }
.fm-etykieta { padding-left: 4px; font-size: 0.78rem; font-weight: 700; color: var(--grigio); }
.fiszki-menu .custom-select { display: block; }
.fiszki-menu .fiszka-nav-select { width: 100%; max-width: none; min-height: 40px; justify-content: space-between; }
.fiszki-menu .custom-select-menu { position: static; min-width: 0; max-height: 240px; margin-top: 6px; box-shadow: none; }
.fm-kreska { height: 1px; margin: 4px 8px; background: var(--border); }
.fiszki-menu .fiszka-toggle-chip {
  display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 10px; border-radius: 14px;
  font-size: 0.92rem; font-weight: 700; color: var(--testo); cursor: pointer;
}
.fiszki-menu .fiszka-toggle-chip:hover { background: var(--bg-soft); }
.fiszki-menu .fiszka-toggle-chip > span:not(.toggle) { flex: 1 1 auto; }
.fiszki-menu .fiszka-toggle-chip > .ico { margin: 0; width: 18px; color: var(--grigio); }
.fiszki-menu .fiszka-toggle-chip:focus-within { box-shadow: inset 0 0 0 2px var(--fokus, #2463E9); }

.card-chipy {
  position: absolute; top: 16px; left: 16px; right: 112px; z-index: 5; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  pointer-events: none; backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.card-chipy .card-kategoria { position: static; max-width: 100%; }
.card-chipy .card-kategoria:empty { display: none; }
.card-chipy .level-badge { flex: none; }

.okno-marki.tlo-jasne.wys-ranking-okno { max-width: 540px; }
.wys-ranking-okno .om-tresc { position: relative; }
.okno-marki .om-zamknij.wys-ranking-zamknij { position: absolute; top: 18px; right: 18px; }
.wys-ranking-okno .om-ikona.wys-ranking-ikona { background: #FFC83D; color: #17183B; }
.wys-ranking-naglowek { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.wys-ranking-opis { flex: 1 1 auto; font-size: 0.92rem; font-weight: 600; color: var(--grigio); }
.wys-zegar {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px;
  background: #17183B; color: #FFC83D; font-family: var(--font-naglowek); font-weight: 800; font-size: 0.82rem;
}
.wys-zegar .ico { margin: 0; }
.wys-lista { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wys-wiersz {
  display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 10px 12px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--card-bg); color: var(--testo); font: inherit; text-align: left; box-sizing: border-box;
}
button.wys-wiersz { cursor: pointer; }
button.wys-wiersz:hover { border-color: var(--oro); }
.wys-wiersz.ja { background: #FFF8E1; border: 2px solid #17183B; color: #17183B; }
.wys-wiersz .wys-awatar { border-color: #D4D5F0; }
.wys-wiersz.ja .wys-awatar, .wys-wiersz.pierwszy .wys-awatar { border: 3px solid #FFC83D; }
.wys-wiersz-nr { flex: none; width: 30px; text-align: center; font-family: var(--font-naglowek); font-weight: 800; font-size: 1.2rem; }
.wys-wiersz.pierwszy .wys-wiersz-nr { color: #C99413; }
.wys-wiersz-srodek { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.wys-wiersz-nick { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 1rem; }
.wys-wiersz-nick b { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wys-wiersz-nick small { font-size: 0.76rem; font-weight: 700; color: var(--grigio); white-space: nowrap; }
.wys-wiersz.ja .wys-wiersz-nick small { color: #2E3055; }
.wys-wiersz-tor { display: block; height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; }
.wys-wiersz.ja .wys-wiersz-tor { background: #F2E3B3; }
.wys-wiersz-tor > i { display: block; height: 100%; border-radius: 4px; background: #2463E9; }
.wys-wiersz.pierwszy .wys-wiersz-tor > i { background: #35A64D; }
.wys-wiersz.ja .wys-wiersz-tor > i { background: #FFC83D; }
.wys-wiersz-xp { flex: none; font-family: var(--font-naglowek); font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.wys-ranking-cel {
  display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 14px; border-radius: 20px; border: 1px solid var(--border);
  background: var(--card-bg); font-size: 0.92rem; font-weight: 600; line-height: 1.4;
}
.wys-ranking-cel .ico { margin: 0; flex: none; font-size: 1.15rem; color: var(--marka-niebieski, #2463E9); }
.wys-ranking-notka { margin: 10px 0 0; font-size: 0.84rem; font-weight: 500; line-height: 1.45; color: var(--grigio); }
.wys-widocznosc { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 18px; border: 1px solid var(--border); cursor: pointer; }
.wys-widocznosc-tekst { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; font-size: 0.82rem; line-height: 1.4; color: var(--grigio); }
.wys-widocznosc-tekst b { font-size: 0.95rem; font-weight: 800; color: var(--testo); }

.kd-wyscig {
  display: flex; flex-direction: column; gap: 12px; max-width: 460px; margin: 16px auto 0; padding: 16px; border-radius: 24px;
  background: #17183B; color: #FFFFFF; text-align: left;
}
.wys-podium-tytul { font-family: var(--font-naglowek); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: #FFC83D; }
.wys-podium-opis { margin-top: -8px; font-size: 1rem; font-weight: 700; line-height: 1.4; }
.wys-podium-wyprzedzeni { margin-top: -8px; font-size: 0.9rem; font-weight: 600; color: #D8DAF0; }
.wys-podium-slupki { display: flex; align-items: flex-end; gap: 10px; }
.wys-slupek {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; padding: 0;
  border: 0; background: none; color: inherit; font: inherit;
}
button.wys-slupek { cursor: pointer; }
button.wys-slupek:hover .wys-slupek-blok { filter: brightness(1.06); }
.wys-slupek-nick { max-width: 100%; font-size: 0.86rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wys-slupek.ja .wys-slupek-nick { color: #FFC83D; }
.wys-slupek .wys-korona { font-size: 1.4rem; margin-bottom: -2px; }
.wys-slupek-pole { align-self: stretch; display: flex; align-items: flex-end; }
.wys-slupek-blok {
  flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 10px; overflow: hidden;
  border-radius: 18px 18px 6px 6px; color: #17183B; transform-origin: bottom; animation: wysSlupek 0.6s cubic-bezier(0.22, 1.3, 0.36, 1) both;
}
.wys-slupek-blok b { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.6rem; line-height: 1; }
.wys-slupek-blok small { font-size: 0.75rem; font-weight: 800; }
.wys-slupek.m1 .wys-slupek-blok { height: 128px; background: #FFC83D; }
.wys-slupek.m1 .wys-slupek-blok b { font-size: 1.9rem; }
.wys-slupek.m2 .wys-slupek-blok { height: 96px; background: #E3E6F0; }
.wys-slupek.m3 .wys-slupek-blok { height: 72px; background: #F3C9A0; }
.wys-podium-slupki > :nth-child(2) .wys-slupek-blok { animation-delay: 0.12s; }
.wys-podium-slupki > :nth-child(3) .wys-slupek-blok { animation-delay: 0.24s; }
@keyframes wysSlupek { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.wys-podium-dotknij { text-align: center; font-size: 0.8rem; font-weight: 600; color: #C9CBE6; }

.okno-marki.wys-wczoraj-okno { max-width: 460px; }
.wys-wczoraj-tresc { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 10px; }
.wys-medal {
  width: 150px; height: 150px; border-radius: 50%; box-sizing: border-box; border: 8px solid rgba(255, 255, 255, 0.18); color: #17183B;
  display: flex; flex-direction: column; align-items: center; justify-content: center; animation: wysMedal 0.7s cubic-bezier(0.3, 1.4, 0.5, 1) both;
}
.wys-medal.m1 { background: #FFC83D; }
.wys-medal.m2 { background: #E3E6F0; }
.wys-medal.m3 { background: #F3C9A0; }
.wys-medal b { font-family: var(--font-naglowek); font-weight: 800; font-size: 4.4rem; line-height: 0.95; }
.wys-medal .ico { margin: 0; font-size: 1.9rem; line-height: 1; }
@keyframes wysMedal { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }
.okno-marki.wys-wczoraj-okno .om-tytul { max-width: none; padding-top: 18px; font-size: 1.9rem; text-align: center; }
.wys-wczoraj-premia { margin: 4px 0 10px; font-family: var(--font-naglowek); font-weight: 800; font-size: 3.2rem; line-height: 1.05; color: #FFC83D; }
.okno-marki.wys-wczoraj-okno .om-opis { color: #C9CBE6; }
.wys-wczoraj-okno .om-akcje { align-self: stretch; }
.wys-wczoraj-okno.zamrozona :is(.om-akcje .btn, .om-zamknij) { pointer-events: none; }
.wys-wczoraj-okno.zamrozona .btn-strzalka { position: relative; overflow: hidden; }
.wys-wczoraj-okno.zamrozona .btn-strzalka::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: color-mix(in srgb, var(--om-tlo) 58%, transparent);
  transform-origin: right center; animation: planszaOdmrazanie var(--zamrozenie-ms, 1s) linear forwards;
}
.wys-wczoraj-okno.zamrozona .om-zamknij { opacity: 0.55; }

@media (max-width: 768px) {
  .fiszki-arena { gap: 10px; margin-bottom: 14px; padding: 14px 14px 16px; border-radius: 24px; }
  .fa-tytul { font-size: 1.12rem; }
  .fiszki-arena .fa-btn { width: 40px; height: 40px; border-radius: 13px; }
  .wys-kompakt { gap: 10px; padding: 9px 12px; }
  .wys-pelny { padding: 12px 12px 10px; }
  .wys-tor-pole { margin: 0 22px; }
  .fiszki-arena > .wys-wyprzedzenie-miejsce { left: 10px; right: 10px; }
  .card-chipy { right: 104px; }
}
@media (max-width: 420px) {
  .wys-cel-krotko { font-size: 0.78rem; }
  .wys-xp-pole { gap: 6px; }
  .wys-wiersz { gap: 10px; padding: 9px 10px; }
  .wys-wiersz-nr { width: 22px; font-size: 1.05rem; }
}
.fa-kto { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; }
.fa-etykieta, .fa-pelny-napis, .fa-pelny-klawisz, .fm-pelny, .pelny-sciaga { display: none; }
body.focus-mode .fiszki-arena .fa-pelny-wejdz { display: none; }

body.focus-mode:has(#focusModeToggle:checked) .app-body { max-width: 1360px; }
body.focus-mode:has(#focusModeToggle:checked) .app-stopka { display: none; }
body.focus-mode .fiszki-arena .fa-pelny-wyjdz { order: 1; }
body.focus-mode #wyzBanerFiszki { display: none; }
body.focus-mode .fiszki-arena { background: transparent; box-shadow: none; border-radius: 0; padding: 0; margin: 0 0 22px; gap: 0; min-height: 52px; }
body.focus-mode .fiszki-arena :is(.fa-tlo, .paczka-pasek-trybu, .fa-wyscig, .fa-combo, .fa-karta) { display: none !important; }
body.focus-mode .fa-glowa { justify-content: space-between; gap: 16px; }
body.focus-mode .fa-kto {
  flex: 0 1 auto; max-width: calc(50% - 210px); padding: 6px 18px 6px 6px; border-radius: 999px;
  background: var(--fa-szklo, #FFFFFF); box-shadow: inset 0 0 0 1px var(--fa-panel-ramka, #DDE1EC);
}
body.focus-mode .fa-kto:has(.fa-okladka-miejsce:empty) { padding-left: 18px; }
body.focus-mode .fa-okladka { width: 40px; height: 40px; border-radius: 12px; border-width: 0; }
body.focus-mode .fa-okladka-btn { border-radius: 12px; }
body.focus-mode .fa-okladka-znak { width: 18px; height: 18px; right: -4px; bottom: -4px; font-size: 0.55rem; }
body.focus-mode .fa-okladka-plansza { font-size: 1rem; }
body.focus-mode .fa-tytuly { gap: 0; }
body.focus-mode .fa-etykieta:not(:empty) {
  display: block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fa-etykieta, #2463E9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.focus-mode .fa-tytul { font-family: inherit; font-size: 0.95rem; font-weight: 700; letter-spacing: 0; line-height: 1.3; }
body.focus-mode .fiszki-arena .fa-podpis { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); font-size: 0.86rem; font-weight: 700; }
body.focus-mode .fiszki-arena .fa-postep-wiersz { position: absolute; left: 50%; top: 30px; width: min(340px, 28vw); transform: translateX(-50%); }
body.focus-mode .fa-postep { gap: 4px; }
body.focus-mode :is(.fa-seg, .fa-tor) { height: 5px; }
body.focus-mode .fa-akcje { gap: 10px; }
body.focus-mode .fiszki-arena .fa-btn { width: 48px; height: 48px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--fa-panel-ramka, #DDE1EC); }
body.focus-mode .fiszki-arena .fa-pelny-wyjdz { width: auto; gap: 8px; padding: 0 10px 0 16px; font-size: 0.94rem; font-weight: 700; }
body.focus-mode .fa-pelny-napis { display: inline; }
body.focus-mode .fa-pelny-klawisz {
  display: inline-block; padding: 2px 8px; border-radius: 8px; background: var(--fa-akcja, #EEF0F7); color: var(--fa-tekst2, #4F5270);
  font-family: inherit; font-size: 0.75rem; font-weight: 700;
}
body.focus-mode .fm-pelny { display: block; }
#widokFiszek:has(#cardReportBtn.hidden) .fm-zglos { display: none; }

body.focus-mode #widokFiszek #cardContent:not(.hidden) {
  display: grid; grid-template-columns: 88px minmax(0, 1fr) 88px; column-gap: 28px; align-items: center;
}
body.focus-mode #widokFiszek #cardContent > * { grid-column: 2; }
body.focus-mode #widokFiszek .nav-arrows { display: contents; }
body.focus-mode #widokFiszek #prevBtn { grid-column: 1; grid-row: 1; }
body.focus-mode #widokFiszek #nextBtn { grid-column: 3; grid-row: 1; }
body.focus-mode #widokFiszek .flip-container { grid-row: 1; margin-bottom: 0; }
body.focus-mode #widokFiszek .nav-pos { display: none; }
body.focus-mode #widokFiszek .nav-arrow { width: 88px; height: 88px; font-size: 2.3rem; }
body.focus-mode #widokFiszek :is(.flip-inner, .flip-front, .flip-back) { min-height: clamp(320px, calc(100vh - 330px), 600px); }
body.focus-mode #widokFiszek :is(.flip-front, .flip-back) { border-width: 5px; border-radius: 44px; padding: 84px 72px 56px; }
body.focus-mode #widokFiszek :is(.card-chipy, #backKat) { display: none; }
body.focus-mode #widokFiszek .card-word { font-size: 5.6rem; }
body.focus-mode #widokFiszek .card-word-back { font-size: 4.8rem; }
body.focus-mode #widokFiszek :is(.card-word, .card-word-back).len-medium { font-size: 3.4rem; }
body.focus-mode #widokFiszek :is(.card-word, .card-word-back).len-long { font-size: 2.4rem; }
body.focus-mode #widokFiszek .card-emotka { font-size: 7rem; }
body.focus-mode #widokFiszek .card-ikona-rys { --rys-h: 160px; }
body.focus-mode #widokFiszek .card-hint { font-size: 1.35rem; margin-top: 24px; }
body.focus-mode #widokFiszek .speak-btn { width: 84px; height: 84px; top: 24px; right: 24px; font-size: 2.1rem; }
body.focus-mode #widokFiszek .odmiana-btn { width: 84px; height: 84px; top: 24px; right: 120px; font-size: 1.9rem; }
body.focus-mode #widokFiszek .pokaz-odpowiedz { zoom: 1.5; max-width: 310px; margin: 16px auto 0; }
body.focus-mode #widokFiszek .ocena-row { zoom: 1.5; width: 100%; max-width: 480px; justify-self: center; margin-top: 14px; }
body.focus-mode #widokFiszek .ocena-poziom-hint { justify-self: center; }
body.focus-mode #widokFiszek .pelny-sciaga { display: block; justify-self: center; margin-top: 14px; font-size: 0.8rem; font-weight: 500; color: var(--grigio); text-align: center; }
.pelny-sciaga-oceny::after { content: ', '; }
body.focus-mode #widokFiszek:has(.ocena-row.bez-ocen) .pelny-sciaga-oceny { display: none; }
@media (max-height: 760px) {
  body.focus-mode #widokFiszek .card-word { font-size: 4.4rem; }
  body.focus-mode #widokFiszek .card-word-back { font-size: 3.8rem; }
  body.focus-mode #widokFiszek :is(.pokaz-odpowiedz, .ocena-row) { zoom: 1.25; }
  body.focus-mode #widokFiszek .pelny-sciaga { display: none; }
}
@media (max-width: 900px) {
  body.focus-mode .fa-glowa { flex-wrap: wrap; }
  body.focus-mode .fa-kto { max-width: none; flex: 1 1 auto; }
  body.focus-mode .fiszki-arena .fa-podpis { position: static; transform: none; }
  body.focus-mode .fiszki-arena .fa-postep-wiersz { position: static; transform: none; width: auto; margin-top: 10px; }
  body.focus-mode #widokFiszek #cardContent:not(.hidden) { grid-template-columns: 52px minmax(0, 1fr) 52px; column-gap: 10px; }
  body.focus-mode #widokFiszek .nav-arrow { width: 52px; height: 52px; font-size: 1.4rem; }
  body.focus-mode #widokFiszek :is(.flip-front, .flip-back) { padding: 64px 24px 40px; border-radius: 32px; }
  body.focus-mode #widokFiszek .card-word { font-size: 3.4rem; }
  body.focus-mode #widokFiszek .card-word-back { font-size: 3rem; }
  body.focus-mode #widokFiszek :is(.speak-btn, .odmiana-btn) { width: 56px; height: 56px; top: 14px; font-size: 1.4rem; }
  body.focus-mode #widokFiszek .speak-btn { right: 14px; }
  body.focus-mode #widokFiszek .odmiana-btn { right: 80px; }
  body.focus-mode #widokFiszek :is(.pokaz-odpowiedz, .ocena-row) { zoom: 1.15; }
}

#widokFiszek.hub-otwarty > :not(#zestawyHub):not(#wyzBanerFiszki) { display: none !important; }
.zh { display: flex; flex-direction: column; gap: 26px; padding-bottom: 28px; color: var(--testo); container-type: inline-size; }
.zh-sekcja { display: flex; flex-direction: column; gap: 14px; min-width: 0; animation: zhWjazd 0.45s ease-out both; }
.zh-sekcja:nth-child(2) { animation-delay: 0.08s; }
.zh-sekcja:nth-child(3) { animation-delay: 0.14s; }
.zh-sekcja:nth-child(4) { animation-delay: 0.2s; }
@keyframes zhWjazd { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.zh-h1 { margin: 0; font-family: var(--font-naglowek); font-weight: 800; font-size: 2.1rem; line-height: 1.15; letter-spacing: -0.02em; }
.zh-lead { margin: 6px 0 0; font-size: 1rem; line-height: 1.5; color: var(--grigio); }
.zh-h2 { margin: 0; font-family: var(--font-naglowek); font-weight: 800; font-size: 1.5rem; line-height: 1.2; }
.zh-h2 span { color: var(--grigio); font-weight: 700; }
.zh-ladowanie { display: grid; place-items: center; min-height: 240px; }

.zh-kafle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@container (max-width: 620px) { .zh-kafle { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.zh-kafel {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; border-radius: 20px;
  background: var(--card-bg); border: 1.5px solid var(--border); color: var(--testo); font: inherit; text-align: start; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.zh-kafel:hover, .zh-zestaw:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(23, 24, 59, 0.45); }
.zh-kafel:focus-visible, .zh-zestaw:focus-visible, .zh-cwicz-dalej:focus-visible, .zh-filtr:focus-visible, .zh-btn:focus-visible,
.zh-link:focus-visible, .zh-wroc:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
.zh-kafel-ikona { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; font-size: 1.2rem; color: #FFFFFF; }
.zh-kafel-ikona .ico { margin: 0; line-height: 1; }
.zh-ik-film { background: #DB2727; }
.zh-ik-tekst { background: #2463E9; }
.zh-ik-zdjecie, .zh-ik-spol { background: #FFC83D; color: #17183B; }
.zh-kafel b { display: block; padding-right: 22px; font-family: var(--font-naglowek); font-weight: 800; font-size: 1.04rem; line-height: 1.2; }
.zh-kafel small { display: block; margin-top: 4px; font-size: 0.84rem; line-height: 1.4; color: var(--grigio); }
.zh-kafel-plus {
  position: absolute; right: 12px; top: 12px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--crema); color: var(--testo); font-size: 0.9rem;
}
.zh-kafel-plus .ico { margin: 0; line-height: 1; }
.zh-kafel.spol { background: #17183B; border-color: #17183B; color: #FFFFFF; }
.zh-kafel.spol small { color: #D4D5F0; }
.zh-kafel.spol .zh-kafel-plus { background: #24265A; color: #FFC83D; }

.zh-hero {
  position: relative; overflow: hidden; display: flex; flex-wrap: wrap; gap: 22px; align-items: center; padding: 22px; border-radius: 26px;
  background: radial-gradient(90% 140% at 100% 0%, #3A3D96 0%, #22246A 40%, #17183B 78%); color: #FFFFFF;
}
.zh-hero-okladka {
  position: relative; flex: 1 1 220px; min-width: 190px; max-width: 300px; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; display: grid; place-items: center;
}
.zh-hero-okladka img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zh-hero-tresc { flex: 999 1 250px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.zh-hero-glowa { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zh-kont {
  padding: 4px 10px; border-radius: 999px; background: rgba(255, 200, 61, 0.16); border: 1px solid rgba(255, 200, 61, 0.45);
  color: #FFC83D; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}
.zh-hero-meta { font-size: 0.82rem; color: #C9CAE8; }
.zh-hero h2 { margin: 0; font-family: var(--font-naglowek); font-weight: 800; font-size: 1.65rem; line-height: 1.15; overflow-wrap: anywhere; }
.zh-hero-opis { font-size: 0.875rem; color: #D9DAF5; }
.zh-kropki { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zh-kropka {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: #2E3070; color: #9A9CB8; font-family: var(--font-naglowek); font-size: 0.8rem; font-weight: 800;
}
.zh-kropka .ico { margin: 0; line-height: 1; font-size: 0.72rem; }
.zh-kropka.zaliczony { background: #35A64D; color: #FFFFFF; }
.zh-kropka.biezacy { width: 32px; height: 32px; background: #FFC83D; color: #17183B; font-size: 0.95rem; box-shadow: 0 0 0 4px rgba(255, 200, 61, 0.25); }
.zh-kreska { width: 22px; height: 3px; border-radius: 2px; flex: none; background: #3A3D7A; }
.zh-kreska.przebyta { background: #35A64D; }
.zh-kropki-wiecej { font-size: 0.8rem; font-weight: 800; color: #C9CAE8; }
.zh-cwicz-dalej {
  position: relative; overflow: hidden; align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; min-height: 52px;
  padding: 6px 6px 6px 20px; border: 0; border-radius: 18px; background: #FFC83D; color: #17183B; cursor: pointer;
  font-family: var(--font-naglowek); font-weight: 800; font-size: 1.06rem; box-shadow: 0 4px 0 #D9A21E;
}
.zh-cwicz-dalej::after {
  content: ''; position: relative; flex: none; width: 40px; height: 40px; border-radius: 13px;
  background: #17183B var(--strzalka-zolta) center / 18px 18px no-repeat;
}
.zh-cwicz-dalej::before {
  content: ''; position: absolute; top: 0; left: 0; width: 30%; height: 100%; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-160%) skewX(-18deg); animation: pkBlysk 3.4s ease-in-out 1s infinite;
}
.zh-cwicz-dalej span { position: relative; }

.zh-ok-film { background: linear-gradient(135deg, #3B1F4E 0%, #7A2B3A 55%, #DB2727 100%); }
.zh-ok-tekst { background: linear-gradient(135deg, #DCE6FD 0%, #B9CCF8 100%); }
.zh-ok-zdjecie { background: linear-gradient(135deg, #FFF1C7 0%, #FFD86A 100%); }
.zh-ok-rozmowa { background: linear-gradient(135deg, #E4E5F7 0%, #C9CAE8 100%); }
.zh-ok-spolecznosc { background: linear-gradient(135deg, #17183B 0%, #2E3070 100%); }
.zh-ok-ikona {
  position: relative; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.3rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
.zh-ok-ikona .ico { margin: 0; line-height: 1; }
.zh-ok-film .zh-ok-ikona { background: #DB2727; color: #FFFFFF; }
.zh-ok-tekst .zh-ok-ikona { background: #2463E9; color: #FFFFFF; }
.zh-ok-zdjecie .zh-ok-ikona { background: #FFFFFF; color: #17183B; }
.zh-ok-rozmowa .zh-ok-ikona { background: #17183B; color: #FFC83D; }
.zh-ok-spolecznosc .zh-ok-ikona { background: #FFC83D; color: #17183B; }

.zh-glowa-sekcji { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.zh-filtry { display: flex; gap: 6px; flex-wrap: wrap; }
.zh-filtr {
  min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--card-bg); color: var(--testo);
  font: 700 0.84rem var(--font-tekst); cursor: pointer;
}
.zh-filtr[aria-pressed="true"] { background: var(--testo); border-color: var(--testo); color: var(--card-bg); }
.zh-siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); grid-auto-rows: max-content; gap: 14px; }
.zh-zestaw {
  display: flex; flex-direction: column; min-width: 0; padding: 0; border-radius: 20px; overflow: hidden; background: var(--card-bg);
  border: 1.5px solid var(--border); color: var(--testo); font: inherit; text-align: start; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.zh-okladka { position: relative; height: 104px; display: grid; place-items: center; }
.zh-okladka img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zh-rodzaj {
  position: absolute; left: 10px; top: 10px; padding: 3px 9px; border-radius: 999px; background: rgba(23, 24, 59, 0.72); color: #FFFFFF;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em;
}
.zh-nowy { position: absolute; right: 10px; top: 10px; padding: 3px 9px; border-radius: 999px; background: #FFC83D; color: #17183B; font-size: 0.72rem; font-weight: 800; }
.zh-zestaw-tresc { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; flex: 1; min-width: 0; }
.zh-zestaw-nazwa {
  font-family: var(--font-naglowek); font-weight: 800; font-size: 1.06rem; line-height: 1.25; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.zh-zestaw-meta { font-size: 0.84rem; color: var(--grigio); }
.zh-postep { display: flex; align-items: center; gap: 8px; }
.zh-pasek { flex: 1; height: 8px; border-radius: 4px; background: var(--bg-soft); overflow: hidden; }
.zh-pasek i { display: block; height: 100%; border-radius: 4px; background: #2463E9; }
.zh-umiesz { font-size: 0.8rem; font-weight: 800; white-space: nowrap; }
.zh-stopka { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 4px; }
.zh-ostatnio { font-size: 0.78rem; color: var(--grigio); }
.zh-cwicz {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: 12px; flex: none;
  background: var(--przycisk); color: var(--na-przycisku); font-weight: 800; font-size: 0.875rem;
}
.zh-link { align-self: flex-start; padding: 0; border: 0; background: none; font: 800 0.94rem var(--font-tekst); color: var(--primary); cursor: pointer; }
.zh-link:hover { text-decoration: underline; }
.zh-pusto { padding: 18px; border-radius: 18px; border: 1.5px dashed var(--border); color: var(--grigio); font-size: 0.9rem; }

.zh-dol { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.zh-karta { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 22px; background: var(--card-bg); border: 1.5px solid var(--border); min-width: 0; }
.zh-karta-glowa { display: flex; align-items: center; gap: 12px; }
.zh-karta-ikona { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; font-size: 1.2rem; background: var(--bg-info-soft); color: #2463E9; }
.zh-karta-ikona .ico { margin: 0; line-height: 1; }
.zh-karta b { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.12rem; }
.zh-karta small { display: block; margin-top: 2px; font-size: 0.84rem; line-height: 1.4; color: var(--grigio); }
.zh-przyciski { display: flex; gap: 8px; flex-wrap: wrap; }
.zh-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 14px; cursor: pointer;
  border: 1.5px solid var(--border); background: transparent; color: var(--testo); font: 700 0.94rem var(--font-tekst);
}
.zh-btn.glowny { border-color: #2463E9; background: #2463E9; color: #FFFFFF; font-weight: 800; }
.zh-etyk { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #2463E9; }
.zh-wyscig { background: #17183B; border-color: #17183B; color: #FFFFFF; }
.zh-wyscig .zh-etyk { color: #FFC83D; }

.zh-pierwszy {
  display: flex; flex-direction: column; gap: 18px; padding: 28px; border-radius: 26px; color: #FFFFFF;
  background: radial-gradient(90% 140% at 100% 0%, #3A3D96 0%, #22246A 40%, #17183B 78%);
}
.zh-pierwszy .zh-h1 { margin-top: 12px; font-size: 2.25rem; }
.zh-pierwszy .zh-lead { max-width: 620px; color: #D9DAF5; }
.zh-pierwszy .zh-kafel { flex-direction: row; align-items: center; gap: 14px; min-height: 76px; padding: 14px 16px; border-color: transparent; background: #FFFFFF; color: #17183B; }
.zh-pierwszy .zh-kafel small { color: #4A4B6B; }
.zh-pierwszy .zh-kafel b { display: block; font-size: 1.06rem; }
.zh-pierwszy .zh-kafel-plus { display: none; }
.zh-pierwszy .zh-kafel.spol { background: #FFC83D; }
.zh-pierwszy .zh-kafel.spol .zh-kafel-ikona { background: #17183B; color: #FFC83D; }
.zh-pierwszy .zh-kafel.spol small { color: #3A3B5C; }
:root[data-theme="dark"] .zh-pierwszy { background: #262626; box-shadow: inset 0 0 0 1.5px #303030; color: #E5E5E5; }
:root[data-theme="dark"] .zh-pierwszy .zh-lead { color: #BDBDBD; }
:root[data-theme="dark"] .zh-pierwszy .zh-kafel:not(.spol) { background: #303030; color: #E5E5E5; }
:root[data-theme="dark"] .zh-pierwszy .zh-kafel:not(.spol) small { color: #BDBDBD; }
:root[data-theme="dark"] .zh-kafel.spol, :root[data-theme="dark"] .zh-wyscig { background: #262626; border-color: #303030; color: #E5E5E5; }
:root[data-theme="dark"] .zh-kafel.spol small { color: #BDBDBD; }
:root[data-theme="dark"] .zh-kafel.spol .zh-kafel-plus { background: #303030; }
:root[data-theme="dark"] .zh-pierwszy .zh-kafel.spol { background: #FFC83D; border-color: transparent; color: #17183B; }
:root[data-theme="dark"] .zh-pierwszy .zh-kafel.spol small { color: #3A3B5C; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .zh-pierwszy { background: #262626; box-shadow: inset 0 0 0 1.5px #303030; color: #E5E5E5; }
  :root:not([data-theme="light"]) .zh-pierwszy .zh-lead { color: #BDBDBD; }
  :root:not([data-theme="light"]) .zh-pierwszy .zh-kafel:not(.spol) { background: #303030; color: #E5E5E5; }
  :root:not([data-theme="light"]) .zh-pierwszy .zh-kafel:not(.spol) small { color: #BDBDBD; }
  :root:not([data-theme="light"]) .zh-kafel.spol, :root:not([data-theme="light"]) .zh-wyscig { background: #262626; border-color: #303030; color: #E5E5E5; }
  :root:not([data-theme="light"]) .zh-kafel.spol small { color: #BDBDBD; }
  :root:not([data-theme="light"]) .zh-kafel.spol .zh-kafel-plus { background: #303030; }
  :root:not([data-theme="light"]) .zh-pierwszy .zh-kafel.spol { background: #FFC83D; border-color: transparent; color: #17183B; }
  :root:not([data-theme="light"]) .zh-pierwszy .zh-kafel.spol small { color: #3A3B5C; }
}
.zh-propozycje { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.zh-propozycje .odk-okladka { height: 128px; }
.zh-propozycje .odk-ilustracja { height: 118px; }
.zh-zacheta {
  display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 20px; border-radius: 22px; border: 0; cursor: pointer;
  background: radial-gradient(120% 120% at 100% 0%, #2E3070 0%, #17183B 70%); color: #FFFFFF; font: inherit; text-align: start;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.zh-zacheta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(23, 24, 59, 0.6); }
.zh-zacheta:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
.zh-zacheta b { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.2rem; line-height: 1.2; }
.zh-zacheta small { display: block; margin-top: 6px; font-size: 0.875rem; line-height: 1.45; color: #D4D5F0; }
.zh-zacheta .zh-kafel-ikona { background: #FFC83D; color: #17183B; }
.zh-zacheta-btn {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 4px 4px 16px; border-radius: 14px;
  background: #FFC83D; color: #17183B; font-weight: 800; font-size: 0.9rem;
}
.zh-zacheta-btn::after { content: ''; width: 34px; height: 34px; border-radius: 11px; background: #17183B var(--strzalka-zolta) center / 16px 16px no-repeat; }

.zh-wroc {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-bottom: 14px; padding: 0 16px 0 10px; border-radius: 999px;
  border: 1.5px solid var(--border); background: var(--card-bg); color: var(--testo); font: 800 0.875rem var(--font-tekst); cursor: pointer;
}
.zh-wroc .ico { margin: 0; line-height: 1; font-size: 1.05rem; }
body.w-quizie .zh-wroc, body.focus-mode .zh-wroc { display: none; }
@media (max-width: 1100px) { .zh-propozycje { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .zh-h1, .zh-pierwszy .zh-h1 { font-size: 1.7rem; }
  .zh-hero-okladka { flex-basis: 100%; max-width: none; }
  .zh-propozycje { grid-template-columns: minmax(0, 1fr); }
  .zh-pierwszy { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .zh-sekcja { animation: none; }
  .zh-cwicz-dalej::before { animation: none; }
  .zh-kafel, .zh-zestaw, .zh-zacheta { transition: none; }
  .zh-kafel:hover, .zh-zestaw:hover, .zh-zacheta:hover { transform: none; }
}

#communityDetailKarta {
  --k3-kom-tlo: #F8F9FD; --k3-kreska: #E3E6F0; --k3-wiersz: #EEF0F6; --k3-pigulka: #F3F5FB;
  --k3-serce-tlo: #FDECEC; --k3-serce: #B91E1E; --k3-ok: #2D7F3E;
  --k3-strzalka: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232D7F3E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6.5l5.5 5.5-5.5 5.5'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] #communityDetailKarta {
  --k3-kom-tlo: #242424; --k3-kreska: #363636; --k3-wiersz: #2E2E2E; --k3-pigulka: #2A2A2A;
  --k3-serce-tlo: rgba(255, 107, 107, 0.16); --k3-serce: #FF8A8A; --k3-ok: #8BDDA0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #communityDetailKarta {
    --k3-kom-tlo: #242424; --k3-kreska: #363636; --k3-wiersz: #2E2E2E; --k3-pigulka: #2A2A2A;
    --k3-serce-tlo: rgba(255, 107, 107, 0.16); --k3-serce: #FF8A8A; --k3-ok: #8BDDA0;
  }
}
.cmty-karta-boki { display: flex; flex-direction: column; flex: 0 0 340px; min-width: 0; min-height: 0; }
.community-detail-karta.w-siatce.pion > .cmty-karta-boki { flex: 1 1 auto; }

#communityDetailKarta.k3 .community-detail-akcje-gora { display: none; }
#communityDetailKarta.k3 .community-detail-panel { min-width: 0; min-height: 0; max-height: none; padding: 22px; }
#communityDetailKarta.k3 .community-komentarze-sekcja {
  margin: 0; min-height: 0; padding: 20px 18px; border-top: 0; background: var(--k3-kom-tlo);
}

#communityDetailKarta.k3.uklad-trzy { flex-direction: row; align-items: stretch; }
#communityDetailKarta.k3.uklad-trzy > .community-detail-obraz { flex: 1 1 0%; min-width: 0; height: var(--k3-h); }
#communityDetailKarta.k3:not(.paczka) > .community-detail-obraz { padding: 0; align-items: stretch; justify-content: stretch; overflow: hidden; }
#communityDetailKarta.k3.uklad-trzy:not(.paczka) > .community-detail-obraz img {
  width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover;
}
#communityDetailKarta.k3.przewijanie:not(.paczka) > .community-detail-obraz { display: block; overflow-y: auto; }
#communityDetailKarta.k3.przewijanie:not(.paczka) > .community-detail-obraz img { height: auto; object-fit: fill; }
#communityDetailKarta.k3.uklad-trzy.pasy:not(.paczka) > .community-detail-obraz {
  display: flex; flex-direction: column; justify-content: center; background: #000;
}
#communityDetailKarta.k3.uklad-trzy.pasy:not(.paczka) > .community-detail-obraz img { flex: 0 0 auto; height: auto; object-fit: fill; }

#communityDetailKarta.k3.uklad-trzy > .cmty-karta-boki {
  flex: 0 0 calc(var(--k3-srodek, 340px) + var(--k3-kom, 300px)); flex-direction: row; height: var(--k3-h);
}
#communityDetailKarta.k3.uklad-trzy .community-detail-panel { flex: 0 0 var(--k3-srodek, 340px); height: 100%; overflow-y: auto; }
#communityDetailKarta.k3.uklad-trzy .community-komentarze-sekcja {
  flex: 0 0 var(--k3-kom, 300px); height: 100%; border-left: 1px solid var(--k3-kreska);
}
#communityDetailKarta.k3.uklad-trzy #communityDetailSlowa { flex: 0 1 auto; min-height: 136px; overflow-y: auto; }

#communityDetailKarta.k3.uklad-kolumna .community-komentarze-lista { flex: 0 1 auto; max-height: 380px; }
#communityDetailKarta.k3.uklad-kolumna #communityDetailAkcje .cmty-akcje { max-width: 440px; }

#communityDetailKarta.k3.uklad-kolumna { flex-direction: column; }
#communityDetailKarta.k3.uklad-kolumna > .community-detail-obraz { flex: 0 0 auto; justify-content: center; }
#communityDetailKarta.k3.uklad-kolumna:not(.paczka) > .community-detail-obraz img {
  width: 100%; height: auto; max-width: none; max-height: none; margin: 0; object-fit: fill;
}
#communityDetailKarta.k3.uklad-kolumna.przewijanie:not(.paczka) > .community-detail-obraz { max-height: var(--k3-h); }
#communityDetailKarta.k3.uklad-kolumna > .cmty-karta-boki { flex: 1 1 auto; flex-direction: column; }
#communityDetailKarta.k3.uklad-kolumna .community-detail-panel { flex: 0 0 auto; overflow: visible; }
#communityDetailKarta.k3.uklad-kolumna .community-komentarze-sekcja { flex: 0 0 auto; border-top: 1px solid var(--k3-kreska); }

#communityDetailKarta.k3:not(.uklad-trzy) #communityDetailSlowa { max-height: none; overflow: visible; }

#communityDetailKarta.k3.paczka.utwor > .community-detail-obraz:not(:has(> #communityDetailZdania:not(.hidden))) {
  padding: 0; display: block; overflow: hidden;
}
#communityDetailKarta.k3.paczka.utwor > .community-detail-obraz:not(:has(> #communityDetailZdania:not(.hidden))) > img {
  width: 100%; height: 100%; max-width: none; max-height: none; aspect-ratio: auto; margin: 0;
  object-fit: cover; border-radius: 0; box-shadow: none;
}
#communityDetailKarta.k3.paczka.utwor.uklad-kolumna > .community-detail-obraz:not(:has(> #communityDetailZdania:not(.hidden))) > img {
  height: auto; aspect-ratio: 16 / 9;
}
#communityDetailKarta.k3 .cmty-film { max-width: none; border-radius: 0; box-shadow: none; }
#communityDetailKarta.k3.uklad-trzy.paczka.utwor.pasy > .community-detail-obraz:not(:has(> #communityDetailZdania:not(.hidden))) {
  display: flex; flex-direction: column; justify-content: center; background: #000;
}
#communityDetailKarta.k3.uklad-trzy.paczka.utwor.pasy > .community-detail-obraz:not(:has(> #communityDetailZdania:not(.hidden))) > img {
  flex: 0 0 auto; height: auto; aspect-ratio: 16 / 9;
}
#communityDetailKarta.k3.uklad-trzy .cmty-film { height: 100%; aspect-ratio: auto; }
#communityDetailKarta.k3.paczka.uklad-trzy > .community-detail-obraz { overflow-y: auto; }
#communityDetailKarta.k3.paczka.uklad-trzy .community-zdania { max-height: none; overflow: visible; }

#communityDetailKarta.k3 #communityDetailMeta { margin: 0 0 12px; font-size: 0.9rem; color: var(--testo); }
.cmty-karta-autor { min-width: 0; }
#communityDetailKarta .cmty-karta-autor > .cmty-autor-link { display: flex; align-items: flex-start; gap: 10px; max-width: 100%; }
#communityDetailKarta .cmty-karta-autor .cmty-autor-foto { width: 32px; height: 32px; font-size: 0.8rem; box-shadow: none; }
#communityDetailKarta .cmty-karta-autor .cmty-autor-nick { padding-top: 1px; font-weight: 800; line-height: 1.25; }
.cmty-karta-dopisek { display: block; margin-top: 2px; font-size: 0.8rem; line-height: 1.35; color: var(--grigio); }
.cmty-karta-autor:has(.cmty-autor-foto) > .cmty-karta-dopisek { margin-top: -13px; padding-left: 42px; }
.cmty-autor-sam { cursor: default; }
.cmty-autor-sam:hover .cmty-autor-nick { text-decoration: none; }
.cmty-autor-sam:hover .cmty-autor-foto { transform: none; box-shadow: none; }
#communityDetailKarta.k3 .community-detail-panel h2 { margin: 0 0 6px; font-size: 1.6rem; line-height: 1.12; overflow-wrap: anywhere; }
#communityDetailKarta.k3 .community-paczka-opis { margin: 0 0 12px; font-size: 0.94rem; line-height: 1.45; color: var(--testo); }

.cmty-karta-akcje { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 0 0 auto; margin: 4px 0 16px; }
.cmty-karta-serce, .cmty-karta-pigulka {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 0; border-radius: 999px;
  background: var(--k3-pigulka); color: var(--testo); font: 700 0.875rem var(--font-tekst); cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.cmty-karta-akcje .ico { margin: 0; font-size: 1.05rem; line-height: 1; }
.cmty-karta-serce.polubione, .cmty-karta-serce:hover { background: var(--k3-serce-tlo); color: var(--k3-serce); }
.cmty-karta-pigulka:hover { background: var(--bg-soft); }
.cmty-karta-wiecej { position: relative; }
.cmty-karta-wiecej-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0;
  border: 1.5px solid var(--k3-kreska); border-radius: 50%; background: var(--card-bg); color: var(--testo); cursor: pointer;
}
.cmty-karta-wiecej-btn:hover, .cmty-karta-wiecej.otwarte .cmty-karta-wiecej-btn { border-color: var(--testo); }
.cmty-karta-akcje :focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
.cmty-karta-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 6; min-width: 230px;
  flex-direction: column; padding: 6px; border-radius: 14px;
  background: var(--card-bg); border: 1.5px solid var(--border); box-shadow: 0 14px 34px -10px rgba(23, 24, 59, 0.4);
}
.cmty-karta-wiecej.otwarte .cmty-karta-menu { display: flex; }
#communityDetailKarta .cmty-karta-menu > button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; margin: 0; padding: 0 10px;
  border: 0; border-radius: 10px; background: transparent; box-shadow: none; color: var(--testo);
  font: 700 0.84rem var(--font-tekst); text-align: left; white-space: nowrap; cursor: pointer;
}
#communityDetailKarta .cmty-karta-menu > button:is(:hover, :focus-visible) { background: var(--bg-soft); color: var(--testo); }
#communityDetailKarta .cmty-karta-menu > button .ico { margin: 0; font-size: 0.95rem; color: inherit; }
#communityDetailKarta .cmty-karta-menu > .community-detail-usun { position: relative; margin-top: 9px; color: var(--rosso); }
#communityDetailKarta .cmty-karta-menu > .community-detail-usun::before {
  content: ''; position: absolute; left: 8px; right: 8px; top: -5px; height: 1px; background: var(--border);
}
#communityDetailKarta .cmty-karta-menu > .community-detail-usun:is(:hover, :focus-visible) { background: var(--bg-error-soft); color: var(--rosso); }

#communityDetailKarta.k3 #communityDetailSlowa { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; margin-bottom: 0; padding-right: 0; }
#communityDetailKarta.k3 #communityDetailSlowa:empty { display: none; }
.cmty-slowa-glowa {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px;
  padding-bottom: 6px; border-bottom: 1px solid var(--k3-wiersz); font-size: 0.875rem;
}
.cmty-slowa-masz { color: var(--k3-ok); font-weight: 600; font-size: 0.8rem; }
.cmty-slowa-lista {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); column-gap: 28px;
  margin: 0; padding: 0; list-style: none;
}
.cmty-slowo {
  display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 34px; padding: 6px 0;
  border-bottom: 1px solid var(--k3-wiersz); font-size: 0.875rem; line-height: 1.3;
}
.cmty-slowo .nr { flex: 0 0 18px; color: var(--tekst-neutralny); font-weight: 700; font-size: 0.75rem; }
.cmty-slowo .w { flex: 1 1 auto; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.cmty-slowo .tl { flex: 0 1 auto; min-width: 0; max-width: 55%; color: var(--grigio); font-size: 0.8rem; text-align: end; overflow-wrap: anywhere; }
.cmty-slowo .tl:empty { display: none; }
.cmty-slowo .ok { flex: 0 0 16px; display: flex; justify-content: flex-end; color: var(--k3-ok); }
.cmty-slowo .ok .ico { margin: 0; font-size: 0.85rem; line-height: 1; }
.cmty-slowa-wiecej {
  align-self: flex-start; margin: 6px 0 0; padding: 6px 0; border: 0; background: none;
  color: var(--primary); font: 700 0.85rem var(--font-tekst); cursor: pointer;
}
.cmty-slowa-wiecej:hover { text-decoration: underline; }

#communityDetailKarta.k3 #communityDetailAkcje { margin: auto 0 0; padding-top: 16px; }
#communityDetailKarta.k3 #cmtyDodajBtn {
  --kolko-tlo: #FFFFFF; --kolko-strzalka: var(--k3-strzalka);
  min-height: 52px; padding: 7px 7px 7px 22px; border-radius: 999px;
  background: #2D7F3E; color: #FFFFFF; font: 800 1rem var(--font-naglowek);
  box-shadow: 0 8px 20px rgba(45, 127, 62, 0.22);
}
#communityDetailKarta.k3 #cmtyDodajBtn::after { width: 38px; height: 38px; background-size: 18px 18px; }
#communityDetailKarta.k3 #cmtyDodajBtn:hover { background: #256B34; box-shadow: 0 10px 22px rgba(45, 127, 62, 0.28); }
#communityDetailKarta.k3 #cmtyDodajBtn:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
#communityDetailKarta.k3.srodek-ciasny #cmtyDodajBtn { padding-left: 18px; font-size: 0.9rem; }
.cmty-karta-akcje:has(.cmty-karta-wiecej.otwarte) { z-index: 5; }
#communityDetailKarta.k3.uklad-trzy:not(.paczka) #communityDetailAkcje:has(#cmtyDodajBtn) {
  position: sticky; bottom: -22px; z-index: 2; margin-bottom: -22px; padding: 18px 0;
  background: linear-gradient(to bottom, transparent, var(--card-bg) 16px);
}
#communityDetailKarta.k3.uklad-trzy .cmty-zw-liczby { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }

#communityDetailKarta.k3 .community-komentarze-naglowek { font-size: 1.1rem; }
#communityDetailKarta.k3 .community-komentarz {
  margin: 0 0 8px; padding: 12px 14px; border: 1px solid var(--k3-kreska); border-radius: 16px; background: var(--card-bg);
}
#communityDetailKarta.k3 .community-komentarze-pusto { background: var(--card-bg); }
#communityDetailKarta.k3 .community-komentarze-sekcja { min-width: 0; }
#communityDetailKarta.k3 .community-komentarz-tresc { overflow-wrap: anywhere; }
#communityDetailKarta.k3 .community-komentarz-tresc :is(.tw-odznaka, .community-komentarz-poziom, button.community-komentarz-profil) { max-width: 100%; }
#communityDetailKarta.k3 .community-komentarz-tresc .tw-odznaka { display: inline-block; white-space: normal; border-radius: 10px; }
#communityDetailKarta.k3 .community-komentarz-tresc .tw-odznaka-ikona { margin-inline-end: 4px; }
#communityDetailKarta.k3 .community-komentarz-form textarea { text-overflow: ellipsis; padding-inline: 4px; }
#communityDetailKarta.k3 .community-komentarz-form textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: inherit; }

@media (pointer: coarse) {
  .cmty-karta-serce, .cmty-karta-pigulka { height: 44px; }
  .cmty-karta-wiecej-btn { width: 44px; height: 44px; }
  #communityDetailKarta .cmty-karta-menu > button { min-height: 44px; }
}
@media (max-width: 640px) {
  #communityDetailKarta.k3 .community-detail-panel { padding: 16px 14px; }
  #communityDetailKarta.k3 .community-komentarze-sekcja { padding: 16px 14px; }
  #communityDetailKarta.k3 .community-detail-panel h2 { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cmty-karta-serce, .cmty-karta-pigulka { transition: none; }
}

.community-komentarz-awatar { flex: none; align-self: flex-start; border-radius: 50%; cursor: pointer; }
.community-komentarz-awatar:hover { opacity: 0.85; }
button.community-komentarz-profil {
  margin: 0; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--testo);
  font-family: inherit; font-size: 0.78rem; font-weight: 800; line-height: inherit; text-align: start; cursor: pointer;
}
button.community-komentarz-profil:hover { text-decoration: underline; }
.community-komentarz-oznaczenie { color: var(--primary); font-weight: 700; text-decoration: none; border-radius: 4px; }
.community-komentarz-oznaczenie:hover { text-decoration: underline; }
.community-komentarz-reakcje { display: flex; margin: 4px 0 0 -9px; }
.community-komentarz-reakcje:empty { display: none; }
.community-komentarz-serce {
  display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 9px; border: 0; border-radius: 999px;
  background: transparent; color: var(--tekst-neutralny); font: 700 0.75rem var(--font-tekst); line-height: 1;
}
button.community-komentarz-serce { cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.community-komentarz-serce .ico { margin: 0; font-size: 0.85rem; line-height: 1; }
button.community-komentarz-serce:hover, .community-komentarz-serce.polubione {
  background: var(--k3-serce-tlo, var(--bg-error-soft)); color: var(--k3-serce, var(--rosso));
}
:is(button.community-komentarz-serce, button.community-komentarz-profil, .community-komentarz-oznaczenie):focus-visible {
  outline: 3px solid var(--oro); outline-offset: 2px;
}
.community-komentarz-form { position: relative; }
.community-kom-podpowiedzi {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 6; max-height: 232px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px; padding: 6px; border: 1.5px solid var(--border); border-radius: 16px;
  background: var(--card-bg); box-shadow: 0 14px 34px -10px rgba(23, 24, 59, 0.4);
}
.community-kom-podpowiedzi[hidden] { display: none; }
.community-kom-podpowiedz {
  display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 10px; border-radius: 10px; cursor: pointer; min-width: 0;
}
.community-kom-podpowiedz:hover { background: var(--bg-soft); }
.community-kom-podpowiedz.aktywna { background: var(--bg-soft); box-shadow: inset 3px 0 0 var(--oro); }
.community-kom-podpowiedz-nick { font-weight: 800; font-size: 0.84rem; color: var(--testo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.community-kom-podpowiedz-login { font-size: 0.78rem; color: var(--tekst-neutralny); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (pointer: coarse) {
  button.community-komentarz-serce { min-height: 44px; min-width: 44px; justify-content: center; }
  .community-komentarz-reakcje { margin-top: 0; }
  .community-kom-podpowiedz { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  button.community-komentarz-serce { transition: none; }
}