/* Styl "Rzeźba" — miękka, matowa, organiczna estetyka inspirowana
   abstrakcyjną rzeźbą współczesną (patrz logo Gakori): płynne, biomorficzne
   formy bez twardych krawędzi, delikatne gradienty naśladujące światło
   rozlewające się po zaokrąglonej powierzchni, stonowana, ziemista paleta.
   Zastąpiła poprzedni styl "Retro plakat" (2026-08-18). POPRAWKA
   2026-08-18(b) — pierwsza wersja nadal "wyglądała jak stary UI z kilkoma
   zaokrąglonymi rogami": za mało gry światła, a JASKRAWE kolory sygnałowe
   (czysta zieleń/żółć/czerwień prosto z web-safe palety) kompletnie gryzły
   się z resztą stonowanej, ziemistej estetyki logo. Naprawione: (1) kolory
   sygnałowe (zielony/żółty/czerwony) też są teraz PRZYGASZONE, ziemiste —
   dalej rozróżnialne, ale należą do tej samej "rodziny materiału" co reszta
   UI, nie wyglądają jak wklejone z innej aplikacji; (2) karty/przyciski/
   odznaki dostały subtelne gradienty (nie płaski jednolity kolor) — to one
   "sprzedają" wrażenie światła padającego na zaokrągloną powierzchnię;
   (3) cień ma teraz też delikatne, jasne obwiedzenie u góry (`inset`),
   które razem z gradientem daje wrażenie uniesionej, oświetlonej bryły;
   (4) duży, rozmyty kształt rzeźby w tle karty startowej (`.gakori-backdrop`
   w index.html) — nie tylko mały znaczek przy nagłówku — żeby "świat" loga
   i świat aplikacji wewnątrz faktycznie się zgadzały.
   POPRAWKA 2026-08-18(e) — runda 3: mimo powyższego, całość dalej
   sprawiała wrażenie "bez energii" — różnica jasności między --card i
   --card-2 (gradient kart) oraz między jasnym i ciemnym końcem gradientu
   przycisków była zbyt mała, żeby oko faktycznie zarejestrowało światło
   padające na powierzchnię, a cień był za płytki, żeby karty wyglądały na
   realnie uniesione. Podbite: rozstaw jasności --card/--card-2 (i
   odpowiednika w trybie ciemnym), głębokość i rozmycie --sculpt-shadow*,
   moc --highlight-edge, nasycenie --accent/--primary, oraz kontrast
   obramowania --card-border (dalej cienkie i bez twardych krawędzi, ale
   już widoczne, nie prawie-niewidoczne). Jeśli zmieniasz paletę — zmień
   tylko zmienne tutaj, reszta pliku się do nich odwołuje. */
:root {
    --ink: #201e1a;
    --ink-soft: #66625a;
    --paper: #ece7dd;
    /* --card-2 MUSI być jaśniejsze niż --card, które z kolei MUSI być
       jaśniejsze niż --paper (card-2 > card > paper) — to jest cała
       "gra świateł": karta = jaśniejsza powierzchnia niż strona, a jej
       góra (--card-2, początek gradientu w .card/.result-card niżej) =
       jeszcze jaśniejszy "błysk światła". POPRAWKA 2026-08-18(h): w
       jasnym motywie ta kolejność była odwrócona (--card-2 było CIEMNIEJSZE
       niż --card) — w ciemnym motywie przypadkiem wyszła poprawnie, więc
       tylko tam było widać zamierzony efekt, a jasny wyglądał płasko/bez
       prestiżu mimo identycznego wzoru gradientu w CSS. Jeśli kiedyś
       zmieniasz te dwie wartości — zawsze zachowaj tę kolejność jasności. */
    --card: #f5f0e5;
    --card-2: #fffdf9;
    --quote-bg: #e1d8c6;
    --card-border: rgba(43, 42, 39, 0.16);
    --accent: #b56953;
    --accent-dark: #874735;
    --accent-soft: #ecd4c6;
    --primary: #211f1c;
    --primary-dark: #100f0d;
    --primary-soft: #ddd3bd;
    /* Tekst na jednolitych, "perłowych" powierzchniach (przyciski, aktywna
       zakładka, ikona konta) — MUSI się odwracać razem z motywem: w jasnym
       przycisk jest matowo czarny, więc tekst jasny; w ciemnym przycisk
       jest matowo biały/"brudnobiały", więc tekst musi być ciemny, inaczej
       ginie (dokładnie ten błąd zgłoszony 2026-08-18 — dawniej tekst na
       przyciskach był na sztywno #fdfcfa, więc w trybie ciemnym robił się
       prawie niewidoczny na jasnym tle przycisku). */
    --btn-text: #f7f4ee;
    --input-bg: #fffefc;
    --debug-bg: #e4e0d6;
    --debug-border: #c9c3b4;
    --shadow-color: rgba(32, 30, 26, 0.36);
    --shadow-color-soft: rgba(32, 30, 26, 0.16);
    --highlight-edge: rgba(255, 255, 255, 0.9);
    --radius: 22px;
    --radius-sm: 14px;
    --border-w: 1px;
    /* Miękki, rozproszony cień "rzeźby" (dwie warstwy) + jasna obwódka u
       góry (inset) naśladująca światło ślizgające się po zaokrąglonej
       krawędzi — razem dają wrażenie uniesionej, oświetlonej bryły, nie
       płaskiej naklejki i nie płaskiej kartki. */
    --sculpt-shadow: 0 20px 42px -14px var(--shadow-color), 0 7px 18px -3px var(--shadow-color-soft), inset 0 1.5px 0 var(--highlight-edge);
    --sculpt-shadow-sm: 0 10px 22px -8px var(--shadow-color), 0 3px 9px -1px var(--shadow-color-soft), inset 0 1.5px 0 var(--highlight-edge);
    /* Odwrotność powyższego — dla WGŁĘBIONYCH paneli (cytat, "Co teraz
       zrobić", pole źródła): ciemny cień od góry-wewnątrz (jakby światło
       wpadało w zagłębienie) + jasna kreska od dołu-wewnątrz (odbite
       światło na dnie wgłębienia). Ta sama "gra świateł" co na uniesionych
       kartach/przyciskach, tylko odwrócona geometrycznie — bo te panele są
       ŚWIADOMIE recesywne (patrz komentarz przy .result-quote niżej), nie
       kolejnymi uniesionymi kartami. */
    --sculpt-inset: inset 0 3px 8px -3px var(--shadow-color-soft), inset 0 -1px 0 var(--highlight-edge);
    /* Kolory sygnałowe (wynik analizy) — ŚWIADOMIE przygaszone/ziemiste, nie
       jaskrawe web-safe zielenie/żółcie/czerwienie. Nadal jednoznacznie
       rozróżnialne (inny odcień = inne znaczenie), ale należą do tej samej,
       stonowanej "rodziny materiału" co reszta interfejsu. */
    --ok-bg: #dfe3d2;
    --ok-text: #4c5a3f;
    --ok-border: #b7c2a2;
    --warn-bg: #ecdfc2;
    --warn-text: #7a5a2e;
    --warn-border: #d1bb8a;
    --danger-bg: #e6d3ce;
    --danger-text: #7c4038;
    --danger-border: #cca298;
}

/* Tryb ciemny — ta sama, miękka "rzeźbiona" estetyka, tylko odwrócona
   jasność. Cienie w ciemnym motywie są subtelniejsze (na ciemnym tle mocny
   czarny cień i tak "znika"), za to karty dostają odrobinę jaśniejszej
   poświaty u góry, żeby nadal czytać się jako uniesione nad tłem.
   POPRAWKA 2026-08-18(e) — runda 3: ten sam powód co w trybie jasnym wyżej
   (za mały rozstaw jasności --card/--card-2, za płytki cień) — podbite
   analogicznie. */
:root[data-theme="dark"] {
    --ink: #f2efe7;
    --ink-soft: #b6ae9c;
    --paper: #17130f;
    --card: #2a251d;
    --card-2: #423a2b;
    --quote-bg: #362f24;
    --card-border: rgba(255, 255, 255, 0.15);
    --accent: #e0a690;
    --accent-dark: #eec1ae;
    --accent-soft: #4a3128;
    --primary: #e7dfce;
    --primary-dark: #cabe9c;
    --primary-soft: #3c3627;
    --btn-text: #17140f;
    --input-bg: #191612;
    --debug-bg: #2e2b26;
    --debug-border: #4a4438;
    --shadow-color: rgba(0, 0, 0, 0.7);
    --shadow-color-soft: rgba(0, 0, 0, 0.4);
    --highlight-edge: rgba(255, 255, 255, 0.14);
    --ok-bg: #333d2b; --ok-text: #bccaa9; --ok-border: #4c5a3f;
    --warn-bg: #3c3120; --warn-text: #dcc292; --warn-border: #5c4a2e;
    --danger-bg: #3c2b27; --danger-text: #dcb1a8; --danger-border: #5c3f38;
}
* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    display: flex; flex-direction: column; align-items: center; padding: 20px;
    background-color: var(--paper);
    background-image: radial-gradient(ellipse 900px 500px at 50% -12%, var(--card-2) 0%, var(--paper) 60%);
    color: var(--ink);
    line-height: 1.5;
    position: relative;
}
h1 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 2.2rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink);
    text-align: center; margin: 0 0 4px 0;
    display: flex; align-items: center; justify-content: center; gap: 10px;
}
h2 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 1.4rem; font-weight: 700; color: var(--ink); margin: 0 0 16px 0;
}
.tagline { margin: 0 0 20px 0; color: var(--ink-soft); font-size: 15.5px; line-height: 1.45; text-align: center; }

/* Mały, powtarzalny znak marki — ta sama, opływowa "kropla" co w logo
   aplikacji, obok nagłówka "Gakori" (patrz <h1> w index.html). Gradient
   naśladuje miękkie przejście światła po zaokrąglonej powierzchni rzeźby. */
.gakori-mark { flex-shrink: 0; filter: drop-shadow(0 3px 6px var(--shadow-color-soft)); }

/* Duży, mocno rozmyty odpowiednik znaku marki, ustawiony ZA kartą startową
   (patrz index.html) — bez tego cała reszta ekranu wyglądała jak zupełnie
   inny, niepowiązany świat niż samo logo. Position:fixed + niska
   nieprzezroczystość + blur = ambientowa poświata w tle, nie kolejna
   ikonka do czytania. */
.gakori-backdrop {
    position: fixed; top: -8%; left: 50%; transform: translateX(-50%);
    width: 640px; height: 640px; max-width: 160vw;
    opacity: 0.22; filter: blur(34px); pointer-events: none; z-index: 0;
}
:root[data-theme="dark"] .gakori-backdrop { opacity: 0.3; }

.card {
    background: linear-gradient(160deg, var(--card-2) 0%, var(--card) 45%, var(--card) 100%);
    padding: 26px; border-radius: var(--radius);
    border: var(--border-w) solid var(--card-border);
    box-shadow: var(--sculpt-shadow);
    width: 100%; max-width: 400px; box-sizing: border-box;
    position: relative; z-index: 1;
}
input, textarea {
    width: 100%; padding: 13px 14px; margin: 10px 0;
    border: var(--border-w) solid var(--card-border); border-radius: var(--radius-sm); box-sizing: border-box;
    font-size: 16px; font-family: inherit; color: var(--ink); background: var(--input-bg);
    transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
textarea { resize: vertical; min-height: 100px; }
/* Każdy przycisk w aplikacji (główny, drugoplanowy, aktywna zakładka,
   ikona konta) — JEDEN spójny, matowo-"perłowy" styl, bez wyjątków
   (POPRAWKA 2026-08-18(j): wcześniej tylko główny przycisk i aktywna
   zakładka miały pełną, wyrazistą grę światła, a przyciski drugoplanowe
   ("Wyloguj" itp.) dostały w poprzedniej rundzie osobny, dużo słabszy
   obrys — zgłoszone jako "cała reszta aplikacji nie ma tego stylu").
   JASNY motyw: lite, matowo czarne wypełnienie z gradientem — to właśnie
   ten styl użytkownik wskazał jako wzorcowy. CIEMNY motyw: ŚWIADOMIE NIE
   to samo, tylko lite białe/"brudnobiałe" wypełnienie (patrz override
   niżej) — na ciemnej stronie lity jasny przycisk wygląda jak ostry,
   świecący "kafelek", więc zamiast tego jasny, matowy PIERŚCIEŃ (obrys +
   tekst) na ciemnym, "wgłębionym" wypełnieniu — to jest dokładnie styl,
   który spodobał się na przycisku "Wyloguj" na koncie, tu zastosowany
   wszędzie: głównym przycisku, aktywnej zakładce i ikonie konta. Tekst
   zawsze przez var(--btn-text)/var(--ink), nigdy na sztywno. */
button {
    width: 100%; padding: 13px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--primary) 90%, white) 0%, var(--primary) 50%, var(--primary-dark) 100%);
    color: var(--btn-text); border: none;
    border-radius: var(--radius-sm); font-weight: 700; letter-spacing: 0.01em; cursor: pointer; font-size: 16px;
    font-family: 'Inter', inherit;
    box-shadow: var(--sculpt-shadow-sm);
    transition: transform .12s ease, box-shadow .12s ease, filter .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
button:hover { filter: brightness(1.35); box-shadow: var(--sculpt-shadow); }
button:active { transform: translateY(1px) scale(0.99); filter: brightness(0.8); box-shadow: var(--sculpt-shadow-sm); }
button:disabled { background: #8c887e; color: #f2efe7; filter: none; box-shadow: none; cursor: default; transform: none; }

/* Ciemny motyw: ta sama rodzina, odwrócona forma (pierścień, nie lite
   wypełnienie) — patrz uzasadnienie w komentarzu nad `button` wyżej.
   Obejmuje KAŻDY "lity" przycisk w appce: zwykłe <button>, aktywną
   zakładkę i okrągłą ikonę konta (ta ostatnia to <a>, nie <button>, stąd
   osobny selektor #userMenuBtn). */
/* :not(.tab-btn) jest tu konieczne — NIEaktywne zakładki to też <button>,
   a specyficzność ":root[data-theme] button" jest wyższa niż samo ".tab-btn"
   (dwie klasy-poziomu selektory kontra jedna), więc bez wyłączenia ta
   reguła po cichu nadpisałaby też wygląd nieaktywnych zakładek. */
:root[data-theme="dark"] button:not(.tab-btn):not(.image-preview-remove),
:root[data-theme="dark"] .tab-btn.active,
:root[data-theme="dark"] #userMenuBtn {
    background: linear-gradient(160deg, var(--card-2) 0%, var(--card) 55%, var(--card) 100%);
    color: var(--ink);
    border: 1.5px solid var(--ink);
    box-shadow: var(--sculpt-shadow-sm);
}
:root[data-theme="dark"] button:not(.tab-btn):not(.image-preview-remove):hover,
:root[data-theme="dark"] .tab-btn.active:hover,
:root[data-theme="dark"] #userMenuBtn:hover {
    filter: none; background: var(--ink); color: var(--paper); box-shadow: var(--sculpt-shadow);
}
:root[data-theme="dark"] button:not(.tab-btn):not(.image-preview-remove):active {
    filter: none; background: var(--ink); color: var(--paper); box-shadow: var(--sculpt-shadow-sm);
}
:root[data-theme="dark"] button:not(.tab-btn):not(.image-preview-remove):disabled { background: #4a463a; color: #a39a86; border-color: #4a463a; }

.tabs { display: flex; gap: 6px; margin: 10px 0; }
.tab-btn {
    flex: 1; padding: 11px 4px; font-size: 13.5px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: var(--paper); color: var(--ink-soft); border: var(--border-w) solid var(--card-border); border-radius: var(--radius-sm);
    cursor: pointer; width: auto; margin: 0; box-shadow: none;
}
.tab-icon { flex-shrink: 0; }
/* Aktywna zakładka trzyma się TEJ SAMEJ czarnej/białej "perłowej" rodziny
   co reszta przycisków (dawniej używała terakotowego --accent — zgłoszone
   2026-08-18 jako "pomarańczowe tło przycisku, które nie pasuje do
   reszty"). --accent zostaje gdzie indziej (linki, lewy pasek wzorca
   manipulacji), ale NIE jako pełne tło przycisku. */
.tab-btn.active {
    background: linear-gradient(160deg, color-mix(in srgb, var(--primary) 90%, white) 0%, var(--primary) 50%, var(--primary-dark) 100%);
    color: var(--btn-text); border-color: transparent; box-shadow: var(--sculpt-shadow-sm);
}

.mode-panel { display: none; }
.mode-panel.active { display: block; }

#imageSelectionInfo { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }
/* Nazwy plików (zwłaszcza PDF z systemów typu ESPI/EBI) bywają jednym
   długim ciągiem znaków bez spacji (same kropki/podkreślenia) — bez tej
   reguły przeglądarka nie ma gdzie "złamać" tekstu do nowej linii i nazwa
   wyjeżdża poza ramkę karty (zgłoszone 2026-08-19). */
#pdfSelectionInfo { font-size: 13px; color: var(--ink-soft); margin-top: 4px; overflow-wrap: break-word; word-break: break-word; }

/* Siatka miniaturek wybranych obrazów (index.html, tryb "Obraz" — teraz
   można dodać więcej niż jeden naraz) — każda miniaturka ma własny przycisk
   usuwania w rogu. */
.image-preview-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.image-preview-item { position: relative; width: 84px; height: 84px; }
.image-preview-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; }
.image-preview-remove {
    position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid var(--card); background: var(--ink); color: var(--card); font-size: 14px; line-height: 1;
    cursor: pointer; padding: 0; box-shadow: var(--sculpt-shadow-sm);
}

/* Strefa wklejania obrazu ze schowka (Ctrl+V / "Wklej" na telefonie) —
   contenteditable, żeby telefony w ogóle pokazały opcję wklejania, ale
   stylizowana tak, żeby wyglądała jak zwykły obszar do kliknięcia, nie
   pole tekstowe. */
.paste-zone {
    border: 1.5px dashed var(--card-border); border-radius: var(--radius-sm);
    padding: 14px; text-align: center; font-size: 13.5px; color: var(--ink-soft);
    cursor: text; outline: none; min-height: 20px;
}
.paste-zone:empty::before { content: attr(data-placeholder); }
.paste-zone:focus { border-color: var(--accent); }

/* Obraz pokazany na górze scan.html, TYLKO temu, kto go właśnie przesłał
   (jednorazowy podgląd z sessionStorage — plik obrazu nigdy nie trafia na
   serwer do przechowania, patrz index.html/scan.html) oraz informacja o
   tym pod spodem. */
.scan-image-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; display: none; }
.scan-image-list img { max-width: 140px; max-height: 140px; border-radius: var(--radius-sm); object-fit: cover; }
.image-not-saved-notice {
    font-size: 12.5px; color: var(--ink-soft); background: var(--paper);
    border: 1.5px dashed var(--card-border); border-radius: var(--radius-sm);
    padding: 8px 10px; margin: 0 0 16px 0; display: none;
}

a { color: var(--accent); }

/* Karta wyniku */
.result-card {
    background: linear-gradient(160deg, var(--card-2) 0%, var(--card) 45%, var(--card) 100%);
    padding: 26px; border-radius: var(--radius);
    border: var(--border-w) solid var(--card-border);
    box-shadow: var(--sculpt-shadow);
    width: 100%; max-width: 400px; margin-top: 16px; box-sizing: border-box; display: none;
    position: relative; z-index: 1;
}
/* POPRAWKA 2026-08-18: odznaka wyniku i tagi wzorców (niżej) były płaskim,
   jednolitym kolorem — jedyny element w appce bez żadnej gry światła,
   więc wyglądały jak wklejone z wcześniejszej, "płaskiej" wersji stylu.
   Dostały ten sam dwuwarstwowy gradient + cień co reszta ("sculpt"), tylko
   w OBRĘBIE własnego odcienia (zielony/żółty/czerwony/terakotowy zostaje,
   inaczej znaczenie koloru by zniknęło) — `color-mix` rozjaśnia górny
   koniec gradientu w stronę bieli, żeby zachować ten sam kierunek światła
   co karty (patrz zasada --card-2 > --card > --paper wyżej). */
.result-badge {
    display: inline-block; padding: 6px 14px; border-radius: 999px; font-weight: bold; font-size: 14px; margin-bottom: 14px; border: 1.5px solid;
    box-shadow: var(--sculpt-shadow-sm);
}
.badge-green { background: linear-gradient(160deg, color-mix(in srgb, var(--ok-bg) 55%, white) 0%, var(--ok-bg) 100%); color: var(--ok-text); border-color: var(--ok-border); }
.badge-yellow { background: linear-gradient(160deg, color-mix(in srgb, var(--warn-bg) 55%, white) 0%, var(--warn-bg) 100%); color: var(--warn-text); border-color: var(--warn-border); }
.badge-red { background: linear-gradient(160deg, color-mix(in srgb, var(--danger-bg) 55%, white) 0%, var(--danger-bg) 100%); color: var(--danger-text); border-color: var(--danger-border); }
/* Delikatne pudełko z tłem zamiast kolorowej/kontrastowej linii z boku —
   PODOBNY pomysł co .pattern-tip niżej (subtelnie ciemniejsze tło niż karta),
   ale świadomie WŁASNY odcień (var(--quote-bg), nie var(--paper)), żeby te
   dwa różne bloki (cytat vs podpowiedź "Co teraz zrobić") dało się od siebie
   odróżnić na pierwszy rzut oka, a nie żeby wyglądały identycznie — i
   świadomie BEZ obramowania, żeby cytat wyglądał lżej/spokojniej niż
   wyraźnie odgraniczona podpowiedź. Kolor wzorca (manipulacja/obserwacja) i
   tak niesie już odznaka i lewa krawędź całej karty (patrz .pattern-item
   niżej) — tu nie dublujemy. Ta sama reguła obowiązuje wszędzie (index.html,
   scan.html), dla każdego trybu analizy. */
.result-quote {
    background: var(--quote-bg); border-radius: var(--radius-sm); padding: 10px 12px; margin: 0 0 14px 0;
    font-style: italic; color: var(--ink-soft); line-height: 1.5;
    box-shadow: var(--sculpt-inset);
}

/* Ramka wokół informacji o źródle (link analizowanej strony) na scan.html */
.scan-source-box {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: var(--paper); border: var(--border-w) solid var(--card-border); border-radius: var(--radius-sm);
    padding: 10px 12px; margin: 0 0 18px 0; font-size: 13px; line-height: 1.4; word-break: break-all;
    box-shadow: var(--sculpt-inset);
}
.scan-source-box a { font-weight: 600; }

/* Zwijany pełny tekst źródłowy (tylko dla trybu "tekst") — <details> daje
   natywne, dostępne zwijanie/rozwijanie bez dodatkowego JS do samego
   pokazywania/chowania. Podświetlenie fragmentów odpowiadających cytatom
   patrz buildHighlightedText() w scan.html. */
.scan-text-source { margin: 0 0 18px 0; }
.scan-text-source summary {
    cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-soft);
    background: var(--paper); border: var(--border-w) solid var(--card-border);
    border-radius: var(--radius-sm); padding: 10px 12px;
}
.scan-text-source-content {
    border: var(--border-w) solid var(--card-border); border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm); padding: 12px;
    font-size: 13.5px; line-height: 1.6; color: var(--ink-soft);
    white-space: pre-wrap; word-break: break-word;
    max-height: 320px; overflow-y: auto;
    box-shadow: var(--sculpt-inset);
}
/* Kolor podświetlenia zależy od typu wzorca — ta sama konwencja co odznaka
   i lewa krawędź karty wzorca niżej (.pattern-item), żeby nie było
   rozjazdu, jak w wersji, gdzie "obserwacja" gdzie indziej była zielona,
   a tu i tak zawsze czerwona. */
.scan-text-source-content mark.source-highlight { color: var(--ink); border-radius: 3px; padding: 0 2px; }
.scan-text-source-content mark.source-highlight-manipulation { background: var(--accent-soft); }
.scan-text-source-content mark.source-highlight-reasoning { background: var(--ok-bg); }

/* Poszczególne wykryte wzorce (manipulacja albo trafny sposób rozumowania) —
   każdy w osobnej, miękko odgraniczonej karcie (cień zamiast twardej ramki),
   żeby łatwo było je przewijać wzrokiem jako osobne "kartki" wewnątrz wyniku.
   Lewa krawędź zostaje jako kolorowy pasek — to jedyny funkcjonalny
   sygnał typu wzorca oprócz odznaki tekstowej powyżej, więc świadomie NIE
   spłaszczony do monochromu — ale zaokrąglony razem z resztą karty, nie
   ostro ucięty jak w poprzednim, "plakatowym" stylu. */
.pattern-item {
    background: var(--card); border: var(--border-w) solid var(--card-border); border-radius: var(--radius-sm);
    box-shadow: var(--sculpt-shadow-sm);
    padding: 14px 16px; margin-bottom: 14px; border-left-width: 4px; border-left-style: solid;
}
.pattern-item:last-child { margin-bottom: 0; }
.pattern-item.pattern-manipulation { border-left-color: var(--accent); }
/* Ten sam stonowany zielony co .badge-green wyżej (var(--ok-*), celowo NIE
   var(--primary) — to kolor przycisków/marki w całej appce, za mało
   odróżnialny od reszty UI tutaj) — "obserwacja/trafne rozumowanie" ma być
   jednoznacznie kojarzona z tym samym zielonym, którego użytkownik już zna
   z odznaki wyniku. */
.pattern-item.pattern-reasoning { border-left-color: var(--ok-text); }

.pattern-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.pattern-tag {
    font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em;
    padding: 3px 9px; border-radius: 999px; white-space: nowrap;
    box-shadow: var(--sculpt-shadow-sm);
}
.pattern-manipulation .pattern-tag { background: linear-gradient(160deg, color-mix(in srgb, var(--accent-soft) 55%, white) 0%, var(--accent-soft) 100%); color: var(--accent-dark); }
.pattern-reasoning .pattern-tag { background: linear-gradient(160deg, color-mix(in srgb, var(--ok-bg) 55%, white) 0%, var(--ok-bg) 100%); color: var(--ok-text); }
.pattern-name { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.pattern-page { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }

.pattern-item .result-quote { margin: 0 0 8px 0; }
.pattern-explanation { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 10px 0; line-height: 1.5; }
.pattern-item .pattern-explanation:last-child { margin-bottom: 0; }

/* POPRAWKA 2026-08-18: etykieta i tekst ułożone były obok siebie w jednym
   wierszu (display:flex, bez flex-grow na tekście) — na wąskiej karcie
   mobilnej etykieta "Co teraz zrobić:" zabierała spory kawałek szerokości,
   a tekst (bez flex:1/min-width:0) nie rozciągał się na resztę dostępnego
   miejsca, więc łamał się w wąską, "ściśniętą" kolumnę z pustą przestrzenią
   obok — zgłoszone jako nieczytelne. Zamienione na układ kolumnowy: etykieta
   jako mały, stonowany nagłówek NAD tekstem, tekst na pełną szerokość. */
.pattern-tip {
    display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; line-height: 1.55; color: var(--ink);
    background: var(--paper); border: 1.5px dashed var(--card-border); border-radius: var(--radius-sm); padding: 12px 14px;
    box-shadow: var(--sculpt-inset);
}
.pattern-tip-label {
    font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--accent-dark);
}
.pattern-tip-text { display: block; }

/* Podsumowanie całości — osobny blok pod listą wzorców */
.summary-block { margin-top: 18px; padding-top: 16px; border-top: var(--border-w) solid var(--card-border); }
.summary-label {
    font-weight: 700; font-size: 12.5px; color: var(--ink-soft); text-transform: uppercase;
    letter-spacing: 0.04em; margin: 0 0 6px 0;
}
.result-summary { margin: 0; line-height: 1.6; }

/* Przeglądarka publicznych analiz (dla niezalogowanych) — lista klikalnych wierszy */
#publicScansSearch { margin-top: 0; }
#publicScansList {
    max-height: 280px; overflow-y: auto; margin-top: 4px;
}
.scan-row {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 4px; border-bottom: var(--border-w) solid var(--card-border);
    text-decoration: none; color: var(--ink);
}
.scan-row:last-child { border-bottom: none; }
.scan-row:hover { background: var(--paper); border-radius: var(--radius-sm); }
.scan-row-icon { flex-shrink: 0; font-size: 15px; }
.scan-row .result-badge { flex-shrink: 0; margin-bottom: 0; padding: 4px 10px; font-size: 12.5px; }
.scan-row-snippet { flex: 1; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scan-row-arrow { flex-shrink: 0; color: var(--ink-soft); }
#publicScansList p.status-err, #publicScansList p.status-ok { text-align: center; }

/* Panel debugowania — tylko dla developera, patrz sekcja 1 w skrypcie (?debug=1) */
#debug { display: none; margin-top: 20px; padding: 10px; background: var(--debug-bg); border-radius: 10px; font-size: 11px; width: 100%; max-width: 400px; white-space: pre-wrap; word-break: break-all; border: 1px dashed var(--debug-border); box-sizing: border-box; color: var(--ink-soft); }
.status-ok { color: var(--ok-text); font-weight: bold; }
.status-err { color: var(--danger-text); font-weight: bold; }

/* Ikona profilu (link do account.html) */
#userMenuBtn {
    display: none; position: fixed; top: 16px; right: 16px; z-index: 50;
    width: 44px; height: 44px; padding: 0; border-radius: 50%;
    background: linear-gradient(160deg, color-mix(in srgb, var(--primary) 90%, white) 0%, var(--primary) 50%, var(--primary-dark) 100%);
    color: var(--btn-text); font-size: 20px; border: none;
    align-items: center; justify-content: center; text-decoration: none;
    box-shadow: var(--sculpt-shadow-sm);
}

/* Stan kredytów — pigułka tuż obok ikony profilu, ten sam rytm wizualny co
   inne odznaki w aplikacji (patrz .result-badge niżej) */
.credit-balance {
    position: fixed; top: 16px; right: 68px; z-index: 50; height: 44px;
    padding: 0 14px; border-radius: 999px; box-sizing: border-box;
    background: var(--card); color: var(--ink); border: var(--border-w) solid var(--card-border);
    box-shadow: var(--sculpt-shadow-sm);
    align-items: center; justify-content: center; gap: 6px;
    font-weight: 700; font-size: 15px; white-space: nowrap;
}

/* Ekran zgody na koszt (np. długi PDF) — pełnoekranowa, półprzezroczysta
   nakładka wyśrodkowująca zwykłą .card na środku; sama karta nie potrzebuje
   osobnej klasy, dziedziczy standardowy wygląd/grę światła. */
.modal-overlay {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(20, 18, 15, 0.6);
    display: flex; align-items: center; justify-content: center;
    padding: 20px; box-sizing: border-box;
}

/* Link powrotny na dedykowanych podstronach (np. account.html) */
.back-link {
    display: inline-block; margin-bottom: 14px; font-size: 14px; font-weight: 600;
    color: var(--ink-soft); text-decoration: none;
}
.back-link:hover { color: var(--accent); }