/* Fanway AI — style v0.62.0 */

.fai-wrap { max-width: 900px; margin: 0 auto; padding: 20px 0; font-family: inherit; }
/* Strony gdzie treść jest "tabelaryczna/siatkowa" (dashboard), nie ciągłym
   tekstem do czytania — korzystają z szerszego kontenera. Selektor ID+klasa
   ma wyższą specyficzność niż sam .fai-wrap, więc nadpisuje TYLKO tu:
   - Zestawy lekcyjne: tabela z kolumną Actions (6 przycisków)
   - Krok 2 (YT/Vimeo/TXT): siatka 3 kolumn (Słownictwo/Struktury/Tematy)
   Krok 3 i tryb online zostają przy 900px — to głównie czytany tekst
   (treść zadania, maila), gdzie dłuższa linia tekstu pogarsza czytelność,
   nie poprawia jej. */
#fai-zestawy.fai-wrap,
#fai-yt-krok2.fai-wrap,
#fai-vim-krok2.fai-wrap,
#fai-txt-krok2.fai-wrap { max-width: 1100px; }

/* ── Kroki (breadcrumb) ── */
.fai-steps { display: flex; gap: 8px; margin-bottom: 24px; }
.fai-step {
  padding: 8px 18px; border-radius: 20px; font-size: 13px; font-weight: 500;
  background: #2a2a2a; color: #888; border: 1px solid #444;
}
.fai-step-active { background: #e8001e; color: #fff; border-color: #e8001e; }
.fai-step-done   { background: #1a3a1a; color: #4caf50; border-color: #4caf50; }

/* ── Karta ── */
.fai-card {
  background: #1e1e1e; border: 1px solid #333; border-radius: 10px;
  padding: 28px; margin-bottom: 20px;
}
.fai-card h2 { margin: 0 0 20px; font-size: 18px; color: #fff; }
.fai-card h3 { margin: 20px 0 12px; font-size: 15px; color: #ccc; }

/* ── Alert ── */
.fai-alert {
  padding: 12px 16px; border-radius: 8px; margin-bottom: 16px;
  font-size: 14px; border: 1px solid transparent;
}
.fai-alert-error   { background: #3a1a1a; color: #ff6b6b; border-color: #c0392b; }
.fai-alert-success { background: #1a3a1a; color: #6bcb77; border-color: #27ae60; }
.fai-alert-info    { background: #1a2a3a; color: #6baed6; border-color: #2980b9; }
.fai-alert-warning { background: #3a2f1a; color: #e6b422; border-color: #b8860b; }

/* ── Pola formularza ── */
.fai-field { margin-bottom: 16px; }
.fai-field label { display: block; font-size: 13px; color: #aaa; margin-bottom: 6px; }
.fai-field-checkbox label { display: flex; align-items: flex-start; gap: 10px; color: #ccc; cursor: pointer; }
.fai-field-checkbox label span { display: inline; line-height: 1.5; }
.fai-field-checkbox input[type=checkbox] { margin-top: 3px; flex-shrink: 0; accent-color: #e8001e; }
.fai-input, .fai-select {
  width: 100%; padding: 10px 14px; background: #111; border: 1px solid #444;
  border-radius: 8px; color: #fff; font-size: 14px; box-sizing: border-box;
}
.fai-input:focus, .fai-select:focus { outline: none; border-color: #e8001e; }
.fai-input::placeholder { color: #555; }

/* ── Kreator "vid" — siatka wyboru postaci (krok 1) ── */
.fai-vid-instructions { color: #aaa; font-size: 14px; margin: 0 0 20px; }
.fai-vid-characters {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px; margin-bottom: 20px;
}
.fai-vid-char-card {
  background: #161616; border: 1px solid #333; border-radius: 10px;
  padding: 12px; transition: border-color .15s;
}
.fai-vid-char-card.fai-vid-char-selected { border-color: #e8001e; }
.fai-vid-char-thumb-label {
  display: block; cursor: pointer; position: relative; text-align: center;
}
.fai-vid-char-thumb-label img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 8px;
  background: #0d0d0d;
}
.fai-vid-char-thumb-label input[type=checkbox] {
  position: absolute; top: 6px; left: 6px; width: 20px; height: 20px;
  accent-color: #e8001e; cursor: pointer;
}
.fai-vid-char-fields { margin-top: 10px; }
.fai-vid-char-fields .fai-field { margin-bottom: 8px; }
.fai-vid-char-fields label { font-size: 11px; }

.fai-vid-two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.fai-vid-two-col .fai-field label {
  /* Rezerwuje miejsce na najdłuższą możliwą etykietę — obie kolumny
     zaczynają textarea na tej samej wysokości, niezależnie od faktycznej
     długości WŁASNEJ etykiety. Wartość podniesiona 2026-08-26 (3.6em
     okazało się za mało — zmierzone na żywo: realna wysokość 70.2px vs
     zarezerwowane 46.8px, etykieta zawija się na więcej linii niż
     zakładałem szacując "na oko" ze zrzutu ekranu; 6.5em daje wyraźny
     zapas ponad zmierzoną potrzebę, nie tylko dokładnie tyle ile trzeba). */
  min-height: 6.5em;
}
@media (max-width: 700px) {
  .fai-vid-two-col { grid-template-columns: 1fr; }
  .fai-vid-two-col .fai-field label { min-height: 0; } /* jedna kolumna — wyrównanie niepotrzebne */
}
#fai-vid-selected-chars { font-weight: 600; color: #ccc; }

.fai-vid-stage-list { list-style: none; margin: 20px 0; padding: 0; }
.fai-vid-stage-list li {
  padding: 8px 0; color: #666; font-size: 14px; display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid #2a2a2a;
}
.fai-vid-stage-list li:last-child { border-bottom: none; }
.fai-vid-stage-list li.fai-vid-stage-done   { color: #4caf50; }
.fai-vid-stage-list li.fai-vid-stage-active { color: #fff; font-weight: 600; }
.fai-vid-stage-icon { width: 18px; display: inline-block; text-align: center; }
.fai-vid-dont-close {
  color: #e6b422; font-size: 13px; text-align: center; margin-top: 20px;
  padding: 10px; background: #3a2f1a; border-radius: 8px;
}
.fai-vid-elapsed { text-align: center; color: #888; font-size: 15px; font-variant-numeric: tabular-nums; margin: 0 0 16px; }
.fai-vid-stage-time { margin-left: auto; font-size: 12px; color: #666; font-variant-numeric: tabular-nums; }
.fai-vid-stage-list li.fai-vid-stage-active .fai-vid-stage-time { color: #e8001e; }
.fai-vid-stage-list li.fai-vid-stage-done .fai-vid-stage-time { color: #4caf50; }

/* ── Wideo ── */
.fai-video-wrap { margin: 0 auto 20px; border-radius: 10px; overflow: hidden; background: #000; max-width: 900px; }
/* Wideo skaluje się proporcjonalnie (16:9) niezależnie od szerokości
   kontenera na danej stronie — poprzednio wysokość była na sztywno 315px
   (z atrybutu HTML height), co przy różnych szerokościach .fai-wrap na
   różnych stronach dawało różne, częściowo "spłaszczone" proporcje.
   Selektor po klasie .fai-video-wrap (nie po ID #fai-yt-iframe) — obejmuje
   zarówno statyczny embed w shortcodes.php JAK I dynamicznie budowany
   w cloze.js/email-response.js (tryb online), bez dotykania tamtych plików.
   CSS nadpisuje atrybut HTML height (prezentacyjne atrybuty HTML mają
   najniższy priorytet w kaskadzie, nawet bez !important). */
.fai-video-wrap iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; display: block; }
.fai-video-mini { margin-bottom: 16px; border-radius: 10px; overflow: hidden; background: #000; }
.fai-video-meta { padding: 8px 12px; font-size: 12px; color: #888; }

/* ── Odtwarzacz Shaka VOD (krok 3 kreatora "vid") ──
   Ten sam wzorzec proporcji co .fai-video-wrap wyżej (16:9, bez
   sztywnej wysokości), ale własna klasa — kontener Shaka wypełnia
   go w JS własnym <video> + nakładką UI, nie iframe'em. */
.fai-vid-complete-msg {
  text-align: center; color: #d5d5d5; font-size: 15px; margin: 4px 0 16px; line-height: 1.5;
}
.fai-vid-player-container {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  margin: 0 auto 20px; border-radius: 10px; overflow: hidden; background: #000; max-width: 900px;
}
.fai-vid-player-error {
  color: #e8001e; text-align: center; padding: 40px 20px; font-size: 14px;
}

/* ── Progress bar ── */
.fai-progress { margin: 16px 0; }
.fai-progress-bar { height: 6px; background: #333; border-radius: 3px; overflow: hidden; }
.fai-progress-fill { height: 100%; background: #e8001e; border-radius: 3px; transition: width 0.4s ease; width: 0%; }
.fai-progress-animate { animation: fai-progress-pulse 1.5s ease-in-out infinite; }
@keyframes fai-progress-pulse {
  0%   { width: 15%; }
  50%  { width: 75%; }
  100% { width: 15%; }
}
.fai-progress-msg { font-size: 13px; color: #888; margin: 8px 0 0; text-align: center; }

/* ── Przyciski ── */
.fai-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 500;
  border: none; cursor: pointer; text-decoration: none; transition: opacity 0.2s;
}
.fai-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.fai-btn-primary   { background: #e8001e; color: #fff; }
.fai-btn-primary:hover:not(:disabled) { opacity: 0.85; }
.fai-btn-secondary { background: #2a2a2a; color: #ccc; border: 1px solid #444; }
.fai-btn-secondary:hover { background: #333; }

/* ── Akcje (footer kart) ── */
.fai-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; flex-wrap: wrap; }

/* ── Header z quota ── */
.fai-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 16px; }
.fai-quota-bar { flex: 1; }
.fai-quota-track { height: 6px; background: #333; border-radius: 3px; overflow: hidden; margin-top: 4px; }
.fai-quota-fill  { height: 100%; background: #e8001e; border-radius: 3px; transition: width 0.5s; }
#fai-quota-text  { font-size: 12px; color: #888; }

/* ── Tabela zestawów ── */
.fai-table { width: 100%; border-collapse: collapse; }
.fai-table th, .fai-table td {
  padding: 10px 12px; text-align: left; border-bottom: 1px solid #2a2a2a; font-size: 13px;
}
.fai-table th { color: #888; font-weight: 500; background: #1a1a1a; }
.fai-table td { color: #ccc; }
.fai-table tr:hover td { background: #1f1f1f; }

/* ── Status badge ── */
.fai-status {
  display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 500;
}
.fai-status-ready       { background: #1a3a1a; color: #4caf50; }
.fai-status-pending     { background: #2a2a1a; color: #f0c040; }
.fai-status-failed      { background: #3a1a1a; color: #f44336; }
.fai-status-draft       { background: #1a1a3a; color: #7986cb; }
.fai-status-transcribing,
.fai-status-analyzing   { background: #1a2a3a; color: #42a5f5; }

/* ── Akcje w tabeli ── */
.fai-table-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.fai-icon-btn {
  padding: 4px 6px; border-radius: 6px; font-size: 12px; border: 1px solid #444;
  background: transparent; color: #aaa; cursor: pointer; text-decoration: none;
  min-width: 72px; box-sizing: border-box; text-align: center; display: inline-block;
}
.fai-icon-btn:hover { background: #2a2a2a; color: #fff; }

/* ── Modal ── */
.fai-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
.fai-modal-box {
  background: #1e1e1e; border: 1px solid #444; border-radius: 12px;
  padding: 28px; max-width: 480px; width: 90%;
}
.fai-modal-box h3 { margin: 0 0 20px; color: #fff; }

/* #fai-modal-source: poszerzone z domyślnych 480px — od dodania 4. kafelka
   (Wideo, 2026-08-26) 3 kafelki × min-width:120px + odstępy nie mieściły
   się już w jednym rzędzie bez zawijania. */
#fai-modal-source .fai-modal-box { max-width: 600px; }

/* ── Modal podglądu wideo (badge YT/Vimeo/vod na liście zestawów) ──
   Szerszy niż domyślny .fai-modal-box (480px za wąsko na odtwarzacz). */
.fai-modal-box-video {
  max-width: 900px; padding: 16px; position: relative;
}
.fai-modal-video-close {
  position: absolute; top: -14px; right: -14px; z-index: 10;
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: #e8001e; color: #fff; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.fai-modal-video-close:hover { background: #ff1a35; }
#fai-modal-video-content .fai-video-wrap { margin: 0; }
#fai-modal-video-content .fai-vid-player-container { margin: 0; max-width: none; }

.fai-source-type-clickable { cursor: pointer; transition: opacity 0.15s ease; }
.fai-source-type-clickable:hover { opacity: 0.75; text-decoration: underline; }
.fai-source-grid { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.fai-source-btn {
  flex: 1; min-width: 120px; display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 16px 12px; background: #111; border: 1px solid #444;
  border-radius: 10px; text-decoration: none; color: #ccc; cursor: pointer;
  transition: border-color 0.2s; font-size: 14px;
}
.fai-source-btn:hover:not(.fai-soon) { border-color: #e8001e; color: #fff; }
.fai-source-icon { font-size: 24px; }
.fai-soon { opacity: 0.45; cursor: default; }
.fai-soon small { font-size: 10px; color: #666; }

/* ── Analiza AI ── */
.fai-analysis-box { background: #111; border: 1px solid #2a2a2a; border-radius: 8px; padding: 16px; margin-bottom: 20px; }
.fai-analysis-summary { font-size: 13px; color: #aaa; margin-bottom: 16px; line-height: 1.6; }
.fai-analysis-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .fai-analysis-grid { grid-template-columns: 1fr; } }
.fai-analysis-section { }
.fai-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 12px; color: #888; font-weight: 500; }
.fai-section-header label { font-size: 11px; color: #666; cursor: pointer; }
.fai-tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.fai-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; background: #1a1a2a; border: 1px solid #333;
  border-radius: 14px; font-size: 12px; color: #aaa; cursor: pointer; transition: all 0.15s;
}
.fai-tag input[type=checkbox] { accent-color: #e8001e; }
.fai-tag.fai-tag-selected { background: #2a1a1a; border-color: #e8001e; color: #fff; }

/* ── Opcje zadania ── */
.fai-options-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .fai-options-grid { grid-template-columns: 1fr; } }

/* ── Zadania w kroku 3 ── */
.fai-krok3-layout { display: grid; grid-template-columns: 280px 1fr; gap: 20px; align-items: start; }
@media (max-width: 700px) { .fai-krok3-layout { grid-template-columns: 1fr; } }
.fai-exercise-item {
  background: #1e1e1e; border: 1px solid #333; border-radius: 8px;
  padding: 16px; margin-bottom: 12px;
}
.fai-exercise-item.fai-selected { border-color: #e8001e; }
.fai-exercise-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.fai-exercise-header input[type=checkbox] { margin-top: 2px; accent-color: #e8001e; }
.fai-exercise-title { font-size: 14px; color: #fff; font-weight: 500; flex: 1; }
.fai-exercise-meta  { font-size: 11px; color: #666; margin-bottom: 10px; }
.fai-exercise-preview { font-size: 13px; color: #aaa; line-height: 1.6; }
.fai-exercise-actions { display: flex; gap: 8px; margin-top: 10px; }
.fai-edit-area { width: 100%; min-height: 80px; background: #111; border: 1px solid #444; border-radius: 6px; padding: 8px; color: #ccc; font-size: 13px; box-sizing: border-box; display: none; }
.fai-suggestions-header { font-size: 13px; color: #666; margin: 20px 0 10px; border-top: 1px solid #2a2a2a; padding-top: 16px; }

/* ── Misc ── */
.fai-loading {
  color: #aaa;
  font-size: 14px;
  padding: 20px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.fai-loading::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #444;
  border-top-color: #e02020;
  border-radius: 50%;
  animation: fai-spin 0.7s linear infinite;
  flex-shrink: 0;
}
.fai-empty   { color: #666; font-size: 14px; padding: 30px 0; text-align: center; }
.fai-hint    { font-size: 13px; color: #666; margin-bottom: 16px; }

/* v0.62.0 additions */
.fai-section-hint { font-size: 11px; color: #555; margin: -4px 0 8px; }
.fai-select-all-label { font-size: 11px; color: #666; cursor: pointer; display: flex; align-items: center; gap: 4px; }

/* ── Textarea grid (v0.62.0) ── */
.fai-textarea-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 8px; align-items: start; }
@media (max-width: 700px) { .fai-textarea-grid { grid-template-columns: 1fr; } }
.fai-textarea-section { display: flex; flex-direction: column; gap: 6px; }
.fai-textarea-label { min-height: 42px; display: flex; flex-direction: column; justify-content: flex-start; }
.fai-textarea-label { font-size: 13px; color: #ccc; font-weight: 500; }
.fai-label-hint { font-size: 11px; color: #e8001e; font-weight: 400; }
.fai-textarea {
  width: 100%; padding: 10px 12px; background: #111; border: 1px solid #333;
  border-radius: 8px; color: #fff !important; font-size: 13px; line-height: 1.6;
  resize: vertical; box-sizing: border-box; font-family: inherit;
  word-wrap: break-word; white-space: pre-wrap;
  pointer-events: auto !important; position: relative; z-index: 10;
  -webkit-user-select: text !important; user-select: text !important;
}
.fai-textarea:focus { outline: none; border-color: #e8001e; }
.fai-textarea::placeholder { color: #444 !important; }
.fai-video-title {
  font-size: 15px; font-weight: 500; color: #fff;
  padding: 10px 0 4px; margin-bottom: 8px;
}

/* v0.62.0 */
.fai-word-bank { font-size: 13px; color: #aaa; margin: 8px 0; padding: 8px 12px; background: #1a1a2a; border-radius: 6px; }
.fai-word-bank strong { color: #ccc; }
.fai-analysis-summary { font-size: 15px; color: #ccc; margin-bottom: 16px; line-height: 1.7; }
.fai-exercises-wrap { width: 100%; }

/* v0.62.0 — większe textarea i czcionki */
.fai-textarea {
  min-height: 120px !important;
  font-size: 15px !important;
}
.fai-exercise-preview { font-size: 15px !important; line-height: 1.8 !important; color: #ddd !important; }
.fai-edit-area { font-size: 15px !important; min-height: 120px; }
.fai-options-grid-2 { grid-template-columns: 1fr 1fr !important; }
@media (max-width: 600px) { .fai-options-grid-2 { grid-template-columns: 1fr !important; } }
.fai-source-link { font-size: 12px; color: #e8001e; text-decoration: none; margin-left: 8px; }
.fai-source-link:hover { text-decoration: underline; }
.fai-video-title { font-size: 16px !important; }
.fai-hint { font-size: 14px !important; }

/* v0.62.0 — editable word bank */
.fai-word-bank-wrap { margin: 10px 0; }
.fai-word-bank-label { font-size: 13px; color: #ccc; font-weight: 500; display: block; margin-bottom: 6px; }
.fai-word-bank-input {
  width: 100%; padding: 8px 12px; background: #1a1a2a; border: 1px solid #333;
  border-radius: 6px; color: #fff; font-size: 14px; box-sizing: border-box;
}
.fai-word-bank-input:focus { outline: none; border-color: #e8001e; }

/* v0.62.0 — task type row + bigger textareas */
.fai-textarea-lg { min-height: 150px !important; font-size: 15px !important; }
.fai-task-type-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-top: 8px; }
.fai-task-types-heading { font-size: 13px; color: #aaa; margin: 0 0 8px; flex: 1 1 100%; }
.fai-task-type-selects { display: flex; gap: 12px; flex-wrap: wrap; flex: 1 1 100%; }
.fai-task-type-selects .fai-field-inline { flex: 1; min-width: 160px; }
.fai-field-inline { flex: 1; min-width: 140px; }
.fai-field-inline label { font-size: 12px; color: #888; display: block; margin-bottom: 4px; }

/* v0.62.0 — selection to gap */
.fai-exercise-text {
  font-size: 15px; line-height: 1.8; color: #ddd; padding: 12px;
  background: #111; border-radius: 6px; margin-bottom: 10px;
  cursor: text; user-select: text;
  /* ZNALEZIONE 2026-08-27 (zgłoszone przez usera): dialog vod ma osadzone
     znaki \n między kwestiami (fai_vid_build_segments_from_dialogue),
     ale HTML domyślnie je ignoruje przy renderowaniu. white-space:
     pre-line respektuje \n jako widoczne łamanie linii, BEZ zmiany
     zachowania dla płynnej prozy innych kreatorów (które nie mają
     osadzonych \n w treści — nic się dla nich wizualnie nie zmienia).
     Czysty CSS — zero zmian w silniku JS (wspólnym dla wszystkich typów). */
  white-space: pre-line;
}
.fai-gap-tooltip {
  position: absolute; background: #e8001e; color: #fff;
  padding: 5px 12px; border-radius: 6px; font-size: 13px; font-weight: 500;
  cursor: pointer; z-index: 9999; display: none; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.fai-gap-tooltip:hover { background: #c0001a; }

/* v0.62.0 — colored action buttons + gap marker */
.fai-btn-pdf    { background: #c0392b !important; color: #fff !important; border-color: #c0392b !important; }
.fai-btn-docx   { background: #2980b9 !important; color: #fff !important; border-color: #2980b9 !important; }
.fai-btn-online { background: #27ae60 !important; color: #fff !important; border-color: #27ae60 !important; }
.fai-btn-edit-set { background: #8e44ad !important; color: #fff !important; border-color: #8e44ad !important; }
.fai-btn-pdf:hover    { opacity: 0.85; }
.fai-btn-docx:hover   { opacity: 0.85; }
.fai-btn-online:hover { opacity: 0.85; }
.fai-btn-edit-set:hover { opacity: 0.85; }

.fai-gap-marker {
  display: inline; background: #2a1a3a; color: #b39ddb;
  border: 1px dashed #7e57c2; border-radius: 3px; padding: 1px 8px;
  cursor: pointer; font-weight: 600; transition: background 0.15s;
  white-space: nowrap; width: auto !important;
}
.fai-gap-marker:hover { background: #3a1a4a; color: #fff; border-color: #e8001e; }

/* v0.62.0 — word bank spans */
.fai-wb-spans { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fai-wb-word {
  display: inline-flex; align-items: center; gap: 4px;
  background: #1a2a1a; border: 1px solid #2d5a2d; border-radius: 14px;
  padding: 3px 10px; font-size: 13px; color: #81c784;
}
.fai-wb-remove {
  background: none; border: none; color: #888; cursor: pointer;
  font-size: 11px; line-height: 1; padding: 0 2px; margin-left: 4px;
  vertical-align: middle; opacity: 0.7;
}
.fai-wb-remove:hover { color: #e8001e; opacity: 1; }

/* ═══════════════════════════════════════════════════════════
   v1.03.0 — Hierarchiczny widok zestawów
═══════════════════════════════════════════════════════════ */

/* Wiersz źródła */
.fai-source-row {
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  margin-bottom: 10px;
  background: #1a1a1a;
  overflow: hidden;
}

.fai-source-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  flex-wrap: wrap;
}

.fai-source-toggle {
  background: none;
  border: none;
  color: #aaa;
  cursor: pointer;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}
.fai-source-toggle:hover { background: #333; color: #fff; }

.fai-toggle-icon { display: inline-block; width: 12px; text-align: center; }

.fai-source-type {
  font-size: 11px;
  background: #333;
  color: #aaa;
  padding: 2px 7px;
  border-radius: 10px;
  flex-shrink: 0;
}

.fai-source-title {
  flex: 1;
  font-weight: 500;
  color: #e0e0e0;
  min-width: 120px;
}

.fai-source-meta {
  font-size: 12px;
  color: #666;
  flex-shrink: 0;
}

.fai-ex-count {
  font-size: 12px;
  color: #888;
  flex-shrink: 0;
}

.fai-source-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.fai-btn-new-task {
  background: #1a3a1a !important;
  color: #4caf50 !important;
  border: 1px solid #2d5a2d !important;
}
.fai-btn-new-task:hover {
  background: #2d5a2d !important;
}

/* Panel zadań */
.fai-exercises-panel {
  border-top: 1px solid #2a2a2a;
  background: #111;
  padding: 12px 16px;
}

.fai-panel-loading {
  color: #aaa;
  font-size: 14px;
  padding: 20px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.fai-panel-loading::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #444;
  border-top-color: #e02020;
  border-radius: 50%;
  animation: fai-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes fai-spin { to { transform: rotate(360deg); } }
.fai-panel-empty   { color: #666; font-size: 13px; padding: 8px 0; }
.fai-panel-error   { color: #e53935; font-size: 13px; padding: 8px 0; }

/* Tabela zadań wewnątrz panelu */
.fai-ex-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.fai-ex-table th {
  text-align: left;
  color: #666;
  font-weight: 500;
  padding: 4px 8px;
  border-bottom: 1px solid #2a2a2a;
}
.fai-ex-table td {
  padding: 8px 8px;
  color: #ccc;
  border-bottom: 1px solid #1e1e1e;
  vertical-align: middle;
}
.fai-ex-table tr:last-child td { border-bottom: none; }
.fai-ex-row:hover td { background: #1a1a1a; }

.fai-btn-edit-ex {
  background: #1a2a3a !important;
  color: #64b5f6 !important;
  border: 1px solid #1e3a5f !important;
}
.fai-btn-edit-ex:hover { background: #1e3a5f !important; }

.fai-btn-delete-ex {
  background: #3a1a1a !important;
  color: #ef5350 !important;
  border: 1px solid #5f1e1e !important;
}
.fai-btn-delete-ex:hover { background: #5f1e1e !important; }

/* Modal edycji — szerszy */
.fai-modal-box-wide {
  max-width: 680px !important;
  width: 90vw;
}

#fai-edit-ex-text,
#fai-edit-ex-bank {
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  background: #111;
  color: #e0e0e0;
  border: 1px solid #333;
  border-radius: 4px;
  padding: 8px;
  resize: vertical;
}

/* v1.03.18 — opcje zadania w jednej linii */
#fai-task-options-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-top: 8px;
}
#fai-task-options-row .fai-field {
  flex: 0 0 auto;
}
#fai-dynamic-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
#fai-dynamic-options .fai-field {
  flex: 0 0 auto;
}

/* v1.03.27 — modal edycji z scrollem i sticky footer */
.fai-modal-edit {
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.fai-modal-box-edit {
  background: #1e1e1e;
  border: 1px solid #444;
  border-radius: 12px;
  width: 90vw;
  max-width: 720px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
.fai-modal-box-edit h3 {
  margin: 0;
  padding: 18px 48px 14px 24px;
  color: #fff;
  font-size: 16px;
  border-bottom: 1px solid #2a2a2a;
  flex-shrink: 0;
}
.fai-modal-edit-close-btn {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  color: #888;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
}
.fai-modal-edit-close-btn:hover { color: #fff; background: #333; }
.fai-modal-edit-body {
  overflow-y: auto;
  padding: 16px 24px;
  flex: 1;
}
.fai-modal-edit-footer {
  padding: 12px 24px;
  border-top: 1px solid #2a2a2a;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
  background: #1e1e1e;
  border-radius: 0 0 12px 12px;
}

/* v1.03.28 — modal eksportu zbiorczego */
.fai-export-modal-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.fai-export-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #ccc;
  cursor: pointer;
  padding: 6px 0;
  border-bottom: 1px solid #2a2a2a;
}
.fai-export-item:last-child { border-bottom: none; }
.fai-export-item input[type=checkbox] { accent-color: #e8001e; }
.fai-export-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.fai-btn-export-source {
  background: #1a1a3a !important;
  color: #90caf9 !important;
  border: 1px solid #1e3a6f !important;
}
.fai-btn-export-source:hover { background: #1e3a6f !important; }

/* ═══════════════════════════════════════════════════════════
   FORMULARZ ONLINE — v1.03.35
═══════════════════════════════════════════════════════════ */

.fai-online-source-title {
  font-size: 13px; color: #888; margin-bottom: 6px;
}
.fai-online-progress {
  font-size: 13px; color: #aaa; margin-bottom: 16px;
}
.fai-online-task-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
}
.fai-online-task-title {
  font-size: 17px; font-weight: 600; color: #e0e0e0;
}
.fai-online-instructions {
  font-style: italic; color: #aaa; font-size: 13px; margin: 6px 0 16px;
}

/* Tekst z lukami */
.fai-online-text {
  font-size: 15px; line-height: 2.2; color: #e0e0e0;
  background: #111; border: 1px solid #2a2a2a; border-radius: 8px;
  padding: 16px 20px; margin-bottom: 20px;
  /* ZNALEZIONE 2026-08-28 — ten sam problem co .fai-exercise-text
     (naprawione wcześniej), ale to OSOBNY selektor dla trybu online
     (student), nie dla podglądu nauczyciela na kroku 3. Przeoczone przy
     poprzedniej poprawce. */
  white-space: pre-line;
}

/* Luka pusta */
.fai-online-gap {
  display: inline-block;
  min-width: 90px; height: 28px;
  border-bottom: 2px solid #555;
  margin: 0 4px; vertical-align: middle;
  cursor: pointer; border-radius: 4px 4px 0 0;
  transition: background 0.15s, border-color 0.15s;
  text-align: center; line-height: 28px;
  font-size: 14px;
}
.fai-online-gap:hover { border-color: #90caf9; background: #1a2a3a; }
.fai-online-gap.fai-gap-active { border-color: #90caf9; background: #1a2a3a; }

/* Luka wypełniona słowem */
.fai-online-gap.fai-gap-filled {
  color: #90caf9; font-weight: 500;
  border-bottom-color: #90caf9;
  background: #0d1f2d;
  cursor: pointer;
}
.fai-online-gap.fai-gap-filled:hover {
  background: #1a2a3a;
}

/* Weryfikacja */
.fai-online-gap.fai-gap-correct {
  color: #66bb6a !important; border-bottom-color: #66bb6a !important;
  background: #0d1f0d !important; cursor: default;
}
.fai-online-gap.fai-gap-wrong {
  color: #ef5350 !important; border-bottom-color: #ef5350 !important;
  background: #2d0d0d !important; cursor: pointer;
}
.fai-online-gap.fai-gap-shown {
  color: #66bb6a !important; border-bottom-color: #66bb6a !important;
  background: #0d1f0d !important; cursor: default; font-style: italic;
}

/* Bank słów */
.fai-online-bank-wrap { margin-bottom: 20px; }
.fai-online-bank-label {
  font-size: 13px; color: #ccc; font-weight: 500; margin-bottom: 8px;
}
.fai-online-bank {
  display: flex; flex-wrap: wrap; gap: 8px; min-height: 40px;
  padding: 10px; background: #111; border: 1px solid #2a2a2a; border-radius: 8px;
}

/* Słowo w banku */
.fai-online-word {
  display: inline-block;
  padding: 5px 14px; border-radius: 20px;
  background: #1a2a1a; border: 1px solid #2d5a2d;
  color: #81c784; font-size: 14px; cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  user-select: none;
}
.fai-online-word:hover { background: #2d5a2d; transform: translateY(-1px); }
.fai-online-word.fai-word-selected {
  background: #1a3a5a; border-color: #90caf9; color: #90caf9;
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(144,202,249,0.3);
}
.fai-online-word.fai-word-used { display: none; }

/* Pasek nawigacji — zawsze widoczny, niezależny od stanu sprawdzenia */
.fai-online-nav-wrap {
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; justify-content: flex-end;
}

/* Przyciski akcji */
.fai-online-actions {
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px;
}

/* Wyniki */
/* Karta aktywnego slajdu (true_false) — ten sam rodzaj ramki co
   .fai-online-results niżej, żeby treść zadania wyraźnie odznaczała się
   od wideo nad nią i przycisków nawigacji pod nią (zamiast wtapiać się
   w tło strony). */
.fai-tf-slide {
  background: #111;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  padding: 20px;
  margin-top: 16px;
  margin-bottom: 16px;
}

.fai-online-results {
  background: #111; border: 1px solid #2a2a2a; border-radius: 10px;
  padding: 20px; margin-top: 20px;
}
.fai-online-score {
  font-size: 28px; font-weight: 700; color: #e0e0e0; margin-bottom: 12px;
}
.fai-online-score .fai-score-correct { color: #66bb6a; }
.fai-online-score .fai-score-total   { color: #888; }
.fai-online-stats {
  display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 16px;
}
.fai-online-stat {
  background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 8px;
  padding: 10px 16px; text-align: center; min-width: 100px;
}
.fai-online-stat-val { font-size: 22px; font-weight: 700; color: #e0e0e0; }
.fai-online-stat-val.green { color: #66bb6a; }
.fai-online-stat-val.red   { color: #ef5350; }
.fai-online-stat-val.blue  { color: #90caf9; }
.fai-online-stat-label { font-size: 11px; color: #888; margin-top: 2px; }
.fai-online-next-wrap { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* v1.03.39 — błędna luka z przekreśleniem i prawidłową odpowiedzią */
.fai-online-gap.fai-gap-wrong {
  height: auto !important;
  min-height: 28px;
  padding: 2px 6px;
  line-height: 1.4 !important;
  vertical-align: middle;
}
.fai-online-gap.fai-gap-wrong s {
  color: #ef5350;
}
.fai-online-gap.fai-gap-wrong small {
  display: block;
  font-size: 11px;
}

/* v1.03.41 — tytuł na stronie online */
.fai-online-title {
  font-size: 20px; font-weight: 700; color: #e0e0e0;
  margin: 0 0 16px; padding: 0;
}

/* Paginacja zestawów */
.fai-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 20px;
  padding: 8px 0;
  flex-wrap: wrap;
}
.fai-page-btn { min-width: 40px; padding: 6px 14px; }
.fai-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.fai-page-info { color: #aaa; font-size: 14px; min-width: 60px; text-align: center; }
.fai-page-num-btn {
  min-width: 36px;
  padding: 6px 10px;
  background: #1e1e1e;
  border: 1px solid #333;
  border-radius: 6px;
  color: #ccc;
  cursor: pointer;
}
.fai-page-num-btn:hover:not(:disabled) { border-color: #555; background: #262626; }
.fai-page-num-active {
  background: #e8001e;
  border-color: #e8001e;
  color: #fff;
  font-weight: 600;
  cursor: default;
}
.fai-page-ellipsis { color: #777; padding: 0 4px; }

/* Status zadania w tabeli */
.fai-ex-status { padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.fai-ex-status-draft { background: #444; color: #aaa; }
.fai-ex-status-ready { background: #1b5e20; color: #a5d6a7; }

/* ── Odznaka 100% — pełnoekranowa nakładka, konfetti, świadome zamknięcie ── */
.fai-badge-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  overflow: hidden;
  cursor: pointer;
}
.fai-badge-overlay.fai-badge-show { opacity: 1; pointer-events: auto; }

.fai-badge-card {
  position: relative;
  z-index: 2;
  background: linear-gradient(145deg, #1c1c1c, #0d0d0d);
  border: 2px solid #d4af37;
  border-radius: 18px;
  padding: 36px 56px;
  text-align: center;
  box-shadow: 0 0 50px rgba(212, 175, 55, 0.45), 0 10px 30px rgba(0, 0, 0, 0.6);
  transform: scale(0.55);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); /* lekki "przeskok" na końcu */
  cursor: default;
}
.fai-badge-overlay.fai-badge-show .fai-badge-card { transform: scale(1); }

.fai-badge-trophy {
  font-size: 68px;
  line-height: 1;
  animation: fai-badge-bounce 1.4s ease-in-out infinite;
}
@keyframes fai-badge-bounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-10px) rotate(-6deg); }
}

.fai-badge-title { font-size: 34px; font-weight: 800; color: #d4af37; margin-top: 10px; letter-spacing: 0.5px; }
.fai-badge-sub   { font-size: 15px; color: #ccc; margin-top: 6px; max-width: 320px; }
.fai-badge-hint  { font-size: 12px; color: #777; margin-top: 18px; }

/* Konfetti — losowe pozycje/kolory/prędkości ustawiane inline przez JS
   (faiGam.showBadgeOverlay), tu tylko wspólna animacja spadania+obrotu. */
.fai-badge-confetti {
  position: absolute;
  top: -10px;
  width: 8px;
  height: 14px;
  opacity: 0.9;
  z-index: 1;
  animation-name: fai-confetti-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes fai-confetti-fall {
  0%   { transform: translateY(-10vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0.85; }
}

/* ── true_false — menu ⚙️ i stan odpowiedzi ─────────────────────────────
   Reszta stylingu tego typu (wiersze, pigułki Prawda/Fałsz, przyciski)
   celowo przez inline style w fanway-ai-exercises-true-false.js — ta sama
   konwencja co .fai-gamification-block w cloze.js/email-response.js.
   Tu tylko to, co wygodniej trzymać jako CSS: hover/focus stanów i klas
   przełączanych dynamicznie (fai-tf-correct/incorrect/selected). */
.fai-tf-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  background: none;
  border: none;
  color: #ccc;
  font-size: 13px;
  cursor: pointer;
}
.fai-tf-menu-item:hover { background: #2a2a2a; color: #fff; }

.fai-tf-gear-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 4px 6px;
  border-radius: 4px;
  color: #aaa;
}
.fai-tf-gear-btn:hover { background: #2a2a2a; color: #fff; }

.fai-tf-statement {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.35;
  color: #161616;
  padding: 20px;
  border-radius: 8px;
  background: #f4f2ec;
  border: 2px solid #e8001e;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.fai-tf-statement.fai-tf-correct   { background: #eaf7ea; border-color: #2e7d32; color: #12331a; }
.fai-tf-statement.fai-tf-incorrect { background: #fbeaea; border-color: #c0392b; color: #3a1414; }

.fai-tf-answer-btn.fai-tf-selected { outline: 2px solid #e8001e; outline-offset: 2px; }

.fai-tf-review-list > div:last-child { border-bottom: none !important; }

.fai-tf-review-jump {
  background: none;
  border: none;
  color: #4a90d9;
  cursor: pointer;
  padding: 0;
  font-size: 12px;
  text-decoration: underline;
  font-family: inherit;
}
.fai-tf-review-jump:hover { color: #6fa8e0; }

/* ── multiple_choice — luka w zdaniu + przyciski opcji A/B/C ─────────────
   Ten sam język kolorów co true_false (#2e7d32 zielony / #c0392b czerwony) —
   spójność wizualna między typami zadań, nie przypadek. */
.fai-mc-gap {
  display: inline-block;
  min-width: 60px;
  text-align: center;
  border-bottom: 2px dashed #e8001e;
  color: #e8001e;
  font-weight: 700;
  padding: 0 4px;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.fai-mc-gap.fai-mc-gap-correct   { border-bottom-style: solid; border-color: #2e7d32; color: #2e7d32; background: #eaf7ea; border-radius: 4px; }
.fai-mc-gap.fai-mc-gap-incorrect { border-bottom-style: solid; border-color: #c0392b; color: #c0392b; background: #fbeaea; border-radius: 4px; }

.fai-mc-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fai-mc-option-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 8px;
  border: 2px solid #333;
  background: #1e1e1e;
  color: #e0e0e0;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.fai-mc-option-btn:hover:not(:disabled) { border-color: #e8001e; }
.fai-mc-option-btn:disabled { cursor: default; }
.fai-mc-option-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #333;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.fai-mc-option-btn.fai-mc-option-correct   { background: #eaf7ea; border-color: #2e7d32; color: #12331a; animation: faiMatchPop 0.35s ease; }
.fai-mc-option-btn.fai-mc-option-correct   .fai-mc-option-letter { background: #2e7d32; color: #fff; }
.fai-mc-option-btn.fai-mc-option-incorrect { background: #fbeaea; border-color: #c0392b; color: #3a1414; }
.fai-mc-option-btn.fai-mc-option-incorrect .fai-mc-option-letter { background: #c0392b; color: #fff; }

/* .fai-mc-review-jump — link czasowy w liście wyników, ta sama stylistyka co
   .fai-tf-review-jump (subtelny niebieski link, nie surowy przycisk HTML) —
   POMINIĘTY przy pierwszym budowaniu pliku, przez co renderował się jako
   domyślny, niestylowany <button> przeglądarki. */
.fai-mc-review-jump {
  background: none;
  border: none;
  color: #4a90d9;
  cursor: pointer;
  padding: 0;
  font-size: 12px;
  text-decoration: underline;
  font-family: inherit;
}
.fai-mc-review-jump:hover { color: #6fa8e0; }

/* .fai-ap-review-jump — link czasowy w liście wyników assign_pairs, ten sam
   wzorzec co .fai-tf-review-jump/.fai-mc-review-jump (subtelny niebieski
   link, nie surowy przycisk HTML) — pominięty przy pierwszym budowaniu
   pliku, tak samo jak wcześniej przy multiple_choice. */
.fai-ap-review-jump {
  background: none;
  border: none;
  color: #4a90d9;
  cursor: pointer;
  padding: 0;
  font-size: 12px;
  text-decoration: underline;
  font-family: inherit;
}
.fai-ap-review-jump:hover { color: #6fa8e0; }

/* .fai-match-review-jump — link czasowy w liście wyników matching, ten sam
   wzorzec co pozostałe review-jump klasy — trzeci raz ten sam błąd
   (pominięty przy budowie pliku), więc dodane od razu tutaj + zrobiony
   pełny przegląd całego pluginu żeby wyłapać ewentualne inne braki. */
.fai-match-review-jump {
  background: none;
  border: none;
  color: #4a90d9;
  cursor: pointer;
  padding: 0;
  font-size: 12px;
  text-decoration: underline;
  font-family: inherit;
}
.fai-match-review-jump:hover { color: #6fa8e0; }

/* ── ZABEZPIECZENIE NA PRZYSZŁOŚĆ ──────────────────────────────────────────
   Ten sam błąd (zapomniany CSS dla nowej klasy "*-review-jump") powtórzył
   się TRZY razy (multiple_choice, assign_pairs, matching) — za każdym
   razem dokładnie ta sama rzecz, tylko w nowym pliku. Zamiast polegać na
   pamiętaniu o tym przy KAŻDYM nowym typie zadania, ogólna reguła po
   wzorcu klasy — złapie automatycznie każdą przyszłą "fai-XXX-review-jump"
   bez potrzeby dopisywania nowej reguły. Powyższe, nazwane reguły zostają
   (nieszkodliwa redundancja, czytelniejsze przy debugowaniu), ta jest
   siatką bezpieczeństwa poniżej nich. */
[class*="-review-jump"] {
  background: none;
  border: none;
  color: #4a90d9;
  cursor: pointer;
  padding: 0;
  font-size: 12px;
  text-decoration: underline;
  font-family: inherit;
}
[class*="-review-jump"]:hover { color: #6fa8e0; }

/* ── matching — plansza dwóch kolumn, klik-klik ───────────────────────────
   Zielony (stały) = para rozwiązana. Czerwony (chwilowy, ~600ms) = zła
   próba, wraca do stanu neutralnego. Ten sam język kolorów co pozostałe
   typy (#2e7d32/#c0392b), inna mechanika (nie slajd, plansza). */
.fai-match-board {
  display: flex;
  gap: 24px;
  margin: 14px 0;
}
.fai-match-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0; /* pozwala flex-child się skurczyć, nie wypycha layoutu */
}
.fai-match-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  border-radius: 8px;
  border: 2px solid #333;
  background: #1e1e1e;
  color: #e0e0e0;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  min-height: 44px;
}
.fai-match-tile:hover:not(.fai-match-tile-disabled) { border-color: #e8001e; }

.fai-match-tile-selected {
  border-color: #e8001e;
  background: #2a1414;
  transform: scale(1.02);
}
.fai-match-tile-solved {
  background: #eaf7ea;
  border-color: #2e7d32;
  color: #12331a;
  font-weight: 600;
  animation: faiMatchPop 0.35s ease;
}
@keyframes faiMatchPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.fai-match-tile-disabled { cursor: default; }
.fai-match-tile-wrong {
  background: #fbeaea;
  border-color: #c0392b;
  color: #3a1414;
}

/* Kafelki-obrazki (wariant word_image) — sam obrazek wypełnia kafelek,
   bez dodatkowego paddingu/tekstu dookoła. Wysokość dopasowana do
   .fai-match-tile (min-height:44px) — obrazek ma leżeć W TYM SAMYM
   RZĘDZIE co odpowiadające mu słowo po lewej, nie być wielokrotnie
   większy. !important CELOWO — motyw WordPressa często ma globalną
   regułę "img { height: auto }" dla responsywności, która bez tego
   nadpisywałaby naszą wysokość (dokładnie to zaobserwowane na testach:
   52px w CSS, ~500px faktycznie renderowane). Ikonka lupy w rogu
   (.fai-match-tile-zoom) otwiera podgląd w większym rozmiarze, klikalna
   NIEZALEŻNIE od głównego mechanizmu dopasowywania (stopPropagation w
   JS — kliknięcie lupy nie wybiera pary).

   STAŁA szerokość obrazka (NIE 100%) — kolumna prawa jest szeroka
   (flex:1, tyle co lewa), a szeroki+niski kafelek (np. 260×40px, ~6.5:1)
   przy object-fit:cover przycina zdjęcie do wąskiego, nieczytelnego
   paska (wyglądało jak losowe kolorowe pasy zamiast rozpoznawalnego
   zdjęcia). 100×60px (~1.67:1) jest bliskie normalnym proporcjom
   fotografii (4:3, 3:2) — cover przycina rozsądnie, zdjęcie zostaje
   rozpoznawalne. Kafelek wyśrodkowany w kolumnie (flex), nie przyklejony
   do lewej krawędzi szerokiego pustego tła. */
.fai-match-tile-image {
  padding: 4px;
  width: 116px;
  height: 78px !important;
  min-height: 78px !important;
  max-height: 78px !important;
  margin: 0 auto;
  position: relative;
  /* BEZ overflow:hidden — obrazek ma już własne stałe wymiary (poniżej),
     nie potrzebuje przycinania kontenera, żeby się zmieścić. Ten
     constraint prawdopodobnie przycinał samą ikonkę lupy, jeśli choćby o
     piksel wychodziła poza granice — usunięty jako podejrzany o realny
     problem zgłoszony na testach (lupka nadal ucięta mimo zmniejszenia). */
}
.fai-match-tile-image img {
  width: 100px !important;
  height: 60px !important;
  max-height: 60px !important;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  margin: 0 auto;
}
.fai-match-tile-zoom {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0,0,0,0.85);
  border: 2px solid #fff;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
  z-index: 5;
}
.fai-match-tile-zoom:hover { background: rgba(0,0,0,1); }

/* Popup/lightbox z pełnym podglądem obrazka po kliknięciu lupy */
.fai-match-zoom-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.fai-match-zoom-overlay img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
}

@media (max-width: 600px) {
  .fai-match-board { flex-direction: column; gap: 10px; }
}

/* ════════════════════════════════════════════════════════════════
   ORDERING (Ułóż zdanie) — plansza z wieloma samodzielnymi zdaniami,
   każde jako wiersz kafelków-słów. Klik poprawnego kafelka animuje
   przesunięcie na miejsce (FLIP, obsługiwane w JS przez transform),
   błędny kafelek się trzęsie w miejscu.
   ════════════════════════════════════════════════════════════════ */
.fai-ord-board {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 14px 0;
}
.fai-ord-sentence {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  padding-right: 46px; /* miejsce na przycisk 💡, zeby kafelki na niego nie nachodzily */
  position: relative;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  background: #161616;
}
.fai-ord-tile {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 6px;
  border: 2px solid #333;
  background: #1e1e1e;
  color: #e0e0e0;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.fai-ord-tile:hover:not(:disabled) { border-color: #555; background: #262626; }
.fai-ord-tile-locked {
  background: #eaf7ea;
  border-color: #2e7d32;
  color: #12331a;
  font-weight: 600;
  cursor: default;
  animation: faiMatchPop 0.35s ease;
}
.fai-ord-tile-wrong {
  background: #4a1e1e;
  border-color: #c0392b;
  animation: faiOrdShake 0.4s ease;
}
/* Pokazane przyciskiem "💡", nie rozwiązane samodzielnie — żółte, wyraźnie
   odróżnialne od zielonego (.fai-ord-tile-locked), żeby uczeń/nauczyciel
   widzieli w podsumowaniu które zdania faktycznie ułożono samodzielnie. */
.fai-ord-tile-revealed {
  background: #3d3315;
  border-color: #b8860b;
  color: #e8c96a;
  font-weight: 600;
  cursor: default;
  animation: faiMatchPop 0.35s ease;
}
.fai-ord-reveal-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: 1px solid #444;
  border-radius: 6px;
  color: #ccc;
  font-size: 14px;
  padding: 6px 10px;
  cursor: pointer;
}
.fai-ord-reveal-btn:hover { border-color: #b8860b; background: #2a230a; }
@keyframes faiOrdShake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-4px); }
  40%      { transform: translateX(4px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(3px); }
}

/* Podsumowanie na wynikach — lista poprawnych zdań z wyjaśnieniem */
.fai-ord-review-row {
  padding: 10px 0;
  border-bottom: 1px solid #2a2a2a;
}
.fai-ord-review-num { color: #888; font-weight: 600; }
.fai-ord-review-sentence { color: #e0e0e0; font-weight: 600; }
.fai-ord-review-explanation { font-size: 12px; color: #999; margin-top: 4px; }

@media (max-width: 600px) {
  .fai-ord-sentence { gap: 6px; padding: 10px; }
  .fai-ord-tile { padding: 6px 10px; font-size: 13px; }
}

/* ════════════════════════════════════════════════════════════════
   SENTENCE_GAPS (Uzupełnij luki) — DRUGI wariant ordering: zdanie ze
   stałymi słowami + lukami, WŁASNY bank słów per slajd (jedno zdanie
   na raz, nie plansza — patrz uzasadnienie w JS). Klik słowo w banku
   → zaznacz, klik luka → sprawdź dopasowanie.
   ════════════════════════════════════════════════════════════════ */
.fai-sg-sentence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 16px;
  padding-right: 46px; /* miejsce na przycisk 💡, zeby slowa na niego nie nachodzily */
  margin-bottom: 16px;
  position: relative;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  background: #161616;
  font-size: 16px;
  line-height: 1.6;
}
.fai-sg-fixed-word {
  color: #e0e0e0;
}
.fai-sg-blank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 600;
}
.fai-sg-blank-empty {
  border: 2px dashed #555;
  color: #666;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.fai-sg-blank-empty:hover { border-color: #888; background: #1e1e1e; }
.fai-sg-blank-filled {
  border: 2px solid #2e7d32;
  background: #eaf7ea;
  color: #12331a;
  cursor: default;
  animation: faiMatchPop 0.35s ease;
}

.fai-sg-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.fai-sg-bank-tile {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 6px;
  border: 2px solid #333;
  background: #1e1e1e;
  color: #e0e0e0;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.fai-sg-bank-tile:hover { border-color: #555; background: #262626; }
.fai-sg-bank-tile-selected {
  border-color: #4a9eff;
  background: #16233a;
  box-shadow: 0 0 0 2px rgba(74,158,255,0.3);
}
.fai-sg-bank-tile-wrong {
  background: #4a1e1e;
  border-color: #c0392b;
  animation: faiOrdShake 0.4s ease;
}

.fai-sg-reveal-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: 1px solid #444;
  border-radius: 6px;
  color: #ccc;
  font-size: 14px;
  padding: 6px 10px;
  cursor: pointer;
}
.fai-sg-reveal-btn:hover { border-color: #b8860b; background: #2a230a; }

@media (max-width: 600px) {
  .fai-sg-sentence { font-size: 14px; padding: 12px; gap: 6px; }
  .fai-sg-blank { min-width: 56px; padding: 5px 8px; }
  .fai-sg-bank-tile { padding: 6px 10px; font-size: 13px; }
}

/* ── Udostępnianie zadania — dropdown przy przycisku 🔗 na /zestawy-lekcyjne/ */
.fai-share-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  background: none;
  border: none;
  color: #ccc;
  font-size: 13px;
  cursor: pointer;
}
.fai-share-menu-item:hover:not(:disabled) { background: #2a2a2a; color: #fff; }
.fai-btn-share-active {
  background: #0d2417;
  border-color: #2e7d32;
  color: #66bb6a;
}

/* ── Kontrast panelu Shaka Player (2026-08-28, zgłoszone przez usera:
   menu prędkości/napisów nieczytelne) — jawne wymuszenie zmiennych CSS
   Shaki, nie poleganie na jej wartościach domyślnych, które mogły się
   gdzieś nadpisywać stylami globalnymi strony. Dokumentacja Shaki:
   https://shaka-player-demo.appspot.com/docs/api/tutorial-ui-customization.html */
.fai-online-header-video-container,
#fai-online-header-video-container {
  --shaka-font-color: #ffffff;
  --shaka-bg: rgba(0, 0, 0, 0.85);
  --shaka-bg-hover: rgba(20, 20, 20, 0.95);
}
.shaka-overflow-menu, .shaka-settings-menu {
  background: rgba(0, 0, 0, 0.9) !important;
  color: #ffffff !important;
}
.shaka-overflow-menu button, .shaka-settings-menu button,
.shaka-overflow-menu span, .shaka-settings-menu span {
  color: #ffffff !important;
}

/* ── Napisy — WŁASNA nakładka (2026-08-28, zmienione po nieudanej próbie
   przez wbudowany mechanizm kolorowania cue Shaki — potwierdzone na żywo,
   dwa różne podejścia CSS nie zadziałały; UITextDisplayer stosuje kolor
   tylko z właściwości JS ustawionej programowo, nie z CSS/<c.klasa>).
   Zwykły, absolutnie pozycjonowany div — pełna, gwarantowana kontrola. */
.fai-vod-captions-overlay {
  position: absolute;
  left: 50%;
  bottom: 100px;
  transform: translateX(-50%);
  max-width: 92%;
  text-align: center;
  font-weight: 700;
  font-size: 1.8em;
  color: #000000;
  padding: 6px 18px;
  border-radius: 4px;
  z-index: 50;
  line-height: 1.4;
  pointer-events: none; /* nie przechwytuje kliknięć - nie blokuje sterowania playerem pod spodem */
}
.fai-vod-captions-overlay.speaker1 { background-color: #ffffff; }
.fai-vod-captions-overlay.speaker2 { background-color: #ffd400; }

/* ── "Ułóż dialog" (dialogue_ordering, 2026-08-29) — pionowy stos
   pełnowymiarowych linijek dialogu, nie małe kafelki-słowa jak ordering.
   Kolory/animacje REUŻYWAJĄ istniejących (@keyframes faiMatchPop,
   faiOrdShake, zdefiniowanych wyżej dla .fai-ord-tile) — spójność
   wizualna, nie nowy wzorzec kolorystyczny. */
.fai-do-board {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0;
}
.fai-do-line-tile {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 16px;
  border-radius: 6px;
  border: 2px solid #333;
  background: #1e1e1e;
  color: #e0e0e0;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.fai-do-line-tile:hover:not(:disabled) { border-color: #555; background: #262626; }
.fai-do-line-tile strong { color: #8ab4f8; }
.fai-do-line-locked {
  background: #eaf7ea;
  border-color: #2e7d32;
  color: #12331a;
  font-weight: 600;
  cursor: default;
  animation: faiMatchPop 0.35s ease;
}
.fai-do-line-locked strong { color: #1b5e20; }
.fai-do-line-wrong {
  background: #4a1e1e;
  border-color: #c0392b;
  animation: faiOrdShake 0.4s ease;
}