@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url("fonts/nunito-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url("fonts/nunito-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --atrament: #231B3E; --szary: #6B6585; --linia: #E8E4F2; --tlo-szare: #F7F6FA;
  --fiolet: #6C4CF5; --fiolet-ciemny: #4E31D1; --fiolet-jasny: #F1EDFF; --fiolet-linia: #E3DCFF;
  --pomarancz: #FF9F1C; --pomarancz-ciemny: #D97F00; --pomarancz-jasny: #FFF1DD; --pomarancz-tekst: #8A4B00;
  --zielen: #1FA463; --zielen-ciemna: #127A49; --zielen-jasna: #E2F7EC; --zielen-tekst: #1D4D36;
  --koral: #F0554A; --koral-jasny: #FFE7E4; --koral-tekst: #A1271E;
  --czcionka: "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: #F3F0FF; color: var(--atrament); font-family: var(--czcionka); font-weight: 600; -webkit-font-smoothing: antialiased; }
button, textarea, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.aplikacja { max-width: 480px; min-height: 100vh; min-height: 100dvh; margin: 0 auto; background: #FFFFFF; position: relative; }
@media (min-width: 560px) { .aplikacja { box-shadow: 0 0 60px rgba(60, 40, 140, .08); } }

.ekran { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding: 18px 20px calc(24px + env(safe-area-inset-bottom)); }
.dol { margin-top: auto; padding-top: 24px; display: flex; flex-direction: column; gap: 6px; }
.dol-rzad { flex-direction: row; justify-content: space-between; align-items: center; }

.baner { background: var(--pomarancz-jasny); color: var(--pomarancz-tekst); font-size: 14px; font-weight: 800; padding: 8px 20px; text-align: center; }
.blad { background: var(--koral-jasny); color: var(--koral-tekst); font-weight: 800; padding: 12px 20px; }

/* typografia */
.logo { font-size: 26px; font-weight: 900; letter-spacing: -.02em; color: var(--fiolet); }
.tytul { margin: 18px 0 12px; font-size: 24px; font-weight: 900; line-height: 1.15; }
.tytul-sekcji { margin: 22px 0 4px; font-size: 19px; font-weight: 900; }
.podtytul { margin: 28px 0 10px; font-size: 14px; font-weight: 900; color: var(--szary); text-transform: uppercase; letter-spacing: .08em; }
.opis { margin: 0 0 10px; font-size: 15px; color: var(--szary); }
.srodek { text-align: center; }
.drobne { margin: 22px 0 0; font-size: 12.5px; color: var(--szary); line-height: 1.45; }
.etykieta { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: var(--fiolet); }

/* nagłówek startu */
.naglowek { display: flex; justify-content: space-between; align-items: center; }
.chipy { display: flex; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-size: 15px; padding: 6px 12px; border-radius: 999px; }
.chip svg { width: 16px; height: 16px; stroke-width: 2.6; }
.chip-seria { background: var(--pomarancz-jasny); color: var(--pomarancz-tekst); }
.chip-xp { background: #EEE9FF; color: var(--fiolet-ciemny); }

/* Kapi i dymki */
.kapi { display: block; flex: none; }
.kapi-duza { width: 132px; height: 132px; }
.kapi-srednia { width: 92px; height: 92px; }
.kapi-rzad { display: flex; align-items: flex-end; gap: 6px; margin-top: 14px; }
.dymek { margin: 0 0 30px; background: var(--fiolet-jasny); border: 2px solid var(--fiolet-linia); border-radius: 20px 20px 20px 6px; padding: 13px 15px; font-size: 16px; font-weight: 700; line-height: 1.35; }
.mowi { animation: podskok .5s ease-in-out infinite alternate; }
@keyframes podskok { to { transform: translateY(-5px) rotate(-2deg); } }
.kolysanie { animation: kolysanie 1.2s ease-in-out infinite alternate; }
@keyframes kolysanie { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }

/* przyciski */
.btn {
  display: block; width: 100%; border: 0; border-radius: 18px; padding: 16px; font-size: 18px; font-weight: 900;
  text-align: center; transition: transform .08s, box-shadow .08s;
}
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--cien, transparent) !important; }
.btn:disabled { opacity: .5; cursor: default; }
.btn-fiolet { background: var(--fiolet); color: #FFFFFF; box-shadow: 0 5px 0 var(--fiolet-ciemny); --cien: var(--fiolet-ciemny); }
.btn-pomarancz { background: var(--pomarancz); color: var(--atrament); box-shadow: 0 5px 0 var(--pomarancz-ciemny); --cien: var(--pomarancz-ciemny); }
.btn-zielen { background: var(--zielen); color: #FFFFFF; box-shadow: 0 5px 0 var(--zielen-ciemna); --cien: var(--zielen-ciemna); }
.btn-koral { background: var(--koral); color: #FFFFFF; box-shadow: 0 5px 0 #B8362D; --cien: #B8362D; }
.btn-maly { width: auto; padding: 13px 26px; font-size: 16px; }
.link-btn { background: none; border: 0; color: var(--fiolet); font-weight: 900; font-size: 16px; padding: 12px 6px; }
.link-btn.szary { color: var(--szary); }
.ikona-btn { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: var(--szary); border-radius: 12px; flex: none; }
.ikona-btn svg { width: 26px; height: 26px; stroke-width: 2.8; }
.pigulka { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; border: 0; background: #EEE9FF; color: var(--fiolet-ciemny); border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 800; }
.pigulka svg { width: 18px; height: 18px; }

/* tryby na starcie */
.tryby { display: flex; flex-direction: column; gap: 14px; }
.tryb { display: flex; align-items: center; gap: 14px; text-align: left; background: #FFFFFF; border: 2px solid var(--fiolet-linia); border-radius: 22px; padding: 16px; box-shadow: 0 5px 0 var(--fiolet-linia); transition: transform .08s, box-shadow .08s; }
.tryb:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--fiolet-linia); }
.tryb-pomarancz { border-color: #FFE0B5; box-shadow: 0 5px 0 #FFE0B5; }
.tryb-ikona { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; flex: none; }
.tryb-ikona svg { width: 30px; height: 30px; stroke-width: 2.2; }
.tryb-fiolet .tryb-ikona { background: var(--fiolet); color: #FFFFFF; }
.tryb-pomarancz .tryb-ikona { background: var(--pomarancz); color: var(--atrament); }
.tryb-zielen { border-color: #BDEBD3; box-shadow: 0 5px 0 #BDEBD3; }
.tryb-zielen .tryb-ikona { background: var(--zielen); color: #FFFFFF; }
.tryb-tekst { display: flex; flex-direction: column; gap: 2px; }
.tryb-tekst b { font-size: 18px; font-weight: 900; }
.tryb-tekst span { font-size: 14px; color: var(--szary); }
.wkrotce { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wkrotce li { background: var(--tlo-szare); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; font-weight: 800; }
.wkrotce svg { width: 20px; height: 20px; color: var(--szary); }

/* pasek postępu */
.pasek-gora { display: flex; align-items: center; gap: 12px; }
.postep { flex: 1; height: 14px; border-radius: 999px; background: #EEEBF5; overflow: hidden; }
.postep div { height: 100%; border-radius: 999px; background: var(--fiolet); transition: width .3s; }
.segmenty { flex: 1; display: flex; gap: 5px; }
.segmenty span { flex: 1; height: 12px; border-radius: 999px; background: #EEEBF5; transition: background .3s; }
.segmenty .zrobione { background: var(--zielen); }
.segmenty .teraz { background: var(--fiolet); }
.licznik { font-size: 14px; font-weight: 800; color: var(--szary); min-width: 30px; text-align: right; }

/* materiał */
.wgraj { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; border: 2px dashed #C9BEFF; background: #FAF8FF; border-radius: 20px; padding: 22px 14px; color: var(--fiolet-ciemny); cursor: pointer; }
.wgraj svg { width: 32px; height: 32px; stroke-width: 2.2; }
.wgraj b { font-size: 17px; font-weight: 900; }
.wgraj span { font-size: 14px; color: var(--szary); }
.wgraj input, .kafel input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.wgraj:focus-within, .kafel:focus-within { outline: 3px solid var(--fiolet); outline-offset: 2px; }
.wgrane { display: flex; align-items: center; gap: 12px; border: 2px solid #A7E3C4; background: var(--zielen-jasna); border-radius: 18px; padding: 12px 14px; }
.wgrane-znak { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--zielen); color: #FFFFFF; flex: none; }
.wgrane-znak svg { width: 24px; height: 24px; stroke-width: 3; }
.wgrane-tekst { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.wgrane-tekst b { font-size: 16px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wgrane-tekst span { font-size: 14px; color: var(--zielen-ciemna); font-weight: 700; }
.wgrane .link-btn { color: var(--zielen-ciemna); font-size: 14px; }
.dwa-przyciski { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kafel { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; border: 2px dashed #C9BEFF; background: #FAF8FF; border-radius: 18px; padding: 16px 10px; font-size: 15px; font-weight: 800; color: var(--fiolet-ciemny); cursor: pointer; }
.kafel svg { width: 28px; height: 28px; stroke-width: 2.2; }
textarea { width: 100%; border: 2px solid var(--linia); border-radius: 16px; padding: 12px 14px; background: var(--tlo-szare); resize: vertical; font-size: 16px; font-weight: 600; line-height: 1.45; }
textarea:focus { outline: none; border-color: var(--fiolet); background: #FFFFFF; }
.pytania-pole { margin-top: 10px; }
.licznik-pytan { margin: 8px 0 0; font-size: 14px; font-weight: 800; color: var(--zielen-ciemna); min-height: 1em; }
.zwijane { margin-top: 12px; }
.zwijane summary { cursor: pointer; color: var(--fiolet); font-weight: 800; padding: 6px 0; }
.zwijane textarea { margin-top: 8px; }

/* komisja */
.komisje { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.komisja { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; background: #FFFFFF; border: 2px solid var(--linia); border-radius: 20px; padding: 10px 8px 14px; box-shadow: 0 4px 0 var(--linia); }
.komisja img { width: 92px; height: 92px; }
.komisja b { font-size: 16px; font-weight: 900; }
.komisja span { font-size: 13px; color: var(--szary); font-weight: 700; }
.komisja[aria-checked="true"] { background: var(--fiolet-jasny); border-color: var(--fiolet); box-shadow: 0 4px 0 var(--fiolet); }
.komisja[aria-checked="true"] span { color: var(--fiolet-ciemny); }
.segment { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 6px 0 10px; }
.segment button { border: 2px solid var(--linia); background: #FFFFFF; border-radius: 16px; padding: 12px; font-size: 20px; font-weight: 900; box-shadow: 0 4px 0 var(--linia); }
.segment button[aria-checked="true"] { border-color: var(--fiolet); background: var(--fiolet-jasny); color: var(--fiolet-ciemny); box-shadow: 0 4px 0 var(--fiolet); }

/* egzamin */
.pytanie-rzad { display: flex; align-items: flex-start; gap: 8px; margin-top: 20px; }
.dymek-pytanie { flex: 1; display: flex; flex-direction: column; gap: 10px; background: #FFFFFF; border: 2px solid var(--linia); border-radius: 6px 22px 22px 22px; padding: 14px 16px; box-shadow: 0 4px 0 var(--linia); }
.dymek-pytanie.dodatkowe { border-color: #FFD39A; box-shadow: 0 4px 0 #FFD39A; }
.dymek-pytanie.dodatkowe .etykieta { color: #C2410C; }
.pytanie { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.3; }
.transkrypcja { display: block; margin-top: 20px; background: var(--tlo-szare); border-radius: 20px; padding: 12px 14px 6px; }
.transkrypcja textarea { border: 0; background: transparent; padding: 6px 0; font-size: 17px; font-weight: 700; resize: none; }
.transkrypcja textarea:focus { background: transparent; }
.status { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 900; color: var(--szary); text-transform: uppercase; letter-spacing: .08em; }
.kropka { width: 10px; height: 10px; border-radius: 50%; background: #C9C4DA; }
.nagrywa .status { color: #C2410C; }
.nagrywa .kropka { background: var(--koral); animation: mrug 1s infinite; }
@keyframes mrug { 50% { opacity: .3; } }

.mikrofon { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 22px; }
.fala { display: flex; align-items: center; gap: 4px; height: 36px; opacity: 0; transition: opacity .2s; }
.fala span { width: 6px; height: 10px; border-radius: 3px; background: var(--pomarancz); }
.nagrywa .fala { opacity: 1; }
.nagrywa .fala span { animation: fala .9s ease-in-out infinite alternate; }
.fala span:nth-child(2) { animation-delay: .15s !important; } .fala span:nth-child(3) { animation-delay: .3s !important; }
.fala span:nth-child(4) { animation-delay: .45s !important; } .fala span:nth-child(5) { animation-delay: .2s !important; }
.fala span:nth-child(6) { animation-delay: .35s !important; } .fala span:nth-child(7) { animation-delay: .05s !important; }
@keyframes fala { to { height: 34px; } }
.mik { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; border: 0; background: var(--fiolet); color: #FFFFFF; box-shadow: 0 6px 0 var(--fiolet-ciemny), 0 0 0 10px var(--fiolet-jasny); transition: transform .08s; }
.mik:active { transform: translateY(3px); }
.mik svg { width: 38px; height: 38px; }
.ikona-stop { display: none; fill: currentColor; stroke: none; }
.nagrywa .mik { background: var(--pomarancz); color: var(--atrament); box-shadow: 0 6px 0 var(--pomarancz-ciemny), 0 0 0 10px var(--pomarancz-jasny); }
.nagrywa .ikona-mik { display: none; }
.nagrywa .ikona-stop { display: block; }
.mik-opis { font-size: 15px; font-weight: 800; color: var(--szary); }
.brak-mowy { background: var(--pomarancz-jasny); color: var(--pomarancz-tekst); border-radius: 14px; padding: 10px 14px; font-size: 14px; margin: 16px 0 0; }

/* karta oceny */
.tlo-karty { position: fixed; inset: 0; background: rgba(255, 255, 255, .55); z-index: 5; }
.karta-oceny { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 480px; z-index: 6; border-radius: 28px 28px 0 0; padding: 22px 20px calc(26px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; animation: wjazd .25s ease-out; }
@keyframes wjazd { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } }
.karta-gora { display: flex; align-items: center; gap: 12px; }
.karta-gora .kapi { width: 84px; height: 84px; }
.karta-naglowek { display: flex; flex-direction: column; }
.karta-naglowek b { font-size: 24px; font-weight: 900; }
.karta-naglowek span { font-size: 15px; font-weight: 800; }
.karta-gora .ocena { margin-left: auto; }
.karta-komentarz { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.45; }
.karta-dodatkowe { background: #FFFFFF; border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; font-size: 16px; font-weight: 800; }
.karta-dodatkowe .etykieta { color: #C2410C; }
.karta-dobra { background: var(--zielen-jasna); color: var(--zielen-tekst); }
.karta-dobra .karta-naglowek { color: var(--zielen-ciemna); }
.karta-srednia { background: var(--pomarancz-jasny); color: #5C3300; }
.karta-srednia .karta-naglowek { color: var(--pomarancz-tekst); }
.karta-slaba { background: var(--koral-jasny); color: #6B1A14; }
.karta-slaba .karta-naglowek { color: var(--koral-tekst); }

.ocena { display: inline-grid; place-items: center; min-width: 64px; height: 64px; padding: 0 8px; border-radius: 18px; font-size: 28px; font-weight: 900; background: var(--zielen); color: #FFFFFF; flex: none; }
.ocena.srednia { background: var(--pomarancz); color: var(--atrament); }
.ocena.slaba { background: var(--koral); color: #FFFFFF; }
.ocena-duza { align-self: center; width: 96px; height: 96px; margin-top: 14px; border-radius: 28px; font-size: 44px; box-shadow: 0 6px 0 var(--zielen-ciemna); }
.ocena-duza.srednia { box-shadow: 0 6px 0 var(--pomarancz-ciemny); }
.ocena-duza.slaba { box-shadow: 0 6px 0 #B8362D; }

/* wynik */
.ekran-wynik { align-items: stretch; }
.kapi-wynik { width: 150px; height: 150px; align-self: center; }
.wynik-haslo { margin: 4px 0 4px; text-align: center; font-size: 30px; font-weight: 900; color: var(--fiolet); }
.statystyki { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.stat { border: 2px solid; border-radius: 18px; padding: 10px 6px; text-align: center; display: flex; flex-direction: column; }
.stat span { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.stat b { font-size: 22px; font-weight: 900; }
.stat small { font-size: 11px; font-weight: 800; }
.stat-xp { border-color: #FFE0B5; color: var(--pomarancz-tekst); }
.stat-czas { border-color: var(--fiolet-linia); color: var(--fiolet-ciemny); }
.stat-tempo { border-color: #A7E3C4; color: var(--zielen-ciemna); }
.stat b { color: var(--atrament); }
.wnioski { list-style: none; margin: 16px 0 0; padding: 14px 16px; background: var(--tlo-szare); border-radius: 18px; display: flex; flex-direction: column; gap: 8px; }
.wnioski li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; font-weight: 700; }
.wnioski svg { width: 20px; height: 20px; stroke-width: 3; flex: none; margin-top: 1px; }
.wnioski .plus svg { color: var(--zielen); }
.wnioski .minus svg { color: var(--pomarancz-ciemny); }
#wzorcowe { margin-top: 20px; }
.szczegol { border: 2px solid var(--linia); border-radius: 16px; margin-top: 10px; }
.szczegol summary { cursor: pointer; padding: 12px 14px; font-weight: 800; display: flex; gap: 10px; align-items: center; }
.szczegol summary .ocena { min-width: 38px; height: 38px; font-size: 16px; border-radius: 10px; }
.szczegol > div { padding: 0 14px 12px; }
.szczegol p { margin: 6px 0; font-weight: 600; line-height: 1.45; }
.szczegol .podpis { margin-top: 12px; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: var(--szary); }

/* ładowanie */
.ladowanie { position: fixed; inset: 0; background: rgba(255, 255, 255, .92); display: grid; place-content: center; justify-items: center; gap: 10px; z-index: 10; text-align: center; padding: 16px; font-size: 18px; font-weight: 900; color: var(--fiolet-ciemny); }
.ladowanie .kapi { width: 120px; height: 120px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* kilka plików pracy */
.lista-plikow { margin: 8px 0 0; padding: 0 0 0 22px; font-size: 14px; color: var(--szary); display: flex; flex-direction: column; gap: 2px; }
.lista-plikow li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dodaj-plik { position: relative; display: inline-block; align-self: flex-start; margin-top: 6px; color: var(--fiolet); font-weight: 900; font-size: 15px; padding: 10px 2px; cursor: pointer; }
.dodaj-plik input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.dodaj-plik:focus-within { outline: 3px solid var(--fiolet); outline-offset: 2px; border-radius: 8px; }

/* ---------- plany: Plus — wkrótce ---------- */
.limit-info { margin: 14px 0 0; font-size: 14px; font-weight: 800; color: var(--szary); text-align: center; }
.limit-info b { color: var(--fiolet-ciemny); }
.plakietka { display: inline-block; background: var(--pomarancz); color: var(--atrament); font-size: 11px; font-weight: 1000; letter-spacing: .06em; padding: 3px 7px; border-radius: 8px; line-height: 1.2; }
.baner-plus { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; text-align: left; background: linear-gradient(120deg, var(--fiolet), #8E6BFF); color: #FFFFFF; border: 0; border-radius: 20px; padding: 14px 16px; box-shadow: 0 5px 0 var(--fiolet-ciemny); transition: transform .08s, box-shadow .08s; }
.baner-plus:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--fiolet-ciemny); }
.baner-plus-tekst { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.baner-plus-tekst b { font-size: 16px; font-weight: 900; }
.baner-plus-tekst span { font-size: 13px; opacity: .9; }
.baner-plus svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2.6; flex: none; }

.komisja, .segment button { position: relative; }
.zablokowana img { filter: grayscale(.7); opacity: .6; }
.komisja.zablokowana b, .komisja.zablokowana span:not(.plakietka) { opacity: .6; }
.segment .zablokowana { color: #B9B4CC; }
.zablokowana .plakietka { position: absolute; top: 8px; right: 8px; }
.segment .zablokowana .plakietka { top: -9px; right: -6px; font-size: 9px; padding: 2px 5px; }

.plany { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.plan { background: #FFFFFF; border: 2px solid var(--linia); border-radius: 22px; padding: 16px; box-shadow: 0 5px 0 var(--linia); }
.plan-glowny { border-color: var(--fiolet); box-shadow: 0 5px 0 var(--fiolet); }
.plan-naglowek { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.plan h2 { margin: 0; font-size: 19px; font-weight: 1000; }
.plan-cena { font-size: 20px; font-weight: 1000; color: var(--fiolet-ciemny); white-space: nowrap; }
.plan-cena small { display: block; font-size: 12px; font-weight: 800; color: var(--szary); text-align: right; }
.plan ul { margin: 10px 0 14px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; }
.plan li { display: flex; gap: 8px; }
.plan li::before { content: "✓"; color: var(--zielen); font-weight: 1000; }
.plan-twoj { display: block; text-align: center; font-weight: 900; color: var(--zielen-tekst); background: var(--zielen-jasna); border-radius: 14px; padding: 12px; }
.plan .btn.kliknieto { background: var(--zielen); box-shadow: 0 5px 0 var(--zielen-ciemna); color: #FFFFFF; animation: podskok .4s; }
@keyframes podskok { 40% { transform: scale(1.06); } }
.wzor-zablokowany { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 4px; text-align: left; background: var(--fiolet-jasny); border: 2px dashed var(--fiolet-linia); color: var(--fiolet-ciemny); border-radius: 14px; padding: 10px 12px; font-weight: 800; font-size: 14px; }

/* ---------- koła ratunkowe ---------- */
.kola { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0 4px; }
.kola[hidden] { display: none; }
.kolo { display: flex; align-items: center; gap: 8px; text-align: left; background: #FFFFFF; border: 2px solid var(--linia); border-radius: 16px; padding: 9px 10px; box-shadow: 0 4px 0 var(--linia); color: var(--atrament); transition: transform .08s, box-shadow .08s; }
.kolo:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--linia); }
.kolo svg { width: 24px; height: 24px; flex: none; stroke: var(--pomarancz-ciemny); fill: none; stroke-width: 2.2; }
.kolo-tekst { display: flex; flex-direction: column; line-height: 1.2; }
.kolo-tekst b { font-size: 14px; font-weight: 900; }
.kolo-tekst small { font-size: 11.5px; color: var(--szary); font-weight: 700; }
.kolo:disabled { opacity: .45; }
.kolo.puste svg { stroke: var(--szary); }
.podpowiedz { margin: 8px 0 0; background: var(--pomarancz-jasny); color: var(--pomarancz-tekst); border-radius: 14px; padding: 10px 12px; font-weight: 800; font-size: 15px; }
.podpowiedz::before { content: "💡 "; }

/* ---------- nauka: dziedziny ---------- */
.dziedziny { display: flex; flex-direction: column; gap: 12px; }
.dziedzina { border: 2px solid var(--linia); border-radius: 20px; padding: 12px 14px; box-shadow: 0 4px 0 var(--linia); display: flex; flex-direction: column; gap: 8px; }
.dziedzina-gora { display: flex; align-items: center; gap: 8px; }
.dziedzina-nazwa { flex: 1; min-width: 0; border: 2px solid transparent; border-radius: 10px; background: none; padding: 4px 6px; margin-left: -8px; font-size: 18px; font-weight: 900; }
.dziedzina-nazwa:focus { outline: none; border-color: var(--fiolet); background: #FFFFFF; }
.dziedzina-tytul { flex: 1; font-size: 17px; font-weight: 900; }
.poziom { flex: none; font-size: 13px; font-weight: 900; color: var(--zielen-ciemna); background: var(--zielen-jasna); border-radius: 999px; padding: 4px 10px; }
.poziom.w-gore { background: var(--pomarancz); color: var(--atrament); animation: podskok .35s ease-in-out 4 alternate; }
.opanowanie { height: 12px; border-radius: 999px; background: #EEEBF5; overflow: hidden; }
.opanowanie div { height: 100%; border-radius: 999px; background: var(--zielen); transition: width .6s ease-out; }
.dziedzina-opis { font-size: 13px; color: var(--szary); font-weight: 700; }
.samoocena { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.samoocena button { border: 2px solid var(--linia); background: #FFFFFF; border-radius: 14px; padding: 8px 4px; font-size: 14px; font-weight: 900; box-shadow: 0 3px 0 var(--linia); }
.samoocena button[aria-checked="true"][data-ocena="dobrze"] { border-color: var(--zielen); background: var(--zielen-jasna); color: var(--zielen-ciemna); box-shadow: 0 3px 0 var(--zielen); }
.samoocena button[aria-checked="true"][data-ocena="srednio"] { border-color: var(--pomarancz); background: var(--pomarancz-jasny); color: var(--pomarancz-tekst); box-shadow: 0 3px 0 var(--pomarancz); }
.samoocena button[aria-checked="true"][data-ocena="slabo"] { border-color: var(--koral); background: var(--koral-jasny); color: var(--koral-tekst); box-shadow: 0 3px 0 var(--koral); }
.dziedzina details summary { cursor: pointer; color: var(--fiolet); font-weight: 800; font-size: 14px; padding: 2px 0; }
.dziedzina ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dziedzina li { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 700; }
.dziedzina select { align-self: flex-start; max-width: 100%; border: 2px solid var(--linia); border-radius: 10px; background: var(--tlo-szare); padding: 4px 8px; font: inherit; font-size: 13px; }
.wynik-dziedziny { margin-top: 8px; }
.wynik-dziedziny .dziedzina { box-shadow: none; }
.korekta { margin: 6px 0 12px; background: var(--fiolet-jasny); border: 2px solid var(--fiolet-linia); border-radius: 16px; padding: 10px 14px; font-weight: 800; }
.reakcja { animation: podskok .3s ease-in-out 2 alternate; }

/* ---------- wyciszenie Kapi ---------- */
#wycisz .ikona-cisza { display: none; }
#wycisz[aria-pressed="true"] { color: var(--koral); background: var(--koral-jasny); }
#wycisz[aria-pressed="true"] .ikona-glos { display: none; }
#wycisz[aria-pressed="true"] .ikona-cisza { display: block; }
.przypomnienie-cisza { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 0; background: var(--koral-jasny); color: var(--koral-tekst); border-radius: 14px; padding: 8px 8px 8px 14px; font-size: 14px; font-weight: 800; animation: pojaw .25s ease-out; }
@keyframes pojaw { from { opacity: 0; transform: translateY(-6px); } }
.przypomnienie-cisza[hidden] { display: none; }
.przypomnienie-cisza .link-btn { flex: none; color: var(--koral-tekst); background: #FFFFFF; border-radius: 10px; padding: 8px 12px; font-size: 14px; }

/* ---------- nauka: pytania albo notatka ---------- */
.albo { display: flex; align-items: center; gap: 12px; margin: 18px 0 4px; color: var(--szary); font-size: 14px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.albo::before, .albo::after { content: ""; flex: 1; height: 2px; background: var(--linia); }
.albo[hidden] { display: none; }
.kafel-szeroki { flex-direction: row; justify-content: center; margin: 8px 0; }
.kafel-szeroki svg { width: 22px; height: 22px; }