:root{--ink:#17202a;--blue:#0a4f91;--green:#157347;--cream:#f7f4ed;--focus:#ffbf47;--size:18px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);font-size:var(--size);line-height:1.6;background:#fbfcfd}.skip-link{position:absolute;left:-9999px;top:0}.skip-link:focus{left:1rem;top:1rem;background:#fff;padding:1rem;z-index:9999}.app-header{background:#fff}.brand{font-weight:800;color:var(--blue);font-size:1.25rem}.hero{background:linear-gradient(135deg,#eaf4ff,#f7f4ed);border:2px solid #cadeef}.hero h1{font-size:clamp(2rem,5vw,3.6rem);line-height:1.1;max-width:16ch}.eyebrow{color:var(--blue);font-weight:800;text-transform:uppercase;letter-spacing:.04em}.btn{font-weight:700;min-height:48px}.btn-nav{background:#eef5fb;color:#123e66}.view{display:none}.view.active{display:block}.info-card,.lesson,.survey-card,.help-card{height:100%;background:#fff;border:2px solid #d8e0e7;border-radius:1rem;padding:1.4rem;box-shadow:0 3px 10px #0a274014}.info-card h2,.lesson h2,.help-card h2{font-size:1.35rem}.icon{font-size:2.2rem}.scenario-card{height:100%;border:2px solid #cad6df;border-radius:1rem;padding:1.25rem;background:#fff}.scenario-card .tag{display:inline-block;background:#e8f3ff;color:#074a83;padding:.2rem .6rem;border-radius:999px;font-weight:700}.phone{max-width:720px;margin:auto;border:4px solid #263746;border-radius:1.5rem;padding:1.3rem;background:#fff}.message{background:#eef2f5;border-radius:1rem;padding:1.2rem;font-size:1.15rem}.option{display:block;width:100%;text-align:left;margin:.7rem 0;padding:1rem;border:2px solid #6b7c8b;border-radius:.8rem;background:#fff;font-weight:700}.option:hover,.option:focus{background:#edf6ff}.feedback{padding:1.2rem;border-radius:1rem;margin-top:1rem}.feedback.safe{background:#e5f6eb;border:2px solid #198754}.feedback.risk{background:#fff1d6;border:2px solid #9a6700}fieldset{border:0;margin:0 0 1.5rem;padding:0}legend{font-size:1.2rem;font-weight:800}fieldset label{display:block;padding:.5rem 0}.stats{white-space:pre-wrap;background:#eef2f5;padding:1rem;border-radius:.8rem}.exercise-banner{font-size:1.05rem}a:focus,button:focus,input:focus,select:focus{outline:4px solid var(--focus)!important;outline-offset:3px}.large-text{--size:22px}.high-contrast{--ink:#fff;background:#000;color:#fff}.high-contrast .app-header,.high-contrast nav,.high-contrast .hero,.high-contrast .info-card,.high-contrast .lesson,.high-contrast .scenario-card,.high-contrast .phone,.high-contrast .survey-card,.high-contrast .help-card,.high-contrast footer{background:#000!important;color:#fff;border-color:#fff}.high-contrast a{color:#7fc8ff}.high-contrast .btn-nav,.high-contrast .option{background:#000;color:#fff;border-color:#fff}@media(max-width:576px){.hero{padding:1.2rem!important}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* ============================================================
   ETAP 2 — Redesign "przyjazny senior + internet lat 2000"
   ------------------------------------------------------------
   ZASADA BEZPIECZEŃSTWA ZMIANY: każdy poniższy selektor został
   sprawdzony (patrz audyt) i NIE występuje wewnątrz sekcji
   #glosowe (Ćwiczenia głosowe). Celowo NIE dotykam tu klas
   współdzielonych z tą sekcją: .btn, .btn-success, .eyebrow,
   .lead, .view, .mt-4 — żeby mieć 100% pewności, że wygląd
   modułu głosowego pozostaje identyczny.
   Kontrast kolorów: patrz komentarze przy każdym elemencie —
   wszystkie nowe kombinacje kolor/tło sprawdzone ręcznie wg
   wzoru WCAG (relatywna luminancja), próg minimum AA (4.5:1).
   ============================================================ */

/* Pasek-akcent nad nagłówkami sekcji — nawiązanie do identyfikacji
   wizualnej poradnika NASK (żółto-granatowe belki). Czysto
   dekoracyjne (aria-hidden w HTML), nie wpływa na treść ani na
   czytniki ekranu. */
.retro-bar{display:flex;flex-direction:column;gap:.3rem;width:130px;margin:0 0 1rem}
.retro-bar span{display:block;height:9px;border-radius:5px}
.retro-bar span:first-child{background:var(--blue);width:100%}
.retro-bar span:last-child{background:white;width:62%}
.high-contrast .retro-bar span:first-child{background:#fff}
.high-contrast .retro-bar span:last-child{background:#ffd400}

/* Plakietka "NOWOŚĆ" — do użycia przy nowych modułach (Etap 3/4).
   Kontrast tła #f0c94a / tekstu #4a3600 ≈ 7,0:1 (poziom AAA). */
.badge-new{display:inline-block;background:#f0c94a;color:#4a3600;font-weight:800;font-size:.85rem;padding:.2rem .7rem;border-radius:999px;margin-left:.6rem;vertical-align:middle;white-space:nowrap}
.high-contrast .badge-new{background:#ffd400;color:#000}

/* Przyciski "3D" w stylu przycisków systemowych sprzed lat —
   wypukła krawędź (offset shadow) + lekki ruch przy kliknięciu.
   Kolory tekstu/tła NIE są tu zmieniane (dziedziczą po Bootstrapie
   lub istniejących regułach), więc kontrast tekstu jest identyczny
   jak wcześniej — zmienia się wyłącznie obramowanie i cień.
   Zakres (żaden nie występuje w #glosowe): przyciski ustawień
   widoku, nawigacja główna, CTA w hero, akcje przy poradniku NASK,
   przycisk ankiety, przyciski panelu admina, przyciski scenariuszy. */
#fontBtn,#contrastBtn,
.btn-nav,
.hero-button,
.guide-actions .btn,
#surveyForm .btn,
#admin .btn,
.start-scenario,
#backScenarios{
  border:3px solid rgba(10,39,64,.65);
  border-radius:.9rem;
  box-shadow:0 4px 0 rgba(10,39,64,.28),0 7px 14px rgba(10,39,64,.14);
  transition:transform .08s ease,box-shadow .08s ease;
}
#fontBtn:hover,#contrastBtn:hover,
.btn-nav:hover,
.hero-button:hover,
.guide-actions .btn:hover,
#surveyForm .btn:hover,
#admin .btn:hover,
.start-scenario:hover,
#backScenarios:hover{transform:translateY(-2px)}
#fontBtn:active,#contrastBtn:active,
.btn-nav:active,
.hero-button:active,
.guide-actions .btn:active,
#surveyForm .btn:active,
#admin .btn:active,
.start-scenario:active,
#backScenarios:active{
  transform:translateY(3px);
  box-shadow:0 1px 0 rgba(10,39,64,.28),0 2px 6px rgba(10,39,64,.14);
}
.high-contrast #fontBtn,.high-contrast #contrastBtn,
.high-contrast .btn-nav,
.high-contrast .hero-button,
.high-contrast .guide-actions .btn,
.high-contrast #surveyForm .btn,
.high-contrast #admin .btn,
.high-contrast .start-scenario,
.high-contrast #backScenarios{
  box-shadow:0 4px 0 #fff,0 7px 14px rgba(255,255,255,.2)!important;
  border-color:#fff!important;
}

/* Odpowiedzi w scenariuszu (.option) — ten sam język wizualny,
   dostosowany do pełnej szerokości przycisku listowego. */
.option{border-width:3px;box-shadow:0 3px 0 rgba(10,39,64,.18)}
.option:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(10,39,64,.18)}
.high-contrast .option{box-shadow:0 3px 0 #fff}

/* Karty i panele — grubsze, kolorowe obramowanie + przesunięty
   cień (zamiast samego rozmycia) w duchu "pudełkowych" stron
   sprzed lat. Żadna z tych klas nie występuje w #glosowe. */
.info-card,.lesson,.survey-card,.help-card,.scenario-card{
  border-width:3px;
  box-shadow:0 5px 0 #d8e0e7,0 8px 16px #0a274014;
}
.guide-card{box-shadow:0 5px 0 #cadeef,0 8px 16px #0a274014}
.high-contrast .info-card,.high-contrast .lesson,.high-contrast .survey-card,
.high-contrast .help-card,.high-contrast .scenario-card,.high-contrast .guide-card{
  box-shadow:0 5px 0 #fff,0 8px 16px rgba(255,255,255,.12)!important;
}

/* Etap 5 — statystyki na stronie startowej (dane CERT Polska 2025).
   Reużywam .info-card (już ma retro-obramowanie z Etapu 2),
   dodaję tylko wnętrze: dużą liczbę i drobny podpis źródła. */
.stat-number{font-size:2.6rem;font-weight:800;color:var(--blue);margin:0 0 .3rem;line-height:1}
.stat-source{font-size:.85rem;color:#55606b;margin-top:.5rem;margin-bottom:0}
.high-contrast .stat-number{color:#7fc8ff}
.high-contrast .stat-source{color:#dcdcdc}

/* Etap 6 — stopka: finansowanie i wykonawca. Klasy nowe,
   nieużywane nigdzie indziej w aplikacji — zero ryzyka konfliktu. */
.footer-funding{display:flex;flex-wrap:wrap;gap:2rem;justify-content:center;text-align:center}
.footer-funding-item{display:flex;flex-direction:column;align-items:center;gap:.5rem;max-width:260px}
.footer-logo{max-height:56px;max-width:200px;width:auto;object-fit:contain}
.footer-funding-text{font-size:.9rem;color:#55606b;margin:0;line-height:1.4}
.high-contrast .footer-funding-text{color:#dcdcdc}
@media(max-width:576px){.footer-funding{gap:1.25rem}}

/* Etap 9 — Symulacja phishing: wizualizacja "konsoli" pod formularzem.
   Kolory dobrane i sprawdzone pod WCAG (patrz notatka deweloperska):
   tytuł 10,49:1, etykiety 7,16:1, wartości 6,96:1, obramowanie 3,8:1
   (próg non-text WCAG 1.4.11 = 3:1). Wszystkie klasy nowe i unikalne —
   zero ryzyka konfliktu z #glosowe. */
.phishing-console{
  background:#1e2530;
  color:#e8edf2;
  border:3px solid #6b8099;
  border-radius:1rem;
  padding:1.4rem;
  font-family:"Courier New",monospace;
  box-shadow:0 5px 0 #6b8099,0 8px 16px #0a274024;
}
.phishing-console p{margin:.4rem 0}
.phishing-console-title{color:#ffce6b;font-weight:800;font-family:system-ui,sans-serif}
.phishing-console-label{color:#9fb3c8}
.phishing-console-value{color:#ff8f7d;font-weight:700}
#simulatePhishingBtn,#phishingDemoForm .btn{
  border:3px solid rgba(10,39,64,.65);
  border-radius:.9rem;
  box-shadow:0 4px 0 rgba(10,39,64,.28),0 7px 14px rgba(10,39,64,.14);
  transition:transform .08s ease,box-shadow .08s ease;
}
#simulatePhishingBtn:hover,#phishingDemoForm .btn:hover{transform:translateY(-2px)}
#simulatePhishingBtn:active,#phishingDemoForm .btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(10,39,64,.28),0 2px 6px rgba(10,39,64,.14)}
.high-contrast .phishing-console{background:#000;border-color:#fff;box-shadow:0 5px 0 #fff,0 8px 16px rgba(255,255,255,.12)!important}
.high-contrast .phishing-console-title{color:#ffd400}
.high-contrast .phishing-console-label{color:#dcdcdc}
.high-contrast .phishing-console-value{color:#ff9d8a}
.high-contrast #simulatePhishingBtn,.high-contrast #phishingDemoForm .btn{box-shadow:0 4px 0 #fff,0 7px 14px rgba(255,255,255,.2)!important;border-color:#fff!important}

/* Ćwiczenia głosowe (#glosowe) — jedyna świadoma zmiana w tej sekcji,
   wykonana na wyraźną prośbę: domyślnie widget ElevenLabs ustawia sobie
   position:fixed i wyświetla się jako pływający "bąbelek" w rogu całego
   ekranu, niezależnie od miejsca osadzenia w HTML. Poniższa reguła
   nadpisuje to z zewnątrz (dokumentacja ElevenLabs wprost pokazuje, że
   pozycjonowanie widgetu jest nadpisywalne z poziomu strony), żeby
   widget zostawał w normalnym układzie strony — w karcie, pod
   przyciskiem "Rozpocznij rozmowę", dokładnie tam, gdzie go osadzono. */
/* Ćwiczenia głosowe (#glosowe) — jedyna świadoma zmiana w tej sekcji,
   wykonana na wyraźną prośbę: zamiast pojedynczego przycisku od razu
   pokazującego widget (który domyślnie "uciekał" w pływający róg
   ekranu i był za mały), karta ma teraz zwijany panel — mały podgląd
   z przyciskiem "Rozpocznij ćwiczenie", który po kliknięciu rozwija
   się do pełnego, czytelnego rozmiaru z widgetem ElevenLabs w środku,
   i "Zwiń ćwiczenie", żeby wrócić do widoku karty. */
.voice-panel{
  grid-column:1/-1;
  height:160px;
  overflow:hidden;
  border:3px solid #b7d8c5;
  border-radius:1rem;
  background:#f4faf6;
  transition:height .45s ease,border-color .3s ease,box-shadow .3s ease;
}
.voice-panel.is-active{
  height:min(680px,80vh);
  border-color:#157347;
  background:#fff;
  box-shadow:0 5px 0 #157347,0 8px 16px #0a274014;
}
.voice-panel-intro{
  min-height:112px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.1rem 1.3rem;
}
.voice-panel.is-active .voice-panel-intro{display:none}
.voice-panel-hint{margin:0;color:#55606b;font-size:.95rem;max-width:360px}
.voice-panel-content{display:none;height:100%;min-height:0;padding:1rem;flex-direction:column;gap:.75rem}
.voice-panel.is-active .voice-panel-content{display:flex}
elevenlabs-convai.voice-widget{position:static!important;inset:auto!important;display:block;width:100%;flex:1 1 auto;min-height:0}
.voice-panel-close{align-self:center}
.high-contrast .voice-panel{background:#000;border-color:#fff}
.high-contrast .voice-panel.is-active{box-shadow:0 5px 0 #fff,0 8px 16px rgba(255,255,255,.12)!important;border-color:#fff}
.high-contrast .voice-panel-hint{color:#dcdcdc}
@media(max-width:640px){
  .voice-panel-intro{flex-direction:column;align-items:stretch;justify-content:center}
  .voice-panel-start{width:100%}
  .voice-panel.is-active{height:min(680px,84vh)}
}
@media(prefers-reduced-motion:reduce){.voice-panel{transition:none}}

/* Poniżej w tym pliku: funkcje głosowe (ElevenLabs — czytanie na
   głos, oraz Ćwiczenia głosowe #glosowe). Poza zakresem tego i
   poprzednich etapów — celowo nienaruszone. */
/* ElevenLabs — czytanie na głos */
.speak-btn{display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;padding:.7rem 1.2rem;min-height:48px;border:2px solid var(--blue);border-radius:.8rem;background:#eaf4ff;color:var(--blue);font-weight:700;font-size:1.05rem;cursor:pointer}
.speak-btn:hover,.speak-btn:focus{background:#d8ebfb}
.speak-btn.speaking{background:var(--blue);color:#fff}
.lesson .speak-btn{margin-top:auto}
.lesson{display:flex;flex-direction:column}
.lesson ul{flex:1}

/* Grafiki w stylu programów edukacyjnych lat 2000 */
.hero-img{display:block;width:100%;max-width:520px;border:3px solid var(--blue);border-radius:1.2rem;box-shadow:0 4px 0 var(--blue),0 8px 18px #0a274026;margin-bottom:1.5rem}
.icon-img{width:110px;height:110px;object-fit:cover;border-radius:50%;border:3px solid #f0c94a;margin-bottom:.6rem;box-shadow:0 3px 0 #d9ae2e}


/* Hero: obraz po lewej, tytuł i tekst po prawej */
.hero-main {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero-visual,
.hero-content {
  min-width: 0;
}
.hero-content .eyebrow {
  margin: 0 0 0.75rem;
}
.hero-content h1 {
  max-width: 14ch;
  margin-bottom: 1.25rem;
}
.hero-content .lead {
  max-width: 640px;
  margin-bottom: 0;
  font-size: 1.2rem;
}
.hero-button {
  margin-top: 1.5rem;
  min-height: 58px;
  padding: 0.9rem 1.4rem;
}
.hero-main .hero-img {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin: 0;
  object-fit: cover;
}
@media (max-width: 900px) {
  .hero-main {
    grid-template-columns: minmax(240px, 0.85fr) minmax(300px, 1.15fr);
    gap: 1.75rem;
  }
  .hero-content h1 {
    font-size: clamp(2rem, 5vw, 3rem);
  }
}
@media (max-width: 700px) {
  .hero-main {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .hero-main .hero-img {
    max-width: 100%;
    margin-inline: auto;
  }
  .hero-content h1 {
    max-width: none;
  }
  .hero-button {
    display: block;
    width: 100%;
    text-align: center;
  }
}


/* Polecany poradnik NASK */
.guide-card{display:grid;grid-template-columns:minmax(230px,.75fr) minmax(360px,1.25fr);gap:1.5rem;align-items:stretch;padding:1.4rem;background:#fff;border:2px solid #cadeef;border-radius:1rem;box-shadow:0 3px 10px #0a274014}
.guide-thumb{display:flex;flex-direction:column;justify-content:center;min-height:220px;padding:1.4rem;color:#fff;text-decoration:none;background:linear-gradient(145deg,#0a4f91,#157347);border-radius:1rem}
.guide-thumb:hover,.guide-thumb:focus{color:#fff;text-decoration:underline}.guide-thumb strong{margin:1rem 0 .4rem;font-size:1.4rem;line-height:1.25}.guide-thumb small{color:#fff;font-weight:700}.guide-badge{align-self:flex-start;padding:.25rem .65rem;color:#123e66;background:#fff;border-radius:999px;font-weight:800}.guide-shield{margin-top:1rem;font-size:3rem;line-height:1}.guide-copy{align-self:center;min-width:0}.guide-copy h2{font-size:clamp(1.45rem,3vw,2rem)}.guide-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem}.high-contrast .guide-card,.high-contrast .guide-thumb{color:#fff;background:#000;border-color:#fff}
@media(max-width:800px){.guide-card{grid-template-columns:1fr}.guide-thumb{min-height:180px}}
@media(max-width:576px){.guide-card{padding:1rem}.guide-actions{display:grid;grid-template-columns:1fr}.guide-actions .btn{width:100%}}


/* ============================================================
   Etap 10 — Aktualności, kafle tematyczne, przycisk zgłaszania.
   ZASADA BEZPIECZEŃSTWA ZMIANY: żaden z poniższych selektorów
   nie występuje wewnątrz sekcji #glosowe (Ćwiczenia głosowe) —
   moduł głosowy pozostaje wizualnie i funkcjonalnie nietknięty.
   Kontrast sprawdzony ręcznie wg WCAG (próg AA = 4.5:1 dla tekstu,
   3:1 dla elementów graficznych/non-text).
   ============================================================ */

/* Przycisk "Zgłoś oszustwo" w nagłówku — kolor #b3261e / biały
   tekst ≈ 6,3:1 (AA). Celowo odróżniony kolorystycznie od reszty
   interfejsu, żeby był natychmiast rozpoznawalny w sytuacji stresowej. */
.btn-report{
  background:#b3261e;color:#fff;border:3px solid #7a1a14;
  border-radius:.9rem;font-weight:800;
  box-shadow:0 4px 0 #7a1a14,0 7px 14px rgba(122,26,20,.25);
  transition:transform .08s ease,box-shadow .08s ease;
}
.btn-report:hover,.btn-report:focus{background:#96201a;color:#fff;transform:translateY(-2px)}
.btn-report:active{transform:translateY(3px);box-shadow:0 1px 0 #7a1a14,0 2px 6px rgba(122,26,20,.2)}
.high-contrast .btn-report{background:#ff5c4d;color:#000;border-color:#fff;box-shadow:0 4px 0 #fff,0 7px 14px rgba(255,255,255,.2)!important}

/* Ten sam przycisk w pasku nawigacji — spójny z istniejącym
   wzorem .btn-bank-nav, ale w kolorze ostrzegawczym. */
.btn-report-nav{background:#b3261e;color:#fff;border:2px solid #b3261e;font-weight:800;border-radius:.5rem;padding:.6rem 1rem;text-decoration:none;display:inline-flex;align-items:center;min-height:48px}
.btn-report-nav:hover,.btn-report-nav:focus{background:#96201a;color:#fff}
.high-contrast .btn-report-nav{background:#000;color:#ff5c4d;border-color:#ff5c4d}

/* Sekcja "Aktualności" — karty z datą, tytułem i krótkim opisem.
   Treść jest uzupełniana ręcznie w HTML do czasu wdrożenia CMS. */
.news-section{margin-bottom:2rem}
.news-header h2{margin-bottom:.25rem}
.news-sub{color:#55606b;margin-bottom:1.1rem}
.news-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem}
.news-card{background:#fff;border:3px solid #d8e0e7;border-radius:1rem;padding:1.3rem;box-shadow:0 5px 0 #d8e0e7,0 8px 16px #0a274014;display:flex;flex-direction:column}
.news-date{font-weight:800;color:var(--blue);text-transform:uppercase;letter-spacing:.03em;font-size:.85rem;margin:0 0 .5rem}
.news-card h3{font-size:1.2rem;margin:0 0 .5rem}
.news-card p:not(.news-date){flex:1;margin-bottom:.75rem}
.news-link{font-weight:800;color:var(--blue);text-decoration:none}
.news-link:hover,.news-link:focus{text-decoration:underline}
.high-contrast .news-card{background:#000;color:#fff;border-color:#fff;box-shadow:0 5px 0 #fff,0 8px 16px rgba(255,255,255,.12)!important}
.high-contrast .news-date,.high-contrast .news-link{color:#7fc8ff}

/* Kafle tematyczne — duża, łatwa do trafienia nawigacja po stronie,
   wzorowana na układzie kategorii z wiedza.cert.pl. */
.topics-section p{color:#55606b}
.topics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem;margin-top:1.25rem}
.topic-tile{display:block;background:#fff;border:3px solid #cad6df;border-radius:1rem;padding:1.4rem;text-decoration:none;color:var(--ink);box-shadow:0 5px 0 #cad6df,0 8px 16px #0a274014;transition:transform .08s ease,box-shadow .08s ease;min-height:100%}
.topic-tile:hover,.topic-tile:focus{transform:translateY(-3px);color:var(--ink);text-decoration:none;box-shadow:0 7px 0 #cad6df,0 10px 18px #0a274020}
.topic-tile:active{transform:translateY(2px)}
.topic-icon{font-size:2.2rem;display:block;margin-bottom:.6rem}
.topic-tile h3{font-size:1.25rem;margin:0 0 .4rem;color:var(--blue)}
.topic-tile p{margin:0;color:#3c4a58}
.topic-tile-report{border-color:#e6b3ae;background:#fdf3f2}
.topic-tile-report h3{color:#b3261e}
.topic-tile-report:hover,.topic-tile-report:focus{box-shadow:0 7px 0 #e6b3ae,0 10px 18px #0a274020}
.high-contrast .topic-tile{background:#000;color:#fff;border-color:#fff;box-shadow:0 5px 0 #fff,0 8px 16px rgba(255,255,255,.12)!important}
.high-contrast .topic-tile h3{color:#7fc8ff}
.high-contrast .topic-tile p{color:#fff}
.high-contrast .topic-tile-report{background:#000}
.high-contrast .topic-tile-report h3{color:#ff5c4d}
@media(max-width:576px){.news-grid,.topics-grid{grid-template-columns:1fr}}

/* Ćwiczenia głosowe: skalowalna lista kart agentów */
.btn-bank-nav{background:#157347;color:#fff;border:2px solid #157347;font-weight:800}
.btn-bank-nav:hover,.btn-bank-nav:focus{background:#0f5c37;color:#fff}
.voice-agent-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.25rem;margin-top:1.5rem}
.voice-agent-card{display:grid;grid-template-columns:76px 1fr;gap:1rem;align-items:start;padding:1.4rem;background:#fff;border:2px solid #b7d8c5;border-radius:1rem;box-shadow:0 3px 10px #0a274014}
.voice-agent-icon{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:#157347;color:#fff;font-size:2.2rem}
.voice-agent-copy{min-width:0}.voice-agent-copy h2{margin:.35rem 0;font-size:1.55rem}.voice-agent-tag{display:inline-block;padding:.2rem .65rem;border-radius:999px;background:#e5f6eb;color:#0d6338;font-weight:800}
.voice-start{grid-column:1/-1;width:100%;min-height:60px;padding:.9rem 1rem;font-size:1.15rem}
.voice-agent-placeholder{border-style:dashed;opacity:.78}.voice-agent-placeholder .voice-agent-icon{background:#6b7c8b}
.voice-safety{padding:1.1rem;background:#fff7db;border-left:6px solid #d39e00;border-radius:.6rem}
.high-contrast .voice-agent-card,.high-contrast .voice-safety{background:#000!important;color:#fff;border-color:#fff}.high-contrast .btn-bank-nav{background:#000;color:#fff;border-color:#fff}
@media(max-width:576px){.voice-agent-card{grid-template-columns:62px 1fr;padding:1rem}.voice-agent-icon{width:62px;height:62px;font-size:1.8rem}}