@charset "UTF-8";
/* =============================================================
   Eveilo — app.css
   Układ panelu (sidebar + treść) i komponenty aplikacji.
   Wymaga base.css.
   ============================================================= */

/* górna belka na całą szerokość, pod nią sidebar + treść */
body.app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    /* pastelowa siatka gradientów pod całą aplikacją (mockup ChromaCV):
       lawenda / brzoskwinia / błękit / róż w rogach, baza #f4f3f8 */
    background-color: #f4f3f8;
    background-image:
        radial-gradient(at 0% 0%, rgba(236, 231, 254, 0.85) 0px, transparent 60%),
        radial-gradient(at 100% 0%, rgba(255, 237, 213, 0.70) 0px, transparent 60%),
        radial-gradient(at 100% 100%, rgba(224, 242, 254, 0.68) 0px, transparent 60%),
        radial-gradient(at 0% 100%, rgba(255, 228, 230, 0.58) 0px, transparent 60%);
    background-attachment: fixed;
}

/* ---------- Sidebar ---------- */
.sidebar {
    width: 15rem;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.80);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border-right: 1px solid var(--c-border);
    display: flex;
    flex-direction: column;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem;
    border-bottom: 1px solid var(--c-border-light);
}
.sidebar-logo .logo-mark { font-size: 1.25rem; }
.logo-text { font-weight: 700; color: var(--c-text); }
.logo-img { height: 26px; width: auto; display: block; }

.nav { flex: 1; padding: 1rem 0.75rem; display: flex; flex-direction: column; gap: 0.25rem; }
.nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    color: var(--c-muted);
    transition: background-color .15s, color .15s;
}
.nav-item:hover { background: var(--c-border-light); color: var(--c-text); }
.nav-item.active { background: var(--c-primary-100); color: var(--c-primary-dark); font-weight: 600; box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.14); }
.nav-icon { width: 1.25rem; text-align: center; }

/* ---------- Przełącznik języka ---------- */
.lang-switch { padding: 0.75rem 1rem; border-top: 1px solid var(--c-border-light); }
.lang-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-faint);
    margin-bottom: 0.5rem;
}
.lang-list { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.lang-btn {
    padding: 0.2rem 0.45rem;
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    background: var(--c-border-light);
    color: var(--c-muted);
    transition: background-color .15s, color .15s;
}
.lang-btn:hover { background: #e5e7eb; }
.lang-btn.active { background: var(--c-primary); color: #fff; }

/* ---------- Stopka sidebaru (user) ---------- */
.sidebar-footer { border-top: 1px solid var(--c-border-light); padding: 1rem; }
.user-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.avatar {
    width: 2rem; height: 2rem;
    border-radius: var(--radius-pill);
    background: var(--c-primary-100);
    color: var(--c-primary-dark);
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 0.8rem;
    flex-shrink: 0;
}
.user-meta { min-width: 0; }
.user-name { font-size: 0.85rem; font-weight: 500; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-email { font-size: 0.72rem; color: var(--c-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Wyloguj: ten sam rytm co .nav-item (ikona, padding, promień), ale z
   czerwonym akcentem na hover — wyraźny przycisk zamiast szarego tekściku */
.logout-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 0.875rem;
    color: var(--c-muted);
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
.logout-btn .nav-icon { color: inherit; }
/* stale czerwony (decyzja 08.08); hover = pełne nasycenie */
.logout-btn {
    background: rgba(220, 38, 38, 0.08);
    color: var(--c-bad, #dc2626);
}
.logout-btn:hover {
    background: var(--c-bad, #dc2626);
    color: #fff;
}

/* ---------- Treść ---------- */
.flash { margin-bottom: 1rem; }
.content { flex: 1; overflow: auto; }
/* Jedna szerokość treści w CAŁEJ aplikacji (26.07, prośba Marcina): 100rem —
   dotąd tak szerokie były tylko galeria szablonów i „Moje CV" (nadpisania
   inline w tych widokach, teraz zbędne i usunięte). */
.content-inner { max-width: 100rem; margin: 0 auto; padding: 2rem 1.5rem; }

/* ---------- Nagłówek strony ---------- */
.page-header { margin-bottom: 1.5rem; }
/* Ikona równa się z TYTUŁEM, nie ze środkiem bloku tytuł+podtytuł (prośba
   Marcina 26.07 — wcześniej align-items:center spychało ją między wiersze).
   Kotwiczymy ją do góry i centrujemy w pudełku wysokości wiersza tytułu. */
.page-header-row { display: flex; align-items: flex-start; gap: 0.75rem; }
.page-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(1.25rem * 1.5);   /* = wysokość wiersza .page-title */
    font-size: 1.875rem;
    line-height: 1;
    flex-shrink: 0;
}
.page-title { font-size: 1.25rem; line-height: 1.5; color: var(--c-text); }
.page-subtitle { font-size: 0.85rem; color: var(--c-faint); margin-top: 0.1rem; }
.back-link {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.8rem; color: var(--c-faint); margin-bottom: 0.5rem;
}
.back-link:hover { color: #374151; }


/* ---------- USTAWIENIA (26.07) ----------
   Karty układają się w kolumny wg dostępnej szerokości; galeria zdjęć i
   „strefa niebezpieczna" idą przez całą szerokość. `align-items: start`,
   żeby sąsiadujące karty nie rozciągały się do wysokości najwyższej. */
.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 1rem;
    align-items: start;
}
/* base.css ma `.card + .card { margin-top: 1rem }` (układ jedna pod drugą) —
   w gridzie ten margines spychał KAŻDĄ kartę poza pierwszą o 1rem w dół,
   przez co sąsiadujące karty nie trzymały jednej linii. */
.settings-grid .card + .card { margin-top: 0; }
.settings-cardhead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.settings-cardhead .card-title { margin-bottom: 0; }
.settings-subtitle { margin: 0 0 0.15rem; font-weight: 600; font-size: 0.9rem; color: var(--c-text); }
.settings-sep { margin: 1.25rem 0; border: 0; border-top: 1px solid var(--c-border-light); }
.settings-empty { margin: 0.75rem 0 0; font-size: 0.85rem; color: var(--c-muted); }
.settings-plan { display: flex; align-items: center; gap: 0.6rem; margin: 0.9rem 0 1rem; }
.settings-plan .field-label { margin: 0; }

/* przełącznik zgody: pole wyboru + opis w jednym klikalnym wierszu */
.settings-toggle {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    margin-bottom: 0.9rem;
    border: 1px solid var(--c-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.6);
    cursor: pointer;
}
.settings-toggle:hover { border-color: var(--c-primary-100); }
.settings-toggle > span { display: flex; flex-direction: column; gap: 0.15rem; }
.settings-toggle-name { font-size: 0.9rem; font-weight: 600; color: var(--c-text); }
.settings-toggle-hint { font-size: 0.8rem; color: var(--c-muted); }

/* strefa niebezpieczna — czerwona ramka, żeby nie pomylić jej z resztą */
.settings-danger { border-color: var(--c-bad-border, #fecaca); }
.settings-danger .card-title { color: #b91c1c; }

/* ---------- MOJE ZDJĘCIA: lista wierszy ----------
   Jedno zdjęcie w wierszu: miniatura z lewej, opis użycia na środku, akcje
   z prawej (pełne etykiety, nie ikonki). Przy szerokim ekranie wiersz ma
   miejsce, żeby wprost napisać, w których CV zdjęcie siedzi. */
/* pasek akcji nagłówka: wgraj + usuń nieużywane */
.photo-head-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
/* „Wgraj zdjęcie" to <label> z ukrytym inputem — musi wyglądać jak przycisk */
.photo-upload .btn { cursor: pointer; margin: 0; }

.photo-list { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 1rem; }
.photo-row {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 0.9rem 1.1rem;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--c-border);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.photo-row:hover { border-color: var(--c-primary-100); box-shadow: var(--shadow-md); }
.photo-row.is-primary { border-color: var(--c-primary-100); background: rgba(255, 255, 255, 0.88); }
.photo-row-img {
    width: 92px;
    height: 92px;
    flex-shrink: 0;
    border-radius: 12px;
    object-fit: cover;
    background: var(--c-border-light);
    border: 1px solid var(--c-border);
}
.photo-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.photo-row-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.photo-row-usage { font-size: 0.85rem; color: var(--c-text); margin: 0; }
.photo-row-usage.is-free { color: var(--c-muted); }
.photo-row-cvs { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; margin-left: 0.15rem; }
.photo-row-cv {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--c-lavender);
    color: var(--c-primary-dark);
    font-size: 0.76rem;
    font-weight: 600;
}
.photo-row-meta { margin: 0; font-size: 0.75rem; color: var(--c-faint); }
.photo-row-actions { display: flex; flex-direction: column; align-items: stretch; gap: 0.4rem; flex-shrink: 0; }
.photo-row-actions .btn { white-space: nowrap; }
.photo-row-locked {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: var(--c-border-light);
    color: var(--c-muted);
    font-size: 0.76rem;
    font-weight: 600;
}
@media (max-width: 720px) {
    .photo-row { flex-wrap: wrap; }
    .photo-row-actions { flex-direction: row; width: 100%; }
}

@media (max-width: 520px) {
    .settings-grid { grid-template-columns: 1fr; }
}

/* ---------- Pole zdjęcia w formularzu ---------- */
.photo-field { margin-bottom: 1.25rem; }
.photo-row { display: flex; align-items: center; gap: 1rem; }
.photo-preview {
    width: 72px; height: 72px;
    border-radius: 8px; overflow: hidden;
    background: var(--c-border-light);
    border: 1px solid var(--c-border);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.photo-empty { font-size: 1.8rem; opacity: 0.4; }

/* ---------- PROFIL NA JEDNEJ STRONIE (09.08) ----------
   Wszystkie sekcje pod sobą: aktywna (pod kursorem albo na środku ekranu)
   w pełni widoczna, pozostałe przygaszone. Po prawej sticky mapa sekcji.
   Przygaszanie działa TYLKO na szerokich ekranach — na wąskim nie ma miejsca
   na mapę obok, a półprzezroczyste formularze utrudniałyby wypełnianie. */
[x-cloak] { display: none !important; }

.pone { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.pone-main { display: flex; flex-direction: column; gap: 3rem; min-width: 0; }

.psec {
    scroll-margin-top: 1rem;
    padding: 25px;
    border-radius: 16px;
    background: rgb(58 97 237 / 12%);
    backdrop-filter: blur(10px);
}
.psec-head { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1.5rem; }
.psec-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 10px;
    background: #eef2ff;
    color: var(--c-primary);
    font-size: 1rem;
}
.psec-headtext { min-width: 0; }
.psec-title { margin: 0; font-size: 1.50rem; font-weight: 700; color: var(--c-text); }
.psec-sub { margin: 0.15rem 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--c-faint); }

/* ---------- Własne linki (sekcja Linki): etykieta | adres | kosz ----------
   Wiersz jest flexem, więc kosz stoi W LINII pól, nie pod nimi. Reguły
   odtworzone 09.08: wcześniejsze czyszczenie martwego CSS starego huba
   zabrało przy okazji te (żywe) style i wiersz rozsypał się na kolumnę. */
.lnk-row { display: flex; gap: 0.75rem; align-items: flex-end; margin-bottom: 1rem; }
/* rząd wyrównuje do dołu, a uchwyt (24px) jest niższy niż input i kosz
   (38px) — margines dołu centruje go na ich osi: (38-24)/2 */
.lnk-row .sort-handle { margin-bottom: 7px; }
.lnk-row .field { margin-bottom: 0; }
.lnk-row .lnk-label { flex: 0 0 30%; min-width: 0; }
.lnk-row .lnk-url { flex: 1; min-width: 0; }
.lnk-del {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;                 /* równo z wysokością .input */
    padding: 0;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--c-faint);
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}
.lnk-del:hover { color: #dc2626; border-color: #fca5a5; background: #fef2f2; }
@media (max-width: 700px) {
    .lnk-row { flex-wrap: wrap; }
    .lnk-row .lnk-label,
    .lnk-row .lnk-url { flex-basis: 100%; }
    .lnk-row .field { margin-bottom: 0.5rem; }
}

/* podpowiedzi pól tekstowych: własny dropdown (js/field-suggest.js) w stylu
   panelu — linki (etykieta), umiejętności (nazwa/kategoria), języki (nazwa) */
.sugg-anchor { position: relative; }
.sugg-pop {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 40;
    max-height: 246px;
    overflow-y: auto;
    padding: 0.3rem;
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--c-border-light, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 14px 32px -14px rgba(15, 23, 42, 0.25);
}
.sugg-item {
    display: block;
    width: 100%;
    padding: 0.42rem 0.6rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    text-align: left;
    font-size: 0.88rem;
    color: var(--c-text);
    cursor: pointer;
}
.sugg-item:hover,
.sugg-item.is-active { background: #eef2ff; color: var(--c-primary); }

/* karty wewnątrz sekcji profilu: białe pudełko na szkle sekcji */
#pone .card {
    background: rgb(255 255 255);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 18px;
    box-shadow: 0 0px 6px rgb(124 110 148 / 16%);
}

/* mapa sekcji: pierścień postępu + lista + wskaźnik autozapisu */
.prail-host { position: relative; }
.prail-inner {
    padding: 0.9rem;
    border-radius: 16px;
    border: 1px solid var(--c-border-light, #e2e8f0);
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.prail-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.85rem; }
.prail-ring { position: relative; width: 52px; height: 52px; flex-shrink: 0; }
.prail-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.prail-ring-bg { fill: none; stroke: #e8ecf6; stroke-width: 6; }
.prail-ring-fill {
    fill: none;
    stroke: var(--c-primary);
    stroke-width: 6;
    stroke-linecap: round;
    /* łuk dojeżdża płynnie po zapisie sekcji (Livewire podmienia samo
       stroke-dasharray, więc przejście CSS ma na czym pracować) */
    transition: stroke-dasharray .6s cubic-bezier(.4, 0, .2, 1);
}
.prail-pct {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--c-text);
}
.prail-pct i { font-style: normal; font-size: 0.7em; margin-left: 1px; color: var(--c-faint); }
.prail-title { margin: 0; font-size: 0.86rem; font-weight: 600; color: var(--c-text); }
.prail-count { margin: 0.1rem 0 0; font-size: 0.74rem; color: var(--c-faint); }

.prail-list { display: flex; flex-direction: column; gap: 0.15rem; }
.prail-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.42rem 0.5rem;
    border-radius: 10px;
    text-decoration: none;
    color: var(--c-muted);
    transition: background .15s, color .15s;
}
.prail-item:hover { background: #f1f5ff; color: var(--c-text); }
.prail-item.is-current { background: #eef2ff; color: var(--c-primary); font-weight: 600; }
.prail-ico { width: 1.1rem; text-align: center; font-size: 0.92rem; flex-shrink: 0; }
.prail-name { flex: 1; min-width: 0; font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prail-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: #d7dced; transition: background .35s ease; }
.prail-dot.is-filled { background: var(--c-mint-text, #047857); }
.prail-cta { width: 100%; justify-content: center; margin-top: 0.7rem; }
.prail-hint { margin: 0.6rem 0.2rem 0; font-size: 0.72rem; line-height: 1.45; color: var(--c-faint); }
.prail-saved {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    background: var(--c-mint, #d1fae5);
    color: var(--c-mint-text, #047857);
    font-size: 0.76rem;
    font-weight: 600;
}

@media (min-width: 1100px) {
    .pone { grid-template-columns: minmax(0, 1fr) 262px; }
    /* duży odstęp między sekcjami: przygaszona sąsiednia sekcja ma być
       wyraźnie osobnym blokiem, a nie doklejona do aktywnej */
    .pone-main { gap: 6rem; }
    .prail-host { position: sticky; top: 0.5rem; }
    /* przygaszenie nieaktywnych sekcji — sedno układu */
    .psec { opacity: 0.3; transition: opacity .35s ease; }
    .psec.is-active { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .psec { transition: none; }
    .prail-ring-fill { transition: none; }
}

/* ---------- Podpowiedzi umiejętności (branża / model) ----------
   .skill-chip jest zajęte przez listę dodanych umiejętności, stąd własna
   nazwa dla klikalnych propozycji. */
.skill-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.skill-suggest { margin-top: 1rem; }
.skill-suggest-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.skill-suggest-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--c-border);
    background: #fff;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--c-text);
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}
.skill-suggest-chip:hover { background: var(--c-primary-50, #eef2ff); border-color: var(--c-primary-100, #c7d2fe); color: var(--c-primary); }
.skill-suggest-chip .bi { font-size: 0.75rem; color: var(--c-primary); }

/* ---------- Karty szablonów ---------- */
/* NAGŁÓWEK HERO (wspólny: galeria szablonów, Mój profil) — plakietka,
   tytuł z gradientowym akcentem i zdanie wprowadzające. Wyśrodkowany,
   w odróżnieniu od standardowego .page-header z ikoną po lewej: strony
   „wejściowe" mają prowadzić wzrok do środka, a nie do lewej krawędzi. */
.page-hero { text-align: center; max-width: 50rem; margin: 0.25rem auto 0; }
.page-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 15px;
    border-radius: 999px;
    /* to samo szkło co pigułka narzędzi dokumentu */
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(20px) saturate(185%);
    -webkit-backdrop-filter: blur(20px) saturate(185%);
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.85),
                0 6px 18px -8px rgba(31, 38, 135, 0.22);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--c-primary);
    margin-bottom: 1rem;
}
.page-hero-badge .bi { font-size: 0.85rem; }
/* plakietka premium (podgląd szablonu) — złota, jak plakietka w galerii */
.page-hero-badge.is-premium { color: #92400e; background: rgba(254, 243, 199, 0.85); border-color: #fde68a; }
/* wariant W TYTULE (podgląd szablonu): rozmiar stały, nie skalowany razem
   z nagłówkiem; -0.22em podnosi ją do optycznego środka wersalika, a reset
   światła zdejmuje ciasny letter-spacing tytułu */
.page-hero-title .page-hero-badge {
    -webkit-text-fill-color: currentColor;      /* strażnik, gdyby wrócił clip */
    vertical-align: middle;
    position: relative;
    top: -0.22em;
    margin: 0 0 0 0.6rem;
    font-size: 0.82rem;
    letter-spacing: 0;
}
/* Powrót do galerii: własny wiersz nad plakietką (inaczej wchodzi z nią
   w jedną linię), przycisk na tym samym szkle co plakietka i belki. */
.page-hero-backrow { display: flex; justify-content: center; margin-bottom: 0.85rem; }
.page-hero-back {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 7px 16px 7px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(20px) saturate(185%);
    -webkit-backdrop-filter: blur(20px) saturate(185%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8),
                0 5px 14px -8px rgba(31, 38, 135, 0.25);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--c-muted);
    text-decoration: none;
    transition: color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.page-hero-back:hover {
    color: var(--c-primary);
    background: #fff;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9),
                0 8px 20px -8px rgba(99, 102, 241, 0.35);
}
.page-hero-back .bi { transition: transform .18s ease; }
.page-hero-back:hover .bi { transform: translateX(-3px); }
.page-hero-title {
    font-size: clamp(1.7rem, 3.4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.18;
    color: #0f172a;
    margin: 0 0 0.75rem;
}
/* :not(.page-hero-badge) — plakietka statusu też jest spanem w tytule, a bez
   tego wyłączenia dostawała gradient i -webkit-text-fill-color: transparent,
   czyli pustą żółtą pigułkę bez napisu */
.page-hero-title span:not(.page-hero-badge) {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.page-hero-em { font-weight: 600; color: var(--c-text); }
.page-hero-sub {
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--c-muted);
    max-width: 40rem;
    margin: 0 auto;
}

/* Filtr kategorii = TA SAMA belka co pigułka narzędzi dokumentu: szkło,
   promień, odstępy i przyciski opisuje jedna reguła (patrz .cv-toolbar-pill /
   .cv-tool-btn niżej), tutaj zostają wyłącznie różnice galerii. */
.tpl-filter-row { display: flex; justify-content: center; margin: 0 0 1.8rem; }
.tpl-filter { flex-wrap: wrap; }
.tpl-chip {
    /* wysokość NAJWYŻSZEGO elementu belki edytora (zmierzone 33.5px —
       „Dodaj wersję językową"): dzięki temu obie pigułki mają równo 45.5px,
       a nie 41 vs 45.5, mimo że chipsy filtrów są bez ikon */
    min-height: 33.5px;
    justify-content: center;
}
.tpl-chip.active {
    background: #fff;
    color: #6c54ef;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
.tpl-section { margin-bottom: 1.8rem; }
.tpl-section-title { font-size: 1.02rem; font-weight: 700; color: var(--c-text, #111827); margin: 0 0 0.75rem; }
.tpl-grid {
    display: grid;
    /* sztywne kolumny = szerokość kartki: zero fantomowych marginesów
       z auto-centrowania, odstępy robi wyłącznie gap */
    grid-template-columns: repeat(auto-fill, 240px);
    gap: 2.2rem 1.5rem;
    padding: 0.4rem 0 0.6rem;
}

/* „wydrukowana kartka": goła miniatura z papierowym cieniem, nazwa pod
   spodem; hover delikatnie podnosi arkusz */
.tpl-sheet { display: block; text-align: center; text-decoration: none; }
.tpl-sheet .tpl-thumb {
    /* cień „leżącej kartki": ciasny, przylegający, z delikatną krawędzią;
       lekkie zaokrąglenie rogów arkusza */
    border-radius: 6px;
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.04),
        0 1px 2px rgba(15, 23, 42, 0.10),
        0 4px 10px rgba(15, 23, 42, 0.12);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.tpl-sheet:hover .tpl-thumb {
    transform: translateY(-3px);
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.04),
        0 2px 3px rgba(15, 23, 42, 0.10),
        0 9px 18px rgba(15, 23, 42, 0.15);
}
.tpl-sheet-name {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 0.8rem;
    font-size: 0.83rem;
    color: var(--c-muted, #6b7280);
    letter-spacing: 0.02em;
}
.tpl-sheet:hover .tpl-sheet-name { color: var(--c-text, #111827); }
.tpl-sheet-premium {
    font-style: normal;
    font-size: 0.62rem;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

/* Kafel „Stwórz nowe CV" — pierwszy element siatki Moje CV. Rozciąga się
   na pełną wysokość wiersza (kartka + nazwa + meta), więc siatka zostaje
   równa; przerywana ramka odróżnia akcję od zapisanych dokumentów. */
.cv-new {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    /* dokładnie kartka A4 jak miniatury (240 x 240*297/210); align-self
       wyłącza rozciąganie do wysokości wiersza — inaczej kafel sięgał pod
       linię meta i wystawał poniżej arkuszy */
    align-self: start;
    width: 240px;
    aspect-ratio: 210 / 297;
    padding: 1.4rem 1.2rem;
    border-radius: 12px;
    border: 2px dashed #c7d2fe;
    background: rgba(255, 255, 255, 0.6);
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.cv-new:hover {
    background: #fff;
    border-color: var(--c-primary);
    border-style: solid;
    transform: translateY(-3px);
    box-shadow: 0 9px 22px -6px rgba(99, 102, 241, 0.22);
}
.cv-new-plus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #eef2ff;
    color: var(--c-primary);
    font-size: 1.3rem;
    margin-bottom: 0.9rem;
    transition: transform .3s ease, background-color .2s ease, color .2s ease;
}
.cv-new:hover .cv-new-plus { transform: scale(1.08) rotate(90deg); background: var(--c-primary); color: #fff; }
.cv-new-title { font-size: 0.95rem; font-weight: 700; color: #0f172a; }
.cv-new-desc { margin-top: 0.3rem; font-size: 0.78rem; line-height: 1.45; color: var(--c-muted); }

/* Moje CV: te same kartki co w galerii + linia meta i kasowanie na hoverze */
.cv-sheet { position: relative; }
.cv-sheet-link { display: block; text-decoration: none; }
.tpl-sheet-meta {
    display: block;
    margin-top: 3px;
    font-size: 0.7rem;
    color: var(--c-faint, #9ca3af);
    letter-spacing: 0.03em;
}
/* Okrągłe flagi wersji językowych w linii meta dokumentu */
.lang-flag {
    position: relative;
    display: inline-block;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    overflow: hidden;
    vertical-align: -2.5px;
}
/* pierścień nad flagą, żeby jasne pola (biel PL/FR) nie zlewały się z tłem */
.lang-flag::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgb(15 23 42 / 0.14);
}
.lang-flag svg { display: block; width: 100%; height: 100%; }
.lang-flag + .lang-flag { margin-left: 3px; }
.lang-flag-code { font-size: 0.55rem; line-height: 13px; display: block; text-align: center; }
.cv-sheet-del {
    position: absolute;
    top: 10px;
    /* kartka ma 240px i jest wyśrodkowana: 10px w głąb jej prawego rogu */
    right: calc(50% - 110px);
    margin: 0;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.cv-sheet:hover .cv-sheet-del { opacity: 1; transform: translateY(-3px); }
.cv-sheet-del button {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid var(--c-border, #e5e7eb);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}
.cv-sheet-del button:hover { background: #fee2e2; border-color: #fca5a5; }

/* ---------- Stan pusty ---------- */
.empty-state { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); padding: 3rem 1.5rem; text-align: center; }
.empty-state.dashed { background: var(--c-bg); border-style: dashed; border-width: 2px; }
.empty-icon { font-size: 2.25rem; margin-bottom: 0.5rem; }
.empty-text { color: var(--c-faint); font-size: 0.875rem; max-width: 28rem; margin: 0 auto; }

/* ---------- Listy wpisów (doświadczenie / edukacja) ---------- */
.entry-list { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; }
.entry {
    background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius);
    padding: 1rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem;
}
.entry-main { flex: 1; min-width: 0; }
.entry-title-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.entry-title { font-weight: 600; color: var(--c-text); }
.entry-at { color: var(--c-muted); }
.entry-company { font-weight: 500; color: var(--c-primary); }
.entry-period { font-size: 0.75rem; color: var(--c-faint); margin: 0.25rem 0 0; }
.entry-desc { font-size: 0.78rem; color: var(--c-muted); margin: 0.25rem 0 0; }
.entry-actions { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }
.icon-btn { background: none; border: none; cursor: pointer; padding: 0.25rem; color: var(--c-faint); transition: color .15s; font-size: 0.9rem; }
.icon-btn:hover { color: var(--c-primary); }
.icon-btn.danger:hover { color: var(--c-bad); }

.tag-row { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.5rem; }
.tag { background: var(--c-border-light); color: var(--c-muted); font-size: 0.72rem; padding: 0.1rem 0.5rem; border-radius: var(--radius-sm); }

/* Przycisk „dodaj" — wyrazisty kafel w duchu „Stwórz nowe CV" z listy CV:
   przerywana ramka, kółko z plusem obracające się przy najechaniu. Wcześniej
   był to szary pasek, który ginął pod listą wpisów (zgłoszenie Marcina). */
.add-dashed {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    width: 100%;
    padding: 1.05rem;
    border: 2px dashed #c7d2fe;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.6);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--c-text);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}
.add-dashed:hover {
    background: #fff;
    border-color: var(--c-primary);
    border-style: solid;
    color: var(--c-primary);
    transform: translateY(-2px);
    box-shadow: 0 9px 22px -8px rgba(99, 102, 241, 0.25);
}
.add-dashed-plus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #eef2ff;
    color: var(--c-primary);
    font-size: 0.95rem;
    transition: transform .3s ease, background-color .2s ease, color .2s ease;
}
.add-dashed:hover .add-dashed-plus { transform: rotate(90deg); background: var(--c-primary); color: #fff; }

/* Pod-formularz (dodawanie/edycja) */
.subform { background: var(--c-primary-50); border: 1px solid var(--c-primary-100); border-radius: var(--radius); padding: 1.25rem; margin-top: 1rem; }
.subform-title { font-size: 0.875rem; font-weight: 600; color: var(--c-primary-dark); margin-bottom: 1rem; }
.form-actions { display: flex; gap: 0.75rem; }
/* Pola formularza układają się PŁYNNIE (auto-fit): przy jednej szerokości
   treści dla całej aplikacji (100rem) sztywne 2 kolumny rozciągały pojedyncze
   pola do ~700px. Teraz na szerokim ekranie wiersz mieści ich więcej,
   a na wąskim schodzi do jednej kolumny bez media query. */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }

/* ---------- Umiejętności ---------- */
.skill-group { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; }
.skill-group-title { font-size: 0.72rem; font-weight: 600; color: var(--c-faint); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; }
.skill-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.skill-chip { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 0.35rem 0.6rem; }
/* przeciąganie wpisów w sekcjach profilu (profile-sort.js): okrągły uchwyt
   jak przyciski edytora dokumentu, przygaszony oryginał i box-luka
   o wymiarach przenoszonego wpisu (JS nadaje height/width/marginesy) */
.sort-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--c-border);
    background: #fff;
    border-radius: 999px;
    color: var(--c-muted);
    font-size: 0.72rem;
    line-height: 1;
    cursor: grab;
    vertical-align: middle;
    box-shadow: 0 1px 4px rgb(15 23 42 / 0.08);
    transition: color 0.15s ease, border-color 0.15s ease;
}
.sort-handle:hover { color: var(--c-primary); border-color: var(--c-primary); }
.sort-handle:active { cursor: grabbing; }
/* obok „gołych" ikonek (ołówek/kosz wpisów, X chipów) uchwyt też bez
   obramowania — obwódka zostaje tylko tam, gdzie sąsiad ją ma (kosz
   w wierszu linków) */
.entry-actions .sort-handle,
.skill-chip .sort-handle,
.skill-group-title .sort-handle {
    width: auto;
    height: auto;
    border: 0;
    background: none;
    box-shadow: none;
    padding: 0.25rem;
    color: var(--c-faint);
    font-size: 0.9rem;
}
.skill-chip .sort-handle,
.skill-group-title .sort-handle { font-size: 0.78rem; padding: 0 2px; color: var(--c-muted); }
.sort-ghost { opacity: 0.45; }
.sort-slot {
    border: 2px dashed var(--c-primary);
    border-radius: var(--radius-sm);
    background: rgb(99 102 241 / 0.1);
    box-sizing: border-box;
    pointer-events: none;
}
.sort-slot-y { display: block; }
.sort-slot-x { display: inline-flex; }
.skill-name { font-size: 0.85rem; font-weight: 500; color: #1f2937; }
.skill-level { font-size: 0.7rem; padding: 0.05rem 0.4rem; border-radius: var(--radius-sm); }
.skill-level.lvl-expert       { background: #f3e8ff; color: #7e22ce; }
.skill-level.lvl-advanced     { background: #dbeafe; color: #1d4ed8; }
.skill-level.lvl-intermediate { background: #dcfce7; color: #15803d; }
.skill-level.lvl-beginner     { background: var(--c-border-light); color: var(--c-muted); }
.skill-remove { background: none; border: none; cursor: pointer; color: #d1d5db; font-size: 0.72rem; padding: 0; }
.skill-remove:hover { color: var(--c-bad); }

.box-accent { background: var(--c-primary-50); border: 1px solid var(--c-primary-100); border-radius: var(--radius); padding: 1rem; }
.box-accent-title { font-size: 0.875rem; font-weight: 600; color: var(--c-primary-dark); margin-bottom: 0.75rem; }

/* ---------- Pomocnicze (formularze / spinner) ---------- */
.actions-end { display: flex; justify-content: flex-end; }
.cluster { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.spin { animation: eveilo-spin 1s linear infinite; }
.op-25 { opacity: 0.25; }
.op-75 { opacity: 0.75; }
@keyframes eveilo-spin { to { transform: rotate(360deg); } }

/* ---------- Generator CV ---------- */
.gen-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.gen-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 1024px) { .gen-grid { grid-template-columns: 1fr 2fr; } }
.history-row { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem; border-radius: var(--radius-sm); }
.history-row:hover { background: var(--c-bg); }
.history-title { font-size: 0.85rem; font-weight: 500; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-meta { font-size: 0.72rem; color: var(--c-faint); }

/* ---------- Podgląd CV (treść z AI) ---------- */
.cv-preview .cv-document { font-family: Georgia, serif; font-size: 14px; line-height: 1.6; color: #1a1a1a; }
.cv-preview h2 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-primary-dark); border-bottom: 1px solid var(--c-primary-100); padding-bottom: 4px; margin: 20px 0 10px; }
.cv-preview .cv-entry { margin-bottom: 14px; }
.cv-preview .cv-entry-header { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px; }
.cv-preview .cv-period { font-size: 12px; color: var(--c-muted); font-style: italic; }
.cv-preview ul { margin: 6px 0 0 16px; }
.cv-preview li { margin-bottom: 3px; font-size: 13px; }
.cv-preview .skills-list { display: flex; flex-wrap: wrap; gap: 6px; }
.cv-preview .skill-tag { background: #eff6ff; color: #1d4ed8; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-family: sans-serif; }
.cv-preview .cv-summary p { color: #374151; }

@media print {
    .sidebar, .page-header, .gen-toolbar { display: none !important; }
    .cv-preview { padding: 0; border: none; }
}

/* ---------- Responsywność panelu ---------- */
@media (max-width: 768px) {
    body.app { flex-direction: column; }
    .sidebar { width: 100%; flex-direction: column; border-right: none; border-bottom: 1px solid var(--c-border); }
    .nav { flex-direction: row; flex-wrap: wrap; }
}

/* ---------- Kadrowanie zdjęcia profilowego (Cropper.js) ---------- */
.crop-panel { max-width: 420px; }
.crop-stage {
    width: 100%;
    background: var(--c-border-light);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.crop-stage img { display: block; max-width: 100%; }
.crop-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-top: 0.75rem;
}

/* ---------- Edycja zapisanego CV w miejscu (cvs.show + cv-edit.js) ---------- */
/* position+z-index: outline maluje się w warstwie ELEMENTU, więc treść
   i tła sąsiadów (następna sekcja, karty, kolumna obok) przykrywały kawałki
   przerywanej ramki (zgłoszenie Marcina). Elewacja na czas hoveru wynosi
   ją nad sąsiadów; relative nie zmienia layoutu, a wartość 55 zostaje POD
   pływającym toolbarem ✏️/🗑 (z-index 60 niżej). */
/* Selektor po samej klasie: cv-edit.js kładzie ją nie tylko na celach
   data-edit — ramka jedynej grupy umiejętności ląduje na całym bloku
   sekcji (data-section, bez data-edit). */
.cv-editable .cvedit-hover {
    outline: 2px dashed var(--c-primary);
    /* offset UJEMNY = ramka WEWNĄTRZ pudełka elementu. Rysowana na zewnątrz
       była ścinana przez każdego przodka z overflow:hidden, gdy element
       dotykał jego krawędzi (szyny rail-flow, czarna kolumna canfield,
       nagłówek mono…) — zostawał sam bok od strony światła. Wewnątrz pudełka
       żaden klip przodka jej nie dosięga. */
    outline-offset: -3px;
    /* BEZ border-radius: outline sam podąża za promieniem elementu, a jego
       nadpisywanie animowało okrągłe zdjęcia do prostokąta (.cv-photo ma
       celowe transition na border-radius dla panelu kształtu). */
    cursor: pointer;
    position: relative;
    z-index: 55;
}
/* Szyny rail-flow (sunny/pro/editorial/mono) tną nakładkę (overflow:hidden
   w cv.css — celowe przycięcie jednostek wyższych niż strona). W EDYTORZE
   gasiło to ramkę podświetlenia elementom przy krawędziach szyny: offset
   ramki wychodzi poza nakładkę i zostawał sam dolny bok (zgłoszenie
   Marcina). Klip zdejmujemy TYLKO pod .cv-editable — PDF/druk bez zmian;
   silnik mierzy scrollHeight, więc paginacji to nie rusza. */
.cv-editable .cv-railflow-rail { overflow: visible; }
.cvedit-toolbar {
    position: absolute;
    z-index: 60;
    display: flex;
    gap: 4px;
}
/* atrybut hidden MUSI wygrywać z display:flex */
.cvedit-toolbar[hidden],
.cvedit-menu[hidden] { display: none; }
.cvedit-btn {
    border: 1px solid var(--c-border);
    background: #fff;
    border-radius: 999px;
    width: 30px;
    height: 30px;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.cvedit-btn:hover { background: var(--c-border-light); }
.cvedit-menu {
    position: absolute;
    z-index: 70;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
    display: flex;
    flex-direction: column;
    min-width: 220px;
    overflow: hidden;
}
.cvedit-menu button {
    border: 0;
    background: none;
    text-align: left;
    padding: 0.6rem 0.9rem;
    font: inherit;
    cursor: pointer;
}
.cvedit-menu button:hover { background: var(--c-border-light); }
/* Modale edycji (zdjęcie, wpisy, strażnik) — ten sam „Liquid Glass" co okna
   dialogowe (SweetAlert): przyciemnione + rozmyte tło, szklana zaokrąglona karta. */
.cvedit-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(30, 27, 45, 0.32);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 6vh 1rem 1rem;
    overflow-y: auto;
}
.cvedit-modal {
    position: relative;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 22px;
    width: min(760px, 96vw);
    padding: 1.5rem 1.5rem 1.2rem;
    box-shadow: 0 24px 60px -18px rgba(31, 38, 135, 0.35),
                inset 0 1px 1px rgba(255, 255, 255, 0.85);
    animation: cvedit-pop .18s ease-out;
}
@keyframes cvedit-pop {
    from { opacity: 0; transform: scale(0.96) translateY(6px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .cvedit-modal { animation: none; } }
.cvedit-title { margin: 0 0 1rem; font-size: 1.12rem; font-weight: 700; color: var(--c-text); padding-right: 2rem; }
/* X zamknięcia (prawy górny róg) — fioletowy jak „Pobierz PDF" */
.cvedit-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9px;
    background: none;
    color: var(--c-primary);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
.cvedit-close:hover { background: var(--c-primary-50); color: var(--c-primary-dark); }
.cvedit-close:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.35); }
.cvedit-body .field { margin-bottom: 0.9rem; }
.cvedit-error { margin: 0.5rem 0 0; }
.cvedit-skill-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}
.cvedit-skill-row .cvedit-btn { flex-shrink: 0; box-shadow: none; }
.cvedit-skill-row select.input { max-width: 200px; }
/* wiersz linku: etykieta krótka, adres bierze resztę szerokości */
.cvedit-link-row input[data-link="label"] { max-width: 160px; }
#cvedit-rows { margin-bottom: 0.6rem; }
#cvedit-add-row { margin-bottom: 0.4rem; }

/* wiersz dat + checkbox "obecnie" w popupie edycji CV */
.cvedit-dates { display: flex; gap: 0.75rem; }
.cvedit-dates .field { flex: 1; }
.cvedit-check {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: -0.35rem 0 0.9rem;
    font-size: 0.85rem;
    color: var(--c-muted, #6b7280);
    cursor: pointer;
}

/* popup zdjęcia: galeria wgranych + kadrowanie */
.cvedit-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.4rem 0 0.9rem;
}
.cvedit-photos img {
    width: 92px;
    height: 92px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 3px solid transparent;
    cursor: pointer;
}
.cvedit-photos img.selected { border-color: var(--c-primary); }
.cvedit-upload-label { display: inline-block; cursor: pointer; }
#cvedit-photo-crop img { display: block; max-width: 100%; }
#cvedit-photo-crop { background: var(--c-border-light); border-radius: var(--radius-sm); overflow: hidden; }
#cvedit-photo-status { margin-left: 0.6rem; }

/* textarea w popupie edycji CV: wysoka na start, rośnie z treścią */
.cvedit-textarea {
    min-height: 200px;
    resize: vertical;
    line-height: 1.55;
}

/* drag & drop sortowanie wpisów CV */
.cv-editable .cvedit-dragging { opacity: 0.45; }
.cvedit-btn[data-act="drag"] { cursor: grab; }
.cvedit-btn[data-act="drag"]:active { cursor: grabbing; }
.cvedit-placeholder {
    border: 2px dashed var(--c-primary);
    border-radius: 6px;
    background: rgba(99, 102, 241, 0.10);
    margin: 6px 0;
    box-sizing: border-box;
}

/* ---------- panel typografii CV (cv-style.js) ---------- */
.cvstyle-panel {
    position: fixed;
    top: 64px; /* pod globalną belką */
    right: 0;
    bottom: 0;
    width: 320px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border-left: 1px solid var(--c-border);
    z-index: 90;
    overflow-y: auto;
    padding: 1rem 1.1rem 1.4rem;
}
.cvstyle-panel[hidden] { display: none; }
/* panel zadokowany na stałe: miejsce rezerwujemy na KONTENERZE flex
   (.editor-body), nie na .content — dzięki temu prawa krawędź środka (a więc
   i jego pasek przewijania) kończy się PRZED panelem, a nie chowa się pod nim
   przy krawędzi okna. Panel jest position:fixed, więc leży w tej rezerwie. */
body.cvstyle-docked .editor-body { padding-right: 320px; }
@media (max-width: 1280px) {
    .cvstyle-panel { width: 280px; }
    body.cvstyle-docked .editor-body { padding-right: 280px; }
}
/* Nagłówek panelu wg mockupu: WERSALIKI z trackingiem + fioletowa ikona po
   lewej, „Reset" jako link po prawej. Sticky u góry scrolla panelu (nad
   sticky-nagłówkami grup), żeby Reset był zawsze pod ręką. */
.cvstyle-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    position: sticky;
    top: -1rem; /* kompensacja padding-top panelu */
    z-index: 7;
    margin: -1rem -1.1rem 0.7rem;
    padding: 0.85rem 1.1rem 0.7rem;
    background: none !important;
    border-bottom: none !important;
}
.cvstyle-head h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    color: var(--c-text, #1f2430);
    min-width: 0;
}
.cvstyle-head h3 .bi {
    color: var(--c-primary, #7c3aed);
    font-size: 1.25rem;
    -webkit-text-stroke: 0.6px currentColor;
    flex-shrink: 0;
}
.cvstyle-reset-link {
    border: none;
    background: none;
    padding: 0.15rem 0.1rem;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.86rem;
    color: var(--c-primary, #7c3aed);
    flex-shrink: 0;
}
.cvstyle-reset-link:hover { color: var(--c-primary-dark, #6d28d9); text-decoration: underline; }
/* ===== GRUPY PANELU = karty w języku ChromaCV (przeprojektowanie 26.07) =====
   Cele UX (zgłoszenie Marcina): (1) od razu widać, KTÓRA grupa jest otwarta
   i co się modyfikuje — otwarta karta ma fioletowy ring, tintowany nagłówek
   i PRZYKLEJONY nagłówek przy przewijaniu; (2) karty zamknięte wyraźnie
   wyciszone; (3) spójność z resztą aplikacji (szkło, fiolet, miękkie promienie).
   Przypadkowe zamykanie grupy przy odklikiwaniu palety kolorów rozbraja
   strażnik w cv-style.js (klik gaszący Coloris nie dociera do <summary>). */
.cvstyle-group {
    border: 1px solid var(--c-border);
    border-radius: 14px;
    margin-bottom: 0.55rem;
    padding: 0;
    background: rgba(255, 255, 255, 0.55);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    /* pozwala animować block-size do wartości `auto` (płynne rozwijanie) */
    interpolate-size: allow-keywords;
}
/* PŁYNNE rozwijanie/zwijanie <details> — natywnie przez ::details-content
   (treść grupy BEZ nagłówka; summary zostaje klikalne i sticky przez cały
   czas animacji). Przeglądarki bez interpolate-size/::details-content po
   prostu otwierają natychmiast — łagodna degradacja. */
.cvstyle-group::details-content {
    block-size: 0;
    overflow-y: clip;
    transition: block-size 0.24s ease, content-visibility 0.24s allow-discrete;
}
.cvstyle-group[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) {
    .cvstyle-group::details-content { transition: none; }
}
.cvstyle-group:hover { border-color: #d8d2ea; background: rgba(255, 255, 255, 0.8); }
.cvstyle-group[open] {
    background: #fff;
    border-color: #c4b5fd;
    box-shadow: 0 0 0 3px var(--c-primary-50, #f5f3ff), var(--shadow-sm);
}
.cvstyle-group summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.45em;
    padding: 0.62rem 0.8rem;
    font-weight: 600;
    font-size: 0.88rem;
    list-style: none;
    border-radius: 13px;
    -webkit-user-select: none;
    user-select: none;
}
.cvstyle-group summary::-webkit-details-marker { display: none; }
.cvstyle-group > summary > .bi { color: var(--c-muted, #6b7280); font-size: 0.95em; }
/* nagłówek OTWARTEJ grupy: fiolet + sticky w scrollu panelu — zawsze wiadomo,
   w czym się grzebie, nawet głęboko w długiej grupie */
.cvstyle-group[open] > summary {
    position: sticky;
    top: -1rem; /* kompensacja padding-top panelu — klei się do samej góry */
    z-index: 5;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 13px 13px 0 0;
    border-bottom: 1px solid var(--c-primary-100, #ede9fe);
    color: var(--c-primary-dark, #6d28d9);
}
.cvstyle-group[open] > summary > .bi { color: var(--c-primary, #7c3aed); }
/* chevron rozwijania = maska SVG w data-URI (czysty ASCII, odporne na
   kodowanie); po PRAWEJ stronie nagłówka, obrót o 90° po otwarciu */
.cvstyle-group summary::after {
    content: "";
    margin-left: auto;
    flex-shrink: 0;
    width: 0.66em; height: 0.66em;
    background: var(--c-muted, #6b7280);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.15s ease;
}
.cvstyle-group[open] > summary::after { transform: rotate(90deg); background: var(--c-primary, #7c3aed); }
.cvstyle-fields { padding: 0.35rem 0.8rem 0.8rem; }
.cvstyle-fields .field-label { margin-top: 0.55rem; }
/* PODGRUPY (role/dekor w sekcjach): lżejsze, wcięte kartki z fioletową
   szyną zamiast pełnej ramki — hierarchia czytelna na pierwszy rzut oka */
.cvstyle-group.cvstyle-sub {
    background: var(--c-border-light, #f3f1f8);
    border: 1px solid transparent;
    border-left: 3px solid #ddd6f3;
    border-radius: 10px;
    margin: 0.45rem 0;
}
.cvstyle-group.cvstyle-sub:hover { background: #efecf7; }
.cvstyle-group.cvstyle-sub[open] {
    background: #fbfaff;
    border-color: #e4defa;
    border-left-color: var(--c-primary, #7c3aed);
    box-shadow: none;
}
.cvstyle-group.cvstyle-sub > summary {
    font-size: 0.82rem;
    padding: 0.5rem 0.7rem;
    position: static; /* sticky tylko na grupach głównych — zagnieżdżone by się przekładały */
    border-bottom: none;
    background: none;
    color: inherit;
}
.cvstyle-group.cvstyle-sub[open] > summary { color: var(--c-primary-dark, #6d28d9); }

/* Widoczność sekcji — przełączniki jako zaokrąglone karty (wg mockupu):
   etykieta z lewej, fioletowy checkbox z prawej. */
.cvstyle-sec-list { display: flex; flex-direction: column; gap: 0.45rem; padding-top: 0.15rem; }
.cvstyle-sec-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin: 0 0 0.7rem;   /* oddziel od podsekcji poniżej */
    padding: 0.58rem 0.78rem;
    border-radius: 11px;
    background: var(--c-border-light);
    border: 1px solid var(--c-border);
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
.cvstyle-sec-row:hover { background: #fff; border-color: var(--c-primary-100); }
.cvstyle-sec-label { font-size: 0.83rem; font-weight: 500; color: var(--c-text); }
.cvstyle-sec-row input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--c-primary);
    cursor: pointer;
    flex-shrink: 0;
}
.cvstyle-row { display: flex; gap: 0.6rem; }
.cvstyle-row > div { flex: 1; min-width: 0; }

/* Suwaki: grubość / rozmiar / interlinia — etykieta + wartość, tor fioletowy */
.cvstyle-slider { margin-top: 0.6rem; }
.cvstyle-slider-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.28rem; }
.cvstyle-slider-head .field-label { margin: 0; }
.cvstyle-slider-val {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--c-primary-dark);
    font-variant-numeric: tabular-nums;
}
.cvstyle-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    margin: 3px 0;
    border-radius: 999px;
    background: var(--c-border-light);      /* nadpisywane inline gradientem (fill) */
    cursor: pointer;
    outline: none;
}
.cvstyle-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--c-primary);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform .1s;
}
.cvstyle-range::-webkit-slider-thumb:active { transform: scale(1.15); }
.cvstyle-range:focus-visible { box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25); }
/* Firefox: tor + wypełnienie osobno (inline gradient chowa się za torem) */
.cvstyle-range::-moz-range-track { height: 6px; border-radius: 999px; background: var(--c-border-light); }
.cvstyle-range::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--c-primary); }
.cvstyle-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 2px solid var(--c-primary);
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}
/* Wymiar ustalony przez szablon (np. waga Imię i nazwisko w Canfield):
   gałka WIDOCZNA, ale wyszarzona i nieaktywna — sygnalizuje „decyduje szablon",
   zamiast chować kontrolkę albo udawać, że działa. */
.cvstyle-slider.is-locked { opacity: 0.55; }
.cvstyle-slider.is-locked .cvstyle-slider-val {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--c-muted);
}
.cvstyle-slider.is-locked .cvstyle-range {
    background: var(--c-border-light) !important;   /* płaski szary tor, bez fill */
    cursor: not-allowed;
}
.cvstyle-slider.is-locked .cvstyle-range::-webkit-slider-thumb {
    background: var(--c-border-light);
    border-color: var(--c-muted);
    box-shadow: none;
    cursor: not-allowed;
}
.cvstyle-slider.is-locked .cvstyle-range::-moz-range-thumb {
    background: var(--c-border-light);
    border-color: var(--c-muted);
    cursor: not-allowed;
}
.cvstyle-slider.is-locked .cvstyle-range::-moz-range-progress { background: var(--c-border-light); }
/* pole koloru = Coloris (swatch z szachownicą + hex, wbudowana alfa) */
.cvstyle-clr {
    width: 100%;
    height: 2rem;
    padding: 0 0.5rem 0 32px;      /* miejsce na podgląd koloru po LEWEJ */
    border: 1px solid var(--c-border, #d1d5db);
    border-radius: 8px;
    background: #fff;
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
    color: var(--c-text, #111827);
    cursor: pointer;
}
.cvstyle-clr:focus { outline: 2px solid var(--c-primary); outline-offset: 0; }
/* PODGLĄD KOLORU (swatch Colorisa) — kwadracik przy LEWEJ krawędzi belki,
   przed wartością hex. Po prawej stronie był wcześniej wyłączony w motywie
   (kółko przeszkadzało), ale bez żadnego podglądu zostawały same „#ffffff…"
   — stąd przeniesienie na lewo, gdzie czyta się jak ikona wiersza. */
.cvstyle-colorwrap .clr-field button,
.cvstyle-ph-row .clr-field button {
    width: 20px;
    height: 20px;
    left: 6px;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}
/* Wyrównanie: złączona belka ikon (segmented control) — wspólne granice */
.cvstyle-align { display: flex; }
.cvstyle-align button {
    flex: 1;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--c-border);
    background: #fff;
    padding: 0.42rem 0.3rem;
    font-size: 0.98rem;
    color: var(--c-muted);
    cursor: pointer;
    margin-left: -1px;                     /* zlej granice sąsiadów */
    transition: background-color .15s, color .15s;
}
.cvstyle-align button:first-child { margin-left: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.cvstyle-align button:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.cvstyle-align button:hover { background: var(--c-primary-50); color: var(--c-text); z-index: 1; }
.cvstyle-align button.active {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
    z-index: 1;                            /* fioletowa ramka na wierzchu sąsiadów */
}
/* Wyrównanie zablokowane przez szablon (np. Blueprint — tytuły sekcji na flex):
   wyszarzone i nieaktywne, jak inne blokady. */
.cvstyle-align.is-locked { opacity: 0.5; pointer-events: none; }
.cvstyle-align.is-locked button { cursor: not-allowed; }

/* wiersze kolorów dokumentu w panelu typografii */
.cvstyle-colorrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: 0.55rem;
    font-size: 0.85rem;
}
.cvstyle-colorrow .clr-field { flex: 0 0 96px; width: 96px; }

/* stan dziedziczenia kolorów w panelu typografii */
.cvstyle-colorwrap {
    display: flex;
    align-items: center;
    gap: 6px;
}
.cvstyle-colorwrap { flex-wrap: nowrap; }
.cvstyle-colorwrap .clr-field { flex: 0 0 96px; width: 96px; }
/* GEOMETRIA STAŁA: ↺ zawsze zajmuje swoje 26px (w stanie odziedziczonym jest
   tylko niewidoczne), więc belka hex nigdy nie przeskakuje w bok. Dawny chip
   „auto" miał inną szerokość niż ↺ i to właśnie on przesuwał wiersz. */
.cvstyle-colorreset { box-shadow: none; width: 26px; height: 26px; flex: 0 0 26px; padding: 0; font-size: 0.8rem; }
.cvstyle-colorreset.is-off { visibility: hidden; pointer-events: none; }

/* ===== PALETA KOLORÓW (Coloris) — większa i miększa (26.07) =====
   Domyślne 200px było ciasne: pole barwy 100px wysokości i cienkie 8px suwaki
   trudno trafić myszą. Paleta renderuje się jako dziecko <body> (POZA panelem),
   więc reguły muszą być globalne — scoping do .cvstyle-panel by jej nie dosięgnął.
   Rząd gotowych próbek jest wyłączony w cv-style.js (Coloris nie pozwala
   użytkownikowi dopisać własnej próbki, więc lista była martwa).
   PREFIKS `body` NIE jest ozdobą: coloris.min.css ładuje się PO app.css
   (@push('styles') w widoku edytora), więc przy równej specyficzności
   wygrywałby kolejnością — `body` daje nam jeden punkt przewagi. */
body .clr-picker {
    width: 270px;
    border-radius: 18px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.06);
}
body .clr-gradient { height: 170px; margin-bottom: 18px; border-radius: 18px 18px 0 0; }
body .clr-hue,
body .clr-alpha { height: 12px; border-radius: 6px; margin: 8px 20px; }
body .clr-hue div,
body .clr-alpha div { width: 18px; height: 18px; margin-left: -9px; }
body .clr-marker { width: 16px; height: 16px; margin: -8px 0 0 -8px; }
body .clr-preview { width: 40px; height: 40px; margin: 12px 0 18px 20px; }
body input.clr-color {
    width: calc(100% - 92px);
    height: 36px;
    margin: 12px 20px 18px auto;
    border-radius: 18px;
    font-size: 15px;
    font-family: inherit;
    letter-spacing: 0.02em;
}

/* stan niezapisany: Zapisz pulsuje OD ŚRODKA — tło przelewa się bielą↔lawendą,
   obwódka i treść fioletowieją (czytelniejsze niż zewnętrzna fala)
   + grupa poziomu umiejętności */
.cvstyle-unsaved { animation: ebar-pulse 1.1s ease-in-out infinite; }
@keyframes ebar-pulse {
    0%, 100% { background: #fff; border-color: var(--c-border); color: var(--c-text); }
    50% { background: var(--c-lavender); border-color: var(--c-primary); color: var(--c-primary-dark); }
}
@media (prefers-reduced-motion: reduce) {
    .cvstyle-unsaved { animation: none; background: var(--c-lavender); border-color: var(--c-primary); color: var(--c-primary-dark); }
}
.cvstyle-sb-show { margin: 0.2rem 0 0.6rem; }

/* ---------- Globalna belka (szkło) + korpus (sidebar/treść) ---------- */
.editor-body { display: flex; flex: 1; min-height: 0; }
.editor-body .sidebar { overflow-y: auto; }
.editor-body .content { flex: 1; }

.editor-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 64px;
    padding: 0 20px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid var(--c-border);
    color: var(--c-text);
    z-index: 90;
}
.ebar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ebar-logo { display: flex; align-items: center; }
.ebar-logo img { height: 27px; display: block; }
.ebar-user {
    display: flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
    padding-left: 12px;
    border-left: 1px solid var(--c-border);
    min-width: 0;
}
.ebar-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--grad-primary);
    color: #fff;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
/* NAZWA WŁASNA DOKUMENTU — na ŚRODKU belki, jak tytuł pliku w Google Docs:
   goły tekst (większy niż przyciski, ZERO ramki/tła), kropka stanu zapisu
   z lewej, ołówek wyłania się na hover. Celowo MOCNO inna od przycisków
   po prawej (decyzja Marcina: nie mieszać dwóch prawie-takich-samych pigułek). */
.ebar-doc {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    max-width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: 10px;
    background: none;
    cursor: pointer;
    transition: background 0.15s ease;
}
.ebar-doc:hover { background: rgba(255, 255, 255, 0.65); }
.ebar-doc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #34c759;
    box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.14);
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
/* kropka = stan zapisu: bursztyn, gdy Zapisz sygnalizuje niezapisane zmiany */
.editor-bar:has(#cv-bar-save.cvstyle-unsaved) .ebar-doc-dot {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.16);
}
.ebar-doc-title {
    font-size: 14.5px;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--c-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ebar-doc-edit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--c-faint);
    font-size: 13px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.ebar-doc:hover .ebar-doc-edit,
.ebar-doc-edit:focus-visible { opacity: 1; }
.ebar-doc-edit:hover { background: var(--c-primary-50); color: var(--c-primary); }

/* pole tekstowe w oknie dialogowym (eveiloPrompt) */
.eveilo-confirm-field { margin-top: 0.15rem; }
.eveilo-confirm-input { width: 100%; text-align: center; font-weight: 600; }

.ebar-usermeta { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.ebar-usermeta b { font-size: 12px; font-weight: 600; white-space: nowrap; }
.ebar-usermeta i {
    font-style: normal;
    font-size: 11px;
    color: var(--c-faint);
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* WERSJE JĘZYKOWE CV — w pływającej pigułce narzędzi (obok Usuń/Dodaj bloki;
   decyzja Marcina: funkcja dokumentu, nie belki). Chipy WSZYSTKICH wersji
   (aktywna = fioletowa) + przycisk „Dodaj wersję" z menu pozostałych języków
   i usuwaniem bieżącej wersji. Język DOKUMENTU ≠ język interfejsu. */
.cv-tool-vers { display: flex; align-items: center; gap: 3px; }
.cv-tool-verchip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--c-muted, #6b7280);
    text-decoration: none;
}
.cv-tool-verchip:hover { color: var(--c-primary-dark, #6d28d9); background: rgba(124, 58, 237, 0.10); }
.cv-tool-verchip.active {
    background: var(--grad-primary, #7c3aed);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.cv-tool-veradd { position: relative; }
.cv-tool-veradd > summary { list-style: none; }
.cv-tool-veradd > summary::-webkit-details-marker { display: none; }
.cv-tool-veradd[open] > summary { background: rgba(124, 58, 237, 0.10); }
.cvver-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 250px;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid var(--c-border);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    padding: 0.45rem;
    z-index: 130;
}
.cvver-menu-h {
    margin: 0.2rem 0.4rem 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-muted, #6b7280);
}
.cvver-menu form { margin: 0; }
.cvver-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    padding: 0.45rem 0.55rem;
    border-radius: 9px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--c-text, #1f2430);
    cursor: pointer;
}
.cvver-item:hover { background: var(--c-primary-50, #f5f3ff); color: var(--c-primary-dark, #6d28d9); }
.cvver-del { color: #dc2626; margin-top: 0.25rem; }
.cvver-del:hover { background: #fef2f2; color: #b91c1c; }

/* Wybór języka (po LEWEJ, między logo a kontem): zwinięty = lawendowa pigułka
   z aktywnym kodem; na hover rozwija się PIONOWO W DÓŁ jak dropdown, z PEŁNYM
   białym tłem i cieniem. Wersja pozioma po przeprowadzce na lewo nasuwała się
   półprzezroczysto na sekcję konta (zgłoszenie Marcina) — pion nie koliduje
   z niczym, a kryjące tło gwarantuje czytelność nad każdą treścią. */
.ebar-langs { position: relative; width: 52px; height: 30px; padding-left: 12px; border-left: 1px solid var(--c-border); }
.ebar-lang-track {
    position: absolute;
    top: calc(50% - 15px);   /* zwinięty siedzi jak dawniej, rozwija się w dół */
    left: 12px;
    z-index: 40;             /* nad belką i treścią strony */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 3px;
    border-radius: 12px;
    background: rgba(241, 239, 247, 0.7);
    border: 1px solid var(--c-border);
    transition: background-color .2s ease, box-shadow .2s ease;
}
.ebar-langs:hover .ebar-lang-track,
.ebar-langs:focus-within .ebar-lang-track {
    background: #fff;
    box-shadow: var(--shadow-md);
}
.ebar-lang {
    order: 1;
    margin-top: 2px;
    padding: 4px 9px;
    max-height: 2.2em;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--c-muted);
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transition: max-height .28s ease, opacity .2s ease, padding .28s ease, margin .28s ease, background-color .15s, color .15s;
}
.ebar-lang.active { order: 0; margin-top: 0; background: #fff; color: var(--c-primary-dark); box-shadow: var(--shadow-sm); }
/* na rozwiniętej (białej) liście aktywny odróżnia się lawendą */
.ebar-langs:hover .ebar-lang.active,
.ebar-langs:focus-within .ebar-lang.active { background: var(--c-lavender); box-shadow: none; }
/* hover tylko na NIE-aktywnych: lawendowe podświetlenie + fioletowy tekst */
.ebar-lang:not(.active):hover { background: var(--c-primary-50); color: var(--c-primary-dark); }
/* zwinięte (mysz poza pigułką): nie-aktywne ZJEŻDŻAJĄ do 0 — z opóźnieniem */
.ebar-langs:not(:hover):not(:focus-within) .ebar-lang:not(.active) {
    max-height: 0;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    transition-delay: .45s;
}
/* środek belki = miejsce nazwy dokumentu; flex:1 z obu stron zostawia mu
   całą wolną przestrzeń, min-width:0 pozwala nazwie się elipsować */
.ebar-center { flex: 1; display: flex; justify-content: center; min-width: 0; padding: 0 16px; }

/* ---------- Komunikaty flash = TOAST nad treścią (26.07) ----------
   Zamiast paska wpychającego dokument w dół: pływa pod belką na środku,
   zero miejsca w layoucie, wjeżdża z góry i sam znika (flash-out z forwards).
   pointer-events:none — nigdy nie blokuje pigułki narzędzi pod spodem.
   Usunięcie z DOM po czasie robi skrypt w layoucie (on jest też jedynym
   mechanizmem zniknięcia przy prefers-reduced-motion). */
.alert.flash {
    position: fixed;
    top: 76px;                     /* pod belką (64px) z małym prześwitem */
    left: 50%;
    transform: translateX(-50%);
    z-index: 140;                  /* nad panelem (90) i menu wersji (130) */
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: min(560px, calc(100vw - 32px));
    padding: 0.7rem 1.1rem;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    backdrop-filter: blur(14px) saturate(180%);
    pointer-events: none;
    animation: flash-in 0.3s cubic-bezier(0.16, 1, 0.3, 1),
               flash-out 0.45s ease 3.6s forwards;
}
.alert-success.flash { background: rgba(240, 253, 244, 0.92); }
.alert-error.flash   { background: rgba(254, 242, 242, 0.92); animation-delay: 0s, 5.6s; }
@keyframes flash-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-14px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes flash-out {
    to { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
    .alert.flash { animation: none; }
}
.ebar-right { display: flex; gap: 8px; align-items: center; }
/* Zapisz = secondary (białe), Pobierz PDF = primary gradient — hierarchia jak
   w mockupie. Wspólna geometria (flex + stała wysokość) = identyczne wymiary. */
.btn-ebar-save,
.btn-ebar-dl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 32px;
    min-width: 150px;
    padding: 0 18px;
    border-radius: 12px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}
.btn-ebar-save {
    background: #fff;
    color: var(--c-text);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-sm);
    transition: background-color .15s, border-color .15s;
}
.btn-ebar-save:hover:not(:disabled) { background: var(--c-primary-50); border-color: var(--c-primary-100); }
.btn-ebar-dl {
    background: var(--grad-primary);
    color: #fff;
    border: 0;
    box-shadow: var(--shadow-md);
    transition: filter .15s;
}
.btn-ebar-dl:hover { filter: brightness(1.07); }
.btn-ebar-dl.is-locked { opacity: 0.55; cursor: not-allowed; filter: grayscale(0.4); }
.ebar-dl-ico { width: 15px; height: 15px; flex-shrink: 0; }

/* ---------- Pływający pasek narzędzi nad podglądem CV (mockup ChromaCV) ----------
   „Liquid Glass" (iOS 26): mocny blur + podbite nasycenie tła + podwójny
   wewnętrzny refleks (górny jasny / dolny subtelny) + miękki cień. */
/* z-index: pigułka ma backdrop-filter (własny kontekst warstw), więc bez
   podniesienia CAŁEGO paska menu wersji językowych chowało się pod kartki
   CV (rysowane później w DOM). 60 = nad dokumentem, pod panelem (90) i belką. */
.cv-toolbar { display: flex; justify-content: center; gap: 10px; margin-bottom: 1.4rem; position: relative; z-index: 60; }

/* ---------- WERYFIKACJA ATS (pigułka admina obok narzędzi) ---------- */
.cv-toolbar-admin { flex-shrink: 0; }
.cv-tool-ats .bi { color: var(--c-primary); font-size: 14px; }
.cv-tool-ats:disabled { opacity: 0.6; cursor: progress; }
/* okno raportu: szersze niż zwykły modal, treść przewijana */
.eveilo-report { width: min(900px, 96vw); }
.eveilo-report-body { max-height: 70vh; overflow-y: auto; }
.ats-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 0.6rem; }
.ats-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}
.ats-chip.is-ok  { background: var(--c-ok-bg);  color: #166534; }
.ats-chip.is-bad { background: var(--c-bad-bg); color: #991b1b; }
.ats-warn { margin: 0.6rem 0 0; padding: 0.7rem 0.9rem; list-style: none; border-radius: 12px; background: var(--c-warn-bg, #fffbeb); }
.ats-warn li { display: flex; gap: 0.5rem; font-size: 0.82rem; color: #92400e; margin-bottom: 0.3rem; }
.ats-warn li:last-child { margin-bottom: 0; }
.ats-lead { margin: 1rem 0 0.4rem; font-size: 0.82rem; color: var(--c-muted); }
.ats-page-no { margin: 0.9rem 0 0.25rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-faint); }
/* surowy tekst 1:1 — monospace, zawijany, bez upiększeń */
.ats-raw {
    margin: 0;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--c-border);
    border-radius: 12px;
    background: #fff;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    color: #1f2937;
}
/* Pigułka belki — WSPÓLNA dla narzędzi dokumentu i filtrów galerii
   (.tpl-filter): jedno źródło geometrii, żeby obie nie rozjechały się
   przy kolejnej zmianie. */
.cv-toolbar-pill,
.tpl-filter {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 5px 6px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(22px) saturate(190%);
    -webkit-backdrop-filter: blur(22px) saturate(190%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.85),
                inset 0 -1px 1px rgba(255, 255, 255, 0.35),
                0 8px 24px -8px rgba(31, 38, 135, 0.20);
}
.cv-tool-form { display: flex; margin: 0; }
/* główna akcja podglądu szablonu: pełna pigułka, trochę większa niż zwykły
   .btn — to jedyny przycisk na tej stronie */
.tpl-save-btn { border-radius: 999px; padding: 0.62rem 1.5rem; font-size: 0.9rem; }
.tpl-save-btn .bi { font-size: 1rem; }
.cv-tool-btn,
.tpl-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    padding: 7px 13px;
    border-radius: 12px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--c-muted);
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
.cv-tool-btn:hover,
.tpl-chip:hover { background: rgba(124, 58, 237, 0.10); color: var(--c-text); }
.cv-tool-btn .bi { font-size: 13px; color: var(--c-faint); }
.cv-tool-add .bi { color: var(--c-primary); }
.cv-tool-sep,
.tpl-chip-sep { width: 1px; height: 16px; background: rgba(15, 23, 42, 0.10); flex-shrink: 0; margin: 0 1px; }

/* ---------- Okna potwierdzenia / alertu ----------
   Zbudowane na TYM SAMYM .cvedit-overlay/.cvedit-modal co modale edycji
   (identyczne technicznie: position:fixed, BEZ blokady scrolla <body>, to samo
   szkło i animacja pop). Tu tylko wariant wyśrodkowany + ikona. */
.cvedit-modal.eveilo-confirm { width: min(440px, 94vw); text-align: center; }
.eveilo-confirm-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 3px solid currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.4rem auto 0.9rem;
    font-size: 1.85rem;
}
.eveilo-confirm-icon.warn { color: #f59e0b; }
.eveilo-confirm-icon.error { color: #f43f5e; }
.eveilo-confirm-title { padding: 0 1.5rem; margin-bottom: 0.5rem; }
.eveilo-confirm-text { text-align: center; color: var(--c-muted); font-size: 0.92rem; line-height: 1.5; }
.eveilo-confirm-actions { justify-content: center; margin-top: 1.4rem; }
.btn.is-locked { opacity: 0.55; cursor: not-allowed; }
@media (max-width: 900px) {
    .ebar-usermeta { display: none; }
}

/* ---------- Panel administracyjny ---------- */
.nav-section {
    margin: 1rem 0.9rem 0.3rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-muted, #9ca3af);
}
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.admin-table th {
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-muted, #6b7280);
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--c-border, #e5e7eb);
}
.admin-table td { padding: 0.5rem 0.6rem; border-bottom: 1px solid #f1f3f7; vertical-align: middle; }
.admin-row-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.admin-row-actions form { display: inline; }
.admin-matrix-cell { text-align: center; }
.admin-matrix-cell input { width: 16px; height: 16px; accent-color: var(--c-primary); }
.admin-cat-grid { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.admin-cat-grid .field { flex: 1 1 200px; }
.admin-cat-sort { flex: 0 0 110px !important; }
.admin-cat-i18n { margin-top: 0.5rem; }
.admin-cat-i18n summary { cursor: pointer; font-size: 0.82rem; color: var(--c-muted, #6b7280); margin-bottom: 0.4rem; }
.admin-actions { margin-top: 0.9rem; display: flex; gap: 8px; }
.admin-langs i { font-style: normal; font-size: 0.66rem; border: 1px solid var(--c-border, #e5e7eb); border-radius: 999px; padding: 0 5px; margin-left: 3px; color: var(--c-muted, #6b7280); }
.admin-self { font-size: 0.75rem; }

/* Admin > Szablony: wiersz-formularz per szablon */
.admin-tpl-row { padding: 1rem 0; border-top: 1px solid var(--c-border, #e5e7eb); }
.admin-tpl-row:first-of-type { border-top: none; padding-top: 0.4rem; }
.admin-tpl-head { display: flex; align-items: center; gap: 8px; margin-bottom: 0.6rem; }
.admin-badge-hidden {
    font-size: 0.66rem;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 999px;
    background: #e5e7eb;
    color: #374151;
}
.admin-tpl-hide { display: flex; align-items: center; gap: 6px; font-size: 0.83rem; color: var(--c-text, #111827); cursor: pointer; }
.admin-tpl-hide input { width: 15px; height: 15px; accent-color: var(--c-primary); }
.admin-tpl-row .admin-actions { align-items: center; gap: 16px; }
.admin-tpl-row .admin-actions .btn { margin-left: auto; }

/* notka o zablokowanym szablonie premium (watermark do czasu zakupu) */
.cv-locked-note {
    margin: 0.5rem 0 0;
    font-size: 0.82rem;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 0.45rem 0.8rem;
}

/* Baner „przetłumacz z AI" nad dokumentem: wersja skopiowana z innego
   języka, dopóki proza nie zostanie przetłumaczona albo odrzucona */
.cv-translate-note {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    /* szerokość kartki A4 podglądu; auto centruje baner nad dokumentem */
    max-width: 794px;
    margin: 0.7rem auto 1.4rem;
    padding: 0.55rem 0.9rem;
    font-size: 0.84rem;
    color: #3730a3;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 10px;
}
.cv-translate-note > .bi-translate { font-size: 1rem; }
.cv-translate-note form { margin: 0; }
.cv-translate-text { flex: 1 1 auto; min-width: 220px; }
.cv-translate-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.32rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    background: var(--c-primary);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: filter 0.15s ease;
}
.cv-translate-btn:hover { filter: brightness(1.08); }
.cv-translate-btn:disabled { opacity: 0.65; cursor: progress; }
.cv-translate-keep {
    padding: 0.32rem 0.7rem;
    font-size: 0.8rem;
    color: #6366f1;
    background: none;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}
.cv-translate-keep:hover { background: rgb(99 102 241 / 0.1); }

/* grupa "Zdjęcie profilowe": przyciski-figury kształtu */
.cvstyle-phshapes { display: flex; gap: 6px; }
.cvstyle-phshape {
    width: 36px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--c-border, #d1d5db);
    border-radius: 8px;
    cursor: pointer;
    color: #6b7280;
}
.cvstyle-phshape:hover { border-color: #c4b5fd; }
.cvstyle-phshape.active { border-color: var(--c-primary); color: var(--c-primary); box-shadow: 0 0 0 1px var(--c-primary); }
.cvstyle-phshape i { display: block; width: 18px; height: 18px; border: 2px solid currentColor; }
.cvstyle-phshape .ph-circle { border-radius: 50%; }
.cvstyle-phshape .ph-rounded { border-radius: 5px; }
.cvstyle-ph-row .clr-field { width: 96px; }
.cvstyle-ph-row .clr-field .cvstyle-clr { width: 100%; }
.cvstyle-ph-row3 { display: flex; gap: 0.5rem; }
.cvstyle-ph-row3 > div { flex: 1; min-width: 0; }
.cvstyle-ph-row3 .field-label { font-size: 0.68rem; white-space: nowrap; }
.cvstyle-group[data-photo] .admin-actions { margin-top: 0.5rem; }

/* modal strażnika niezapisanych zmian wyglądu — węższy niż formularze edycji */
.cvedit-modal.cvstyle-leave { max-width: 420px; }
.cvstyle-leave .cvedit-body p { margin: 0 0 0.4rem; color: var(--c-muted, #4b5563); }

/* warianty paska umiejętności — pigułki z wizualnym podglądem stylu;
   kolory podglądu płyną z pickerów przez --sbp-f (wypełnienie) i --sbp-t (tło) */
.cvstyle-sb-variants {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 0.7rem;
}
.cvstyle-sbvar {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 9px 14px;
    border: 1px solid var(--c-border, #d1d5db);
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
}
.cvstyle-sbvar:hover { border-color: #c4b5fd; }
.cvstyle-sbvar.active {
    border-color: var(--c-primary);
    background: var(--c-primary-50);
    box-shadow: 0 0 0 1px var(--c-primary);
}
.cvstyle-sbp { flex: 1; display: flex; align-items: center; }
.cvstyle-sbp-dots { justify-content: space-between; }
.cvstyle-sbp-dots i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-sizing: border-box;
}
.cvstyle-sbp-dots i.f { background: var(--sbp-f, #7c3aed); }
.cvstyle-sbp-dots i.t { background: var(--sbp-t, #c7cdd8); }
.cvstyle-sbp-dots i.o { border: 1.6px solid var(--sbp-t, #c7cdd8); }
.cvstyle-sbp-bar {
    height: 10px;
    background: var(--sbp-t, #c7cdd8);
    overflow: hidden;
}
.cvstyle-sbp-bar i { display: block; width: 55%; height: 100%; background: var(--sbp-f, #7c3aed); }
.cvstyle-sbp-round, .cvstyle-sbp-round i { border-radius: 999px; }

/* ---------- Admin -> Szablony: miniaturka + narzędzia wariantów ---------- */
.admin-tpl-flex { display: flex; gap: 18px; align-items: flex-start; }
.admin-tpl-thumb {
    flex: 0 0 150px;
    text-decoration: none;
    border: 1px solid var(--c-border, #e5e7eb);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}
.admin-tpl-thumb:hover { box-shadow: 0 3px 10px rgba(0, 0, 0, .14); }
/* mniejsza kartka niż w galerii: 150px / 793.7px naturalnej szerokości CV */
.admin-tpl-thumb .tpl-thumb { width: 150px; }
.admin-tpl-thumb .tpl-thumb-scale { transform: scale(0.18899); }
.admin-tpl-main { flex: 1; min-width: 0; }
.admin-tpl-tools { display: flex; gap: 10px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.admin-badge-variant {
    background: var(--c-lavender);
    color: var(--c-primary-dark);
    border: 1px solid #d6ccfb;
    border-radius: 999px;
    font-size: 0.72rem;
    padding: 1px 8px;
}

/* ===== Mini-edytor B/I/U (eveilo-rte.js) w oknach edycji treści ===== */
/* Pole dziedziczy wygląd .input (base.css); tu tylko pasek i geometria. */
.rte-bar { display: flex; gap: 4px; margin-bottom: 6px; }
.rte-btn {
    width: 32px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 7px;
    background: #fff;
    color: #374151;
    cursor: pointer;
    font-size: 14px;
}
.rte-btn:hover { background: #f4f4f6; }
.rte-btn.is-on {
    background: var(--c-primary, #7c3aed);
    border-color: var(--c-primary, #7c3aed);
    color: #fff;
}
.rte-area {
    min-height: 170px;
    max-height: 50vh;
    overflow-y: auto;
    resize: vertical;
    line-height: 1.6;
    white-space: pre-wrap;
}

/* ===== Dymek opisujący funkcje AI w oknach edycji (CV + listy) =====
   Pełna szerokość okna, strzałka celuje w przycisk — poziom strzałki
   ustawia JS zmienną --tip-x (szerokości przycisków różnią się per język). */
.lted-aitip {
    position: relative;
    margin-top: 14px;
    padding: 12px 16px;
    background: #efe8fc;
    border: 1px solid #cdb8f2;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.55;
    color: #3c2e79;
}
/* Wariant nad polem (modal „Wypełnij z AI"): bez strzałki — nad dymkiem
   nie ma przycisku, w który miałaby celować. */
.lted-aitip.lted-aitip-top { margin: 0 0 12px; }
.lted-aitip.lted-aitip-top::before { content: none; }
.lted-aitip::before {
    content: '';
    position: absolute;
    top: -6px;
    left: var(--tip-x, 50%);
    width: 10px;
    height: 10px;
    margin-left: -5px;
    background: inherit;
    border-left: 1px solid #cdb8f2;
    border-top: 1px solid #cdb8f2;
    transform: rotate(45deg);
}

/* ===== Dashboard v1 ===== */
.dash-hero {
    display: flex;
    gap: 28px;
    align-items: center;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    padding: 22px 26px;
    margin-bottom: 24px;
}
.dash-hero-sheet { flex: 0 0 auto; }
.dash-hero-kicker {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11.5px;
    color: #6b7280;
    margin: 0 0 8px;
}
.dash-badge {
    display: inline-block;
    background: #eef2ff;
    color: #4338ca;
    font-size: 11.5px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 999px;
    margin-bottom: 8px;
}
.dash-hero-title { margin: 0 0 4px; font-size: 22px; }
.dash-hero-meta { color: #6b7280; font-size: 12.5px; margin: 0 0 16px; }

.dash-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 24px; align-items: start; }
@media (max-width: 1000px) { .dash-cols { grid-template-columns: 1fr; } }

.dash-section { margin-bottom: 24px; }
.dash-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.dash-section-head h3 { margin: 0; font-size: 15px; }
.dash-section-head a { font-size: 12.5px; }
.dash-recent { display: flex; gap: 18px; flex-wrap: wrap; }
.dash-mini { display: block; }

.dash-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.dash-action {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    padding: 18px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dash-action:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08); }
.dash-action-ico {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #f1edfc;
    color: var(--c-primary, #7c3aed);
    font-size: 17px;
}
.dash-action-title { font-weight: 650; }
.dash-action-desc { font-size: 12.5px; color: #6b7280; }

.dash-card {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 18px;
}
.dash-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dash-card-head h3 { margin: 0; font-size: 14.5px; }
.dash-card-hint { font-size: 12.5px; color: #6b7280; margin: 0 0 12px; }
.dash-progress { font-size: 12.5px; font-weight: 650; color: var(--c-primary, #7c3aed); }
.dash-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.dash-check li { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.dash-check li i { color: #cbd2dc; }
.dash-check li.is-done i { color: #16a34a; }
.dash-check li.is-done a { color: #6b7280; text-decoration: none; }

.dash-card-ai { background: #faf8ff; border-color: #e4dbf8; }
.dash-premium-badge {
    background: var(--c-primary, #7c3aed);
    color: #fff;
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
}
.dash-ai-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.dash-ai-list li { display: flex; flex-direction: column; font-size: 12.5px; }
.dash-ai-list strong { font-size: 13px; }
.dash-ai-list span { color: #6b7280; }

/* ===== Import CV ===== */
/* wyśrodkowane jak hero nad nimi (spójność z resztą panelu, 08.08) */
.imp-card { max-width: 620px; margin: 0 auto; }
.imp-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border: 2px dashed rgba(15, 23, 42, 0.18);
    border-radius: 14px;
    padding: 36px 22px;
    cursor: pointer;
    background: #fff;
    text-align: center;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.imp-drop:hover { border-color: var(--c-primary, #7c3aed); background: #fbfaff; }
.imp-drop-ico { font-size: 30px; color: var(--c-primary, #7c3aed); }
.imp-drop-title { font-weight: 650; }
.imp-drop-sub { font-size: 12.5px; color: #6b7280; }
.imp-drop-file { font-size: 13px; font-weight: 600; color: var(--c-primary, #7c3aed); margin-top: 4px; }
.imp-actions { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; }
.imp-actions .field-hint { margin: 0; }

.imp-review { max-width: 760px; margin: 0 auto; }
.imp-review-hint { color: #4b5563; margin: 0 0 16px; text-align: center; }
.imp-sec {
    display: block;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 12px;
    cursor: pointer;
}
.imp-sec-head { display: flex; align-items: center; gap: 9px; }
.imp-sec-title { font-weight: 650; }
.imp-sec-warn { font-size: 11.5px; color: #b45309; margin-left: auto; }
.imp-sec-body { display: block; margin-top: 7px; font-size: 12.5px; color: #4b5563; line-height: 1.55; }
.imp-item { display: block; }

/* Miniatury „Ostatnich dokumentów" mniejsze niż karty w Moje CV — trzy
   mieszczą się w rzędzie i karty akcji nie spadają pod trzy pełne kartki.
   Skala = 190 / 793.7 (naturalna szerokość kartki A4 z .tpl-thumb-scale). */
.dash-mini .tpl-thumb { width: 190px; }
.dash-mini .tpl-thumb-scale { transform: scale(0.23938); }
.dash-mini .tpl-sheet-name { max-width: 190px; }

/* ===== Dashboard: dwie informacje przewodnie na górze ===== */
.dash-top {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr);
    gap: 20px;
    margin-bottom: 26px;
    align-items: stretch;
}
@media (max-width: 1000px) { .dash-top { grid-template-columns: 1fr; } }
.dash-top .dash-hero { margin-bottom: 0; }

/* prawa karta przewodnia: import — fioletowa, ma się odróżniać od bieli */
.dash-import-hero {
    background: linear-gradient(135deg, #f6f2ff 0%, #ece2fd 100%);
    border-color: #d9c9f6;
}
.dash-import-ico {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: var(--c-primary, #7c3aed);
    color: #fff;
    font-size: 21px;
    margin-bottom: 12px;
}
.dash-import-hero .dash-hero-meta { margin-bottom: 18px; }
.dash-import-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dash-import-free { font-size: 12.5px; font-weight: 600; color: #16a34a; }

/* lewa karta w wariancie pustego konta (bez miniatury) */
.dash-hero-start .dash-hero-info { padding: 8px 0; }

/* ===== Dashboard: sześć kwadratowych kafli liquid glass (wzór 07.08 v2) =====
   Clean look: szkło jak karty cvstyle-liquid (biel ~0.6 + blur + biała
   hairline), tytuł WEWNĄTRZ kafla, kolor tonu tylko szeptem (ikona i chip).
   Ton = zmienne --t1/--t2 na kaflu, reguły wspólne. */
.dash-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    max-width: 780px;
    margin: 0 auto 38px;
}
@media (max-width: 760px) { .dash-tiles { grid-template-columns: repeat(2, 1fr); max-width: 480px; } }
@media (max-width: 430px) { .dash-tiles { grid-template-columns: 1fr; max-width: 240px; } }

.dash-tone-indigo { --t1: #4f46e5; --t2: #818cf8; }
.dash-tone-rose   { --t1: #db2777; --t2: #fb7185; }
.dash-tone-violet { --t1: #7c3aed; --t2: #c084fc; }
.dash-tone-teal   { --t1: #0d9488; --t2: #2dd4bf; }
.dash-tone-red    { --t1: #dc2626; --t2: #fb923c; }
.dash-tone-amber  { --t1: #d97706; --t2: #fbbf24; }

.dash-tile { display: block; text-decoration: none; color: inherit; }
.dash-tile-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    aspect-ratio: 1 / 1;
    background: rgba(255, 255, 255, 0.58);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 22px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.03);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.dash-tile:hover .dash-tile-box {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.78);
    border-color: color-mix(in srgb, var(--t1) 22%, rgba(255, 255, 255, 0.9));
    box-shadow:
        0 22px 44px rgba(15, 23, 42, 0.08),
        0 0 0 4px color-mix(in srgb, var(--t1) 7%, transparent);
}

/* chip ikony: też szkło, ton tylko w kolorze samej ikony */
.dash-tile-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 12px color-mix(in srgb, var(--t1) 10%, transparent);
    color: color-mix(in srgb, var(--t1) 82%, #475569);
    font-size: 25px;
    transition: transform 0.18s ease, color 0.18s ease;
}
.dash-tile:hover .dash-tile-ico { transform: scale(1.06); color: var(--t1); }

/* dwa wiersze tekstu w kaflu: tytuł + przygaszony opis */
.dash-tile-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0 18px;
}
.dash-tile-label {
    font-weight: 650;
    font-size: 15px;
    letter-spacing: 0.01em;
    color: #1f2937;
    text-align: center;
}
.dash-tile-desc {
    font-size: 12.5px;
    line-height: 1.45;
    color: #6b7280;
    text-align: center;
}

/* ===== Dashboard: sekcja „Ostatnie dokumenty" (wyśrodkowana, w ramce) ===== */
.dash-recent-sec { text-align: center; }
/* tytuł a'la hero, ciut mniejszy (hero = clamp do 2.5rem) */
.dash-recent-title { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 0 0 4px; }
.dash-recent-links { font-size: 12.5px; color: var(--c-muted); margin: 0 0 18px; }
.dash-recent-links a { color: inherit; }
.dash-recent-links a:hover { color: var(--c-primary, #7c3aed); }

/* ramka jak karta „Moich zdjęć", w szkle spójnym z kaflami */
.dash-recent-frame {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: center;
    gap: 20px;
    max-width: 780px;
    margin: 0 auto;
    padding: 26px 24px;
    background: rgba(255, 255, 255, 0.58);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 22px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.03);
}
@media (max-width: 760px) { .dash-recent-frame { grid-template-columns: 1fr; } }

/* ===== Ocena AI dokumentu (panel na cvs.show) ===== */
.cvrev-modal { max-width: 680px; }
.cvrev-working { color: var(--c-muted); font-size: 13.5px; }
.cvrev-working i { color: var(--c-primary, #7c3aed); margin-right: 6px; }
.cvrev-rating {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 6px;
}
.cvrev-excellent { color: #15803d; }
.cvrev-good      { color: #b45309; }
.cvrev-fair      { color: #c2410c; }
.cvrev-poor      { color: #b91c1c; }
.cvrev-summary { color: var(--c-muted); font-size: 13.5px; line-height: 1.6; margin: 0 0 18px; }
.cvrev-modal h4 {
    margin: 18px 0 8px;
    padding-top: 14px;
    border-top: 1px solid rgba(15, 23, 42, 0.07);
    font-size: 14px;
}
.cvrev-list { list-style: none; margin: 0; padding: 0; }
.cvrev-list li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 9px;
    font-size: 13.5px;
    line-height: 1.55;
    color: #374151;
}
.cvrev-list li::before {
    position: absolute;
    left: 0;
    top: 1px;
    font-family: 'bootstrap-icons';
    font-size: 13px;
}
.cvrev-ok  li::before { content: '\f26a'; color: #16a34a; }  /* check-circle */
.cvrev-fix li::before { content: '\f331'; color: #c2410c; }  /* exclamation-circle */
.cvrev-tip li::before { content: '\f46a'; color: var(--c-primary, #7c3aed); }  /* lightbulb */
.cvrev-chip {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 11px;
    font-weight: 600;
    vertical-align: 1px;
    white-space: nowrap;
}

/* ===== Admin: Zużycie AI ===== */
.admin-ai-totals { display: flex; gap: 34px; flex-wrap: wrap; margin-bottom: 18px; font-size: 13.5px; }
.admin-ai-h { margin: 0 0 12px; font-size: 15px; }
.admin-ai-muted { color: var(--c-muted); font-size: 12.5px; }
.cvrev-when { margin: 0 0 10px; font-size: 11.5px; color: var(--c-muted); }

/* ===== Animacje oczekiwania na AI ===== */
.ai-spin {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(124, 58, 237, 0.22);
    border-top-color: var(--c-primary, #7c3aed);
    border-radius: 999px;
    animation: aispin 0.7s linear infinite;
    vertical-align: -4px;
}
/* wariant na fioletowe przyciski */
.ai-spin-light {
    border-color: rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    width: 14px;
    height: 14px;
    border-width: 2px;
    vertical-align: -2px;
}
@keyframes aispin { to { transform: rotate(360deg); } }

/* szkielet nadchodzącej oceny: migoczące linie w układzie przyszłych sekcji */
.cvrev-skel { margin-top: 18px; }
.cvrev-skel span {
    display: block;
    height: 12px;
    border-radius: 6px;
    margin-bottom: 11px;
    background: linear-gradient(90deg, #ece7f8 25%, #f8f5fe 45%, #ece7f8 65%);
    background-size: 200% 100%;
    animation: aishimmer 1.3s ease-in-out infinite;
}
.cvrev-skel span:nth-child(1) { width: 34%; height: 16px; }
.cvrev-skel span:nth-child(2) { width: 88%; }
.cvrev-skel span:nth-child(3) { width: 72%; }
.cvrev-skel span:nth-child(4) { width: 80%; margin-top: 20px; }
.cvrev-skel span:nth-child(5) { width: 64%; }
@keyframes aishimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
    .ai-spin { animation-duration: 1.6s; }
    .cvrev-skel span { animation: none; }
}
/* wskaźnik aktualnej oceny przy przycisku „Ocena AI" */

/* wskaźnik werdyktu przy „Ocena AI" — specyficzność bije kolor ikon przycisku */
.cv-tool-btn .cvrev-dot { font-size: 12px; margin-left: 3px; }
.cv-tool-btn .cvrev-dot.ok   { color: #16a34a; }
.cv-tool-btn .cvrev-dot.warn { color: #d97706; }
.cv-tool-btn .cvrev-dot.bad  { color: #dc2626; }

/* „Popraw z AI" w pasku edytora B/I/U: dosunięty do prawej, wysokość
   przycisków paska; dymek nad paskiem ze strzałką w DÓŁ. */
.rte-bar { align-items: center; }
.rte-ai {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    border: 1px solid #d9c9f6;
    border-radius: 999px;
    background: #f3edfd;
    color: var(--c-primary, #7c3aed);
    font: inherit;
    font-size: 12.5px;
    font-weight: 650;
    cursor: pointer;
}
.rte-ai:hover:not(:disabled) { background: #ebe1fb; }
.rte-ai:disabled { opacity: 0.45; cursor: default; }

/* wariant NAD paskiem = podpowiedź na hover przycisku: absolutna (zero
   miejsca w oknie), pojawia się płynnie, grot w dół liczony OD PRAWEJ
   (--tip-r = połowa szerokości przycisku, który jest dosunięty do prawej) */
.rte { position: relative; }
.lted-aitip.lted-aitip-above {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    right: 0;
    margin: 0;
    z-index: 30;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
    pointer-events: none;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.10);
}
.lted-aitip.lted-aitip-above.is-open { opacity: 1; visibility: visible; transform: none; }
.lted-aitip.lted-aitip-above::before {
    top: auto;
    bottom: -6px;
    left: auto;
    right: var(--tip-r, 40px);
    margin-left: 0;
    /* romb z obrysem na krawędziach PRAWO+DÓŁ = grot w dół */
    border-left: none;
    border-top: none;
    border-right: 1px solid #cdb8f2;
    border-bottom: 1px solid #cdb8f2;
}