/* [A21] Practice — style ćwiczeń auto-check (wpinane w lekcje kursu) */
.practice-sekcja { margin: 20px 0; }

/* [E14b] Dyskretny feedback „zgłoś problem z zadaniem" — anonimowy, mało inwazyjny */
.cwa-fb { margin-top: 8px; }
.cwa-fb-emoji { background: none; border: none; cursor: pointer; font-size: 16px; padding: 0 5px; line-height: 1; opacity: .7; transition: opacity .15s, transform .15s; }
.cwa-fb-emoji:hover { opacity: 1; transform: scale(1.2); }
.cwa-fb-lbl { font-size: 12px; color: var(--muted, #8888aa); }
.cwa-fb-txt { font-size: 12px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border, #2a2a4a); background: var(--bg3, #181830); color: var(--text, #e0e0f0); min-width: 200px; }
.cwa-fb-send { font-size: 12px; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border, #2a2a4a); background: var(--bg3, #181830); color: var(--text, #e0e0f0); cursor: pointer; }
.cwa-fb-send:hover { border-color: var(--accent, #00c8ff); }
.cwa-fb-thx { font-size: 12px; color: var(--accent3, #50e050); }
/* ── Zakładki lekcji jak w NOTATNIKU: wystające „zakładki", Praktyka zielona ── */
.lekcja-taby { display: flex; gap: 6px; margin: 6px 0 20px; padding-left: 2px; border-bottom: 2px solid var(--border, #2a2a4a); }
.lekcja-tab-btn { background: var(--bg3, #181830); border: 2px solid var(--border, #2a2a4a); border-bottom: none; border-radius: 12px 12px 0 0; color: var(--muted, #8888aa); font-family: inherit; font-size: 16px; font-weight: 700; padding: 12px 22px 14px; cursor: pointer; position: relative; bottom: -2px; transition: all .12s; }
.lekcja-tab-btn:hover { color: var(--text, #e0e0f0); }
.lekcja-tab-btn.aktywny { background: var(--bg2, #10102a); color: var(--accent, #00c8ff); border-color: var(--accent, #00c8ff); border-bottom: 2px solid var(--bg2, #10102a); }
/* Praktyka — zielonkawa zakładka: wyróżniona, ale spokojna (bez neonu) */
.lekcja-tab-btn[data-tabcel$="-praktyka"] { background: #14241a; border-color: #2f6b41; color: #8fcfa3; }
.lekcja-tab-btn[data-tabcel$="-praktyka"]:hover { background: #182e20; border-color: #3a8050; color: #a6dcb8; }
.lekcja-tab-btn[data-tabcel$="-praktyka"].aktywny { background: #162c1e; color: #b6e8c6; border-color: #3a8050; border-bottom: 2px solid #162c1e; }
.lekcja-tab[hidden] { display: none; }
.tab-licznik { font-size: 12px; font-weight: 700; background: #2f6b4126; border: 1px solid #2f6b4166; color: #9fd6b2; border-radius: 20px; padding: 2px 10px; margin-left: 7px; vertical-align: middle; }
/* [A23/mobile] zakładki za szerokie na wąskim ekranie (Wstęp/Teoria+ćwiczenia/Praktyka) — zmniejsz + scroll w razie czego */
@media (max-width: 600px) {
  .lekcja-taby { gap: 4px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .lekcja-taby::-webkit-scrollbar { display: none; }
  .lekcja-tab-btn { font-size: 12px; padding: 8px 10px 10px; border-radius: 9px 9px 0 0; white-space: nowrap; flex: 0 0 auto; }
  .tab-licznik { font-size: 10px; padding: 1px 6px; margin-left: 4px; }
}

/* CTA: z Teorii do Praktyki — żeby nikt nie przeoczył zakładki */
.praktyka-cta { text-align: center; margin: 30px 0 6px; }
.praktyka-cta-btn { font-family: inherit; font-size: 16px; font-weight: 700; padding: 14px 30px; border: none; border-radius: 12px; cursor: pointer; background: linear-gradient(90deg, var(--accent, #00c8ff), #50e050); color: #001018; box-shadow: 0 4px 20px #00c8ff2e; }
.praktyka-cta-btn:hover { filter: brightness(1.06); }
.praktyka-cta-podpis { font-size: 12px; color: var(--muted, #8888aa); margin-top: 9px; }

.practice-status { font-size: 12px; color: var(--muted, #8888aa); margin: 6px 0 12px; }
.practice-status.ready { color: #50e050; }
.practice-status.blok { color: #ffb454; font-weight: 700; font-size: 14px; }

/* ── Grupa praktyki (jedna lekcja) + bramka „dalej" ── */
.practice-grupa { scroll-margin-top: 90px; }
.practice-grupa.praktyka-flash { animation: praktykaFlash 1.2s ease; }
@keyframes praktykaFlash { 0%,100% { box-shadow: none; } }  /* [BAS-7] zdjeta zlota ramka po wykonaniu (prosba wlasciciela) */
.btn-lekcja.praktyka-zamkniete, .praktyka-zamkniete { opacity: .55; cursor: not-allowed; }
.btn-lekcja.praktyka-zamkniete::before { content: '🔒 '; }

.cwiczenie-auto { background: var(--bg2, #10102a); border: 1px solid var(--border, #2a2a4a); border-radius: 12px; padding: 16px 18px; margin: 14px 0; }
.cwa-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.cwa-num { color: var(--accent, #00c8ff); font-weight: 700; font-size: 1.02rem; }
.cwa-poziom { font-size: 11px; font-weight: 700; border-radius: 5px; padding: 1px 9px; background: var(--bg3, #181830); color: var(--accent, #00c8ff); border: 1px solid var(--border, #2a2a4a); }
.cwa-polecenie { white-space: pre-line; margin-bottom: 10px; font-size: 1.06rem; line-height: 1.7; }
.cwa-polecenie code { font-family: 'Courier New', monospace; }

.cwa-editor { width: 100%; min-height: 110px; background: #07071a; color: #e8e8f8; border: 1px solid var(--border, #2a2a4a); border-radius: 8px; padding: 12px 14px; font-family: 'Courier New', monospace; font-size: 16px; line-height: 1.65; resize: vertical; tab-size: 4; overflow: hidden; }
.cwa-editor:focus { outline: none; border-color: var(--accent, #00c8ff); }

/* [DYD-2] typ „luka" — kod zablokowany, uczeń wpisuje tylko okienka (bez zmazywania ____) */
.cwa-lukakod { background: #07071a; color: #e8e8f8; border: 1px solid var(--border, #2a2a4a); border-radius: 8px; padding: 12px 14px; font-family: 'Courier New', monospace; font-size: 16px; line-height: 2; white-space: pre-wrap; margin: 0; }
input.cwa-luka { width: 10ch; max-width: 100%; font-family: 'Courier New', monospace; font-size: 16px; background: var(--bg3, #181830); color: var(--accent2, #ffd700); border: 1px dashed var(--accent, #00c8ff); border-radius: 5px; padding: 3px 8px; margin: 0 2px; vertical-align: baseline; }
input.cwa-luka:focus { outline: none; border-style: solid; background: #0a0a24; }

/* [LIVE-RUN-1] kod tylko-do-odczytu (demo w treści lekcji) — wygląda jak blok kodu, nie jak pole do wpisywania */
pre.cwa-ro { background: #07071a; border: 1px solid var(--border, #2a2a4a); border-radius: 8px; padding: 12px 14px; margin: 0; overflow-x: auto; }
/* [LIVE-RUN-3] kontekst = kod z poprzedniego kroku: PRZYGASZONY, wizualnie „krok wcześniej" nad głównym blokiem. */
.cwa-kontekst { margin: 0 0 6px 0; opacity: .62; }
.cwa-kontekst-lbl { display: block; font-size: 12px; color: var(--muted, #8888aa); margin: 0 0 3px 2px; }
pre.cwa-ro-ktx { background: #050510; border-style: dashed; }
pre.cwa-ro > code.cwa-rokod { font-family: 'Courier New', monospace; font-size: 16px; line-height: 1.65; color: #e8e8f8; white-space: pre; background: none; padding: 0; border: none; text-shadow: none; }
/* [A4] Numerowany margines dema — kolumna numerów jako flex-sibling <pre> (sticky przy poziomym scrollu kodu). */
/* Numery: ta sama czcionka/rozmiar/line-height + padding-top co kod → kryją się co do linii. Odcięty inną barwą (gutter ≠ okno kodu). */
.cwa-ro-wrap { display: flex; align-items: stretch; margin: 12px 0 4px; }
.cwa-ro-wrap > pre.cwa-ro { flex: 1 1 auto; min-width: 0; margin: 0 !important; border-left: none; border-top-left-radius: 0; border-bottom-left-radius: 0; }   /* margin przeniesiony na wrap — inaczej margin-top pre pcha kod w dół względem guttera (offset) */
.cwa-gutter { flex: 0 0 auto; box-sizing: border-box; text-align: right; white-space: pre; user-select: none; -webkit-user-select: none;
  font-family: 'Courier New', monospace; font-size: 16px; line-height: 1.65; padding: 12px 8px 12px 10px;
  color: #5b5b7a; background: #050510; border: 1px solid var(--border, #2a2a4a); border-radius: 8px 0 0 8px; }

/* [DYD-2] typ „parsons" — potasowane linie + strzałki ↑/↓ (bez drag — telefon) */
.cwa-parsons { background: #07071a; border: 1px solid var(--border, #2a2a4a); border-radius: 8px; padding: 8px; }
.cwa-pline { display: flex; align-items: center; gap: 8px; background: var(--bg3, #181830); border: 1px solid var(--border, #2a2a4a); border-radius: 6px; padding: 7px 10px; margin: 5px 0; }
.cwa-pline code { flex: 1; font-family: 'Courier New', monospace; font-size: 16px; color: #e8e8f8; white-space: pre; overflow-x: auto; }
.cwa-pbtns { display: flex; gap: 6px; flex-shrink: 0; }
.cwa-pbtn { font-family: inherit; font-size: 17px; line-height: 1; padding: 9px 14px; border-radius: 8px; border: 1px solid var(--border, #2a2a4a); background: var(--bg2, #10102a); color: var(--text, #e0e0f0); cursor: pointer; }
.cwa-pbtn:hover { border-color: var(--accent, #00c8ff); color: var(--accent, #00c8ff); }

/* [A23] CodeMirror — edytor praktyki z kolorowaniem składni (zastępuje ukryty <textarea>; theme material-darker = kolory tokenów) */
.CodeMirror { height: auto !important; border: 1px solid var(--border, #2a2a4a); border-radius: 8px; font-family: 'Courier New', monospace; font-size: 16px; line-height: 1.5; }
.CodeMirror-scroll { height: auto !important; min-height: 90px; max-height: 65vh; overflow-y: auto; overflow-x: auto; }   /* rośnie z treścią (viewportMargin:Infinity); cap 65vh + scroll = patologiczny wklej 100k linii nie rozdmucha layoutu */
.CodeMirror.cm-s-material-darker, .CodeMirror.cm-s-material-darker .CodeMirror-gutters { background: #07071a; }   /* zbij tło theme do edytora kursu (wyższa specyficzność niż reguła theme) */
.CodeMirror-focused { border-color: var(--accent, #00c8ff); }
.CodeMirror-scroll { min-height: 90px; }
.cm-s-material-darker .CodeMirror-gutters { border-right: 1px solid var(--border, #2a2a4a); }
.cm-s-material-darker .CodeMirror-linenumber { color: #5a5a72; }
/* [UX] Kolory składni w stylu VS Code (Dark+) — zamiast czerwieni material-darker (prośba właściciela). Wyższa specyficzność (.CodeMirror.cm-s-…) bije theme z CDN. */
.CodeMirror.cm-s-material-darker .cm-keyword    { color: #569cd6; }   /* def import if for while return and or not — niebieski */
.CodeMirror.cm-s-material-darker .cm-builtin,
.CodeMirror.cm-s-material-darker .cm-def,
.CodeMirror.cm-s-material-darker .cm-property   { color: #dcdcaa; }   /* print/len/range + nazwy funkcji/metod — żółty */
.CodeMirror.cm-s-material-darker .cm-variable,
.CodeMirror.cm-s-material-darker .cm-variable-2 { color: #9cdcfe; }   /* zmienne — jasnoniebieski */
.CodeMirror.cm-s-material-darker .cm-string,
.CodeMirror.cm-s-material-darker .cm-string-2   { color: #ce9178; }   /* teksty — łososiowy */
.CodeMirror.cm-s-material-darker .cm-number     { color: #b5cea8; }   /* liczby — jasnozielony */
.CodeMirror.cm-s-material-darker .cm-comment    { color: #6a9955; }   /* komentarze — zielony */
.CodeMirror.cm-s-material-darker .cm-operator   { color: #d4d4d4; }   /* + - * / = — jasnoszary */
.CodeMirror.cm-s-material-darker .cm-atom,
.CodeMirror.cm-s-material-darker .cm-meta       { color: #569cd6; }   /* True/False/None — niebieski */
.CodeMirror.cm-s-material-darker .CodeMirror-cursor { border-left: 1px solid #aeafad; }
.CodeMirror.cm-s-material-darker .CodeMirror-selected { background: #264f78 !important; }
.cwa-btns { margin-top: 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cwa-btn { font-family: inherit; font-size: 16px; padding: 9px 18px; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; background: var(--accent, #00c8ff); color: #001018; }
.cwa-btn:disabled { opacity: .5; cursor: not-allowed; }
.cwa-btn.ghost { background: transparent; color: var(--muted, #8888aa); border: 1px solid var(--border, #2a2a4a); }
.cwa-btn.selfok { background: #50e050; color: #001a00; }
.cwa-btn.selfok:disabled { background: transparent; color: var(--muted, #8888aa); border: 1px solid var(--border, #2a2a4a); }

/* ── self-check (random): przykładowy wynik do porównania ── */
.cwa-przyklad { margin-top: 8px; background: #04121a; border: 1px dashed var(--border, #2a2a4a); border-radius: 8px; padding: 8px 12px; font-family: 'Courier New', monospace; font-size: 14.5px; color: #7fe0ff; white-space: pre-wrap; }
.cwa-przyklad .lbl { display: block; color: var(--muted, #8888aa); font-size: 11px; letter-spacing: .5px; margin-bottom: 3px; font-family: 'Segoe UI', Arial, sans-serif; }

.cwa-out, .cwa-exp, .cwa-przyklad-wyz { margin-top: 10px; display: none; background: #000; border: 1px solid var(--border, #2a2a4a); border-radius: 8px; padding: 10px 14px; font-family: 'Courier New', monospace; font-size: 16px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 360px; overflow: auto; }
.cwa-przyklad-wyz { color: #ffd77a; border-color: #4a3a1a; background: #14100a; }   /* [WYZWANIE] przykład wejście→wynik (żółto = „to tylko przykład") */
.cwa-out { color: #34d399; }
.cwa-exp { color: #7fe0ff; background: #04121a; }
.cwa-out .lbl, .cwa-exp .lbl { display: block; color: var(--muted, #8888aa); font-size: 11px; letter-spacing: .5px; margin-bottom: 4px; }

/* [DEBUGGER] panel krok-po-kroku (time-travel) */
.cwa-dbg { margin-top: 10px; }
.dbg-load { color: var(--muted, #8888aa); font-size: 14px; padding: 8px 2px; }
.dbg-head { font-size: 13.5px; color: #cdd6e4; margin-bottom: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dbg-wej { width: 62px; background: #04121a; border: 1px solid var(--border, #2a2a4a); color: #7fe0ff; border-radius: 5px; padding: 3px 7px; font-family: 'Courier New', monospace; font-size: 15px; }
.dbg-retrace { font-size: 12px; padding: 4px 10px; }
.dbg-body { display: flex; flex-direction: column; gap: 10px; }   /* kod na górze (pełna szerokość), okna pod spodem */
.dbg-code { width: 100%; background: #000; border: 1px solid var(--border, #2a2a4a); border-radius: 8px; padding: 8px 0; font-family: 'Courier New', monospace; font-size: 14px; line-height: 1.75; color: #c8d0e0; overflow: auto; max-height: 300px; }
.dbg-row { white-space: pre; padding: 0 12px; }
.dbg-row.cur { background: rgba(0, 200, 255, .14); border-left: 3px solid var(--accent, #00c8ff); padding-left: 9px; }
.dbg-lnno { color: #5a6274; user-select: none; }
.dbg-row.cur .dbg-lnno { color: var(--accent, #00c8ff); font-weight: 700; }
.dbg-side { width: 100%; display: flex; flex-direction: column; gap: 8px; }   /* pod kodem: zmienne, potem output */
.dbg-vars, .dbg-out { background: #04121a; border: 1px solid var(--border, #2a2a4a); border-radius: 8px; padding: 8px 10px; font-size: 13px; color: #cdd6e4; overflow-y: auto; }
.dbg-vars { max-height: 110px; }
.dbg-out { max-height: 150px; }   /* długi output scrolluje się TU — panel nie rośnie, ▶ nie ucieka */
.dbg-lbl { display: block; color: var(--muted, #8888aa); font-size: 11px; letter-spacing: .5px; margin-bottom: 5px; }
.dbg-chip { display: inline-block; background: #0a2233; border: 1px solid #1a4a5a; color: #7fe0ff; border-radius: 6px; padding: 2px 9px; margin: 2px 4px 2px 0; font-family: 'Courier New', monospace; font-size: 13.5px; }
.dbg-out code { color: #34d399; font-family: 'Courier New', monospace; white-space: pre-wrap; }
.dbg-ctrl { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.dbg-lic { font-family: 'Courier New', monospace; font-size: 13px; color: var(--muted, #8888aa); }
.cwa-wynik { margin-top: 10px; font-size: 16px; white-space: pre-wrap; display: none; padding: 10px 14px; border-radius: 8px; }
.cwa-wynik.ok  { display: block; background: #10301a; border: 1px solid #50e050; color: #bfffce; }
.cwa-wynik.err { display: block; background: #301015; border: 1px solid #ff4444; color: #ffd0d6; }
.cwa-wynik code { font-family: 'Courier New', monospace; background: #0008; padding: 1px 5px; border-radius: 4px; }
.cwa-rozw { display: none; margin-top: 10px; background: #07071a; border: 1px solid var(--border, #2a2a4a); border-radius: 8px; padding: 10px 14px; font-family: 'Courier New', monospace; font-size: 16px; white-space: pre-wrap; color: #cfcfe8; }
/* [BAS-5b] drugi poziom podpowiedzi (szkielet podejścia) */
.cwa-pod2 { margin-top: 10px; font-size: 14.5px; line-height: 1.6; background: #1a1605; border: 1px solid #6b5a1a; border-radius: 8px; padding: 10px 14px; color: #ffe9a8; white-space: pre-wrap; }
/* [BAS-5c] komunikat wysiłkowy po ≥3 próbach (normalizuje, nie zniechęca) */
.cwa-wysilek { margin-top: 10px; font-size: 14.5px; line-height: 1.6; background: #10182e; border: 1px solid #2a4a7a; border-radius: 8px; padding: 9px 13px; color: #bcd2f5; }

/* ── Sygnały sukcesu (więcej niż zielony) ── */
.cwiczenie-auto.done { box-shadow: none; }  /* [BAS-7] bez ramki/pierscienia po wykonaniu — wystarczy znaczek „zrobione" (prosba wlasciciela) */
.cwa-donemark { font-size: 12px; font-weight: 700; color: #50e050; }
.cwa-wynik.ok { animation: cwaPop .28s ease; }
@keyframes cwaPop { 0% { transform: scale(.97); } 55% { transform: scale(1.025); } 100% { transform: scale(1); } }

.practice-pasek { background: var(--bg2, #10102a); border: 1px solid var(--border, #2a2a4a); border-radius: 10px; padding: 11px 15px; margin: 12px 0 18px; font-size: 16px; font-weight: 700; color: var(--text, #e0e0f0); }
.practice-pasek .bar { height: 9px; background: var(--bg3, #181830); border-radius: 6px; margin-top: 9px; overflow: hidden; }
.practice-pasek .fill { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, #00c8ff, #50e050); transition: width .45s ease; }
.practice-pasek.complete { border-color: #50e050; }

/* ── Mapa ćwiczeń: które zaliczone (zielone) / które zostały (szare) ── */
.practice-mapa { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.practice-mapa .chip { width: 27px; height: 27px; display: flex; align-items: center; justify-content: center; font-family: inherit; font-size: 12px; font-weight: 700; border-radius: 7px; background: var(--bg3, #181830); color: var(--muted, #8888aa); border: 1px solid var(--border, #2a2a4a); cursor: pointer; transition: all .15s; }
.practice-mapa .chip:hover { border-color: var(--accent, #00c8ff); color: var(--accent, #00c8ff); }
.practice-mapa .chip.done { background: #10301a; color: #7fffa8; border-color: #50e050; }
.practice-mapa .chip.opt { border-style: dashed; }  /* Wyzwanie (opcjonalne) — nie blokuje przejścia dalej */

/* ── [A21] Lock-step: zamek w GÓRNEJ nawigacji (TYLKO wizual — klik leci, toast; NIGDY pointer-events:none!) ── */
.nav-modules .nav-modul-link.nav-zablokowany, .nav-modules .nav-sub.nav-zablokowany { opacity: .42; }
.nav-modules .nav-modul-link.nav-zablokowany::before { content: '🔒'; font-size: 9px; margin-right: 2px; vertical-align: 1px; }

/* ── Toast „zablokowane" ── */
.practice-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(16px); z-index: 9999; background: #1a1430; border: 1px solid #ffb45466; color: #f3f3ff; border-radius: 12px; padding: 12px 16px; font-size: 14px; font-weight: 600; box-shadow: 0 10px 34px #000a; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; max-width: 90vw; }
.practice-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.practice-toast-btn { margin-left: 8px; font-family: inherit; font-size: 13px; font-weight: 700; border: none; border-radius: 8px; padding: 6px 13px; cursor: pointer; background: var(--accent, #00c8ff); color: #06121f; }
.practice-toast-btn:hover { filter: brightness(1.08); }

/* ── Porównanie linia-po-linii (wynik częściowy) ── */
.cwa-diffrow { font-family: 'Courier New', monospace; font-size: 16px; line-height: 1.55; padding: 1px 0; white-space: pre-wrap; }
.cwa-diffrow.ok  { color: #7fffa8; }
.cwa-diffrow.bad { color: #ff9aa6; }

/* ═══════════ [BAS-6] PRZESKOK „⚡ Znam to" ═══════════ */
.chip-znam { margin-top: 11px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 13px; font-family: inherit; font-size: 12.5px; font-weight: 700; border-radius: 8px; cursor: pointer; background: transparent; color: var(--accent2, #ffd700); border: 1px dashed var(--accent2, #ffd700); transition: all .15s; }
.chip-znam:hover { background: rgba(255,215,0,.10); }
.przeskok-baner { background: rgba(255,215,0,.08); border: 1px solid var(--accent2, #ffd700); border-radius: 10px; padding: 11px 15px; margin: 4px 0 16px; font-size: 16px; line-height: 1.6; color: var(--text, #e0e0f0); scroll-margin-top: 90px; }   /* [BAS-6] zapas na sticky-nav przy scrollIntoView */
.tryb-przeskoku { outline: 2px dashed rgba(255,215,0,.35); outline-offset: 6px; border-radius: 12px; }

/* [INPUT] inline „Spróbuj sam" (ćwiczenia stdin) + pole stdin w piaskownicy */
.cwa-try { margin: 8px 0 4px; }
.cwa-try-lbl { display: block; font-size: 0.9rem; color: var(--muted, #8888aa); line-height: 1.5; margin-bottom: 6px; }
.cwa-try-lbl code { font-family: 'Courier New', monospace; }
.cwa-try-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cwa-try-inp { background: #07071a; color: #e8e8f8; border: 1px solid var(--border, #2a2a4a); border-radius: 6px; padding: 7px 10px; font-family: 'Courier New', monospace; font-size: 15px; max-width: 170px; }
.cwa-try-inp:focus, .cwa-try-stdin:focus { outline: none; border-color: var(--accent, #00c8ff); }
.cwa-try-stdin { width: 100%; background: #07071a; color: #e8e8f8; border: 1px solid var(--border, #2a2a4a); border-radius: 8px; padding: 9px 12px; font-family: 'Courier New', monospace; font-size: 15px; line-height: 1.5; resize: vertical; }
.cwa-try-run { padding: 7px 14px !important; white-space: nowrap; }
.cwa-try-out { margin-top: 7px; }

/* ═══════════════ [data-theme=light] CAPPUCCINO — widżety praktyki (kanon §2c/2d) ═══════════════ */
[data-theme="light"] .cwiczenie-auto { background:var(--k-pianka); border-color:var(--k-linia); box-shadow:2px 3px 0 rgba(46,36,28,.06); }
[data-theme="light"] .cwa-num { color:var(--k-espresso900); }
[data-theme="light"] .cwa-poziom { background:var(--k-latte); color:var(--k-espresso50); border-color:var(--k-linia); }
[data-theme="light"] .cwa-editor,[data-theme="light"] .cwa-try-inp,[data-theme="light"] .cwa-try-stdin { background:var(--k-kod-bg,var(--k-mleko)); color:var(--k-espresso); border-color:var(--k-linia); }
[data-theme="light"] .cwa-editor:focus,[data-theme="light"] .cwa-try-inp:focus,[data-theme="light"] .cwa-try-stdin:focus { border-color:var(--k-terakota); }
[data-theme="light"] .cwa-lukakod,[data-theme="light"] pre.cwa-ro,[data-theme="light"] .cwa-parsons { background:var(--k-kod-bg,var(--k-mleko)); color:var(--k-espresso); border-color:var(--k-linia); font-weight:600; }
[data-theme="light"] pre.cwa-ro-ktx { background:var(--k-papier); }
[data-theme="light"] pre.cwa-ro > code.cwa-rokod,[data-theme="light"] .cwa-pline code { color:var(--k-espresso); }
[data-theme="light"] .cwa-gutter { background:var(--k-latte); color:var(--k-kod-num); border-color:var(--k-linia); }   /* [A4] gutter dema = gutter edytora (latte + numery terakota + kreska) */
[data-theme="light"] input.cwa-luka { background:var(--k-wanilia-bg); color:var(--k-ochra); border-color:var(--k-terakota); }
[data-theme="light"] input.cwa-luka:focus { background:#F2E5B8; }
[data-theme="light"] .cwa-pline { background:var(--k-kod-bg); border-color:var(--k-linia); }
[data-theme="light"] .cwa-pbtn { background:var(--k-pianka); color:var(--k-espresso); border-color:var(--k-linia); }
[data-theme="light"] .cwa-pbtn:hover { border-color:var(--k-terakota-tx); color:var(--k-terakota-tx); }
[data-theme="light"] .cwa-btn { background:var(--k-szalwia-solid); color:var(--k-mleko); }
[data-theme="light"] .cwa-btn.ghost { background:transparent; color:var(--k-espresso50); border-color:var(--k-linia); }
[data-theme="light"] .cwa-btn.selfok { background:var(--k-szalwia-solid); color:var(--k-mleko); }
[data-theme="light"] .praktyka-cta-btn { background:var(--k-szalwia-solid); color:var(--k-mleko); }
[data-theme="light"] .cwa-out,[data-theme="light"] .cwa-exp { background:var(--k-pianka); border-color:var(--k-linia); }
[data-theme="light"] .cwa-out { color:var(--k-espresso900); font-weight:600; }   /* wynik = najciemniejszy atrament + bold (cienki monospace na kremie meczyl wzrok) */
[data-theme="light"] .cwa-exp { color:var(--k-espresso900); font-weight:600; }
[data-theme="light"] .cwa-out .lbl,[data-theme="light"] .cwa-exp .lbl { color:var(--k-espresso50); }
[data-theme="light"] .cwa-przyklad { background:var(--k-latte); color:var(--k-espresso); border-color:var(--k-linia); }
[data-theme="light"] .cwa-przyklad .lbl { color:var(--k-espresso50); }
[data-theme="light"] .cwa-przyklad-wyz { background:var(--k-wanilia-bg); color:var(--k-wanilia-tx); border-color:var(--k-wanilia-br); }
[data-theme="light"] .cwa-wynik.ok { background:var(--k-szalwia-bg); border-color:var(--k-szalwia-tx); color:var(--k-szalwia-tx); }
[data-theme="light"] .cwa-wynik.err { background:var(--k-roz-bg); border-color:var(--k-terakota); color:var(--k-roz-tx); }
[data-theme="light"] .cwa-wynik code { background:rgba(46,36,28,.08); }
[data-theme="light"] .cwa-rozw { background:var(--k-mleko); color:var(--k-espresso); border-color:var(--k-linia); }
[data-theme="light"] .cwa-pod2 { background:var(--k-wanilia-bg); border-color:var(--k-wanilia-br); color:var(--k-wanilia-tx); }
[data-theme="light"] .cwa-wysilek { background:var(--k-latte); border-color:var(--k-linia); color:var(--k-espresso); }
[data-theme="light"] .cwa-diffrow.ok { color:var(--k-szalwia-tx); }
[data-theme="light"] .cwa-diffrow.bad { color:var(--k-roz-tx); }
[data-theme="light"] .cwa-donemark { color:var(--k-szalwia-tx); }
[data-theme="light"] .cwa-fb-txt,[data-theme="light"] .cwa-fb-send { background:var(--k-mleko); color:var(--k-espresso); border-color:var(--k-linia); }
[data-theme="light"] .cwa-fb-thx { color:var(--k-szalwia-tx); }
[data-theme="light"] .practice-pasek { background:var(--k-pianka); border-color:var(--k-linia); color:var(--k-espresso); }
[data-theme="light"] .practice-pasek .bar { background:var(--k-latte); }
[data-theme="light"] .practice-pasek .fill { background:var(--k-szalwia-solid); }
[data-theme="light"] .practice-pasek.complete { border-color:var(--k-szalwia-br); }
[data-theme="light"] .practice-mapa .chip { background:var(--k-latte); color:var(--k-espresso50); border-color:var(--k-linia); }
[data-theme="light"] .practice-mapa .chip:hover { border-color:var(--k-terakota-tx); color:var(--k-terakota-tx); }
[data-theme="light"] .practice-mapa .chip.done { background:var(--k-szalwia-bg); color:var(--k-szalwia-tx); border-color:var(--k-szalwia-tx); }
[data-theme="light"] .practice-status.ready { color:var(--k-szalwia-tx); }
[data-theme="light"] .practice-status.blok { color:var(--k-ochra); }
[data-theme="light"] .lekcja-tab-btn { background:var(--k-latte); border-color:var(--k-linia); color:var(--k-espresso); font-weight:700; }
[data-theme="light"] .lekcja-tab-btn.aktywny { background:var(--k-pianka); color:var(--k-espresso); border-color:var(--k-espresso50); border-bottom-color:var(--k-pianka); }
[data-theme="light"] .lekcja-tab-btn[data-tabcel$="-praktyka"] { background:var(--k-szalwia-bg); border-color:var(--k-szalwia-br); color:var(--k-espresso); }
[data-theme="light"] .tab-licznik { background:var(--k-szalwia-bg); border-color:var(--k-szalwia-br); color:var(--k-espresso); }
[data-theme="light"] .practice-toast { background:var(--k-pianka); border-color:var(--k-terakota); color:var(--k-espresso); }
[data-theme="light"] .practice-toast-btn { background:var(--k-terakota); color:var(--k-mleko); }
[data-theme="light"] .chip-znam { color:var(--k-ochra); border-color:var(--k-ochra); }
[data-theme="light"] .przeskok-baner { background:var(--k-wanilia-bg); border-color:var(--k-wanilia-br); color:var(--k-wanilia-tx); }
[data-theme="light"] .dbg-code,[data-theme="light"] .dbg-vars,[data-theme="light"] .dbg-out,[data-theme="light"] .dbg-wej { background:var(--k-mleko); color:var(--k-espresso); border-color:var(--k-linia); }
[data-theme="light"] .dbg-head { color:var(--k-espresso); }
[data-theme="light"] .dbg-lnno { color:var(--k-espresso50); }
[data-theme="light"] .dbg-chip { background:var(--k-latte); color:var(--k-espresso); border-color:var(--k-linia); }
[data-theme="light"] .dbg-row.cur { background:rgba(188,91,60,.10); border-left-color:var(--k-terakota); }
[data-theme="light"] .dbg-row.cur .dbg-lnno { color:var(--k-terakota-tx); }
[data-theme="light"] .dbg-out code { color:var(--k-szalwia-tx); }
[data-theme="light"] .CodeMirror.cm-s-material-darker,[data-theme="light"] .CodeMirror.cm-s-material-darker .CodeMirror-gutters { background:var(--k-kod-bg) !important; color:var(--k-espresso); }
[data-theme="light"] .cm-s-material-darker .CodeMirror-linenumber { color:var(--k-espresso50); }
/* numeracja linii ODDZIELONA od kodu: gutter inny odcien (latte) + kreska — koniec zlewania sie z kodem */
[data-theme="light"] .CodeMirror.cm-s-material-darker .CodeMirror-gutters { background:var(--k-latte) !important; border-right:1px solid var(--k-linia) !important; }
[data-theme="light"] .CodeMirror.cm-s-material-darker .cm-keyword,[data-theme="light"] .CodeMirror.cm-s-material-darker .cm-atom,[data-theme="light"] .CodeMirror.cm-s-material-darker .cm-meta { color:var(--k-kod-keyword); }
[data-theme="light"] .CodeMirror.cm-s-material-darker .cm-builtin,[data-theme="light"] .CodeMirror.cm-s-material-darker .cm-def,[data-theme="light"] .CodeMirror.cm-s-material-darker .cm-property { color:var(--k-kod-fn); }
[data-theme="light"] .CodeMirror.cm-s-material-darker .cm-variable,[data-theme="light"] .CodeMirror.cm-s-material-darker .cm-variable-2 { color:var(--k-espresso); }
[data-theme="light"] .CodeMirror.cm-s-material-darker .cm-string,[data-theme="light"] .CodeMirror.cm-s-material-darker .cm-string-2 { color:var(--k-kod-string); }
[data-theme="light"] .CodeMirror.cm-s-material-darker .cm-number { color:var(--k-kod-num); }
[data-theme="light"] .CodeMirror.cm-s-material-darker .cm-comment { color:var(--k-kod-comment); }
[data-theme="light"] .CodeMirror.cm-s-material-darker .cm-operator { color:var(--k-kod-op); }
[data-theme="light"] .CodeMirror.cm-s-material-darker .CodeMirror-cursor { border-left-color:var(--k-espresso); }
[data-theme="light"] .CodeMirror.cm-s-material-darker .CodeMirror-selected { background:#E7D9BE !important; }