*{margin:0;padding:0;box-sizing:border-box}
 /* Tryb osadzony (edytor jako część strony modułu /dostosuj-cv-do-oferty — JEDNA strona, bez iframe):
    chowamy własny nagłówek/stopkę i własny H1 edytora (strona-gospodarz ma swój chrome i H1);
    tło .up-page przezroczyste → granatowa sekcja gospodarza przechodzi bez szwu; znosimy min-height:100vh
    (edytor sizuje się do treści) i sztywną wysokość trybu edycji (naturalny flow, bez wewn. paska). */
 html.is-embed .up-page>header,html.is-embed .up-page>footer{display:none!important}
 html.is-embed .up-card.up-head{display:none!important}
 html.is-embed .up-page .up-wrap{padding-top:22px}
 :root{--ink:#15336b;--royal:#1e4fc4;--azure:#3b82f6;--bg:#eef2f8;--paper:#fff;--muted:#5a6a88;--line:#e3e9f5}
 body{font-family:YantramanavUI,Inter,sans-serif;background:var(--bg);color:#1b2536}
 h1,h2,h3,h4,.d{font-family:YantramanavUI,Inter,sans-serif;color:var(--ink)}
 a{color:inherit;text-decoration:none}
 .btn{font-family:YantramanavUI,Inter,sans-serif;font-weight:600;font-size:14px;border:0;border-radius:10px;padding:11px 18px;cursor:pointer;transition:.15s}
 .btn-primary{background:var(--royal);color:#fff} .btn-primary:hover{background:#1844ad}
 .btn-white{background:#fff;color:var(--ink)} .btn-white:hover{background:#eaf0fd}
 .btn-primary:disabled{opacity:.6;cursor:default}
 .btn-ghost{background:#fff;border:1.5px solid var(--line);color:var(--ink)}
 .btn-ghost:hover{background:#f0f5ff;border-color:var(--royal);color:var(--royal)}
 /* Darmowy edytor (wariant B): wyraziste, konkurencyjne wobec płatnego CTA wejście „za darmo" */
 .btn-freeedit{background:#fff;border:2px solid var(--royal);color:var(--royal);font-weight:800;position:relative;animation:feAttract 2.6s ease-in-out infinite}
 .btn-freeedit:hover{background:#eef4ff;animation:none}
 .btn-freeedit:active{background:#e1ebfb}
 .btn-freeedit .fe-badge{display:inline-block;background:#e7f7ec;color:#1a7a3c;font-size:12px;font-weight:800;padding:2px 9px;border-radius:999px;margin-left:9px;vertical-align:middle}
 /* INF-01 dostępność: widoczny focus KLAWIATUROWY dla wszystkich interaktywnych elementów.
    box-shadow na polach = pierścień odporny na lokalne `outline:none` przy :focus. */
 a:focus-visible,button:focus-visible,[role=button]:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:2px solid var(--royal);outline-offset:2px;border-radius:6px}
 input:focus-visible,textarea:focus-visible,select:focus-visible,[contenteditable]:focus-visible{outline:2px solid var(--royal);outline-offset:1px;box-shadow:0 0 0 3px rgba(30,79,196,.20)}
 /* delikatny „oddech" przyciągający wzrok — subtelny, nie krzykliwy; wyłączony przy hover i reduced-motion */
 @keyframes feAttract{0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,0);transform:translateY(0)}45%{box-shadow:0 0 0 6px rgba(37,99,235,.14);transform:translateY(-1px)}70%{box-shadow:0 0 0 0 rgba(37,99,235,0);transform:translateY(0)}}
 @media (prefers-reduced-motion:reduce){.btn-freeedit{animation:none}}
 /* UX-18: toast proponujący zapis .cvdop po pobraniu PDF (raz na sesję, nienachalny) */
 .cvdop-nudge{position:fixed;right:18px;bottom:18px;z-index:9998;max-width:340px;background:#fff;border:1px solid #cfe0fb;border-left:4px solid var(--royal);border-radius:12px;box-shadow:0 10px 30px rgba(21,51,107,.18);padding:14px 16px;opacity:0;transform:translateY(12px);transition:opacity .28s,transform .28s}
 .cvdop-nudge.on{opacity:1;transform:translateY(0)}
 .cvdop-nudge .cn-body b{display:block;font-family:YantramanavUI,Inter,sans-serif;color:#15336b;font-size:14px;margin-bottom:4px}
 .cvdop-nudge .cn-body span{display:block;font-size:12.5px;color:#5b6b8c;line-height:1.5}
 .cvdop-nudge .cn-act{display:flex;align-items:center;gap:10px;margin-top:12px}
 .cvdop-nudge .cn-save{padding:8px 14px;font-size:13px}
 .cvdop-nudge .cn-close{margin-left:auto;background:none;border:0;font-size:20px;line-height:1;color:#9fb0cc;cursor:pointer;padding:0 4px}
 .cvdop-nudge .cn-close:hover{color:#5b6b8c}
 @media (max-width:480px){.cvdop-nudge{left:12px;right:12px;bottom:12px;max-width:none}}
 /* Tryb FREE: rząd akcji zapisu .cvdop (zapisz / wyślij sobie) */
 .free-save-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
 .free-save-row .btn{padding:9px 14px;font-size:13px}
 .free-save-row .btn-freeedit{animation:none}
 /* widoczne wciśnięcie (active) dla wszystkich przycisków */
 .btn:active{transform:translateY(1px) scale(.985)}
 .btn-primary:active{background:#143a96}
 .btn-ghost:active{background:#e1ebfb;border-color:var(--royal)}
 .btn-white:active{background:#dbe7fd}
 /* stan „pracuję" (render PDF/ZIP) — wyraźny kolor, nadpisuje hover */
 .btn.busy,.btn.busy:hover{background:var(--royal);color:#fff;border-color:var(--royal);opacity:1;cursor:progress;transform:none}
 .btn-primary.busy,.btn-primary.busy:hover{background:#16307c}

 /* ---------- UPLOAD ---------- */
 .up-wrap{width:100%;max-width:1000px;margin:0 auto;padding:48px 24px} /* width:100% — bez tego auto-marginesy w flex-kolumnie .up-page dobierają szerokość do treści (karta węższa w trybie oferty) */
 /* spójność z hero strony głównej: białe karty na firmowym gradiencie */
 .up-card{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 60px -30px rgba(21,51,107,.35)}
 .up-head{padding:14px 24px;text-align:center;margin-bottom:16px}
 .up-form{padding:24px}
 .up-page .up-card.up-head h1,.up-page .up-card.up-head h2{color:#0f1f47;font-size:clamp(15px,1.9vw,19px);font-weight:600;letter-spacing:-.01em;margin:0;white-space:nowrap}
 @media(max-width:760px){.up-page .up-card.up-head h1,.up-page .up-card.up-head h2{white-space:normal;font-size:16px}}
 .cv-box{display:flex;flex-direction:column}
 .cv-box .lab{font-family:YantramanavUI,Inter,sans-serif;font-weight:600;font-size:13px;color:var(--ink);margin-bottom:7px}
 .cv-box .drop{flex:1}
 .up-page .up-card .sub{color:var(--muted);margin-left:auto;margin-right:auto}
 .up-page .up-card .offer-box .lab{color:var(--ink)}
 .up-page .up-card .extract-photo{color:#1b2536}
 .up-page .up-card .extract-photo .ep-note{color:var(--muted)}
 .up-page .up-card .priv{color:var(--muted)}
 .up-card .drop{background:#f6f8fd}
 .up-card .offer-box textarea{background:#f6f8fd}
 .up-wrap h1{font-size:34px;letter-spacing:-.02em}
 .up-wrap .sub{color:var(--muted);font-size:16px;margin:10px 0 28px;max-width:620px}
 .up-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
 .up-grid>*{min-width:0} /* obie kolumny równe niezależnie od treści (wiersz roli nie rozpycha kolumny) */
 @media(max-width:760px){.up-grid{grid-template-columns:1fr}}
 .drop{display:block;border:1.5px dashed #b01e5b;border-radius:16px;background:#fff;cursor:pointer;transition:.15s;min-height:210px;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px}
 /* podczas analizy: wygaszone i nieklikalne pola (żeby nie wpisać/klikać w trakcie sczytywania) */
 .up-grid.is-busy{opacity:.55;pointer-events:none;filter:grayscale(.2)}
 .drop.is-busy{cursor:not-allowed}
 .drop:hover,.drop.over{border-color:#8e1748;background:#fdf4f8}
 .drop-ic{font-size:30px;color:var(--royal)}
 .drop-t{font-family:YantramanavUI,Inter,sans-serif;font-weight:600;margin:10px 0 4px;color:var(--ink)}
 .drop-s{font-size:12.5px;color:var(--muted)}
 .offer-box{display:flex;flex-direction:column}
 .offer-box .lab{font-family:YantramanavUI,Inter,sans-serif;font-weight:600;font-size:13px;color:var(--ink);margin-bottom:7px}
 .offer-box textarea{flex:1;min-height:150px;resize:vertical;border:1px solid var(--line);border-radius:16px;padding:14px;font-family:YantramanavUI,Inter,sans-serif;font-size:14px;line-height:1.55;color:#1b2536}
 .offer-box textarea:focus{outline:none;border-color:var(--royal)}
 .offer-fetch-link{align-self:flex-start;margin-top:8px;background:none;border:0;color:#cfe0ff;font-family:YantramanavUI,Inter,sans-serif;font-weight:600;font-size:13px;cursor:pointer;text-decoration:underline;padding:0}
 .offer-link-msg{font-size:12.5px;margin-top:6px}
 .offer-link-msg .ok{color:#9ff5c2} .offer-link-msg .err{color:#ffd2d2}
 /* jeden przycisk „Dopasuj CV", wyśrodkowany pod wypełnionymi polami; pod nim nota prywatności */
 .up-actions{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:22px;text-align:center}
 .priv{font-size:12.5px;color:var(--muted)}
 .flash{margin-top:14px;padding:11px 14px;border-radius:10px;font-size:13.5px;background:#fff5f5;border:1px solid #f3c4c4;color:#9b2c2c}
 /* komunikat „w toku" — pulsuje, by zwrócić uwagę */
 .flash.busy{background:#eef3fd;border:1.5px solid #1e4fc4;color:#15336b;font-family:YantramanavUI,Inter,sans-serif;font-weight:700;text-align:center;animation:flashPulse 1.1s ease-in-out infinite;transform-origin:center}
 @keyframes flashPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(30,79,196,.0)}50%{transform:scale(1.035);box-shadow:0 6px 22px -8px rgba(30,79,196,.45)}}
 /* reduced-motion: zamiast braku ruchu — subtelny oddech opacity (feedback nigdy nie wygląda na zawieszony) */
 @keyframes flashFade{0%,100%{opacity:.62}50%{opacity:1}}
 @media(prefers-reduced-motion:reduce){.flash.busy{animation:flashFade 1.5s ease-in-out infinite}}
 /* prośba o opinię po pobraniu CV */
 .rev-ask{margin-top:12px;border:1px solid var(--line);border-radius:12px;padding:14px 15px;background:#fff}
 .rev-q{font-family:YantramanavUI,Inter,sans-serif;font-weight:700;font-size:14px;color:var(--ink);margin-bottom:8px}
 .rev-stars{display:flex;gap:4px;margin-bottom:10px}
 .rev-star{background:none;border:0;cursor:pointer;font-size:30px;line-height:1;color:#d6deec;padding:0;transition:.1s}
 .rev-star.on{color:#f6b21b}
 .rev-name,.rev-text{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 11px;font:inherit;font-size:13.5px;color:var(--ink);margin-bottom:8px;box-sizing:border-box}
 .rev-name:focus,.rev-text:focus{outline:none;border-color:var(--royal)}
 .rev-row{display:flex;gap:10px;align-items:center}
 .rev-msg{font-size:12.5px}.rev-msg .err{color:#9b2c2c}
 .rev-thanks{font-family:YantramanavUI,Inter,sans-serif;font-weight:700;color:#0f6e56;padding:6px 0}

 /* ---------- UPLOAD: nagłówek + stopka (spójne z serwisem) ---------- */
 .up-page{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,#0f1f47,#1e4fc4)}
 .up-page .up-wrap{flex:1}
 /* na niebieskim gradiencie tła ekranu startowego — jasny tekst (spójnie z hero landingu) */
 .up-page .up-wrap h1{color:#fff}
 .up-page .up-wrap .sub{color:#cfe0ff}
 .up-page .offer-box .lab{color:#eaf1ff}
 .up-page .priv{color:#cfe0ff}
 .up-page .extract-photo{color:#fff}
 .up-page .extract-photo .ep-note{color:#cfe0ff}
 .up-page .drop-s{color:#5a6a88}
 .up-top{background:#fff;border-bottom:1px solid var(--line);height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;position:sticky;top:0;z-index:20}
 .up-top img{height:26px}
 .up-top .ut-nav{display:flex;gap:26px}
 .up-top .ut-nav a{font-family:YantramanavUI,Inter,sans-serif;font-weight:600;font-size:14px;color:#33415c;text-decoration:none}
 .up-top .ut-nav a:hover{color:var(--royal)}
 @media(max-width:760px){.up-top .ut-nav{display:none}}
 .up-foot{background:#0f244f;color:#aebbd8;padding:28px 0;font-size:13.5px}
 .up-foot .in{max-width:880px;margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
 .up-foot a{color:#aebbd8}.up-foot a:hover{color:#fff}
 /* Stopka edytora — spójna ze stroną główną */
 .ed-foot{background:#0f244f;color:#aebbd8;padding:40px 0 26px;margin-top:28px;font-size:14px}
 .ed-foot a{color:#aebbd8;text-decoration:none}.ed-foot a:hover{color:#fff}
 .ef-wrap{max-width:1080px;margin:0 auto;padding:0 24px}
 .ef-cols{display:flex;gap:44px;flex-wrap:wrap}
 .ef-brand{max-width:300px}
 .ef-logo{display:inline-flex;align-items:center;gap:10px}
 .ef-logo img{height:30px;border-radius:7px}
 .ef-logo>span{font-family:YantramanavUI,Inter,sans-serif;font-weight:800;font-size:20px;color:#fff;letter-spacing:-.01em}
 .ef-dot{color:#3b82f6}
 .ef-brand p{margin-top:12px;font-size:14px;line-height:1.5}
 .ef-col{display:flex;flex-direction:column;gap:7px}
 .ef-h{color:#fff;font-family:YantramanavUI,Inter,sans-serif;font-weight:600;margin-bottom:4px}
 .ef-note{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);font-size:13px;opacity:.85}
 @media(max-width:720px){.ef-cols{gap:26px}.ed-foot{padding-bottom:92px}}
 .up-foot .lk{display:flex;gap:16px;flex-wrap:wrap}

 /* ---------- TOP BAR ---------- */
 .top{position:sticky;top:0;z-index:20;background:linear-gradient(90deg,#15336b,#1e4fc4);border-bottom:0;box-shadow:0 2px 10px -4px rgba(21,51,107,.55);display:flex;align-items:center;gap:18px;padding:0 22px;height:54px}
 .top .lang-cap{color:#fff}
 .top #lang{background:#fff;color:var(--ink);border:1px solid rgba(255,255,255,.55);border-radius:8px;padding:6px 9px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer}
 /* „Usuń moje dane" — wyraźny biały kafel z czerwonym tekstem (ostrzegawczy), dobrze widoczny na niebieskim pasku */
 .top-wipe{margin-left:auto;background:#fff;border:0;color:#c4185b;font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;border-radius:9px;padding:8px 13px;white-space:nowrap;box-shadow:0 3px 10px -3px rgba(0,0,0,.3);transition:.15s}
 .top-wipe:hover{background:#ffe9f1;color:#a01049}
 /* ŚCIEŻKA KLIENTA (kroki) — w NIEBIESKIM PASKU, obok języka. Jeden pasek zamiast dwóch: 46 px wysokości ekranu
    wracają do podglądu CV. Styl NOWOCZESNY: bez grotów i ramek — same etykiety oddzielone delikatnym „›", jak
    ścieżka nawigacji. Aktywny krok: biały tekst + cienka kreska pod spodem (zamiast wypełnionego kafla).
    JEDEN odcień (biel o różnej mocy) — zielenie/szarości z jasnego motywu wyglądały na granacie przypadkowo. */
 /* margin-left: pierwszy krok („Analiza") ma zaczynać się DOKŁADNIE nad lewą krawędzią panelu edycji — czyli tuż
    za pionowym paskiem z farbkami. Bez tego ścieżka kleiła się do logo i wisiała nad niczym. */
 .stepper{display:flex;align-items:center;flex:1 1 auto;min-width:0;height:100%;margin-left:32px;background:transparent;border-bottom:0;padding:0 4px;gap:0;overflow-x:auto;scrollbar-width:none}
 .stepper::-webkit-scrollbar{display:none}
 .stepper .stp{position:relative;display:flex;align-items:center;gap:7px;height:30px;font-family:YantramanavUI,Inter,sans-serif;font-weight:500;font-size:14px;letter-spacing:.1px;color:rgba(255,255,255,.62);background:transparent;clip-path:none;border-radius:8px;padding:0 10px;white-space:nowrap;transition:color .15s,background .15s}
 /* separator kierunkowy — tylko znak, bez ramki */
 .stepper .stp + .stp::before{content:"›";margin-right:9px;color:rgba(255,255,255,.30);font-size:16px;font-weight:400}
 .stepper .stp:not(.locked){cursor:pointer}
 .stepper .stp:not(.locked):not(.on):hover{color:#fff;background:rgba(255,255,255,.10)}
 /* aktywny: biel + PROSTA kreska pod etykietą. Inset box-shadow tu nie działa — zaokrąglone rogi zaginały go
    w „U" i wyglądało to jak ramka, czyli dokładnie to, czego mieliśmy się pozbyć. Stąd osobny pasek w ::after. */
 .stepper .stp.on{color:#fff;font-weight:600}
 .stepper .stp.on::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;border-radius:2px;background:#fff}
 .stepper .stp.done{color:rgba(255,255,255,.82)}
 /* wygaszony krok („Analiza" w ścieżkach darmowych): klik nic nie robi, więc i wygląd bez zachęty */
 .stepper .stp.na{opacity:.42;cursor:default!important}
 .stepper .stp.na:hover{background:transparent;color:rgba(255,255,255,.62)}
 .stepper .stp.locked{color:rgba(255,255,255,.45)}
 /* „Od nowa" to nie krok ścieżki, tylko akcja kończąca pracę — oddzielona pionową kreską zamiast strzałki „›”,
    żeby nie czytało się jako „kolejny etap, do którego zmierzasz". Nigdy nie jest .on ani .done. */
 .stepper .stp-restart{margin-left:6px;padding-left:14px;color:rgba(255,255,255,.55)}
 .stepper .stp-restart::before{content:""!important;margin:0!important;position:absolute;left:0;top:7px;bottom:7px;width:1px;background:rgba(255,255,255,.22)}
 .stepper .stp-restart:hover{color:#fff;background:rgba(255,255,255,.10)}
 /* numer/ikona kroku: zwykły znak w tym samym kolorze co etykieta — żadnych kółek i teł */
 .stepper .stp-n{display:inline-flex;align-items:center;justify-content:center;width:auto;height:auto;min-width:12px;border-radius:0;background:none;font-size:12px;font-weight:500;opacity:.7;flex:none}
 .stepper .stp.done .stp-n{font-size:0}
 .stepper .stp.done .stp-n::before{content:"✓";font-size:12px}
 .stepper .stp.locked .stp-n{font-size:0}
 .stepper .stp.locked .stp-n::before{content:"🔒";font-size:11px}
 @media(max-width:1180px){.stepper{margin-left:14px}.stepper .stp{padding:0 7px;font-size:13px}.stepper .stp + .stp::before{margin-right:6px}}
 /* Kroki jadą razem z navy (`.top` jest sticky top:0) — widoczne i klikalne cały czas, bez drugiego paska.
    Plakietka pakietu („🎟 pozostało…") stoi obok, w tej samej konwencji. */
 .topinfo .acct-badge{background:#eef4ff!important;color:#15336b!important;border-left:0!important;border-radius:999px!important;font-size:11.5px!important;padding:5px 11px!important;margin-left:8px}
 /* Mobilna nawigacja kroków — czytelne klawisze zamiast numerków (które nic nie mówią). Desktop: ukryta. */
 .mobnav{display:none}
 @media(max-width:640px){
   /* ŚCIEŻKA KROKÓW NA TELEFONIE — PRZEWIJANY, KLIKALNY BREADCRUMB (28.07.2026, decyzja właściciela).
      BYŁO: `.top .stepper{display:none}` z uzasadnieniem „nieczytelne groty z cyframi (jest mobnav)",
      a pod paskiem stał osobny rząd „‹ Wstecz · Krok i/N · Dalej ›" (`.mobnav`) zjadający ~50 px wysokości.
      TERAZ: kroki wracają do niebieskiego paska OBOK LOGO — logo i tak zajmuje tam całą wysokość, więc
      ścieżka nie kosztuje ani piksela dodatkowo. Aktywny krok grubszy, następny widoczny obok, resztę
      odsłania przesunięcie w bok. Przewijanie i klikanie były już gotowe (`overflow-x:auto` w `.stepper`
      oraz `goStep(el.dataset.k)` w `app.js`) — trzeba było je tylko odsłonić i zmniejszyć.
      `.mobnav` znika: breadcrumb robi to samo, a jest klikalny na każdym kroku, nie tylko o jeden w przód/tył. */
   /* ⚠️ `flex:1 1 0` (a NIE `1 1 auto`): przy `auto` bazą jest szerokość TREŚCI (~525 px), więc w pasku
      z `flex-wrap:wrap` ścieżka zawijała się do własnego wiersza i pasek rósł z 51 do 85 px — dokładnie
      odwrotnie do celu. Baza 0 + `min-width:0` każą jej skurczyć się do wolnego miejsca OBOK logo
      i przewijać w środku, zamiast rozpychać pasek. */
   .top .stepper{display:flex;flex:1 1 0;min-width:0;margin-left:10px;padding:0;height:auto;gap:0;
     -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
   .top .stepper .stp{height:26px;font-size:11.5px;padding:0 6px;gap:5px}
   .top .stepper .stp + .stp::before{margin-right:4px;font-size:13px}
   .top .stepper .stp.on{font-weight:800;color:#fff}
  /* skrócone `padding` z reguły wyżej zjada wcięcie na kreskę — przywracamy je jawnie */
  .top .stepper .stp-restart{padding-left:12px}
   .top .stepper .stp.on::after{left:6px;right:6px}
   .top .stepper .stp-n{font-size:10px}
   .mobnav{display:none!important}           /* zastąpiony przewijanym breadcrumbem w pasku navy */
   .topinfo .acct-badge{display:none!important}
   .mobnav{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;background:var(--bg);border-bottom:1px solid var(--line)}
   .mobnav .mn-btn{flex:0 0 auto;background:#fff;border:1.5px solid var(--line);color:var(--ink);font-family:YantramanavUI,Inter,sans-serif;font-weight:700;font-size:13px;padding:9px 13px;border-radius:9px;cursor:pointer}
   .mobnav .mn-btn:disabled{opacity:.4;cursor:default}
   .mobnav .mn-cur{flex:1 1 auto;text-align:center;line-height:1.2;min-width:0}
   .mobnav .mn-cur .mn-step{display:block;font-size:11px;color:var(--muted);font-weight:600}
   .mobnav .mn-cur b{font-family:YantramanavUI,Inter,sans-serif;font-size:14.5px;color:var(--ink)}
 }
 .top-logo{height:34px!important;width:auto}
 .dots-wrap{display:inline-flex;align-items:center;gap:8px}
 .dots-lab{font-size:12.5px;color:var(--muted);white-space:nowrap}
 /* przyciski akcji obok podglądu CV (nie w pasku górnym — pasek niższy) */
 .pv-head-row{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
 .pv-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center}
 .pv-actions .btn{padding:12px 18px;font-size:14px;white-space:nowrap}
 .btn-cover{background:#fff;border:1.5px solid var(--royal);color:var(--royal)}
 .btn-cover:hover{background:#f0f5ff}
 .btn-linkedin{background:#fff;border:1.5px solid #94a3b8;color:#475569}
 .btn-linkedin:hover{background:#f1f5f9}
 .cover-free{font-weight:700;font-size:10.5px;background:var(--royal);color:#fff;border-radius:999px;padding:1px 7px;margin-left:5px;vertical-align:middle}
 /* kafelek promujący list motywacyjny (po analizie, w lewej kolumnie) */
 .cl-promo{display:flex;align-items:center;gap:12px;margin:14px 0;padding:13px 15px;border:1.5px solid var(--royal);border-radius:12px;background:linear-gradient(180deg,#f6f9ff,#fff)}
 .cl-promo-ic{font-size:22px;line-height:1;flex:none}
 .cl-promo-txt{flex:1;min-width:0}
 .cl-promo-txt>b{display:block;font-family:YantramanavUI,Inter,sans-serif;font-size:13.5px;color:var(--ink)}
 .cl-promo-txt span b{color:var(--ink)}
 .cl-promo-txt span{display:block;font-size:12px;color:var(--muted);line-height:1.4;margin-top:2px}
 .cl-promo .btn{flex:none;padding:8px 14px;font-size:13px}
 /* Upsell „dopłać 29 zł" na ostatnim kroku (plan pojedynczy) */
 .iq-upsell{border:1.5px solid var(--royal);border-radius:14px;padding:16px 18px;margin:14px 0;background:linear-gradient(180deg,#eef4ff,#fff);box-shadow:0 10px 24px -16px rgba(21,51,107,.5)}
 .iq-up-h{font-family:YantramanavUI,Inter,sans-serif;font-weight:800;font-size:16px;color:var(--ink);margin-bottom:6px}
 .iq-upsell p{font-size:13.5px;color:#33415c;line-height:1.5;margin:0}
 .top img{height:26px}
 .center{display:flex;align-items:center;gap:14px}
 .topcap{display:flex;flex-direction:column;line-height:1.05;font-family:YantramanavUI,Inter,sans-serif;font-weight:700;font-size:13px;color:var(--ink);padding-right:12px;margin-right:2px;border-right:1px solid var(--line)}
 .topcap small{font-weight:600;font-size:10.5px;letter-spacing:.02em;color:var(--muted);margin-top:2px;text-transform:none}
 @media(max-width:760px){.topcap{display:none}}
 .seg{display:flex;background:#eef2f8;border-radius:10px;padding:3px}
 .seg button{font-family:YantramanavUI,Inter,sans-serif;font-weight:600;font-size:13.5px;border:0;background:transparent;color:#4a5a78;padding:7px 16px;border-radius:8px;cursor:pointer}
 .seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(21,51,107,.12)}
 .dots{display:flex;flex-wrap:wrap;gap:10px}.dot{width:60px;height:60px;border-radius:12px;cursor:pointer;border:3px solid transparent}
 .dot.on{border-color:#15336b;box-shadow:0 0 0 3px #dbe7fd}
 /* własny kolor — tęcza = „wybierz dowolny", natywny picker ukryty pod kafelkiem */
 .dot-custom{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;background:conic-gradient(from 0deg,#ff4d4d,#ffb84d,#ffe34d,#4dff88,#4dd2ff,#4d6bff,#b54dff,#ff4dce,#ff4d4d)}
 .dot-custom input[type=color]{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
 .dot-custom .dc-ic{position:relative;color:#fff;font-weight:800;font-size:13px;line-height:1;text-shadow:0 1px 2px rgba(0,0,0,.5);pointer-events:none}
 select{font-family:YantramanavUI,Inter,sans-serif;font-size:14px;border:1px solid var(--line);border-radius:9px;padding:7px 10px;background:#fff;color:var(--ink)}

 /* ---------- LAYOUT ---------- */
 /* 54 px = wysokość navy (kroki są już w środku, drugiego paska nie ma) */
 .layout{display:grid;grid-template-columns:1fr 1fr;height:calc(100vh - 54px)}
 @media(min-width:901px){
   .editwrap{display:flex;flex-direction:column;height:100vh;overflow:hidden}
   .layout{flex:1 1 auto;height:auto;min-height:0}
 }
 /* Pasek potwierdzenia po opłacie — bez niego klient widzi surowy tekst (najczulszy moment) */
 .paid-banner{position:relative;background:#eafaf2;border-bottom:1px solid #c7ecd9;color:#0f5e49;font-size:13px;font-weight:600;padding:9px 34px 9px 16px;text-align:center;line-height:1.4}
 /* ✕ do zamknięcia paska (03.08.2026) — klient odzyskuje wysokość ekranu nad podglądem CV. */
 .zam-x{position:absolute;top:5px;right:8px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;
   border:0;border-radius:7px;background:transparent;color:inherit;opacity:.55;font-size:13px;line-height:1;cursor:pointer;padding:0}
 .zam-x:hover{opacity:1;background:rgba(0,0,0,.07)}
 .zone-head.pv{position:relative;padding-right:30px}
 .zam-x-pv{top:2px;right:2px;color:#5a6a88}
 /* W plakietce pakietu ✕ stoi W LINII (plakietka to wąski flex, nie pasek na całą szerokość). */
 .zam-x-badge{position:static;width:18px;height:18px;margin-left:2px;font-size:11px;opacity:.45}
 @media(min-width:901px){ .paid-banner{margin-left:50%;border-left:1px solid #c7ecd9} }
 .paid-banner b{color:#0a4d3a}
 .bn-desk{display:inline} /* dłuższa nota o plikach — tylko desktop (czysty pasek na mobile); edytor i tak noindex */
 @media(max-width:760px){.bn-desk{display:none}}
 /* Overlay generowania: wykres słupkowy postępu + dopasowania (zamiast zdjęcia — działa bez zdjęcia, niewykradalny) */
 #gen-overlay{position:fixed;inset:0;z-index:10040;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0c1530,#142450);opacity:0;transition:opacity .45s ease}
 #gen-overlay.on{opacity:1}
 .go-card{text-align:center;color:#fff;padding:24px;width:min(460px,92vw)}
 .go-cap{font-family:YantramanavUI,Inter,sans-serif;font-weight:700;font-size:21px;line-height:1.25}
 .go-sub{color:#bcccea;font-size:14px;margin-top:7px}
 .go-chart{margin:22px 0 14px;display:flex;flex-direction:column;gap:16px;text-align:left}
 .goc-line{display:flex;flex-direction:column;gap:6px}
 .goc-lab{font-size:12.5px;color:#cdd9f1;display:flex;align-items:center;gap:8px}
 .goc-lab b{margin-left:auto;color:#fff;font-variant-numeric:tabular-nums}
 .goc-track{position:relative;height:16px;border-radius:9px;background:rgba(255,255,255,.10);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.30)}
 .goc-fill{position:absolute;top:0;left:0;height:100%;border-radius:9px;width:0}
 /* postęp = neutralny lawendowy; „teraz" = bursztyn (neutralny, NIE czerwony); „po poprawkach" = firmowy niebieski (aspiracyjny) */
 .goc-progress{background:linear-gradient(90deg,#7b91cf,#9db2e4);transition:width .12s linear}
 .goc-score{background:linear-gradient(90deg,#d99440,#efb160);z-index:2;transition:width 1.1s cubic-bezier(.22,1,.36,1)}
 .goc-pot{background:linear-gradient(90deg,#1e4fc4,#5a86ec);z-index:1;transition:width 1.2s cubic-bezier(.22,1,.36,1)}
 /* poniżej progu 35% — narracja gwarancji: czerwień + komunikat „nie płacisz" (jedyne miejsce na czerwony) */
 #gen-overlay.lowfit .goc-score{background:linear-gradient(90deg,#d85046,#e8675c)}
 .goc-ends{display:flex;justify-content:space-between;gap:10px;font-size:12px;margin-top:3px}
 .goc-now{color:#f0c98a;font-weight:700;font-variant-numeric:tabular-nums}
 #gen-overlay.lowfit .goc-now{color:#f3a39a}
 .goc-goal{color:#bcd0fb;font-weight:700;font-variant-numeric:tabular-nums}
 .go-legend{display:flex;flex-direction:column;gap:6px;max-width:340px;margin:0 auto;font-size:12.5px;color:#d6e0f5;text-align:left}
 .go-legend .lg{display:flex;align-items:center;gap:8px}
 .go-legend .lg.off{display:none}
 .go-legend b{margin-left:auto;color:#fff;font-variant-numeric:tabular-nums}
 .go-legend .sw{flex:none;width:13px;height:13px;border-radius:4px}
 .sw-prog{background:#9db2e4}.sw-score{background:#efb160}.sw-pot{background:#4f7ce8}
 .go-note{margin:14px auto 0;max-width:340px;font-size:11.5px;color:#9fb1d6;line-height:1.45}
 @media(prefers-reduced-motion:reduce){.goc-progress,.goc-score,.goc-pot{transition:width .3s linear}}
 /* Wyśrodkowany, BLOKUJĄCY popup procesu (#9): „Aktualizuję…"/„Generuję…" — zawsze widoczny na środku, pulsuje. */
 /* ⚠️ z-index 10050, nie 340: panel tonu (tone-ui.js, samodzielny moduł) ma 9998/9999, więc popup „Aktualizuję…"
    chował się POD suwakami tonu — klient klikał „Zastosuj ton" i nie widział, że cokolwiek się dzieje (zgłoszone
    26.07). Blokujący popup procesu musi być najwyższą warstwą w edytorze; #gen-overlay tuż pod nim. */
 #proc-popup{position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center;background:rgba(12,21,48,.55);opacity:0;transition:opacity .2s ease}
 #proc-popup.on{opacity:1}
 .pp-card{background:#fff;border-radius:18px;padding:26px 30px;text-align:center;box-shadow:0 30px 70px -30px rgba(12,21,48,.6);max-width:min(420px,92vw);animation:ppPulse 1.25s ease-in-out infinite;transform-origin:center}
 @keyframes ppPulse{0%,100%{transform:scale(1);box-shadow:0 20px 50px -30px rgba(12,21,48,.5)}50%{transform:scale(1.025);box-shadow:0 26px 60px -26px rgba(30,79,196,.5)}}
 .pp-cap{font-family:YantramanavUI,Inter,sans-serif;font-weight:700;font-size:18px;color:#15336b;margin-top:12px;line-height:1.3}
 .pp-sub{font-size:13px;color:#5a6a88;margin-top:6px;line-height:1.45}
 .pp-spin{display:inline-flex;gap:7px}
 .pp-spin i{width:11px;height:11px;border-radius:50%;background:#1e4fc4;display:inline-block;animation:ppDot 1s ease-in-out infinite}
 .pp-spin i:nth-child(2){animation-delay:.15s}.pp-spin i:nth-child(3){animation-delay:.3s}
 @keyframes ppDot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-5px)}}
 @media(prefers-reduced-motion:reduce){.pp-card{animation:ppBreathe 1.8s ease-in-out infinite}.pp-spin i{animation:ppFade 1.2s ease-in-out infinite}}
 @keyframes ppBreathe{0%,100%{opacity:.9}50%{opacity:1}}
 @keyframes ppFade{0%,100%{opacity:.35}50%{opacity:1}}
 @media(max-width:900px){.layout{grid-template-columns:1fr;height:auto}}
 /* LinkedIn i Pytania: mało treści z lewej (panel + mgiełka) → desktop 30/70 zamiast 50/50 */
 @media(min-width:901px){.layout-linkedin,.layout-questions{grid-template-columns:30% 70%}}
 /* ===== MOBILE: jeden przełącznik widoku (góra) + stały pasek akcji (dół) ===== */
 .mtoggle{display:none}
 .mactbar{display:none}
/* „Powrót do podglądu" to funkcja WYŁĄCZNIE telefonowa: na desktopie panel i podgląd stoją obok siebie,
    więc nie ma z czego wracać. Przycisk jest w markupie ZAWSZE (patrz komentarz przy regule mobilnej),
    dlatego chowamy go tu globalnie, a odsłaniamy dopiero w regule telefonowej niżej.
    ⚠️ Ta sama specyficzność => decyduje KOLEJNOŚĆ: ta reguła MUSI stać PRZED blokiem mobilnym. */
.back-pv{display:none}

 @media(max-width:900px){
   /* iOS Safari zoomuje pole gdy font <16px — wymuszamy 16px na WSZYSTKICH polach edycji (eliminuje rozjazd layoutu) */
   .fld .val,.role,.bul,.sec-title,.ci,.cl-inp,.cl-ta,.ae-ta,.up-extra,.offer-box textarea,.rev-name,.rev-text{font-size:16px}
   /* cele dotykowe ≥40px dla nowych kontrolek kolejności i znaków podziału */
   .mv button{width:40px;height:40px;font-size:17px}
   .preset-btn{padding:10px 12px;font-size:13.5px;flex:1 1 calc(50% - 7px)}
   .brk-tab{width:40px;height:40px;font-size:15px}
   .top{height:auto;flex-wrap:wrap;gap:8px;padding:8px 12px}
   .top-logo{height:30px!important}
   .center{flex-wrap:wrap;gap:8px;width:100%;order:3;margin-top:2px}
   .center select{flex:1 1 46%;min-width:0;font-size:13px;padding:9px 10px}
   .dots-wrap{flex:1 1 100%}
   .mtoggle{display:block;width:100%;order:2;margin-top:4px;border:1px solid var(--line);border-radius:9px;background:#fff;font-family:YantramanavUI,Inter,sans-serif;font-weight:700;font-size:14px;color:var(--royal);padding:11px 4px;cursor:pointer}
   .left{border-right:0;padding:14px;padding-bottom:90px}
   .right{padding:14px 14px 90px;overflow:visible;display:block}
   .pv-head-row{flex-direction:column;align-items:stretch;gap:10px}
   #preview{margin:0 auto}
   .editwrap.mt-preview .left{display:none}
   .editwrap.mt-preview .center{display:none}
   .editwrap.mt-edit .right{display:none}
   .editwrap.mt-edit .center{display:none}
   /* akcje wyłącznie na dolnym pasku — chowamy CTA w treści i nad podglądem */
   .stage-cta,.pv-actions{display:none!important}
   .mactbar{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:60;
     padding:9px 12px calc(9px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);
     box-shadow:0 -8px 22px -12px rgba(21,51,107,.45)}
   /* DOLNY PASEK AKCJI ZDJĘTY 28.07.2026 (decyzja właściciela: „ekran ma być większy").
      Trzy klawisze, które tam stały, mają teraz swoje miejsca:
        „⬇ Pobierz PDF" → klawisz „Pobierz" na pionowym pasku z lewej,
        „Dalej"         → KLIKALNY breadcrumb w niebieskim pasku (można skoczyć na dowolny krok, nie tylko o jeden),
        „↺ Od nowa"     → ⚠️ NIE MA odpowiednika na telefonie (na desktopie siedzi w `.pv-actions`, które
                          na telefonie są ukryte). Świadoma strata, zgłoszona właścicielowi. */
   .mactbar{display:none!important}
   .mactbar .btn{flex:1;width:auto;white-space:nowrap;padding:13px 10px}

   /* OPISY NAD PODGLĄDEM → W PION, PRZY PRAWEJ KRAWĘDZI (28.07.2026, prośba właściciela).
      BYŁO: dwa poziome paski nad kartką — „👁 Podgląd CV / Tak będzie wyglądało Twoje CV" oraz plakietka
      „✏️ Wszystko edytowalne…". Razem zjadały ~70 px wysokości telefonu, a podgląd ma być bohaterem ekranu.
      TERAZ: podtytuł znika (powtarzał to, co mówi sam widok), a plakietka staje pionowo z boku — dokładnie
      tak, jak od dawna działa na desktopie (patrz reguła w @media(min-width:901px) niżej).
      ⚠️ ŚWIADOMY KOSZT: pionowa plakietka rezerwuje 34 px szerokości, czyli na ekranie 390 px kartka CV
      zwęża się o ~9%. Poprzednia decyzja brzmiała „na mobile z boku nie ma miejsca" — zmieniamy ją na
      wyraźną prośbę właściciela, bo odzyskana wysokość jest ważniejsza niż te 34 px. */
   /* KAŻDA ZAKŁADKA MA SWÓJ OPIS, PIONOWO PRZY PRAWEJ KRAWĘDZI:
        Podgląd → „Tak będzie wyglądało Twoje CV"  (podtytuł `.zh-s`, wyjęty z poziomego nagłówka)
        Treść   → „Wszystko edytowalne…"           (kopia plakietki, `.edit-badge-m` w lewym panelu)
      Plakietka `.edit-badge` z prawego panelu jest na telefonie zbędna — jej miejsce zajmuje podtytuł,
      a jej treść przeniosła się tam, gdzie faktycznie się edytuje. Na desktopie BEZ ZMIAN. */
   .right{position:relative}
   .right>div{padding-right:34px}
   /* ⚠️ `!important` NIE dla ozdoby: bazowa reguła `.edit-badge{display:inline-flex}` stoi w pliku PÓŹNIEJ
      niż ten blok mobilny, a ma tę samą specyficzność — bez tego wygrywa i plakietka dalej wisi poziomo
      nad podglądem. `:not(.edit-badge-m)` chroni kopię z lewego panelu, która ma być widoczna. */
   .edit-badge:not(.edit-badge-m){display:none!important}   /* w podglądzie zastępuje ją podtytuł (niżej) */
   /* ⚠️ `.zone-head` ma `position:sticky`, a to TWORZY UKŁAD ODNIESIENIA dla potomków `absolute` —
      bez tego podtytuł kotwiczył się do nagłówka i lądował na środku (lewa=236) zamiast przy krawędzi.
      W podglądzie na telefonie nagłówek nie musi się przyklejać: został z niego sam tytuł. */
   /* Nagłówek „👁 Podgląd treści CV" jest na telefonie ZBĘDNY — ten sam widok opisuje już pionowa etykieta
      przy prawej krawędzi. Zostawiamy sam podtytuł (`.zh-s`), który i tak jest wyjęty z toku (`absolute`),
      więc pasek zwija się do zera i oddaje całą wysokość kartce CV. */
   .zone-head.pv{position:static;padding:0;margin:0;border-bottom:0;min-height:0}
   .zone-head.pv .zh-ic,
   .zone-head.pv .zh-t{display:none}
   .pv-head-row{margin-bottom:0}
   /* Pionowa etykieta „Tak będzie wyglądać Twoje CV" ZDJĘTA 28.07 (decyzja właściciela): zabierała 34 px
      szerokości kartki, a pasek z lewej i tak pokazuje, w którym trybie jesteśmy. Podgląd ma być jak
      największy. Podtytuł zostaje w kodzie (desktop go używa poziomo) — chowamy tylko na telefonie. */
   .zone-head.pv .zh-s{display:none}
   .right>div{padding-right:0}

   /* PASEK NARZĘDZI PRZY PODGLĄDZIE (28.07.2026, prośba właściciela).
      Na telefonie `.cv-rail` był chowany w całości (`app.js`: `@media(max-width:900px){.cv-rail{display:none}}`),
      bo „wąska kolumna nie ma miejsca na pasek z boku". W ZAKŁADCE PODGLĄD miejsce jednak jest — panel treści
      i tak jest wtedy schowany, więc lewa kolumna stoi pusta. Pokazujemy z niej WYŁĄCZNIE pasek narzędzi.
      ⚠️ Specyficzność, nie kolejność: `.editwrap.mt-preview .cv-rail` (0,3,0) bije `.cv-rail{display:none}` (0,1,0)
      niezależnie od tego, że tamta reguła wstrzykiwana jest z app.js już po wczytaniu tego pliku.
      ⚠️ KOSZT: pasek zabiera 76 px, a pionowa etykieta po prawej 34 px — na ekranie 390 px kartce CV zostaje
      ~265 px zamiast 356. To dużo; jeśli okaże się za ciasno, pierwszy do zdjęcia jest pasek, nie etykieta. */
   .editwrap.mt-preview .layout{grid-template-columns:auto 1fr}
   .editwrap.mt-preview .left{display:block;padding:10px 5px 90px;border-right:1px solid var(--line);background:#fff}
   .editwrap.mt-preview .left .ed-main{display:none}
   .editwrap.mt-preview .left .edit-badge-m{display:none}   /* plakietka „edytowalne" dotyczy zakładki Treść */
   /* ⚠️ `flex-direction:column` MUSI tu być: w `app.js` stoi `@media(max-width:760px){.cv-rail{flex-direction:row}}`,
      które układa pasek POZIOMO. Bez nadpisania dziewięć klawiszy wciskało się w 76 px — każdy 35 px szeroki
      i 201 px wysoki, z napisami łamanymi po jednej literze. To samo dotyczy `.cvr` (tam `flex-direction:row`). */
   .editwrap.mt-preview .cv-rail{display:flex;flex-direction:column;flex:0 0 auto;width:76px;position:sticky;top:8px;gap:4px}
   .editwrap.mt-preview .cvr{flex:none;flex-direction:column;justify-content:center;padding:9px 3px;gap:2px}
   .editwrap.mt-preview .cvr-ic{font-size:18px}
   .editwrap.mt-preview .cvr-t{font-size:10.5px;line-height:1.15}
   .editwrap.mt-preview .cvr-b{font-size:8.5px}
   /* ⚠️ Padding podajemy JAWNIE z obu stron: bazowa reguła `.right{padding:0 30px 30px}` stoi w pliku PÓŹNIEJ
      niż blok mobilny i ma tę samą specyficzność, więc mobilne `padding:14px` nigdy nie wchodziło — z prawej
      zostawało 30 px pustego marginesu, który zjadał kartkę CV mimo zdjęcia pionowej etykiety. */
   .editwrap.mt-preview .right{padding-left:8px;padding-right:8px}
   /* Górny przycisk na całą szerokość („✏️ Edytuj treść" / „🎨 Wybierz inny styl") jest w PODGLĄDZIE zbędny —
      te same akcje ma teraz pasek z lewej (Treść, Szablony, Typografia, Kolor). Zostaje TYLKO w zakładce
      Treść, gdzie paska nie ma i bez niego nie dałoby się wrócić do podglądu. */
   .editwrap.mt-preview .mtoggle{display:none}

   /* PASEK NARZĘDZI WIDOCZNY W KAŻDEJ ZAKŁADCE (28.07.2026, decyzja właściciela: „zawsze toolbar widoczny").
      Wcześniej stał tylko przy podglądzie, więc po wejściu w Szablony znikał i nie dało się przeskoczyć
      do Pobierz czy Podglądu bez wracania. Teraz towarzyszy też panelowi edycji — `.ed-col` staje się
      dwukolumnowe (pasek + panel), tak jak na desktopie.
      Górny przycisk na całą szerokość znika także tutaj: „Podgląd" jest już na pasku, a odzyskane ~50 px
      wysokości idzie na treść. */
   .editwrap.mt-edit .cv-rail{display:flex;flex-direction:column;flex:0 0 auto;width:76px;position:sticky;top:8px;gap:4px}
   .editwrap.mt-edit .cvr{flex:none;flex-direction:column;justify-content:center;padding:9px 3px;gap:2px}
   .editwrap.mt-edit .cvr-ic{font-size:18px}
   .editwrap.mt-edit .cvr-t{font-size:10.5px;line-height:1.15}
   .editwrap.mt-edit .cvr-b{font-size:8.5px}
   .editwrap.mt-edit .ed-col{display:flex;gap:8px;align-items:flex-start}
   .editwrap.mt-edit .ed-main{flex:1 1 auto;min-width:0}
   .editwrap.mt-edit .left{padding-left:5px;padding-right:8px}
   .editwrap.mt-edit .mtoggle{display:none}
   /* „POWRÓT DO PODGLĄDU" — JEDYNE PEWNE WYJŚCIE Z EDYCJI NA TELEFONIE (29.07.2026).
      ⚠️ Do 29.07 pokazywał się TYLKO po wejściu w edycję klikiem we fragment na podglądzie. Klient, który
      wszedł lewą belką w „Treść" i zaczął pisać, nie miał go wcale — i wychodził z CV, żeby wrócić do podglądu.
      Teraz przycisk jest w markupie ZAWSZE, a o widoczności decyduje wyłącznie CSS (telefon + zakładka edycji).
      Świadomie nie warunkujemy go w JS: szerokość okna w chwili renderu bywa nieaktualna (obrót ekranu,
      wysunięta klawiatura), a każdy taki błąd zostawia klienta w edycji bez wyjścia.
      `position:sticky; top:0` — MUSI być u góry: na dole ekranu stoi klawiatura systemowa i zasłania wszystko
      poniżej. Przyklejony zostaje widoczny także po przewinięciu długiej sekcji. */
   /* ⚠️ POPRAWKA 29.07 (trzecia i ostateczna). Historia: 1) `sticky` w panelu — jechał razem ze stroną,
      gdy iOS przesuwał widok pod klawiaturę; 2) `fixed` — lepiej, ale iOS liczy `fixed` względem widoku
      UKŁADU, więc po AUTO-ZOOMIE na pole (Safari powiększa, gdy pole ma font < 16 px) przycisk lądował
      poza widocznym wycinkiem. Klient widział go dopiero po oddaleniu ekranu gestem — a jak słusznie
      zauważył właściciel, nie każdy wpadnie na to, że można oddalić.
      DECYZJA WŁAŚCICIELA: zoom ZOSTAJE (przy powiększeniu widać więcej), więc to przycisk ma się dostosować.
      Dlatego pozycję i skalę wylicza JS z `visualViewport` (app.js: pinBackPv) — przycisk jest przyklejony
      do WIDOCZNEGO WYCINKA i ma stały rozmiar na ekranie niezależnie od powiększenia.
      `left/top:0` + `transform-origin:0 0` to punkt zaczepienia dla tej transformacji — nie ruszać. */
   .back-pv{position:fixed;left:0;top:0;transform-origin:0 0;z-index:9997;
     display:flex;align-items:center;gap:7px;box-sizing:border-box;margin:0;padding:11px 14px;
     background:var(--royal,#1e4fc4);border:0;border-radius:0 0 12px 12px;cursor:pointer;
     font-family:YantramanavUI,Inter,sans-serif;font-weight:800;font-size:14px;color:#fff;text-align:left;
     box-shadow:0 6px 20px -6px rgba(21,51,107,.6)}
   .back-pv:active{background:#15336b}
   /* Pływający przycisk nie zajmuje miejsca w układzie, więc górę panelu odsuwamy ręcznie —
      inaczej przykrywałby pierwszy moduł treści przy braku powiększenia. */
   .editwrap.mt-edit .left{padding-top:46px}
   /* w zakładce podglądu nie ma z czego wracać — panel edycji jest wtedy schowany */
   .editwrap.mt-preview .back-pv{display:none}
   /* Poziomy rząd zakładek „Treść · Styl · Pobierz" (`.ed-nav`) ZNIKA z telefonu (28.07.2026) — te same
      pozycje są na pionowym pasku z lewej, a rząd zjadał kolejne ~50 px wysokości. Na desktopie był
      ukryty od dawna (`@media(min-width:901px){.ed-nav{display:none}}`) z tego samego powodu. */
   /* ⚠️ `.editwrap .ed-nav` (0,2,0), nie samo `.ed-nav` (0,1,0): reguła `.ed-nav{display:flex}` jest
      WSTRZYKIWANA Z app.js do <head> PO tym arkuszu, więc przy równej specyficzności wygrywała.
      To trzecia taka sytuacja tego dnia — w tym pliku zawsze celuj przez `.editwrap`. */
   .editwrap .ed-nav{display:none}

   /* NIEZALEŻNE PRZEWIJANIE paska i podglądu (28.07.2026, prośba właściciela).
      Pasek ma 9 klawiszy i bywa wyższy niż ekran, a podgląd to wielostronicowe CV — przy jednym wspólnym
      przewijaniu dojście do „Kasuj dane" na dole paska wymagało przescrollowania całego CV.
      `position:sticky; top:0` + własny `overflow-y` na każdej kolumnie: dopóki wszystko się mieści, NIC się
      nie zmienia (brak pasków przewijania); dopiero gdy zabraknie miejsca, każda kolumna jedzie swoim torem.
      Rozwiązanie SAMO SIĘ DOSTRAJA — nie zakłada stałej wysokości nagłówka, która i tak zmienia się wraz
      z paskiem wyniku, plakietką pakietu czy banerem po opłacie.
      `overscroll-behavior:contain` blokuje „przeskok" przewijania na całą stronę po dojechaniu do końca kolumny.
      Odjęte 61 px = wysokość dolnego paska akcji, który jest `fixed` i zasłaniałby dół kolumny. */
   /* ⚠️ POPRAWKA 28.07 (wieczór): odejmowane było 61 px na DOLNY PASEK AKCJI, który tego samego dnia został
      usunięty — a nie było odejmowane 51 px NAGŁÓWKA. Efekt: kolumny sięgały poniżej ekranu, więc przewijała
      się CAŁA STRONA i pasek narzędzi jechał razem z podglądem, zamiast stać. Teraz odejmujemy wysokość
      paska navy, czyli to, co realnie jest nad kolumnami. */
   .editwrap.mt-preview .left,
   .editwrap.mt-preview .right,
   .editwrap.mt-edit .left,
   .editwrap.mt-edit .right{
     position:sticky; top:0;
     max-height:calc(100dvh - 51px);
     overflow-y:auto; overscroll-behavior:contain;
   }
   .editwrap.mt-preview .cv-rail{position:static}   /* wewnątrz przewijanej kolumny sticky nie ma już sensu */
   /* BELKA MA WŁASNE PRZEWIJANIE (28.07.2026). Pasek ma ~530 px wysokości, więc na niższych telefonach
      (ekran 560–640 px minus 51 px navy) ostatnie klawisze — RODO, „Powrót", „Dalej" — wychodziły poza ekran
      i NIE DAŁO SIĘ do nich dojechać: `overflow` był `visible`, a przewijanie panelu belki nie ruszało.
      Teraz belka dostaje własną wysokość i własny scroll — panel przewija się osobno, belka osobno,
      w KAŻDYM module. `overscroll-behavior:contain` nie pozwala przeskoczyć na przewijanie strony. */
   .editwrap.mt-edit .cv-rail,
   .editwrap.mt-preview .cv-rail{
     max-height:calc(100dvh - 51px);
     overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none;
   }
   .editwrap.mt-edit .cv-rail::-webkit-scrollbar,
   .editwrap.mt-preview .cv-rail::-webkit-scrollbar{display:none}

   /* Pionowa plakietka „Wszystko edytowalne — możesz zmienić każde słowo…" ZDJĘTA z telefonu (28.07.2026,
      decyzja właściciela). Rezerwowała 34 px szerokości panelu w zakładce Treść, a sama informacja jest
      oczywista w momencie, gdy klient stoi w polu edycji. Na desktopie plakietka zostaje (jest tam miejsce). */
   .edit-badge-m{display:none!important}

   /* ⚠️ „Własny kolor" pod paletą — PRÓBA COFNIĘTA 28.07.2026. Zamiana `.dots` na siatkę CSS dawała
      na telefonie JEDNĄ KOLUMNĘ (14 kropek w pionie, 60×1016 px) niezależnie od `flex:1 1 auto`
      i `min-width:0` — kontener nie przejmował szerokości rodzica. Desktop wychodził poprawnie (7×2),
      więc różnica siedzi w układzie `.sc-ctl` na wąskim ekranie i wymaga osobnej diagnozy, a nie
      kolejnego strzału w CSS. Zostaje układ pierwotny (flex + zawijanie), gdzie „własny kolor" stoi
      na końcu rzędu kropek. ZADANIE OTWARTE. */
   .left{position:relative;padding-right:8px}
   .edit-badge-m{position:absolute;top:14px;right:2px;margin:0;writing-mode:vertical-rl;text-orientation:mixed;
     background:linear-gradient(180deg,#eef3fd,#f6f9ff);padding:14px 7px;font-size:11.5px;gap:9px;z-index:4;
     max-height:calc(100% - 28px);display:inline-flex}
   .edit-badge-m .eb-ic{writing-mode:horizontal-tb;font-size:13px}
 }
 /* Kopia plakietki istnieje TYLKO dla telefonu — na desktopie oryginał stoi już pionowo w prawym panelu. */
 @media(min-width:901px){ .edit-badge-m{display:none!important} }
 .left{overflow:auto;min-width:0;border-right:1px solid var(--line);background:#fff;padding:0 20px 20px}
 .right{overflow:auto;min-width:0;padding:0 30px 30px;display:flex;justify-content:center;align-items:flex-start;background:var(--bg)}
 .right>div{width:100%;display:flex;flex-direction:column;align-items:center}
 /* Plakietka „Wszystko edytowalne" — na DESKTOPIE stoi PIONOWO przy prawej krawędzi podglądu, a nie poziomo nad
    nim: nad CV zjadała wysokość i odsuwała dokument w dół, a to podgląd ma być bohaterem ekranu. Z boku mówi to
    samo, nie zabierając ani piksela z kartki. `writing-mode` obraca tekst bez transformów, więc plakietka dalej
    normalnie się układa i nie wypada z toku dokumentu. Na mobile zostaje poziomo nad podglądem (z boku nie ma miejsca). */
 .edit-badge{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(90deg,#eef3fd,#f6f9ff);border:1px solid #cfe0fb;color:#15336b;font-size:13px;font-weight:600;line-height:1.3;padding:8px 13px;border-radius:999px;margin:0 0 12px;box-shadow:0 4px 14px rgba(30,79,196,.10)}
 .edit-badge .eb-ic{font-size:15px;line-height:1}
 @media(min-width:901px){
   .right{position:relative}
   .edit-badge{position:absolute;top:0;right:2px;margin:0;writing-mode:vertical-rl;text-orientation:mixed;
     background:linear-gradient(180deg,#eef3fd,#f6f9ff);padding:14px 7px;font-size:12px;gap:9px;z-index:4}
   .edit-badge .eb-ic{writing-mode:horizontal-tb;font-size:14px}
   /* miejsce na plakietkę, żeby nie kładła się na kartce CV */
   .right>div{padding-right:34px}
 }
 /* podgląd CV przed opłatą → bez zaznaczania/kopiowania (wklejanie działa). Po opłacie (body.cv-paid) — bez blokady. */
 body:not(.cv-paid) #preview,body:not(.cv-paid) #preview *{-webkit-user-select:none;-moz-user-select:none;user-select:none}
 /* górny pasek: tylko język */
 .lang-cap{font-family:YantramanavUI,Inter,sans-serif;font-weight:600;font-size:12.5px;color:var(--muted)}
 /* Panel „Pobierz" — wiersze bez ikon: opis po lewej, przycisk po prawej */
 .dl-panel{display:flex;flex-direction:column;gap:10px;width:100%}
 /* Nawigacja powrotu na kroku „Pobierz" — na mobile nie ma czytelnego breadcrumbu, więc tu dajemy wyraźne klawisze. */
 .dl-nav{border:1px dashed #bcd0ff;background:#f6f9ff;border-radius:12px;padding:12px 14px}
 .dl-nav-h{font-family:YantramanavUI,Inter,sans-serif;font-weight:700;font-size:13px;color:var(--ink);margin-bottom:9px;line-height:1.4}
 .dl-nav-row{display:flex;flex-wrap:wrap;gap:8px}
 .dl-nav-btn{flex:1 1 auto;min-width:120px;padding:11px 12px;font-size:13px;justify-content:center}
 .dl-row{display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--line);border-radius:12px;padding:13px 16px;background:#fff}
 .dl-row.dl-all{background:#f6f9ff;border-color:var(--royal)}
 .dl-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
 .dl-meta b{font-family:YantramanavUI,Inter,sans-serif;font-weight:700;font-size:14.5px;color:var(--ink)}
 .dl-meta span{font-size:12.5px;color:var(--muted);line-height:1.4}
 .dl-btn{flex:none;padding:9px 16px;font-size:13px;white-space:nowrap}
 .dl-wipe-row{margin-top:6px;border-color:#f0c3d4;background:#fff}
 .dl-btn-danger{background:#c4185b;color:#fff;border:0} .dl-btn-danger:hover{background:#a01049}
 /* #2: blok „Co dalej?" pod pobieraniami — trzy przyciski w kolumnie (tytuł + opis) */
 .dl-next{margin-top:16px;padding-top:14px;border-top:1px dashed #cdd9f2;display:flex;flex-direction:column;gap:10px}
 .dl-next-h{font-family:YantramanavUI,Inter,sans-serif;font-weight:800;font-size:14px;color:var(--ink)}
 .dl-next-btn{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;width:100%;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:12px 15px;cursor:pointer}
 .dl-next-btn:hover{border-color:var(--royal);background:#f6f9ff}
 .dl-next-btn b{font-family:YantramanavUI,Inter,sans-serif;font-weight:700;font-size:14px;color:var(--ink)}
 .dl-next-btn span{font-size:12.5px;color:var(--muted);line-height:1.4;font-weight:400}
 .dl-next-finish{border-color:#f0c3d4}
 .dl-next-finish:hover{border-color:#c4185b;background:#fdf3f7}
 /* CTA na dole etapu (lewa kolumna) */
 .stage-cta{display:flex;gap:10px;justify-content:center;margin:24px 0 8px;flex-wrap:wrap}
 .stage-cta .btn{padding:12px 18px}
 /* krok „Styl": galeria 24 miniatur + filtr + czcionka/kolor */
 .style-filters{display:flex;gap:8px;margin:4px 0 14px;flex-wrap:wrap}
 .style-filters .sf{font-family:YantramanavUI,Inter,sans-serif;font-weight:600;font-size:13px;border:1.5px solid var(--line);background:#fff;color:var(--muted);border-radius:99px;padding:7px 14px;cursor:pointer;transition:.15s}
 .style-filters .sf:hover{border-color:var(--royal);color:var(--royal);background:#f6f9ff}
 .style-filters .sf:active{transform:translateY(1px) scale(.97)}
 .style-filters .sf.on{border-color:var(--royal);color:var(--royal);background:#f0f5ff}
 /* Miniatury szablonów: DUŻE (klient ma rozpoznać układ, a nie zgadywać z paznokcia). Kolumna dobiera się sama
    do szerokości panelu; skalę CV liczy fitStyleCards() z realnej szerokości kafelka, bo w siatce 1fr kolumny
    nie mają stałego rozmiaru — sztywne scale() zostawiałoby białe pasy albo ucinało kartkę. */
 .style-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(45%,208px),1fr));gap:16px}
 .style-card{display:flex;flex-direction:column;gap:7px;padding:0;background:none;border:0;cursor:pointer;text-align:left}
 .sc-prev{aspect-ratio:540/764;overflow:hidden;border-radius:10px;border:2px solid var(--line);background:#fff;position:relative;box-shadow:0 2px 10px rgba(24,44,90,.07)}
 .style-card:hover .sc-prev{border-color:#b9cdf3}
 .style-card.on .sc-prev{border-color:var(--royal);box-shadow:0 0 0 3px #dbe7fd}
 .sc-prev .cv{transform:scale(var(--sck,.385));transform-origin:top left;width:540px;pointer-events:none}
 .style-note{margin:12px 2px 0;font-size:12px;line-height:1.5;color:var(--muted,#5a6a88)}
 .chg-list{display:flex;flex-direction:column;gap:2px}
 .chg-go{cursor:pointer;border-radius:8px;transition:background .15s}
 .chg-go:hover{background:#f2f6ff}
 /* Żółte podświetlenie fragmentu, którego dotyczy zmiana lub uwaga. Kolor celowo „zakreślaczowy" — ma się
    kojarzyć z zaznaczeniem na papierze i nie mylić z kolorem akcentu CV (ten wybiera klient). */
 /* ⚠️ Kolor liter MUSI iść razem z tłem (03.08.2026): zakreślacz jest zawsze jasny, a szablony z ciemnym
    tłem (glass, darkmode, tech, neon, gradient…) piszą na biało — samo tło dawało biel na jasnej żółci,
    czyli fragment znikał dokładnie wtedy, gdy chcieliśmy go POKAZAĆ. */
 #preview .cv-hl{background:#fff3bf!important;box-shadow:0 0 0 3px #fff3bf;border-radius:3px}
 #preview .cv-hl,#preview .cv-hl *{color:#2a2000!important;-webkit-text-fill-color:#2a2000}
 .ed-empty{padding:16px;border:1px dashed var(--line,#e3e9f5);border-radius:10px;color:var(--muted,#5a6a88);font-size:13.5px}
 .sc-meta{display:flex;align-items:center;justify-content:space-between;gap:6px}
 .sc-name{font-family:YantramanavUI,Inter,sans-serif;font-weight:600;font-size:12.5px;color:var(--ink)}
 .sc-badge{font-size:10px;font-weight:700;border-radius:99px;padding:2px 7px;white-space:nowrap}
 .sc-badge.ats{background:#e6f4ee;color:#0f6e56}
 .sc-badge.vis{background:#eef3fd;color:var(--royal)}
 .style-controls{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
 .sc-ctl{display:flex;align-items:center;gap:9px}
 .sc-ctl>span{font-family:YantramanavUI,Inter,sans-serif;font-weight:600;font-size:13px;color:var(--ink)}
 /* PRÓBKA PRZEJŚCIA TONALNEGO — wskaźnik do suwaka „Moc". Stoi z PRAWEJ suwaka, żeby ruch palcem i efekt
    były w jednym polu widzenia; w CV samo przejście bywa schowane w wąskim pasku bocznym, a na telefonie
    podgląd siedzi w drugiej zakładce, więc bez tego suwak jest potencjometrem bez skali. */
 /* KOLOR PER ELEMENT (31.07). Sześć próbek w jednym rzędzie — każda maluje inną rolę na kartce.
    Cały wiersz idzie na pełną szerokość panelu, bo obok palety akcentu zrobiłby się trzeci rząd drobiazgów.
    Próbka pokazuje kolor RZECZYWISTY: przy braku wyboru — ten, którym maluje szablon, a nie czerń. */
 .ec-wrap{flex:1 1 100%;flex-wrap:wrap;align-items:flex-start}
 .ec-grid{display:flex;gap:8px;flex-wrap:wrap;flex:1}
 .ec-item{position:relative;display:inline-flex;align-items:center;gap:7px;padding:5px 9px 5px 6px;border:1px solid var(--line,#e3e9f5);border-radius:9px;cursor:pointer;background:#fff;transition:border-color .15s,box-shadow .15s}
 .ec-item:hover{border-color:var(--royal,#1e4fc4)}
 .ec-item.on{border-color:var(--royal,#1e4fc4);box-shadow:0 0 0 2px rgba(30,79,196,.10)}
 .ec-item .ec-in{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;border:0;padding:0}
 .ec-sw{width:18px;height:18px;border-radius:5px;border:1px solid rgba(15,27,46,.18);flex:none}
 .ec-nm{font-size:12.5px;color:var(--ink);white-space:nowrap}
 .ec-x{position:relative;z-index:2;border:0;background:none;cursor:pointer;font-size:15px;line-height:1;color:var(--muted,#7383a3);padding:0 1px}
 .ec-x:hover{color:#c0392b}
 .ec-note{flex:1 1 100%;font-size:11.5px;color:var(--muted,#7383a3)}
 .ec-reset{flex:none;padding:4px 10px;font-size:11.5px}
 /* Paleta koloru wiodącego w rozmiarze próbek „Koloru PRO" — mniej miejsca, ten sam język wizualny. */
 .ec-dot .ec-nm{font-size:12px}
 /* KOLOR PRO w wersji darmowej: próbki widoczne (klient wie, co dostanie), ale wyraźnie zamknięte. */
 .ec-item.pro-lock{cursor:pointer;opacity:.72;border-style:dashed}
 .ec-item.pro-lock:hover{opacity:1;border-style:solid}
 /* Pigułka tła tonalnego: pole wyboru schowane pod pigułką, tak jak pipetka pod próbką koloru. */
 .ec-item.ec-grad input[type=checkbox]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;margin:0}
 .ec-lock{font-size:10.5px;line-height:1;margin-left:1px}
 /* ====== STREFA PRO — oprawa usług płatnych ======
    DELIKATNIE (życzenie właściciela): żadnych ciemnych pasów ani wielkich plakietek. Wyróżnienie robimy
    cienką ciepłą obwódką, jednym złotym akcentem i światłem — tak jak subtelność w CV robimy krawędziami
    i szarościami, a nie zmniejszaniem liter.
    Dwa stany tej SAMEJ oprawy: `locked` (widać, co się dostaje, treść za lekką mgłą) i `open` (zapala się
    złotem — kto zapłacił, ma widzieć, że wszystko stoi otworem). */
 /* Znak PRO na belce pojedynczej funkcji — ta sama plakietka co w strefie PRO, w mniejszej skali. */
 .pro-tag{display:inline-flex;align-items:center;gap:6px;flex:none;margin-left:2px}
 .pt-mark{font-family:YantramanavUI,Inter,sans-serif;font-size:9px;font-weight:800;letter-spacing:.16em;color:#a8842c;background:#fffaf0;border:1px solid #e6d6ab;border-radius:99px;padding:1px 7px;line-height:1.6}
 /* Kłódka w plakietce PRO: zamknięta bez opłaty, otwarta po niej (zasada właściciela 02.08.2026).
    Własny odstęp zamiast dziedziczonego `letter-spacing` plakietki — inaczej emoji „odkleja się" od słowa PRO. */
 .pt-lock{letter-spacing:0;margin-right:4px;font-size:10px;line-height:1}
 .pt-ml{margin-left:5px}
 .pro-tag.on .pt-mark{color:#fff;background:linear-gradient(135deg,#d4b054,#b08f2c);border-color:#b08f2c}
 .pt-on{font-size:11px;color:#8a6d22;white-space:nowrap}
 .pt-go{font-family:YantramanavUI,Inter,sans-serif;font-size:11px;font-weight:600;color:#8a6d22;background:#fffaf0;border:1px solid #e0cb96;border-radius:99px;padding:2px 10px;cursor:pointer;white-space:nowrap;transition:.15s}
 .pt-go:hover{background:#fff3dc;border-color:#c9a94f}
 .pro-zone{flex:1 1 100%;border:1px solid #ece2cc;border-radius:12px;padding:11px 13px 10px;background:linear-gradient(180deg,#fffdf8,#fff);transition:border-color .2s,box-shadow .2s}
 .pro-zone.open{border-color:#e0cb96;box-shadow:0 1px 14px -10px rgba(168,132,44,.55)}
 .pz-head{display:flex;align-items:center;gap:9px}
 .pz-mark{font-family:YantramanavUI,Inter,sans-serif;font-size:9.5px;font-weight:800;letter-spacing:.16em;color:#a8842c;background:#fffaf0;border:1px solid #e6d6ab;border-radius:99px;padding:2px 8px;line-height:1.5}
 .pro-zone.open .pz-mark{color:#fff;background:linear-gradient(135deg,#d4b054,#b08f2c);border-color:#b08f2c}
 .pz-title{font-family:YantramanavUI,Inter,sans-serif;font-weight:600;font-size:13px;color:var(--ink)}
 .pz-state{font-size:11px;color:#a8842c;margin-left:auto;white-space:nowrap}
 .pz-sub{font-size:11.5px;line-height:1.5;color:var(--muted,#7383a3);margin:5px 0 9px}
 .pz-body{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}
 .pro-zone.locked .pz-body{opacity:.86}
 .pz-foot{margin-top:9px}
 .pz-foot.open{font-size:11.5px;color:#8a6d22}
 .pz-cta{padding:5px 12px;font-size:11.5px;border-color:#e0cb96;color:#8a6d22;background:#fffaf0}
 .pz-cta:hover{border-color:#c9a94f;background:#fff6e4}
 .ec-badge{display:inline-block;font-family:YantramanavUI,Inter,sans-serif;font-size:10px;font-weight:700;letter-spacing:.03em;color:#8a5a00;background:#fff3d6;border:1px solid #f0dca6;border-radius:99px;padding:1px 7px;margin-left:5px;vertical-align:middle}
 /* ⚠️ Ostrzeżenie o kontraście było za małe (zgłoszenie 31.07) — to jedyna rzecz, którą klient może sobie
    nieodwracalnie zepsuć wygląd CV, więc ma być widoczne, a nie schowane w drobnym druku. */
 .ec-warn{flex:1 1 100%;margin-top:10px;font-size:14px;font-weight:600;line-height:1.5;color:#7a4a00;background:#fff6dd;border:2px solid #eccf7a;border-radius:10px;padding:11px 14px;box-shadow:0 2px 10px -6px rgba(140,90,0,.5)}
 .sc-moc{flex:1 1 100%;flex-wrap:wrap}
 .grad-sample{display:inline-flex;align-items:center;gap:8px;flex:none}
 .grad-sample .gs-lab{font-family:YantramanavUI,Inter,sans-serif;font-weight:500;font-size:11px;color:var(--muted,#7383a3);white-space:nowrap}
 .grad-sample .gs-bar{display:block;width:78px;height:26px;border-radius:7px;border:1px solid var(--line,#e3e9f5)}
 /* „Zatwierdź" domyka panel wyglądu — pełna szerokość, żeby był oczywistym końcem czynności, nie kolejną opcją */
 .sc-ok{flex:1 1 100%;width:100%;margin-top:4px}
 @media(max-width:900px){
   .grad-sample{flex:1 1 100%;justify-content:space-between;margin-top:6px}
   .grad-sample .gs-bar{width:120px;height:30px}
 }
 /* Typografia (krok STYL) — czcionka+kolor + siatka 3 sekcje (Nagłówek/Tytuły/Tekst), kolumny wyrównane */
 .sc-typo{display:flex;flex-direction:column;gap:12px;width:100%;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
 .sc-typo-h{font-family:YantramanavUI,Inter,sans-serif;font-weight:700;font-size:13px;color:var(--ink);letter-spacing:.02em}
 .sc-typo-row{display:flex;gap:14px 20px;align-items:center;flex-wrap:wrap}
 /* Siatka: 1 kolumna etykiet + 4 kolumny sterowania; align-items:center → wszystkie potencjometry na jednym poziomie */
 .typo-grid{display:grid;grid-template-columns:minmax(86px,auto) repeat(4,1fr);gap:11px 14px;align-items:center}
 .tg-col{font-family:YantramanavUI,Inter,sans-serif;font-weight:400;font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--muted,#7383a3);text-align:center}
 .tg-lab{font-family:YantramanavUI,Inter,sans-serif;font-weight:500;font-size:12px;color:var(--ink)}
 .tg-r{width:100%;accent-color:var(--royal,#1e4fc4);margin:0}
 /* CZCIONKA = LITERA „A" W KONTURZE. Wypełniony znak w wariancie „grubym" (Montserrat 800) przytłaczał panel
    i wyglądał jak przycisk „pogrubienie"; kontur pokazuje sam RYSUNEK litery, czyli to, po czym się wybiera.
    `color:transparent` + `-webkit-text-stroke` daje kontur w Chrome/Safari (i w Firefoxie od 4.11.2024).
    Fallback dla starszych przeglądarek: `@supports not` maluje literę zwykłym szarym wypełnieniem. */
 .sc-fonts{flex:1 1 100%;align-items:flex-start}
 .font-as{display:flex;flex-wrap:wrap;gap:7px;flex:1 1 0;min-width:0}
 .font-a{width:42px;height:42px;flex:none;display:flex;align-items:center;justify-content:center;
   font-size:25px;line-height:1;font-weight:700;cursor:pointer;
   background:#fff;border:1px solid var(--line,#e3e9f5);border-radius:9px;
   color:transparent;-webkit-text-stroke:1px #55627d;transition:border-color .12s,box-shadow .12s}
 @supports not (-webkit-text-stroke:1px #000){ .font-a{color:#55627d} }
 .font-a:hover{border-color:#b9cdf0}
 .font-a.on{border-color:var(--royal,#1e4fc4);box-shadow:0 0 0 2px rgba(30,79,196,.16)}
 .font-a.on{-webkit-text-stroke-color:#15336b}
 @supports not (-webkit-text-stroke:1px #000){ .font-a.on{color:#15336b} }
 /* Siatka typografii na telefonie: etykieta H1/H2 jest krótka, więc kolumna etykiet może się zwęzić —
    dzięki temu cztery potencjometry mieszczą się na szerokość ekranu bez przewijania w bok. */
 @media(max-width:900px){
   .typo-grid{grid-template-columns:minmax(34px,auto) repeat(4,1fr);gap:9px 7px}
   .tg-col{font-size:9.5px}
   .tg-lab{font-size:11.5px}
   .tg-w{font-size:11px;padding:3px 4px;min-width:0;width:100%}
   .font-a{width:38px;height:38px;font-size:22px}
 }
 .tg-w{font:inherit;font-weight:400;font-size:12px;padding:4px 6px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);width:100%}
 .tg-na{text-align:center;color:#cdd6e4;font-size:13px}
 .sc-typo .sc-ctl>span{font-weight:500}
 /* etap List — edycja listu (lewa) */
 .left .cl-lab{display:block;font-family:YantramanavUI,Inter,sans-serif;font-weight:600;font-size:12.5px;color:var(--ink);margin:14px 0 5px}
 .left .cl-inp,.left .cl-ta{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 11px;font:inherit;font-size:13.5px;color:var(--ink);background:#fff}
 .left .cl-ta{resize:vertical;line-height:1.5;margin-bottom:6px}
 .cover-choice{background:#f6f9ff;border:1px solid #cfe0fb;border-radius:12px;padding:16px 18px;margin-top:6px}
 .cover-choice p{font-size:14.5px;color:#2a4470;margin:0}
 .cover-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:300px;color:var(--muted);font-size:14px;text-align:center}
 .cover-empty span{font-size:34px}
 /* żywy podgląd listu (skalowany przez fitPreview jak CV) */
 .cover-doc{width:540px;background:#fff;color:#1b2536;padding:52px 56px;font-size:13.5px;line-height:1.6;box-shadow:0 10px 40px -16px rgba(21,51,107,.3)}
 .cover-doc .cd-nm{font-weight:800;font-size:24px;color:var(--ac);line-height:1.1}
 .cover-doc .cd-cl{color:#5a6a88;margin-top:5px;font-size:12.5px}
 .cover-doc .cd-bar{height:3px;width:60px;background:var(--ac);margin:13px 0 0}
 .cover-doc .cd-meta{text-align:right;color:#5a6a88;font-size:12px;margin:10px 0 24px}
 .cover-doc .cd-subj{font-weight:700;font-size:14.5px;color:#15336b;margin-bottom:16px}
 .cover-doc .cd-greet{margin-bottom:12px}
 .cover-doc p{margin-bottom:12px;text-align:justify}
 .cover-doc .cd-close{margin-top:20px}
 .cover-doc .cd-sign{font-weight:700;color:#15336b;margin-top:3px}
 /* etap LinkedIn — NEUTRALNA ikona sylwetki (bez logo/znaku „in" LinkedIn), panel gotowości, podgląd profilu + mgła */
 .li-badge{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;background:#5b6b85;color:transparent;font-size:0;vertical-align:middle;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7v1H4z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:62%}
 .li-ready{background:#f6f9ff;border:1px solid #cfe0fb;border-radius:12px;padding:16px 18px;font-size:14px;color:#2a4470;margin-top:4px}
 .li-ready-note{margin-top:8px;font-size:13px;color:var(--muted)}
 .left .li-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 12px}
 .left .btn-mini{padding:6px 12px;font-size:12.5px;border-radius:8px;background:#f1f5f9;border:1px solid #d8dee9;color:#475569;font-family:YantramanavUI,Inter,sans-serif;font-weight:700;cursor:pointer}
 .left .btn-mini.copied{background:#0f6e56;border-color:#0f6e56;color:#fff}
 .left .li-note{font-size:12.5px;color:var(--muted)}
 .li-doc-wrap{position:relative}
 .li-doc{width:540px;background:#fff;color:#1b2536;border-radius:10px;overflow:hidden;box-shadow:0 10px 40px -16px rgba(21,51,107,.3)}
 .li-doc .lp-cover{height:92px;background:linear-gradient(120deg,var(--ac),#15336b)}
 .li-doc .lp-head{padding:0 26px 14px;margin-top:-34px}
 .li-doc .lp-ava{width:78px;height:78px;border-radius:50%;background:#dbe7fd;border:4px solid #fff;display:flex;align-items:center;justify-content:center;font-family:YantramanavUI,Inter,sans-serif;font-weight:800;font-size:28px;color:var(--ac)}
 .li-doc .lp-nm{font-family:YantramanavUI,Inter,sans-serif;font-weight:800;font-size:21px;color:#15336b;margin-top:8px}
 .li-doc .lp-hl{color:#41506e;font-size:14px;margin-top:3px;line-height:1.4}
 .li-doc .lp-sec{font-family:YantramanavUI,Inter,sans-serif;font-weight:700;font-size:12px;color:var(--ac);border-top:1px solid #e3e9f5;margin:0 26px;padding:14px 0 6px;text-transform:uppercase;letter-spacing:.04em}
 .li-doc .lp-about{padding:0 26px;font-size:13.5px;line-height:1.55;color:#2a4470}
 .li-doc .lp-exp{padding:6px 26px}
 .li-doc .lp-exp-t{font-weight:700;color:#15336b;font-size:13.5px}
 .li-doc .lp-exp-d{font-size:12.5px;color:#41506e;line-height:1.5}
 .li-doc .lp-skills{padding:4px 26px 20px;display:flex;flex-wrap:wrap;gap:6px}
 .li-doc .lp-skill{background:#eef3fd;color:var(--ac);font-size:12px;font-weight:600;border-radius:7px;padding:3px 9px}
 .li-doc-wrap.li-foggy .li-doc{filter:blur(6px);user-select:none;pointer-events:none}
 .li-doc-wrap .li-fog2,.iv-doc-wrap .li-fog2{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;background:rgba(246,249,255,.45);font-family:YantramanavUI,Inter,sans-serif;font-weight:700;color:#15336b;font-size:15px}
 /* etap Pytania — podgląd „Przygotowanie do rozmowy" + mgła */
 .iv-doc-wrap{position:relative}
 .iv-doc{width:540px;background:#fff;color:#1b2536;padding:40px 44px;font-size:13px;line-height:1.55;box-shadow:0 10px 40px -16px rgba(21,51,107,.3)}
 .iv-doc .iv-doc-h{font-family:YantramanavUI,Inter,sans-serif;font-weight:800;font-size:18px;color:var(--ac);border-bottom:2px solid var(--ac);padding-bottom:10px;margin-bottom:16px}
 .iv-doc .iv-g{margin-bottom:16px}
 .iv-doc .iv-gh{display:flex;align-items:center;gap:9px;font-family:YantramanavUI,Inter,sans-serif;font-weight:700;font-size:14px;color:#15336b;margin-bottom:9px}
 .iv-doc .iv-gn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--ac);color:#fff;font-size:12px;font-weight:800;flex:none}
 .iv-doc .iv-q{margin:0 0 10px;padding-left:12px;border-left:2px solid #e3e9f5}
 .iv-doc .iv-qq{font-weight:700;color:#15336b;font-size:13.5px}
 .iv-doc .iv-qh{color:#41506e;font-size:12.5px;margin-top:2px}
 .iv-doc .iv-ask{color:#41506e;font-size:13px;margin:4px 0}
 .iv-doc-wrap.li-foggy .iv-doc{filter:blur(6px);user-select:none;pointer-events:none}
 /* nagłówki stref — od razu czytelne „co tu robię" */
 .zone-head{position:sticky;top:0;z-index:5;display:flex;gap:11px;align-items:flex-start;padding:14px 0 12px;margin-bottom:6px}
 .zone-head.edit{background:#fff;border-bottom:1px solid var(--line)}
 /* Ścieżka darmowa: „Edytuj treść CV" = NAGŁÓWEK sekcji (opisowy, nieklikalny) — wyróżniony, nie wygląda jak moduł */
 .zone-head.edit.zone-head-green{background:linear-gradient(90deg,#dcf3e3,#f1faf3);border-bottom:2px solid #7fce9a;border-radius:11px 11px 0 0;padding:13px 15px 12px}
 .zone-head.edit.zone-head-green .zh-ic{background:#c3ebcf}
 .zone-head.edit.zone-head-green .zh-t{color:#0f5132;font-size:16.5px;text-transform:uppercase;letter-spacing:.3px}
 .zone-head.edit.zone-head-green .zh-s{color:#3a7a56}
 .zone-head.pv{background:var(--bg);border-bottom:1px solid var(--line);width:100%;justify-content:flex-start}
 .zone-head .zh-ic{flex:none;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;background:#eef3fd}
 .zone-head .zh-t{font-family:YantramanavUI,Inter,sans-serif;font-weight:800;font-size:15px;color:var(--ink);line-height:1.1}
 .zone-head .zh-s{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.35}
 .pl{font-family:YantramanavUI,Inter,sans-serif;font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--azure);margin:20px 0 10px}
 .pl2{font-family:YantramanavUI,Inter,sans-serif;font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);margin:16px 0 8px}
 .mv-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
 .mv{display:inline-flex;gap:4px;flex:0 0 auto}
 .mv button{width:26px;height:26px;line-height:1;padding:0;border-radius:7px;background:#eef5fc;border:1px solid #cfe0fb;color:#0a66c2;font-size:14px;font-weight:700;cursor:pointer;text-transform:none}
 .mv button:hover:not([disabled]){background:#dcebfb;background:#e2eefc;border-color:#0a66c2}
 .mv button[disabled]{opacity:.32;cursor:default}
 .mv-del{color:#b3261e;border-color:#f6c9c9;background:#fdecec}
 .mv-del:hover{background:#fbdcdc;border-color:#e88}
 .mv-title{cursor:text;outline:none;border-bottom:1px dashed transparent;padding-bottom:1px}
 .mv-title:hover{border-bottom-color:#cfe0fb}
 .mv-title:focus{border-bottom-color:var(--azure);background:#f6f9ff}
 .mv-note{margin:10px 0 2px}
 /* ✏️ przy nazwie sekcji — ustawia kursor w nazwie (dyskretny, budzi się na hover belki) */
 .mv-pen{flex:0 0 auto;margin-right:auto;width:24px;height:24px;line-height:1;padding:0;border:0;border-radius:7px;background:none;font-size:12px;cursor:pointer;opacity:.45;transition:opacity .15s,background .15s}
 .mv-h:hover .mv-pen,.mv-pen:focus-visible{opacity:1;background:#eef5fc}
 .cvs-pen{flex:0 0 auto;width:26px;height:26px;line-height:1;padding:0;margin-left:2px;border:0;border-radius:7px;background:none;font-size:12.5px;cursor:pointer;opacity:.4;transition:opacity .15s,background .15s}
 .cv-sec>summary:hover .cvs-pen,.cvs-pen:focus-visible{opacity:1;background:#eef5fc}
 /* Strzałki ↑/↓ przestawiające sekcję rdzenia — na belce, tuż przed kropką statusu. Klawisze dziedziczą
    wygląd po `.mv button` (te same, co w strefie ruchomej), tu tylko ustawiamy je w rzędzie belki.
    Mniejsze niż w strefie ruchomej (22px), żeby belka nie rosła; na mobile powiększane niżej razem z `.mv button`. */
 .cvs-mv{flex:0 0 auto;margin-left:auto;gap:3px}
 .cvs-mv button{width:22px;height:22px;font-size:12px}
 .cv-sec>summary .cvs-mv button[disabled]{opacity:.22}
 /* nazwa nadana przez klienta — w atrybucie, nie w tekście belki (tekst belki = klucz stanu rozwinięcia) */
 .cvs-alias{font-family:YantramanavUI,Inter,sans-serif;font-weight:600;font-size:11.5px;text-transform:none;letter-spacing:0;color:var(--azure);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
 .cvs-alias:after{content:"→ " attr(data-alias)}
 /* wiersz zmiany nazwy sekcji w CV (odsłaniany ołówkiem) */
 .cvs-rn{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px;padding:9px 11px;background:#f6f9ff;border:1px solid #cfe0fb;border-radius:9px}
 .cvs-rn-lab{font-family:YantramanavUI,Inter,sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--azure)}
 .cvs-rn-i{flex:1 1 150px;min-width:0;font:inherit;font-size:13.5px;padding:6px 9px;border:1px solid var(--line);border-radius:7px;color:var(--ink);background:#fff}
 .cvs-rn-i:focus{outline:none;border-color:var(--azure);box-shadow:0 0 0 2px #dbe9ff}
 /* klik w moduł w podglądzie → podświetlenie jego sekcji w panelu */
 .mod-hit{animation:modHit 1.5s ease}
 @keyframes modHit{0%{box-shadow:0 0 0 0 rgba(10,102,194,.45);background:#eaf3ff}55%{box-shadow:0 0 0 5px rgba(10,102,194,0);background:#f6f9ff}100%{box-shadow:none;background:transparent}}
 @media(prefers-reduced-motion:reduce){.mod-hit{animation:none;outline:2px solid var(--azure);outline-offset:2px}}
 /* na desktopie moduły CV w podglądzie są klikalne (otwierają swoją sekcję w panelu) */
 @media(min-width:901px){#preview .cv{cursor:pointer}}
 .preset-row{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0 4px}
 .preset-btn{padding:7px 12px;font-size:12.5px;border-radius:9px;background:#fff;border:1px solid var(--line);color:var(--ink);font-family:YantramanavUI,Inter,sans-serif;font-weight:600;cursor:pointer}
 .preset-btn:hover{border-color:var(--azure)}
 .preset-btn.on{background:#0a66c2;border-color:#0a66c2;color:#fff}
 /* Karta tożsamości (imię + przełącznik formy gramatycznej) na górze edycji CV */
 .ident-card{border:1px solid #bcd0ff;background:#f6f9ff;border-radius:13px;padding:14px 15px;margin:0 0 14px}
 .ident-lab{display:block;font-family:YantramanavUI,Inter,sans-serif;font-weight:700;font-size:13px;color:var(--ink);margin-bottom:7px}
 .ident-name{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:10px;padding:11px 13px;font:inherit;font-size:15px;color:var(--ink);background:#fff}
 .ident-name:focus{outline:none;border-color:var(--royal)}
 .ident-grow{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:11px}
 .ident-glab{font-size:13px;color:var(--muted);font-weight:600}
 .gender-toggle{display:inline-flex;flex-wrap:wrap;background:#e8eefb;border-radius:10px;padding:3px;gap:3px}
 .gender-toggle .gbtn,.gender-toggle .tsbtn{border:0;background:transparent;color:#5a6a88;font-family:YantramanavUI,Inter,sans-serif;font-weight:700;font-size:13px;padding:8px 14px;border-radius:8px;cursor:pointer;transition:.15s;white-space:nowrap}
 .gender-toggle .gbtn:hover,.gender-toggle .tsbtn:hover{color:var(--royal);background:#eef3fd}
 .gender-toggle .gbtn:active,.gender-toggle .tsbtn:active{transform:translateY(1px) scale(.97)}
 .gender-toggle .gbtn.on,.gender-toggle .tsbtn.on{background:var(--royal);color:#fff;box-shadow:0 4px 12px -4px rgba(30,79,196,.6)}
 .ts-row{margin-top:8px}
 .gender-toggle .tsbtn{display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1.15;padding:6px 14px}
 .gender-toggle .tsbtn b{font-weight:700;font-size:13px}
 .gender-toggle .tsbtn .ts-ex{font-size:10.5px;font-weight:500;opacity:.7;white-space:nowrap}
 .gender-toggle .gbtn:not(.on):hover{color:var(--ink)}
 .ident-note{font-size:12px;color:var(--muted);line-height:1.45;margin-top:9px}
 /* Kontrolki podziału na strony — POZA podglądem CV (w panelu podglądu). Wyszarzone pigułki, aktywna = granat. */
 .brk-bar{border:1px dashed #cfd9ec;background:#fafbfe;border-radius:11px;padding:10px 12px;margin:0 0 12px}
 .brk-h{font-family:YantramanavUI,Inter,sans-serif;font-weight:700;font-size:12.5px;color:var(--muted);margin-bottom:8px}
 .brk-h .brk-sub{font-weight:600;color:#9aa7c0}
 .brk-btns{display:flex;flex-wrap:wrap;gap:7px}
 .brk-pill{background:#eef2f8;border:1px solid var(--line);color:#7c89a6;font-family:YantramanavUI,Inter,sans-serif;font-weight:700;font-size:12.5px;padding:7px 12px;border-radius:999px;cursor:pointer;transition:.15s}
 .brk-pill:hover{border-color:#b9cdf3;color:var(--ink)}
 .brk-pill.on{background:var(--royal);border-color:var(--royal);color:#fff;box-shadow:0 4px 12px -4px rgba(30,79,196,.5)}
 /* Podgląd jako OSOBNE KARTKI A4 (jak PDF). Kartki/znaki żyją tylko w DOM podglądu — nie trafiają do pliku. */
 .pg-stack{width:616px;margin:0 auto}
 .pg-card{position:relative;width:616px;padding:0 38px;box-sizing:border-box;margin:0 0 26px}
 .pg-card-lab{font-family:YantramanavUI,Inter,sans-serif;font-weight:700;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#8294b4;text-align:center;margin:0 0 7px}
 .pg-clip{position:relative;width:540px;margin:0 auto;background:#fff;overflow:hidden;border:1px solid #e3e9f5;border-radius:5px;box-shadow:0 10px 30px -10px rgba(2,12,40,.28)}
 .pg-clip .cv{box-shadow:none;border-radius:0}
 /* Znak podziału w MARGINESIE (poza dokumentem): okrągły przycisk — lewy dla lewej kolumny, prawy dla prawej. */
 .brk-tab{position:absolute;width:30px;height:30px;border-radius:50%;border:1.5px solid #b9cdf3;background:#fff;color:#5a6a88;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1;z-index:6;box-shadow:0 2px 8px rgba(2,12,40,.18);transition:.12s;transform:translateY(-50%)}
 .brk-tab.brk-l{left:3px}
 .brk-tab.brk-r{right:3px}
 .brk-tab:hover{border-color:var(--royal);color:var(--royal);background:#f0f5ff}
 .brk-tab.on{background:var(--royal);border-color:var(--royal);color:#fff}
 .brk-tab::after{content:"";position:absolute;top:50%;width:34px;border-top:2px dashed #b9cdf3;opacity:.7}
 .brk-tab.brk-l::after{left:30px}
 .brk-tab.brk-r::after{right:30px}
 .brk-tab:hover::after,.brk-tab.on::after{border-color:var(--royal)}
 .fld{border:1px solid var(--line);border-radius:11px;padding:12px 13px;margin-bottom:10px;transition:.15s}
 .fld:hover{border-color:var(--azure)}
 .fld .lab{font-size:12px;color:var(--muted);margin-bottom:5px;display:flex;justify-content:space-between}
 .fld .lab .e{color:var(--azure);font-weight:600}
 .fld .val,.role,.bul{outline:none}
 .fld .val{font-size:14px;color:#1b2536;line-height:1.5}
 .fld .val:focus,.role:focus,.bul:focus{background:#f6f9ff;border-radius:5px}
 .role{font-family:YantramanavUI,Inter,sans-serif;font-weight:600;font-size:13.5px;color:var(--ink)}
 .meta{font-size:12px;color:var(--muted);margin:2px 0 6px}
 .bul{font-size:13px;color:#33415c;padding-left:14px;position:relative;margin:4px 0}
 .bul:before{content:"–";position:absolute;left:0;color:var(--azure)}
 .sec-title{font-family:YantramanavUI,Inter,sans-serif;font-weight:700;font-size:14px;color:var(--ink);margin-bottom:6px}
 .sec-row{margin-top:8px}.sec-row .sec-del{background:#fdecec;border-color:#f6c9c9;color:#b3261e}
 /* Tryb ręczny (moduł 1): placeholdery-wskazówki w pustych polach — CSS ::before, NIGDY nie trafiają do eksportu/.cvdop */
 [contenteditable][data-ph]:empty::before{content:attr(data-ph);color:#9aa4b2;font-weight:400;font-style:italic;pointer-events:none}
 .bul[data-ph]:empty::before{position:static;left:auto}
 .exp-meta-edit{display:flex;gap:8px;flex-wrap:wrap;margin:3px 0 7px}
 .exp-meta-edit .val{font-size:12.5px;color:var(--muted);flex:1 1 auto;min-width:130px;padding:2px 4px;border:1px dashed #d7deea;border-radius:5px}
 .exp-del,.edu-del{background:#fdecec;border-color:#f6c9c9;color:#b3261e}
 /* I.6 — oferta-attach w trybie FREE (moduł 1) */
 .free-offer{margin:6px 0 14px;padding:14px 15px;border:1px solid #cfe0fb;border-radius:14px;background:linear-gradient(135deg,#f7faff,#eef4ff)}
 .free-offer .fo-h{font-family:YantramanavUI,Inter,sans-serif;font-weight:800;font-size:15px;color:var(--ink);margin-bottom:4px}
 .free-offer .fo-s{font-size:13px;color:#41506e;line-height:1.5;margin-bottom:10px}
 .free-offer .fo-ta{width:100%;min-height:92px;border:1px solid var(--line);border-radius:9px;padding:10px 12px;font:inherit;font-size:14px;resize:vertical;background:#fff}
 .free-offer .fo-cta{margin-top:10px;width:100%}
 .tags{display:flex;flex-wrap:wrap;gap:6px}.tag{font-size:12px;background:#eef3fd;color:var(--ink);padding:5px 10px;border-radius:7px;font-weight:600}
 .chg{background:#f0fbf6;border:1px solid #c4ead9;border-radius:11px;padding:11px 13px;margin-bottom:9px;display:flex;gap:10px;align-items:flex-start}
 .chg .i{color:#0f6e56;font-weight:700}.chg .t{font-size:13px;color:#234d3f}.chg .t b{color:#0f6e56}
 .chg.err{background:#fff8f0;border-color:#f0d8b8}.chg.err .i{color:#a9621c}.chg.err .t{color:#5c421f}.chg.err .t b{color:#a9621c}
 .note{font-size:12px;color:var(--muted);margin-top:4px}
 .llm-note{background:#f6f9ff;border:1px solid var(--line);border-radius:10px;padding:11px 13px}
 .score-card{display:flex;align-items:baseline;gap:12px;background:#f6f9ff;border:1px solid var(--line);border-radius:13px;padding:14px 16px}
 /* Żywe pokrycie słów kluczowych: zielone = są w CV, szare = brakuje */
 .kwc{display:inline-flex;align-items:center;font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:99px;line-height:1.3;transition:background .15s,color .15s}
 .kwc.on{background:#e4f7ec;color:#137a43;border:1px solid #b7e6c9}
 .kwc.off{background:#eef1f7;color:#7683a0;border:1px solid #dde3ef}
 .kwc.kw-chip{cursor:pointer;font-family:inherit}
 .kwc.kw-add{border-style:dashed}
 .kwc.kw-add:hover{background:#e2e8f6;color:#3a4a67}
 .kwc.kw-mine:hover{background:#d3f0e0}
 .kw-pow{margin-left:7px;font-size:11px;font-weight:800;color:#137a43;opacity:.9}
 .kw-x{margin-left:7px;font-size:10px;opacity:.6}
 .kwc.kw-busy{opacity:.5;pointer-events:none}
 /* Kompetencje/Języki/Zainteresowania — pozycje w osobnych oknach z przyciskiem usuń (jak punkty doświadczenia) */
 .edit-item{display:flex;gap:6px;align-items:center;margin-bottom:5px}
 .edit-item .bul{flex:1;margin:0}
 .edit-del{flex:none;width:24px;height:24px;border:1px solid var(--line);background:#fff;border-radius:6px;color:#9aa7bf;cursor:pointer;font-size:11px;line-height:1;display:flex;align-items:center;justify-content:center}
 .edit-del:hover{color:#e5484d;border-color:#f3c2c2;background:#fdecec}
 .score-num{font-family:YantramanavUI,Inter,sans-serif;font-weight:800;font-size:38px;line-height:1}.score-num span{font-size:16px;color:var(--muted);font-weight:600}
 .score-lab{font-size:13px;color:var(--muted)}
 .miss{font-size:12.5px;color:#5c421f;background:#fff8f0;border:1px solid #f0d8b8;border-radius:10px;padding:10px 12px;margin-top:10px;line-height:1.5}
 .miss .sub-explain{display:block;font-size:11.5px;font-weight:400;color:#8a6d3b;margin:3px 0 7px;line-height:1.4}
 .pl-sub{font-size:11.5px;color:var(--muted);line-height:1.4;margin:-4px 0 9px}

 /* ---------- LIST MOTYWACYJNY (modal) ---------- */
 .cl-lab{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:14px 0 5px}
 .cl-inp,.cl-ta{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 11px;font:inherit;font-size:13.5px;color:var(--ink);background:#fff;resize:vertical}
 .cl-inp:focus,.cl-ta:focus{outline:none;border-color:var(--royal)}
 #cl-paras .cl-ta{margin-bottom:8px;line-height:1.5}
 .modal-box .modal-act{flex-wrap:wrap;gap:8px}

 /* ---------- PREVIEW ---------- */
 /* Style szablonów CV wstrzykuje app.js z /cv-templates.mjs (TEMPLATE_CSS). Tu tylko ramka karty podglądu. */
 #preview .cv{border:1px solid var(--line);border-radius:6px;box-shadow:0 20px 50px -28px rgba(21,51,107,.4)}

 /* Krok zablokowany (przed opłatą): kłódka zamiast numeru + przygaszona etykieta — reguły w bloku „ŚCIEŻKA". */

 /* ---------- KROK 1: DOPASOWANIE (pełna szerokość: moduł centralnie → 2 kolumny → zanikające CV + style) ---------- */
 .match{max-width:1060px;margin:0 auto;padding:26px 24px 70px}
 .fb-warn{background:#fff6e8;border:1px solid #f1ddba;color:#8a5300;border-radius:12px;padding:11px 15px;font-size:13px;line-height:1.5;margin-bottom:16px}
 @media(max-width:760px){.match{padding:18px 16px 54px}}
 .btn-lg{font-size:15.5px;padding:14px 24px;border-radius:12px}
 /* ---- ciche wyjście „poprawię ręcznie" (pod demem, celowo bez wagi przycisku) ---- */
 .fe-quiet{margin:14px auto 0;max-width:640px;text-align:center;display:flex;flex-direction:column;gap:4px}
 .fe-link{background:none;border:0;padding:0;font:inherit;font-size:13.5px;color:var(--royal);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
 .fe-link:hover{color:#0a2f8f}
 .fe-quiet-note{font-size:12px;line-height:1.5;color:#8294b4}
 .rt-typo{display:block;margin:6px 0 0;font-size:12.5px;line-height:1.45;color:#8a5300;background:#fffaf0;border:1px solid #f0dfb8;border-radius:9px;padding:7px 10px}
 .rt-fix{border:0;background:none;padding:0;font:inherit;font-weight:800;color:#8a5300;text-decoration:underline;cursor:pointer}
 /* ---- pisownia tekstu klienta (podpowiedź, nie poprawka) ---- */
 /* Dolny odstęp 9 px = tyle, ile mają między sobą moduły (`.cv-sec{margin-bottom:9px}`). Bez niego ramka
    podpowiedzi pisowni stykała się z modułem „Podsumowanie" — wyglądało to, jakby były jednym blokiem. */
 .sp-hints{display:flex;gap:10px;align-items:flex-start;margin:12px 0 9px;padding:11px 13px;background:#fffaf0;border:1px solid #f0dfb8;border-radius:12px}
 .sp-ic{font-size:15px;line-height:1.2}
 .sp-t{font-family:YantramanavUI,Inter,sans-serif;font-weight:700;font-size:12.5px;color:#8a5300}
 .sp-words{display:flex;flex-wrap:wrap;gap:6px;margin:7px 0 0}
 .sp-w{border:1px solid #e8cf9f;background:#fff;color:#8a5300;border-radius:999px;padding:3px 10px;font:inherit;font-size:12.5px;cursor:pointer}
 .sp-w:hover{background:#fdf3e0;border-color:#d8b877}
 .sp-note{margin:7px 0 0;font-size:11.5px;line-height:1.45;color:#a08050}
 /* ---- DEMO fragmentu „przed / po" (dowód jakości treści przed opłatą) ---- */
 .dfrag{margin:18px 0 0;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 24px;box-shadow:0 18px 46px -34px rgba(21,51,107,.5)}
 .df-h{font-family:YantramanavUI,Inter,sans-serif;font-weight:700;font-size:17px;color:var(--ink);line-height:1.35}
 .df-sub{font-size:13.5px;line-height:1.55;color:#5a6a88;margin:6px 0 0}
 .df-delta{display:flex;align-items:baseline;justify-content:center;gap:9px;margin:16px 0 4px;font-family:YantramanavUI,Inter,sans-serif}
 .df-d-n{font-weight:700;font-size:22px;color:#8294b4}
 .df-d-n.big{font-size:34px;color:#1e4fc4}
 .df-d-ar{font-size:19px;color:#1e4fc4}
 .df-d-den{font-size:13px;color:#8294b4}
 .df-d-up{margin-left:6px;background:#e8f6ec;color:#1c7a3e;border:1px solid #bfe4cb;border-radius:999px;padding:3px 10px;font-size:12.5px;font-weight:700}
 .df-tabs{display:none;gap:6px;margin:10px 0 0}
 .df-tab{flex:1;padding:9px 6px;border:1px solid var(--line);border-radius:10px;background:#fff;font-family:YantramanavUI,Inter,sans-serif;font-weight:600;font-size:13px;color:#5a6a88;cursor:pointer}
 .df-tab.on{background:#eef4ff;border-color:#b9d2fb;color:var(--royal)}
 .df-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:12px 0 0}
 .df-card{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:#fbfcff}
 .df-card.df-po{border-color:#b9d2fb;background:linear-gradient(135deg,#f4f8ff,#ffffff);position:relative;overflow:hidden}
 .df-c-h{font-family:YantramanavUI,Inter,sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:#5a6a88;display:flex;align-items:center;justify-content:space-between;gap:8px}
 .df-c-sc{font-size:13px;letter-spacing:0;color:#8294b4}
 .df-c-sc.up{color:#1e4fc4}
 .df-tx{margin:9px 0 0;font-size:13.5px;line-height:1.6;color:#33415c;white-space:pre-line}
 /* tekst „po": bez zaznaczania + znak PRÓBKA w tle (utrudnienie kopiowania, nie zabezpieczenie).
    Nie „DEMO" — słowo „demo" zniknęło z serwisu, bo darmowe CV jest pełnoprawne; to jest próbka treści PŁATNEJ. */
 .df-noc{user-select:none;-webkit-user-select:none}
 .df-card.df-po:after{content:"PRÓBKA";position:absolute;right:-4px;bottom:-8px;font-family:YantramanavUI,Inter,sans-serif;font-weight:800;font-size:42px;color:rgba(30,79,196,.06);letter-spacing:.06em;pointer-events:none}
 .df-impr{margin:12px 0 0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:4px}
 .df-impr li{font-size:13px;line-height:1.5;color:#33415c}
 .df-notes{margin:12px 0 0;display:flex;flex-direction:column;gap:4px;font-size:12px;line-height:1.5;color:#8294b4}
 .df-cta{margin:16px 0 0;text-align:center}
 .dfrag-note{font-size:13px;line-height:1.55;color:#5a6a88}
 .df-sk{height:12px;border-radius:6px;background:linear-gradient(90deg,#eef2f9,#f7f9fd,#eef2f9);background-size:200% 100%;animation:dfSk 1.2s linear infinite;margin:8px 0}
 .df-sk.sh{width:60%}
 @keyframes dfSk{0%{background-position:0 0}100%{background-position:-200% 0}}
 @media(prefers-reduced-motion:reduce){.df-sk{animation:none}}
 @media(max-width:760px){
   .dfrag{padding:18px 16px}
   .df-tabs{display:flex}
   .df-cards{grid-template-columns:1fr}
   .df-cards.df-t-po .df-przed{display:none}
   .df-cards.df-t-przed .df-po{display:none}
 }
 /* moduł wyniku — CENTRALNIE, na ciemnym gradiencie */
 .match-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;background:linear-gradient(135deg,#0f1f47,#1e4fc4);border-radius:22px;padding:34px 30px 30px;color:#fff;box-shadow:0 30px 70px -34px rgba(21,51,107,.6)}
 .gauge{--p:0;width:130px;height:130px;border-radius:50%;flex:none;display:grid;place-items:center;background:conic-gradient(var(--gc,#7cf0b0) calc(var(--p)*1%),rgba(255,255,255,.2) 0)}
 .gauge.low{--gc:#ff9a9a}.gauge.mid{--gc:#ffd27a}.gauge.good{--gc:#7cf0b0}
 .gauge-in{width:104px;height:104px;border-radius:50%;background:#142a5e;display:flex;flex-direction:column;align-items:center;justify-content:center}
 .gauge .g-num{font-family:YantramanavUI,Inter,sans-serif;font-weight:800;font-size:38px;line-height:1;color:#fff}
 .gauge .g-den{font-size:12px;color:#b9c8ee;margin-top:2px}
 .m-eyebrow{font-family:YantramanavUI,Inter,sans-serif;font-weight:700;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:#9fc0ff;margin-top:4px}
 .m-h1{font-family:YantramanavUI,Inter,sans-serif;font-weight:800;font-size:27px;line-height:1.15;color:#fff;margin:2px 0}
 @media(max-width:760px){.m-h1{font-size:22px}}
 .m-lead{font-size:14.5px;line-height:1.55;color:#dbe6ff;max-width:620px}
 .m-lead b{color:#fff}
 .m-cta{margin-top:8px;display:flex;flex-direction:column;gap:7px;align-items:center}
 .m-cta .btn-primary{background:#fff;color:#15336b}.m-cta .btn-primary:hover{background:#eef3ff}
 .m-cta-sub{font-size:12.5px;color:#b9c8ee}
 /* 2 kolumny: diagnoza | co podkręcimy */
 .match-diag{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px;align-items:start}
 @media(max-width:820px){.match-diag{grid-template-columns:1fr}}
 .md-col{min-width:0}
 .dg-block{border:1px solid var(--line);border-radius:14px;padding:15px 17px;margin-bottom:14px}
 .dg-block.ok{border-color:#c7ecd9;background:#f6fcf9}
 .dg-block.gap{border-color:#f1ddba;background:#fffaf0}
 /* #5: sekcje analizy zwijane (domyślnie zamknięte). summary = klikalny nagłówek z karetką. */
 .dg-fold>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;margin-bottom:0}
 .dg-fold>summary::-webkit-details-marker{display:none}
 .dg-fold>summary::before{content:"▸";color:var(--royal);font-size:12px;font-weight:700;flex:none;transition:transform .15s}
 .dg-fold[open]>summary::before{transform:rotate(90deg)}
 .dg-fold[open]>summary{margin-bottom:10px}
 .dg-h{font-family:YantramanavUI,Inter,sans-serif;font-weight:700;font-size:13.5px;color:var(--ink);margin-bottom:10px}
 .dg-block.ok .dg-h{color:#0f6e56}.dg-block.gap .dg-h{color:#9a6200}
 .dg-chips{display:flex;flex-wrap:wrap;gap:7px}
 .dg-chip{font-size:12.5px;padding:4px 11px;border-radius:999px;border:1px solid #e3e9f5;background:#fff;color:#2b3a57}
 .dg-chip.ok{background:#eafaf2;border-color:#c7ecd9;color:#0f5e49}
 .dg-chip.gap{background:#fff5e6;border-color:#f1ddba;color:#8a5300}
 .dg-note{font-size:12px;color:var(--muted);margin-top:9px;line-height:1.45}
 .dg-empty{font-size:13px;color:var(--muted)}
 .plan-col{text-align:left;border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:#fff}
 .pc-sub{font-family:YantramanavUI,Inter,sans-serif;font-weight:700;font-size:13px;color:var(--ink);margin:2px 0 12px}
 .pc-row{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px}
 .pc-ic{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff}
 .pc-ic.ok{background:#0f9d63}.pc-ic.err{background:#e0584f}
 .pc-tx{font-size:13.5px;line-height:1.5;color:#2b3a57}
 .pc-tx b{font-family:YantramanavUI,Inter,sans-serif;font-weight:700;color:var(--ink);display:block}
 .pc-tx span{display:block;color:var(--muted);margin-top:2px}
 .pc-tx em{color:var(--muted);font-style:normal;font-size:12px}
 .pc-note{margin-top:14px;border-top:1px dashed var(--line);padding-top:12px;font-size:12.5px;color:var(--muted);line-height:1.55}
 /* zanikające CV + wybór stylów */
 .match-prev{margin-top:30px;text-align:center}
 .mp-h{font-family:YantramanavUI,Inter,sans-serif;font-weight:800;font-size:19px;color:var(--ink)}
 .mp-sub{font-size:13px;color:var(--muted);max-width:600px;margin:6px auto 18px;line-height:1.5}
 /* ~0,5 strony CV w pełni widoczne, potem zanikanie; BEZ pobrania na etapie diagnozy */
 .cv-fade{position:relative;width:360px;max-width:100%;height:360px;margin:0 auto;overflow:hidden;border:1px solid var(--line);border-top-left-radius:8px;border-top-right-radius:8px;background:#fff;box-shadow:0 18px 40px -26px rgba(21,51,107,.55)}
 .cvf-inner{transform:scale(.667);transform-origin:top left;width:540px;pointer-events:none;user-select:none}
 .cvf-fog{position:absolute;inset:0;background:linear-gradient(180deg,rgba(238,242,248,0) 62%,rgba(238,242,248,.9) 88%,#eef2f8 100%)}
 .cvf-lock{position:absolute;left:0;right:0;bottom:13px;font-family:YantramanavUI,Inter,sans-serif;font-weight:700;font-size:12.5px;color:#15336b}
 .ms-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;align-items:flex-start;margin-top:18px}
 .ms-thumb{position:relative;width:104px}
 .ms-prev{display:block;width:104px;height:138px;overflow:hidden;border:1px solid var(--line);border-radius:7px;background:#fff;position:relative}
 .ms-prev .cv{transform:scale(.1925);transform-origin:top left;width:540px;pointer-events:none}
 .ms-thumb::after{content:"";position:absolute;inset:0 0 22px;border-radius:7px;background:rgba(15,31,71,.3)}
 .ms-lockic{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);font-size:20px;z-index:2}
 .ms-name{font-size:11.5px;color:var(--muted);text-align:center;margin-top:5px}
 .ms-more{width:104px;height:138px;border:1.5px dashed #b9cdf3;border-radius:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:YantramanavUI,Inter,sans-serif;font-weight:800;font-size:22px;color:var(--royal)}
 .ms-more span{font-size:11px;font-weight:600;color:var(--muted)}
 .match-foot{margin-top:30px;display:flex;justify-content:center}
 .match-foot .btn-primary{background:var(--royal);color:#fff}
 /* fix: przycisk „Przejdź do edycji CV" (match-pay-3) siedzi w .match-foot ORAZ .m-cta — bez tego .m-cta:hover
    dawał prawie białe tło przy białym tekście = przycisk gasł. Ta reguła (równa specyficzność, późniejsza) wygrywa. */
 .match-foot .btn-primary:hover{background:#1844ad;color:#fff}
  /* === Wywiad pozycjonujący (panel „inteligentnych pytań" w matchView) === */
  .pos-panel{max-width:760px;margin:18px auto 4px;display:flex;flex-direction:column;gap:14px}
  .pos-block{border:1px solid #d3e0fb;background:linear-gradient(135deg,#f3f7ff,#fafcff);border-radius:16px;padding:18px 20px}
  .pos-block.pos-paid{border-color:#e6d3a8;background:linear-gradient(135deg,#fdf8ec,#fffdf7)}
  .pos-block.pos-teaser{border-style:dashed;background:#f8fafe;opacity:.92}
  .pos-h{font-family:YantramanavUI,Inter,sans-serif;font-weight:700;font-size:15.5px;color:#15336b;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .pos-block.pos-paid .pos-h{color:#7a5c12}
  .pos-free{font-family:YantramanavUI,Inter,sans-serif;font-weight:700;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:#1e7d4f;background:#e3f6ec;border-radius:999px;padding:2px 9px}
  .pos-sub{font-size:13px;line-height:1.5;color:#41506e;margin:6px 0 12px}
  .pos-h-lg{font-size:20px;line-height:1.3}
  .pos-sub-lg{font-size:15.5px;line-height:1.55;color:#33415c;margin:8px 0 14px}
  .pos-choice .pos-h-lg{margin-bottom:2px}
  .pos-choice-btns{display:flex;gap:12px;flex-wrap:wrap}
  .pos-choice-btn{flex:1 1 240px;text-align:left;border:2px solid var(--line);background:#fff;border-radius:14px;padding:14px 16px;cursor:pointer;display:flex;flex-direction:column;gap:4px;transition:border-color .12s,box-shadow .12s,background .12s;font-family:YantramanavUI,Inter,sans-serif}
  .pos-choice-btn:hover{border-color:#9cb6ee}
  .pos-choice-btn.sel{border-color:var(--royal);background:#eef4ff;box-shadow:inset 0 0 0 1px var(--royal)}
  .pos-choice-yes{border-color:#bcd2fb;background:linear-gradient(135deg,#f1f6ff,#fafcff)}
  .pos-choice-yes:hover{border-color:var(--royal)}
  .pcb-t{font-family:YantramanavUI,Inter,sans-serif;font-weight:700;font-size:15px;color:#15336b}
  .pcb-s{font-size:13px;line-height:1.45;color:#5a6a88}
  .pos-choice-no .pcb-t{color:#41506e}
  .pos-choice-skipnote{margin:12px 0 0;color:#1e7d4f;font-weight:600}
  .pos-link{background:none;border:0;padding:0;color:var(--royal);font:inherit;text-decoration:underline;cursor:pointer}
  .pos-q-list{margin:10px 0 4px;padding-left:22px;display:flex;flex-direction:column;gap:9px}
  .pos-q-pv{font-weight:600;font-size:13.5px;line-height:1.45;color:var(--ink)}
  .pos-q-pv::marker{color:var(--royal);font-weight:700}
  .pos-teaser-foot{margin:14px 0 0;padding-top:12px;border-top:1px dashed #cdd9f2;color:#41506e}
  .pos-q{margin:0 0 14px}
  .pos-q:last-child{margin-bottom:0}
  .pos-q-t{font-weight:700;color:var(--ink);font-size:14px;margin-bottom:8px}
  .pos-opts{display:flex;flex-direction:column;gap:7px}
  .pos-opt{text-align:left;border:1.5px solid var(--line);background:#fff;border-radius:11px;padding:9px 13px;cursor:pointer;display:flex;flex-direction:column;gap:2px;transition:border-color .12s,box-shadow .12s,background .12s;font-family:YantramanavUI,Inter,sans-serif}
  .pos-opt:hover{border-color:#9cb6ee}
  .pos-opt.sel{border-color:var(--royal);background:#eef4ff;box-shadow:inset 0 0 0 1px var(--royal)}
  .pos-opt-l{font-weight:600;font-size:13.5px;color:var(--ink)}
  .pos-opt-i{font-size:12px;color:#5a6a88;line-height:1.4}
  .pos-opt-other .pos-opt-l{color:#41506e}
  .pos-other-in{margin-top:6px;width:100%;border:1.5px solid var(--royal);border-radius:10px;padding:9px 12px;font-size:13.5px;font-family:YantramanavUI,Inter,sans-serif;box-sizing:border-box}
  .pos-other-in:focus{outline:none;box-shadow:0 0 0 3px rgba(30,79,196,.15)}
  @media (max-width:640px){.pos-block{padding:15px 14px}}
  /* #14: gwarancja czytelności przycisków w sekcji pytań na :hover — tekst zawsze ciemny na jasnym tle,
     nigdy tekst=tło (przycisk nie „znika"). Link „pomiń" dostaje wyraźny stan hover. */
  .pos-panel button:hover,.pos-choice-btn:hover,.pos-opt:hover,.pos-opt-other:hover{color:#15336b}
  .pos-choice-btn:hover .pcb-t,.pos-choice-btn:hover .pcb-s,.pos-opt:hover .pos-opt-l,.pos-opt:hover .pos-opt-i{color:inherit}
  .pos-link:hover{color:#143a96;text-decoration:underline}

/* =============== DOPISANE ZDANIE (słowa kluczowe) — oznaczenie w PODGLĄDZIE ===============
   Klient klika słowo kluczowe, my dopisujemy propozycję zdania do CV. Wcześniej wiedział tylko, ŻE coś doszło —
   nie gdzie. Tu zdanie jest podświetlone w podglądzie, a przy nim te same akcje co przy słowie w liście niżej.
   Kolor = „to jeszcze do sprawdzenia". „Zatwierdź" go zdejmuje, zdanie zostaje.
   Wyłącznie podgląd — PDF/DOCX budowane są na serwerze z danych, więc tego tu nigdy nie widać w pliku. */
.kw-hl{background:#fff6d8;box-shadow:inset 3px 0 0 #f0b429;border-radius:4px;padding:2px 6px 2px 9px;transition:background .25s}
/* ⚠️ BŁĄD NAPRAWIONY 03.08.2026 — zgłoszenie właściciela: „dopisane zdanie na żółtym tle pisze na biało,
   kompletnie nic nie widać". Podświetlenie ustawiało samo TŁO, a kolor liter zostawiało szablonowi CV.
   Na szablonach z ciemnym tłem (glass, darkmode, tech, neon, gradient…) tekst jest biały → biel na jasnej
   żółci. Podświetlenie jest ZAWSZE jasne, więc litery pod nim muszą być ciemne — niezależnie od szablonu.
   Klawisze akcji zostają w swoich kolorach (reguły niżej mają wyższą szczegółowość). */
.kw-hl, .kw-hl *{color:#2a2000!important;-webkit-text-fill-color:#2a2000}
.kw-hl .kw-hl-t{color:#8a6212!important;-webkit-text-fill-color:#8a6212}
.kw-hl-bar{display:block;margin-top:5px;font-family:YantramanavUI,Inter,sans-serif}
.kw-hl-t{display:block;font-size:8.5px;color:#8a6212;font-weight:600;letter-spacing:.01em}
/* oba przyciski w JEDNEJ linii pod opisem — flex-wrap:nowrap, żeby nie łamały się na wąskim podglądzie */
.kw-hl-btns{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;margin-top:4px}
.kw-hl-ok,.kw-hl-del{font-family:YantramanavUI,Inter,sans-serif;font-weight:700;font-size:8.5px;line-height:1;padding:4px 8px;
  border-radius:6px;border:1px solid transparent;cursor:pointer}
.kw-hl .kw-hl-ok,.kw-hl-ok{background:#1e4fc4;color:#fff!important;-webkit-text-fill-color:#fff}
.kw-hl-ok:hover{background:#143a96}
.kw-hl .kw-hl-del,.kw-hl-del{background:#fff;color:#8a6212!important;-webkit-text-fill-color:#8a6212;border-color:#e6c98a}
.kw-hl-del:hover{background:#fdf3dd;color:#6b4c0d!important;-webkit-text-fill-color:#6b4c0d}

/* ===== STAŁY WSKAŹNIK DOPASOWANIA w górnym pasku (prośba usera 21.07) =====
   Karta z wynikiem jest w lewej kolumnie — przy pracy w podglądzie klient jej nie widzi i nie wie,
   czy jego zmiany cokolwiek dały. Tu liczba jest zawsze pod ręką, obok informacji o pakiecie. */
/* PASEK INFORMACYJNY POD ŚCIEŻKĄ KROKÓW (27.07). Wcześniej wynik i plakietka pakietu siedziały w navy razem
   z krokami — przy 1240 px stepper się przewijał i klient nie widział końca ścieżki. Rozdzielone: navy = wyłącznie
   nawigacja (widoczna zawsze), ten pasek = liczby i status pakietu. Sticky tuż pod navy, żeby wynik nie uciekał
   przy przewijaniu; pusty (bez wyniku i bez plakietki) zwija się do zera i nie zabiera miejsca nad edytorem. */
.topinfo{position:sticky;top:54px;z-index:19;display:flex;align-items:center;justify-content:flex-end;gap:10px;
  padding:0 22px;background:#f6f9ff;border-bottom:1px solid var(--line);min-height:0}
.topinfo:not(:empty){padding:6px 22px}
.topinfo:empty{border-bottom:0}
/* ⚠️ Pasek jest PRZYKLEJONY (sticky) i miał pełną szerokość, więc przy przewijaniu lewej kolumny nakrywał
   nagłówek „Edytuj treść CV" — mimo że jego treść (wynik, plakietka pakietu) i tak stoi przy prawej krawędzi.
   Zgłoszenie właściciela 02.08.2026: „info o pakiecie ma się pokazywać tylko na podglądzie CV".
   Ograniczamy PUDEŁKO do prawej kolumny, dokładnie jak `.paid-banner` — treść nie drgnie ani o piksel,
   znika tylko niewidoczna połowa paska, która zasłaniała edytor. */
@media(min-width:901px){ .topinfo:not(:empty){margin-left:50%;border-left:1px solid var(--line)} }
@media(max-width:900px){.topinfo{top:0;position:static}}
/* ⚠️ BŁĄD NAPRAWIONY 03.08.2026 — zgłoszenie właściciela: „🎟 30 dni · pozostało 29 dni 23 h NACHODZI na
   pasek »Wracasz do swojego CV«". PRZYCZYNA: na desktopie `.editwrap` to kolumna flex o wysokości 100vh
   z `overflow:hidden`, więc navy `.top` KURCZY SIĘ z deklarowanych 54 px do realnych 40 px. Przyklejenie
   `.topinfo` na `top:54px` spychało pasek 14 px PONIŻEJ jego miejsca w układzie — wprost na zielony baner.
   Że pasek się przykleja, i tak nic nie dawało: ten kontener się NIE PRZEWIJA (przewijają się kolumny w środku).
   Zerowy offset = pasek stoi tam, gdzie jego miejsce, niezależnie od tego, ile realnie ma navy. */
@media(min-width:901px){ .topinfo{top:0} }
/* ⚠️ BŁĄD NAPRAWIONY 03.08.2026 — zgłoszenie właściciela: „ekran analizy zablokowany, nie mogę przewinąć
   niżej, muszę ODDALIĆ, żeby zobaczyć klawisz »Przejdź do edycji CV«". PRZYCZYNA: `.editwrap` ma na
   desktopie `height:100vh; overflow:hidden` — słusznie w EDYTORZE, gdzie przewijają się kolumny w środku.
   Ale ekran ANALIZY i ekran WYBORU STANOWISKA to zwykłe, długie strony bez kolumn: przy oknie 1440×700
   treść miała 920 px i dolne 220 px — razem z jedynym CTA — było nieosiągalne, bo NIC się nie przewijało
   (zmierzone: żaden element strony nie miał przewijania). Te dwa widoki dostają `editwrap-page`:
   wysokość z treści i normalne przewijanie strony. Navy pasek zostaje przyklejony u góry. */
@media(min-width:901px){ .editwrap.editwrap-page{height:auto;min-height:100vh;overflow:visible} }
/* WYNIK W PASKU NAVY (28.07.2026) — stały element prawego górnego rogu, jak logo po lewej.
   `flex:none` = nie przewija się razem ze ścieżką kroków. Kolory jasne, bo tło jest granatowe
   (styl w `.topinfo` niżej został — obsługuje starsze widoki, gdzie pasek jest jasny). */
.top .fit-top{flex:none;display:inline-flex;align-items:baseline;gap:6px;margin-left:10px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:4px 10px}
.top .fit-top .ft-lab{font-size:10.5px;color:rgba(255,255,255,.72);font-weight:600}
.top .fit-top .ft-num{font-family:YantramanavUI,Inter,sans-serif;font-weight:800;font-size:16px;line-height:1;color:#fff!important}
.top .fit-top .ft-max{font-size:10px;font-weight:700;opacity:.6}
.top .fit-top .ft-goal{font-size:10px;color:rgba(255,255,255,.7);border-left:1px solid rgba(255,255,255,.25);padding-left:6px}
@media(max-width:640px){
  .top .fit-top{padding:3px 8px;gap:4px;margin-left:6px}
  .top .fit-top .ft-lab,.top .fit-top .ft-goal{display:none}   /* na wąskim ekranie zostaje sama liczba */
  .top .fit-top .ft-num{font-size:14px}
}
.topinfo .fit-top{display:inline-flex;align-items:baseline;gap:6px;
  padding:5px 11px;border-radius:999px;background:#f2f6ff;border:1px solid #d9e4fb;white-space:nowrap}
.topinfo .fit-top .ft-lab{font-size:11px;color:#5a6a88;font-weight:600}
.topinfo .fit-top .ft-num{font-family:YantramanavUI,Inter,sans-serif;font-weight:800;font-size:17px;line-height:1}
.topinfo .fit-top .ft-max{font-size:10.5px;font-weight:700;opacity:.55}
.topinfo .fit-top .ft-goal{font-size:10.5px;color:#5a6a88;border-left:1px solid #d9e4fb;padding-left:6px}
@media(max-width:760px){
  .topinfo .fit-top{padding:4px 8px;gap:4px}
  .topinfo .fit-top .ft-lab,.topinfo .fit-top .ft-goal{display:none}  /* na wąskim ekranie zostaje sama liczba */
  .topinfo .fit-top .ft-num{font-size:15px}
}

 /* Pytanie na rozmowę zostaje w języku ROZMOWY (np. polskim — tak je usłyszy kandydat), a pod nim tłumaczenie
    na język obsługi (np. ukraiński). Kursywa i szarość: to pomoc w zrozumieniu, nie treść do wyuczenia. */
 .iv-qt{color:#5a6a88;font-size:12.5px;font-style:italic;margin-top:2px}

 /* ——— Zaproszenie do opinii: gwiazdki W MIEJSCU (nie link do innej strony) ——————————————
    Próg wejścia = JEDEN klik. Tekst dopiero po ocenie, opcjonalnie. Patrz komentarz w app.js (revAskHtml). */
 .rv-stars{display:flex;gap:4px;margin:2px 0 6px}
 .rv-star{border:0;background:transparent;cursor:pointer;font-size:29px;line-height:1;padding:0 2px;color:#d7deec;transition:transform .1s,color .1s}
 .rv-star:hover{transform:scale(1.14)}
 .rv-star.on{color:#f0a52a}
 .rv-star:disabled{cursor:default;transform:none}
 .rv-note{font-size:11.5px;color:#6b7a99;line-height:1.45}
 .rv-later{border:0;background:transparent;color:#6b7a99;font-size:11.5px;text-decoration:underline;cursor:pointer;padding:0;margin-left:6px}
 .rv-later:hover{color:var(--royal)}
 .rv-ta{width:100%;margin-top:7px;border:1px solid var(--line);border-radius:9px;padding:9px 10px;font-family:inherit;font-size:13.5px;color:#1b2536;resize:vertical}
 .rv-ta:focus{outline:none;border-color:#b9d2fb;background:#f8fbff}
 .rv-row{display:flex;align-items:center;gap:10px;margin-top:9px}
 .rv-row .btn{padding:9px 16px;font-size:14px}
 .rv-msg{font-size:11.5px;min-height:14px;margin-top:5px;color:#1a7f37}
 .rv-msg.warn{color:#b00}
 .rv-hint{font-size:11.5px;color:#5a6a88;line-height:1.45;margin:6px 0 0}
 .rv-fu{margin-top:10px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:#fbfcff}
 .rv-fu-q{font-size:11.5px;color:#33415c;line-height:1.45;margin-bottom:5px}
 .rv-fu label{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#5a6a88;margin-right:14px;cursor:pointer}
 .rv-fu input{flex:none;cursor:pointer}