/* ==========================================================================
   Competills — společná stylová základna maket (kolo 2)
   Směr: varianta 6 (Cool) přestylovaná podle referencí uživatele
     styl-1..6            → světlý základ, aurora akcent, černé pilulky, modrá škála
     styl-7-skilltrack    → postranní navigace, pilulkové taby, progress ring, radar
     styl-8-careerconnect → pravý panel profilu, „chybějící skilly", dráha „další krok"
     styl-9-darkpath      → dráha Current → To be, aktuální vs. cíl v radaru, feed
                            (tmavé téma se NEPŘEBÍRÁ)
   Tokeny odsud jsou zdrojem pravdy pro kořenový DESIGN.md.
   ========================================================================== */

:root{
  /* --- plochy a text --- */
  --bg:#f6f7f9;            /* velmi světle šedá plocha */
  --plocha:#ffffff;        /* bílé karty */
  --plocha-2:#f7f8fa;      /* vnitřek dialogu / vnořená plocha */
  --text:#0b1220;          /* hlavní text */
  --tlum:#5c6470;          /* popisky, sekundární text (kontrast 5,1:1 na --bg) */
  --tlum-2:#8b929c;        /* terciární, jen nenosné údaje */
  --linka:#e6e8ec;         /* hairline */
  --linka-2:#f0f1f4;       /* vnitřní hairline v tabulce */

  /* --- černá pilulková tlačítka --- */
  --cerna:#0b0b0c;
  --cerna-hover:#26262a;

  /* --- modrá škála úrovní (jediný nosič „kolik") --- */
  --modra:#5b7cfa;         /* akcent na GRAFIKU (checkbox, tečky, výplň radaru) */
  --modra-text:#3e5fe3;    /* akcent, na kterém smí ležet bílý text (5,6:1) */
  --modra-tmava:#2f49b8;
  --modra-svetla:#eef2ff;
  --l0:#fbfbfc;            /* nehodnoceno */
  --l1:#edf1fe;            /* 1–2 */
  --l2:#dce4fd;            /* 3–4 */
  --l3:#c0cffb;            /* 5–6 */
  --l4:#93aaf8;            /* 7–8 */
  --l5:#3e5fe3;            /* 9–10, bílý text */

  /* --- aurora gradient: JEN akcent (rámeček, rozostřená skvrna, linka) --- */
  --duha:linear-gradient(103deg,#f4a2c6 0%,#f7c9a4 18%,#fbeda6 36%,#a9dcf0 58%,#a8aef2 78%,#d7a6ef 100%);

  /* --- stavy --- */
  --varovne:#8a5a00;
  --varovne-plocha:#fff6e3;
  --varovne-linka:#f0dcae;
  --splneno:#1c6b45;
  --splneno-plocha:#e8f6ee;
  /* Nová paleta — DESIGN.md sekci Tlačítka/Colors zatím nezná (jen 4 úrovně
     tlačítek, žádný červený token); zavedeno na explicitní žádost briefu
     BRÁNA fix 2 (U12) pro NEVRATNOU akci bez undo (smazání účtu). Kontrast
     --nebezpecne na --nebezpecne-plocha ~5,75:1, na --plocha (bílá) ~6,58:1. */
  --nebezpecne:#b42318;
  --nebezpecne-plocha:#fdecea;
  --nebezpecne-linka:#f4c7c3;

  /* --- série grafu progresu (Σ i úroveň kompetence) — 6 odlišitelných barev --- */
  --serie-1:var(--modra-text);  /* #3e5fe3 */
  --serie-2:#7c5cff;
  --serie-3:#0f9d8f;
  --serie-4:#c77d0a;
  --serie-5:#d6407a;
  --serie-6:#5b6270;

  /* --- typografie --- */
  --font:"Inter","Inter var",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  /* --- poloměry / stíny / rytmus 8 --- */
  --r-s:10px; --r-m:14px; --r-l:20px; --r-pilulka:999px;
  --stin-1:0 1px 2px rgba(11,18,32,.05);
  --stin-2:0 6px 20px rgba(11,18,32,.07);
  --stin-3:0 24px 60px rgba(11,18,32,.18);

  /* --- mezera nad/pod lepivou lištou filtrů (.filtry / .srt-lista) ---
     JEDNA hodnota pro top (sticky) i margin-bottom, aby byla mezera nad
     i pod lištou stejná, i když je přilepená k hornímu okraji okna. --- */
  --lista-mezera:16px;

  /* --- šířka postranní navigace: plná / sbalená na úzký proužek ikon --- */
  --sb-sirka:264px; --sb-sirka-sbal:64px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--text);font-family:var(--font);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
:focus-visible{outline:2px solid var(--modra-text);outline-offset:2px;border-radius:4px}
a{color:inherit}
h1,h2,h3{letter-spacing:-.025em;margin:0}
h1{font-size:30px;font-weight:800}
h2{font-size:18px;font-weight:700}
h3{font-size:15px;font-weight:700}
.tlum{color:var(--tlum)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.skryte{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- postranní navigace (reference styl-7-skilltrack) ------------- */
/* Sidebar je NEZÁVISLÝ na scrollu obsahu (position:fixed — imunní vůči
   jakémukoli scroll-kontejneru nadřazených prvků, ne jen sticky).
   Sbalení/rozbalení je JEDNA animovaná vlastnost: šířka `.sidebar` (264↔64px).
   Vnitřek (.sb-vnitrek) má PEVNOU šířku 264 px VŽDY — pruh ikon (64px) +
   texty (zbytek) se nikdy nepřepočítávají, jen je `.sidebar{overflow-x:hidden}`
   při zúžení odřízne. Texty navíc krátce zeslábnou (opacity, stejná délka),
   ale jejich VLASTNÍ box se nehýbe ani nemění velikost — proto mají ikony,
   logo i výška řádků ve OBOU stavech identické souřadnice (viz sticky.js). */
.app{position:relative;min-height:100vh}
.sidebar{
  position:fixed;top:0;left:0;height:100vh;width:var(--sb-sirka);
  overflow-x:hidden;overflow-y:auto;background:var(--plocha);
  border-right:1px solid var(--linka);z-index:20;
  transition:width .2s cubic-bezier(.2,.8,.2,1);
  scrollbar-width:none; /* nativní posuvník skrytý, scroll zůstává funkční */
}
.sidebar::-webkit-scrollbar{display:none}
html.nav-sbalena .sidebar{width:var(--sb-sirka-sbal)}
/* vnitřek: NIKDY nemění šířku ani rozložení — jen ho .sidebar odkrajuje */
/* min-height:100% — bez něj `.sb-pata{margin-top:auto}` nemá kam odtlačit a patička
   (účet + verze) sedí hned pod navigací místo dole (UX spec: patička účtu je dole). */
.sb-vnitrek{width:var(--sb-sirka);min-height:100%;box-sizing:border-box;padding:18px 0 16px;display:flex;flex-direction:column;gap:16px}
/* sdílený "pruh" sloupec (64px, ikony/logo) + zbytek (texty) v každém řádku */
.znacka,.sbnav a{display:grid;grid-template-columns:var(--sb-sirka-sbal) 1fr;align-items:center}
.znacka{font-weight:800;height:32px}
/* logo = jen obrysová značka (radar), BEZ dlaždice/pozadí — dílek "i-logo" je
   sám o sobě outline (stroke:currentColor;fill:none), viz .logo .znacka-svg */
.znacka .logo{width:32px;height:32px;display:flex;align-items:center;justify-content:center;margin:0 auto}
.znacka b{font-size:15.5px;font-weight:800;letter-spacing:-.03em}
.znacka small{display:block;font-size:11px;font-weight:500;color:var(--tlum);letter-spacing:0}
/* texty, které se sbalením zeslábnou — VLASTNÍ box se nemění, jen opacity */
.sb-texty{min-width:0;overflow:hidden;white-space:nowrap;opacity:1;
  transition:opacity .2s cubic-bezier(.2,.8,.2,1)}
html.nav-sbalena .sb-texty{opacity:0}
.sbnav{list-style:none;margin:0;padding:0 10px;display:flex;flex-direction:column;gap:2px}
/* boční odsazení 10px: ikona zůstává vycentrovaná na x=32 (10 + 44/2) v obou stavech */
.sbnav a{grid-template-columns:calc(var(--sb-sirka-sbal) - 20px) 1fr}
.sbnav .sb-ikona-slot{width:calc(var(--sb-sirka-sbal) - 20px)}
.sbnav a{
  height:38px;border-radius:var(--r-m);color:var(--tlum);text-decoration:none;
  font-size:13.5px;font-weight:500;transition:background .15s,color .15s;
}
.sbnav a:hover{background:var(--plocha-2);color:var(--text)}
.sbnav a[aria-current="page"]{background:var(--modra-svetla);color:var(--modra-text);font-weight:700}
.sb-ikona-slot{width:var(--sb-sirka-sbal);height:100%;display:flex;align-items:center;justify-content:center}
/* ikona navigace dědí barvu odkazu — aktivní položka i hover se obarví samy */
.sbnav svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:0}
.sb-oddelovac{height:1px;background:var(--linka);margin:2px 14px 2px 0;width:var(--sb-sirka)}
/* tlačítko sbalit/rozbalit — VŽDY na stejném místě pruhu, pod poslední
   položkou (Data); mění se jen ikona (chevron-left/right), nikdy pozice */
.sb-sbal-radek{width:var(--sb-sirka-sbal);display:flex;align-items:center;justify-content:center;margin-top:6px}
/* .sb-pata (Task 14): patička panelu — položka Uživatelé (jen správce) a účet
   (avatar, jméno, role, Změnit heslo / Odhlásit). Nahrazuje samostatnou
   stránku „Můj účet" (rozhodnutí leada — žádná /ucet). */
.sb-pata{margin-top:auto;display:flex;flex-direction:column;gap:8px}
/* Uživatelé je VŽDY v DOM (testy asertují hidden/visible), skrývá se jen CSS
   podle document.documentElement.dataset.admin, které nastaví API.hydratuj(). */
html[data-admin="0"] .sb-jen-admin{display:none}
.ucet-radek{display:grid;grid-template-columns:calc(var(--sb-sirka-sbal) - 20px) 1fr;
  align-items:center;height:38px;padding:0 10px;gap:12px}
/* stejný zúžený sloupec ikony jako `.sbnav .sb-ikona-slot` (řádek 129) — bez
   něj je slot 64px široký (obecné pravidlo řádku 136) a přesahuje 44px sloupec
   gridu o 20px, takže avatar vizuálně „nalepený" na text i s vyplněným gapem. */
.ucet-radek .sb-ikona-slot{width:calc(var(--sb-sirka-sbal) - 20px)}
.ucet-radek .avatar{width:26px;height:26px;border-radius:9px;font-size:12px}
.ucet-radek b{display:block;font-size:13px;font-weight:600;line-height:1.25}
.ucet-radek small{display:block;font-size:11px;color:var(--tlum);line-height:1.25}
.ucet-akce{display:flex;gap:6px;flex-wrap:wrap;padding:2px 10px 0}
/* verze aplikace vlevo dole (vkládá styl.js) — nenosný údaj, proto --tlum-2 */
.verze-app{font-size:11px;line-height:1.25;color:var(--tlum-2);padding:4px 10px 0;user-select:text}
.verze-app--roh{position:fixed;left:16px;bottom:12px;padding:0;z-index:1}
.sb-poznamka{background:var(--plocha-2);border:1px solid var(--linka);border-radius:var(--r-m);
  padding:12px;font-size:12px;color:var(--tlum);line-height:1.45}
.sb-poznamka b{display:block;color:var(--text);font-size:12.5px;margin-bottom:3px}
.sb-poznamka a{color:var(--modra-text);font-weight:600;text-underline-offset:3px}
/* .obsah jede synchronně se šířkou sidebaru (stejná transition, stejná délka) */
.obsah{padding:20px 28px 56px;min-width:0;position:relative;overflow-x:clip;
  margin-left:var(--sb-sirka);transition:margin-left .2s cubic-bezier(.2,.8,.2,1)}
html.nav-sbalena .obsah{margin-left:var(--sb-sirka-sbal)}
/* will-change jen PO DOBU animace (přidává/odebírá inicializujSidebar) —
   zabrání trhání při reflow velké tabulky, mimo animaci nezatěžuje GPU navíc */
.obsah.nav-animace{will-change:margin-left}
/* karta tabulky a bento karty ať si layout/paint počítají samy pro sebe —
   šířka .obsah se mění, ale tyhle karty se nemusí kvůli tomu přepočítat
   společně s celým stromem (méně trhání během animace) */
.srt-karta,.bento .karta{contain:layout paint}
html{overflow-x:hidden}

@media (prefers-reduced-motion:reduce){
  .sidebar,.obsah,.sb-texty{transition:none}
}

/* ---------- hero s rozostřenou aurorou (jen za nadpisem) ---------------- */
.hero{position:relative;padding:16px 0 18px}
.hero .aurora{
  position:absolute;left:-60px;right:-60px;top:-40px;height:190px;background:var(--duha);
  filter:blur(58px);opacity:.4;border-radius:50%;pointer-events:none;z-index:0;
}
.hero > *{position:relative;z-index:1}
.hero .radek{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.hero p.podnadpis{margin:6px 0 0;color:var(--tlum);font-size:15px;max-width:64ch}
.duha-linka{height:2px;border-radius:2px;background:var(--duha);opacity:.85;margin:18px 0 22px}
.duha-linka.tenka{height:1.5px;opacity:.55;margin:16px 0}

/* ---------- tlačítka ------------------------------------------------------ */
/* Systém: primární .btn-cerne (max jedno na obrazovku) · sekundární .btn-sek
   (běžné akce) · terciární .btn-ter (tiché a destruktivní-ne-hlavní).
   Holé .btn (bílá obrysová pilulka) je výjimka pro barevné plochy.
   Podrobná pravidla viz kořenový DESIGN.md → Komponenty → Tlačítka. */
.btn{
  font:inherit;font-size:14px;font-weight:600;border-radius:var(--r-pilulka);
  border:1px solid var(--linka);background:var(--plocha);color:var(--text);
  padding:11px 20px;cursor:pointer;box-shadow:var(--stin-1);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--stin-2)}
a.btn{text-decoration:none}
.btn-cerne{background:var(--cerna);border-color:var(--cerna);color:#fff}
.btn-cerne:hover{background:var(--cerna-hover)}
.btn-cele{width:100%;padding:14px 20px;font-size:15px}
/* .btn-text zůstává JEN pro skutečné odkazy uvnitř textu, nikdy pro akci */
.btn-text{
  font:inherit;font-size:13.5px;font-weight:600;background:none;border:0;padding:6px 2px;
  color:var(--text);text-decoration:underline;text-underline-offset:4px;cursor:pointer;
}
.btn-text:hover{color:var(--modra-text)}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- karty --------------------------------------------------------- */
.karta{background:var(--plocha);border:1px solid var(--linka);border-radius:var(--r-l);
  box-shadow:var(--stin-1);padding:20px}
.karta.tmava{background:var(--cerna);border-color:var(--cerna);color:#fff}
.karta.tmava .stitek{color:#a8adb7}
.karta-hlava{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;flex-wrap:wrap}

/* karta s tenkým duhovým rámečkem (referenční styl-3/4/5/6) */
.duha-ram{background:var(--duha);border-radius:calc(var(--r-l) + 2px);padding:2px;box-shadow:var(--stin-2)}
.duha-ram > .vnitrek{background:var(--plocha);border-radius:var(--r-l);height:100%}

/* ---------- bento --------------------------------------------------------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.bento .karta{padding:16px 18px;display:flex;flex-direction:column;gap:2px;justify-content:space-between}
.stitek{font-size:12px;color:var(--tlum);font-weight:500}
.hodnota{font-size:28px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.15}
.hodnota small{font-size:13px;font-weight:500;color:var(--tlum);letter-spacing:0}
.karta.tmava .hodnota small{color:#a8adb7}
.podhodnota{font-size:12px;color:var(--tlum)}

/* ---------- progress bar / ring -------------------------------------------- */
.progres{height:8px;border-radius:var(--r-pilulka);background:var(--linka-2);overflow:hidden}
.progres > i{display:block;height:100%;border-radius:var(--r-pilulka);background:var(--modra-text)}
.progres.na-tmave{background:rgba(255,255,255,.18)}
.progres.na-tmave > i{background:#fff}

/* progress ring (reference styl-7 / styl-8) — SVG nese width/height v px, neškáluje se */
.ring{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none}
.ring svg{transform:rotate(-90deg);display:block}
.ring .drah{stroke:var(--linka-2);fill:none}
.ring .hodn{stroke:var(--modra-text);fill:none;stroke-linecap:round}
.ring .stred{position:absolute;text-align:center;font-family:var(--mono);font-weight:800;
  letter-spacing:-.02em;line-height:1.1}
.ring .stred small{display:block;font-family:var(--font);font-size:9.5px;font-weight:600;
  color:var(--tlum);letter-spacing:.04em;text-transform:uppercase}
.ring-radek{display:flex;align-items:center;gap:14px}
.ring-radek .popis{font-size:12.5px;color:var(--tlum)}
.ring-radek .popis b{display:block;font-size:15px;color:var(--text);letter-spacing:-.01em}

/* ---------- filtry --------------------------------------------------------- */
/* Lepivá lišta: top = stejná mezera jako margin-bottom (--lista-mezera),
   takže se nad tabulkou/obsahem drží ve stejném odstupu, jaký měla předtím
   pod sebou. Pozadí NEPRŮHLEDNÉ (obsah jede pod ní), z-index nad kartami. */
.filtry{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:var(--plocha);
  border:1px solid var(--linka);border-radius:var(--r-pilulka);padding:8px 10px;
  box-shadow:var(--stin-1);margin-bottom:var(--lista-mezera);
  position:sticky;top:var(--lista-mezera);z-index:5}
.hledani{position:relative;display:flex;align-items:center}
.hledani svg{position:absolute;left:13px;width:15px;height:15px;stroke:var(--tlum);fill:none;stroke-width:2;
  pointer-events:none;vertical-align:0}
input[type="search"],input[type="date"],input[type="text"],input[type="password"],textarea{
  font:inherit;font-size:14px;padding:10px 14px;border:1px solid var(--linka);
  border-radius:var(--r-pilulka);background:var(--plocha);color:var(--text);
}
input[type="search"]{padding-left:36px;width:250px}
textarea{border-radius:var(--r-m);width:100%;resize:vertical}
/* chybný vstup (Task 14): rámeček je jen JEDEN z nosičů — hláška a aria-invalid
   nesou zbytek (DESIGN.md, Pravidla přístupnosti, bod 2) */
input[aria-invalid="true"]{border-color:var(--varovne-linka)}
input[readonly]{background:var(--plocha-2);color:var(--tlum)}
.pocitadlo{margin-left:auto;padding-right:8px;color:var(--tlum);font-size:13px}

/* pilulkový segment / taby (reference styl-7: „Overall | Hard skills | Soft skills") */
.seg{display:inline-flex;gap:2px;background:var(--plocha-2);border-radius:var(--r-pilulka);padding:3px;
  border:1px solid var(--linka)}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label,.seg .tab{padding:8px 15px;border-radius:var(--r-pilulka);cursor:pointer;font-size:13.5px;
  color:var(--tlum);font-weight:500;transition:background .15s,color .15s;white-space:nowrap;
  background:none;border:0;font-family:inherit}
.seg label:hover,.seg .tab:hover{color:var(--text)}
.seg input:checked + label,.seg .tab[aria-selected="true"]{background:var(--cerna);color:#fff;font-weight:600}
.seg input:focus-visible + label{outline:2px solid var(--modra-text);outline-offset:2px}
.seg.maly label,.seg.maly .tab{padding:6px 12px;font-size:12.5px}

/* ---------- vlastní dropdown (NIKDY nativní <select>) --------------------- */
.dd{position:relative}
.dd-btn{
  font:inherit;font-size:13.5px;font-weight:500;display:flex;align-items:center;gap:10px;
  padding:9px 14px 9px 16px;border:1px solid var(--linka);border-radius:var(--r-pilulka);
  background:var(--plocha);color:var(--text);cursor:pointer;white-space:nowrap;
  transition:border-color .15s,box-shadow .15s;
}
.dd-btn:hover{border-color:#d3d7de;box-shadow:var(--stin-1)}
.dd-btn[aria-expanded="true"]{border-color:var(--modra-text);box-shadow:0 0 0 3px rgba(62,95,227,.14)}
.dd-btn .dd-chev{width:14px;height:14px;stroke:var(--tlum);fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .15s;vertical-align:0;flex:none}
.dd-btn[aria-expanded="true"] .dd-chev{transform:rotate(180deg)}
/* dropdown jako pole v dialogu: plná šířka, dlouhý název se ořízne */
.pole .dd-btn{width:100%}
.pole .dd-btn .dd-val{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:left}
.dd-panel{
  position:absolute;top:calc(100% + 6px);left:0;z-index:60;min-width:100%;
  max-height:290px;overflow:auto;margin:0;padding:6px;list-style:none;
  background:var(--plocha);border:1px solid var(--linka);border-radius:var(--r-m);
  box-shadow:var(--stin-2);scrollbar-width:none;
}
.dd-panel::-webkit-scrollbar{display:none}
.dd-panel[hidden]{display:none}
.dd-opt{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-s);
  font-size:13.5px;cursor:pointer;white-space:nowrap;color:var(--text);
}
.dd-opt .fajfka{width:16px;height:16px;flex:none;stroke:var(--modra-text);fill:none;
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;visibility:hidden;vertical-align:0}
.dd-opt[aria-selected="true"]{font-weight:600;background:var(--modra-svetla)}
.dd-opt[aria-selected="true"] .fajfka{visibility:visible}
.dd-opt.aktivni{background:var(--plocha-2)}
.dd-opt[aria-selected="true"].aktivni{background:#e2e9ff}

/* ---------- srovnávací tabulka -------------------------------------------- */
.tab-obal{
  background:var(--plocha);border:1px solid var(--linka);border-radius:var(--r-l);
  box-shadow:var(--stin-1);overflow:auto;max-height:64vh;
}
table.srovnani{border-collapse:separate;border-spacing:0;width:100%;font-variant-numeric:tabular-nums}
table.srovnani th.vypln,table.srovnani td.vypln{width:auto;min-width:24px;padding:0}
table.srovnani th.jmeno-h,table.srovnani td.jmeno{width:190px;min-width:190px;max-width:190px}
table.srovnani th,table.srovnani td{padding:0;text-align:center;border:0;background:var(--plocha)}
table.srovnani thead th{position:sticky;z-index:2;font-weight:600;color:var(--tlum);
  background:rgba(255,255,255,.94);backdrop-filter:blur(8px)}

/* řádek 1: skupiny typů + duhová linka pod skupinou */
table.srovnani thead tr:nth-child(1) th{top:0;height:34px;vertical-align:middle}
.skupina{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--tlum);
  position:relative;padding:0 8px}
.skupina .cara{position:absolute;left:10px;right:10px;bottom:4px;height:2px;border-radius:2px;
  background:var(--duha);opacity:.8}

/* řádek 2: OPRAVENÉ hlavičky kompetencí — pevná výška, ořez, žádné překryvy */
table.srovnani thead tr:nth-child(2) th{top:34px;height:152px;vertical-align:bottom;
  padding:0 0 8px;box-shadow:inset 0 -1px 0 var(--linka)}
th.komp{width:54px;min-width:54px;max-width:54px}
th.komp .hl{
  writing-mode:vertical-rl;transform:rotate(180deg);
  display:block;width:26px;height:132px;max-height:132px;margin:0 auto;
  white-space:nowrap;overflow:hidden;text-align:left;
  font:inherit;font-size:11.5px;line-height:26px;font-weight:600;color:var(--tlum);
  background:none;border:0;border-radius:var(--r-s);cursor:pointer;padding:10px 0;
  display:flex;justify-content:space-between;align-items:center;gap:6px;box-sizing:border-box;
}
th.komp .hl .hl-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
th.komp .hl .sipka,th.komp .hl > span:not(.hl-t){flex:none}
th.komp .hl:hover{background:var(--plocha-2);color:var(--text)}
th.komp[aria-sort]:not([aria-sort="none"]) .hl{color:var(--modra-text);background:var(--modra-svetla)}
th.skore-h{width:88px;min-width:88px;max-width:88px;padding-left:6px;padding-right:6px}
td.skore{width:88px;min-width:88px;max-width:88px}
th.skore-h .hl{font:inherit;font-size:11.5px;font-weight:600;color:var(--tlum);background:none;
  border:0;cursor:pointer;padding:6px 8px;border-radius:var(--r-s);white-space:nowrap}
th.skore-h .hl:hover{background:var(--plocha-2);color:var(--text)}
th.skore-h[aria-sort]:not([aria-sort="none"]) .hl{color:var(--modra-text);background:var(--modra-svetla)}
.g-start{border-left:1px solid var(--linka)}

/* sloupec jmen — vlevo, JEDEN řádek, BEZ role */
th.jmeno-h,td.jmeno{position:sticky;left:0;z-index:3;text-align:left;
  width:212px;min-width:212px;max-width:212px;padding:0 14px;
  background:var(--plocha);box-shadow:1px 0 0 var(--linka)}
thead th.jmeno-h{z-index:5;background:rgba(255,255,255,.96);vertical-align:bottom;padding-bottom:10px}
th.jmeno-h .hl{font:inherit;font-size:12px;font-weight:600;color:var(--tlum);background:none;border:0;
  cursor:pointer;padding:6px 8px;margin-left:-8px;border-radius:var(--r-s)}
th.jmeno-h .hl:hover{background:var(--plocha-2);color:var(--text)}
td.jmeno{height:44px}
td.jmeno a{
  display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:600;font-size:14px;color:var(--text);text-decoration:none;text-underline-offset:3px;
}
td.jmeno a:hover{text-decoration:underline;color:var(--modra-text)}
table.srovnani tbody td,table.srovnani tbody th{box-shadow:inset 0 -1px 0 var(--linka-2)}
table.srovnani tbody td.jmeno{box-shadow:1px 0 0 var(--linka),inset 0 -1px 0 var(--linka-2)}
table.srovnani tbody tr:hover td,table.srovnani tbody tr:hover th{background:#fafbfd}

/* buňka úrovně: modrá škála + VŽDY číslo (barva nikdy nenese informaci sama) */
td.bunka{padding:3px}
.bnk{
  font:inherit;font-family:var(--mono);font-size:13px;font-weight:700;
  width:42px;height:32px;margin:0 auto;border:0;border-radius:var(--r-s);cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--text);
  background:var(--l0);transition:transform .12s ease,box-shadow .12s ease;
}
.bnk:hover{transform:scale(1.07);box-shadow:var(--stin-1)}
.s0 .bnk{background:var(--l0);border:1px dashed #dcdfe5;color:var(--tlum-2);font-weight:500}
.s1 .bnk{background:var(--l1)}
.s2 .bnk{background:var(--l2)}
.s3 .bnk{background:var(--l3)}
.s4 .bnk{background:var(--l4)}
.s5 .bnk{background:var(--l5);color:#fff}
td.skore{font-family:var(--mono);font-size:13px;color:var(--tlum);padding:0 10px}
td.skore.celkem{font-size:16px;font-weight:800;color:var(--text);letter-spacing:-.02em}
.blik{animation:blik 1.2s ease-out}
@keyframes blik{from{box-shadow:0 0 0 4px rgba(62,95,227,.4)}to{box-shadow:0 0 0 4px rgba(62,95,227,0)}}

/* ---------- L-škála (svislé sloupce, reference styl-3 / styl-6) ----------- */
.lskala{display:flex;align-items:center;gap:10px}
.lskala .lkod{font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--tlum);width:26px;flex:none}
.lskala .prouzky{display:flex;gap:3px;align-items:flex-end}
.lskala .prouzky i{display:block;width:6px;height:18px;border-radius:3px;background:var(--linka-2)}
.lskala .prouzky i.on{background:var(--modra)}
.lskala .prouzky i.cil{background:var(--linka-2);box-shadow:inset 0 0 0 1.5px var(--modra)}

/* velké svislé sloupce (reference styl-6) */
.sloupce{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.sloupec{width:74px;text-align:center}
.sloupec .telo{height:126px;border-radius:16px;background:var(--plocha-2);border:1px solid var(--linka);
  position:relative;overflow:hidden;display:flex;align-items:flex-end}
.sloupec .telo > b{display:block;width:100%;background:var(--modra-text);color:#fff;border-radius:14px;
  font-size:12px;font-weight:700;line-height:1;padding:8px 0;text-align:center;font-family:var(--mono)}
.sloupec .popis{font-size:11.5px;color:var(--tlum);margin-top:8px;font-weight:500}
/* čtyři typy kompetencí se do bočního sloupce profilu vejdou jen užší */
.sloupce.ctyri{gap:8px;flex-wrap:nowrap}
.sloupce.ctyri .sloupec{width:60px}
.sloupce.ctyri .sloupec .telo{border-radius:14px}
.sloupce.ctyri .sloupec .telo > b{border-radius:12px;font-size:11px}

/* ---------- chip úrovně / štítky ------------------------------------------ */
.chip{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:var(--r-pilulka);
  background:var(--plocha-2);font-size:12.5px;font-weight:500;border:1px solid var(--linka)}
.chip b{font-family:var(--mono);font-size:12px;font-weight:700;padding:1px 7px;border-radius:var(--r-pilulka)}
.chip.u1 b{background:var(--l1)} .chip.u2 b{background:var(--l2)} .chip.u3 b{background:var(--l3)}
.chip.u4 b{background:var(--l4)} .chip.u5 b{background:var(--l5);color:#fff}
.chip.expert{background:var(--modra-svetla);border-color:#d9e1ff;color:var(--modra-tmava);font-weight:600}
.chip.chybi{background:var(--varovne-plocha);border-color:var(--varovne-linka);color:var(--varovne)}
.chip.volitelny{cursor:pointer;transition:border-color .15s,background .15s}
.chip.volitelny:hover{border-color:#c9cfda}
.chip.volitelny[aria-pressed="true"]{background:var(--modra-text);border-color:var(--modra-text);color:#fff}
.chipy{display:flex;flex-wrap:wrap;gap:7px}
.znacka-typ{font-size:11px;color:var(--tlum);text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.autor{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  padding:2px 8px;border-radius:var(--r-pilulka);border:1px solid var(--linka);color:var(--tlum);
  background:var(--plocha-2);white-space:nowrap}
.autor.self{background:#f3f0ff;border-color:#e2dcff;color:#4b3b9e}
.autor.screening{background:var(--splneno-plocha);border-color:#cbe7d8;color:var(--splneno)}
.autor svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- upozornění / stagnace ----------------------------------------- */
.upozorneni{display:flex;gap:10px;align-items:flex-start;background:var(--varovne-plocha);
  border:1px solid var(--varovne-linka);color:var(--varovne);border-radius:var(--r-m);
  padding:12px 14px;font-size:13px}
.upozorneni svg{width:16px;height:16px;flex:none;margin-top:1px;stroke:currentColor;fill:none;stroke-width:2}
.upozorneni.info{background:var(--modra-svetla);border-color:#d9e1ff;color:var(--modra-tmava)}
.stagnace{font-family:var(--mono);font-size:12.5px;color:var(--tlum)}
.stagnace.dlouha{color:var(--varovne);font-weight:700}
.trend{font-size:13px;font-weight:700;width:18px;display:inline-flex;align-items:center;justify-content:center}
.trend.up{color:var(--modra-text)} .trend.down{color:#a8412c} .trend.rovne{color:var(--tlum-2)}

/* ---------- dialog --------------------------------------------------------- */
dialog{border:0;padding:2px;background:var(--duha);border-radius:calc(var(--r-l) + 2px);
  width:min(540px,94vw);box-shadow:var(--stin-3)}
dialog::backdrop{background:rgba(11,18,32,.38);backdrop-filter:blur(2px)}
dialog[open]{animation:vjezd .18s ease-out}
@keyframes vjezd{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.dlg-vnitrek{background:var(--plocha-2);border-radius:var(--r-l);padding:24px 26px 22px;
  max-height:88vh;overflow:auto;scrollbar-width:none}
.dlg-vnitrek::-webkit-scrollbar{display:none}
.dlg-hlava{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px}
.dlg-hlava h2{font-size:18px;font-weight:800}
.dlg-hlava p{margin:2px 0 0;color:var(--tlum);font-size:13.5px}
/* křížek dialogu = ikonové tlačítko 30×30 (žádný znak ×) */
.dlg-zavrit{background:none;border:0;color:var(--tlum);cursor:pointer;padding:0;flex:none;
  width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;transition:background .12s,color .12s}
.dlg-zavrit:hover{background:#eceef2;color:var(--text)}
.dlg-zavrit .ikona{width:17px;height:17px}
fieldset{border:0;padding:0;margin:0 0 16px}
legend{font-size:12px;color:var(--tlum);font-weight:600;padding:0 0 8px}
.urovne{display:grid;grid-template-columns:repeat(10,1fr);gap:5px}
.urovne input{position:absolute;opacity:0;pointer-events:none}
.urovne label{display:flex;align-items:center;justify-content:center;height:42px;border-radius:12px;
  background:var(--plocha);border:1px solid var(--linka);font-family:var(--mono);font-size:14px;
  font-weight:700;cursor:pointer;transition:transform .12s ease,background .12s ease,border-color .12s}
.urovne label:hover{transform:translateY(-2px);border-color:#cfd4dd}
.urovne input:checked + label{background:var(--modra-text);border-color:var(--modra-text);color:#fff}
.urovne input:focus-visible + label{outline:2px solid var(--modra-text);outline-offset:2px}
.kotvy{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:2px}
.kotvy li{display:flex;gap:10px;align-items:baseline;padding:5px 10px;border-radius:8px;
  font-size:12.5px;color:var(--tlum);border-left:3px solid transparent}
.kotvy li b{font-family:var(--mono);font-size:11.5px;color:var(--tlum);width:36px;flex:none}
.kotvy li.aktivni{background:var(--modra-svetla);border-left-color:var(--modra-text);color:var(--text);font-weight:600}
.kotvy li.aktivni b{color:var(--modra-text)}
.pole{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.pole > label{font-size:12px;color:var(--tlum);font-weight:600}
.dvojpole{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dlg-info{font-size:12.5px;color:var(--tlum);background:var(--plocha);border:1px solid var(--linka);
  border-radius:var(--r-m);padding:10px 12px;margin-bottom:16px}
.dlg-info b{color:var(--text)}
.dlg-akce{display:grid;gap:10px;justify-items:center;margin-top:18px}
/* pole s počítadlem znaků (poznámka u hodnocení, max 140) — limit drží
   maxlength, počítadlo jen říká kolik zbývá, ať uživatel nenarazí na strop */
.pole-hlava{display:flex;align-items:baseline;gap:10px}
.pole-hlava > label{font-size:12px;color:var(--tlum);font-weight:600}
.pole-hlava .pocitadlo{font-family:var(--mono);font-size:11.5px;font-variant-numeric:tabular-nums;
  padding-right:2px}
.pole-hlava .pocitadlo.plno{color:var(--varovne);font-weight:700}

/* ---------- toast ---------------------------------------------------------- */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:90;
  display:flex;align-items:center;gap:16px;background:var(--cerna);color:#fff;
  border-radius:var(--r-pilulka);padding:12px 14px 12px 20px;box-shadow:var(--stin-3);font-size:13.5px;
}
.toast[hidden]{display:none}
.toast:not([hidden]){animation:toast-vjezd .18s ease-out}
@keyframes toast-vjezd{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
.toast button{font:inherit;font-size:13px;font-weight:600;background:#fff;color:var(--cerna);
  border:0;border-radius:var(--r-pilulka);padding:7px 14px;cursor:pointer}
/* varovný toast (varování před tichým no-op — DESIGN.md Colors, --varovne) —
   akční odkaz je SKUTEČNÝ <a href>, ne tlačítko, proto podtržený text + ikona
   místo pilulky (`.btn-sek`/`.btn-ter` by na oranžovém podkladu nesedělo). */
.toast.varovani{background:var(--varovne-plocha);color:var(--varovne);border:1px solid var(--varovne-linka)}
.toast .toast-akce{display:inline-flex;align-items:center;gap:4px;flex:none;color:inherit;
  font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.toast .toast-akce svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- legenda pod maketou -------------------------------------------- */
/* Vysvětlující bloky jsou z produktových obrazovek pryč (uživatel: „ruší to").
   Pravidla zůstávají kvůli obrazovkám mimo tohle kolo (Přehled, Lidé). */
.legenda{margin-top:22px;display:grid;grid-template-columns:minmax(300px,1fr) minmax(340px,1.05fr);
  gap:28px;background:var(--plocha);border:1px solid var(--linka);border-radius:var(--r-l);padding:22px}
.legenda h2{font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--tlum);margin-bottom:12px}
.skala{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.skala i{font-style:normal;font-family:var(--mono);font-size:12px;padding:7px 12px;border-radius:var(--r-s)}
.skala .k0{border:1px dashed #dcdfe5;color:var(--tlum-2)}
.skala .k1{background:var(--l1)} .skala .k2{background:var(--l2)} .skala .k3{background:var(--l3)}
.skala .k4{background:var(--l4)} .skala .k5{background:var(--l5);color:#fff}
.pozn{color:var(--tlum);font-size:13px;max-width:66ch;margin:12px 0 0}
.legenda dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:13px}
.legenda dt{color:var(--tlum);font-weight:700}
.legenda dd{margin:0;max-width:62ch}

/* ---------- avatar (iniciály) ----------------------------------------------- */
.avatar{width:42px;height:42px;border-radius:14px;background:var(--modra-svetla);color:var(--modra-text);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex:none}
.avatar.velky{width:62px;height:62px;border-radius:18px;font-size:20px}

/* ---------- radar (pavučina) ----------------------------------------------- */
/* viewBox 600 → max-width 560: obsah se nikdy nezvětšuje, jen nepatrně zmenší */
.radar-obal{display:flex;flex-direction:column;align-items:center;gap:12px}
svg.radar{width:100%;height:auto;max-width:560px;display:block;overflow:visible}
svg.radar .mrizka{fill:none;stroke:var(--linka);stroke-width:1}
svg.radar .mrizka.vnejsi{stroke:#d6dae1}
svg.radar .paprsek{stroke:var(--linka);stroke-width:1}
svg.radar .plocha-ja{fill:rgba(91,124,250,.16);stroke:var(--modra-text);stroke-width:2;
  stroke-linejoin:round}
svg.radar .plocha-srov{fill:none;stroke:var(--tlum);stroke-width:1.6;stroke-dasharray:5 4;stroke-linejoin:round}
svg.radar .bod{fill:var(--modra-text);stroke:#fff;stroke-width:1.6}
svg.radar .bod-srov{fill:#fff;stroke:var(--tlum);stroke-width:1.6}
svg.radar .stitek{font-size:11.5px;font-weight:600;fill:var(--text)}
svg.radar .stitek tspan.uroven{fill:var(--modra-text);font-family:var(--mono);font-size:11px}
svg.radar .kotva{font-size:9.5px;fill:var(--tlum-2);font-weight:600}
.radar-legenda{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;font-size:12.5px;color:var(--tlum)}
.radar-legenda span{display:inline-flex;align-items:center;gap:7px}
.radar-legenda i{display:block;width:18px;height:0;border-top:2px solid var(--modra-text)}
.radar-legenda i.srov{border-top:2px dashed var(--tlum)}

/* ---------- graf progresu --------------------------------------------------- */
/* NEROZTAHUJE se přes CSS: kreslí se na skutečnou šířku kontejneru a nese
   width/height v px. Roztažení by zvětšilo i písmo popisků a tloušťku čar. */

/* lišta nad grafem: pilulkový vícenásobný přepínač sérií + dropdown Kompetence
   (stejný jazyk jako .filtry/.srt-lista, bez sticky — je uvnitř karty) */
.graf-lista{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:var(--plocha);border:1px solid var(--linka);border-radius:var(--r-pilulka);
  padding:7px 10px;margin:0 0 16px}
.graf-serie{display:flex;align-items:center;gap:3px;padding:3px;
  background:var(--plocha-2);border:1px solid var(--linka);border-radius:var(--r-pilulka)}
.graf-serie-tl{font:inherit;font-size:13px;font-weight:500;line-height:1.5;
  display:inline-flex;align-items:center;gap:7px;padding:6px 12px;white-space:nowrap;
  border:0;border-radius:var(--r-pilulka);background:none;color:var(--tlum);cursor:pointer;
  transition:background .12s ease,color .12s ease,opacity .12s ease}
.graf-serie-tl:hover{color:var(--text)}
.graf-serie-tl .puntik{width:8px;height:8px;border-radius:50%;flex:none;opacity:.4}
.graf-serie-tl[aria-pressed="true"]{background:var(--plocha);color:var(--text);font-weight:600;
  box-shadow:var(--stin-1)}
.graf-serie-tl[aria-pressed="true"] .puntik{opacity:1}

/* dropdown „Kompetence" — vlastní panel .dd s hledáním + zaškrtávátky (vícenásobný výběr) */
.dd-kp-hled{position:relative;display:block;margin-bottom:6px}
.dd-kp-hled .ikona{position:absolute;left:10px;top:50%;transform:translateY(-50%);
  width:13px;height:13px;stroke:var(--tlum);pointer-events:none;vertical-align:0}
.dd-kp-hled input[type="search"]{width:100%;font:inherit;font-size:13px;
  padding:7px 10px 7px 30px;border:1px solid var(--linka);border-radius:var(--r-m);
  background:var(--plocha);color:var(--text)}
.dd-kp-seznam{max-height:240px;overflow:auto;scrollbar-width:none;margin:0 -4px;padding:0 4px}
.dd-kp-seznam::-webkit-scrollbar{display:none}
.dd-kp-radek{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:var(--r-s);
  cursor:pointer;font-size:13px;color:var(--text)}
.dd-kp-radek:hover{background:var(--plocha-2)}
.dd-kp-radek.je-schovano{display:none}
.dd-kp-cb{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.dd-kp-box{flex:none;width:16px;height:16px;border:1.5px solid #cfd4dc;border-radius:5px;
  background:var(--plocha);display:flex;align-items:center;justify-content:center;
  transition:background .12s ease,border-color .12s ease}
.dd-kp-box .ikona{width:11px;height:11px;stroke:#fff;stroke-width:3;opacity:0;vertical-align:0}
.dd-kp-cb:checked + .dd-kp-box{background:var(--modra-text);border-color:var(--modra-text)}
.dd-kp-cb:checked + .dd-kp-box .ikona{opacity:1}
.dd-kp-cb:focus-visible + .dd-kp-box{outline:2px solid var(--modra-text);outline-offset:2px}
.dd-kp-nazev{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-kp-prazdno{margin:0;padding:8px;font-size:12.5px;color:var(--tlum)}

.graf-wrap{position:relative}
.graf-obal{width:100%;overflow:hidden}
.graf-prazdno{color:var(--tlum);font-size:13px;padding:40px 2px;text-align:center}
svg.graf{display:block;max-width:100%}
svg.graf .cara{fill:none;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
svg.graf .bod{stroke-width:2;cursor:pointer}
svg.graf .bod.rust{fill:#fff}
svg.graf .bod.pokles{fill:var(--varovne)}
svg.graf .bod:focus-visible{outline:2px solid var(--modra-text);outline-offset:2px;
  outline-style:solid}
svg.graf .osa{stroke:var(--linka-2);stroke-width:1}
svg.graf .osa-p{stroke:var(--linka-2);stroke-width:1;stroke-dasharray:3 3}
svg.graf .popisek{font-size:10.5px;fill:var(--tlum);font-family:var(--mono)}
svg.graf .popisek-p{font-size:10.5px;fill:var(--tlum);font-family:var(--mono)}
svg.graf .osa-nazev{font-size:10px;fill:var(--tlum-2);font-family:var(--mono);
  text-transform:uppercase;letter-spacing:.06em}

/* tooltip tečky: absolutně pozicovaná bublina NAD SVG (mimo .graf-obal, aby ji
   overflow:hidden neořízl), zavírá se odchodem myši/blur, ⌘-nedostupná info je
   duplicitně i v textu (ne jen title) */
.graf-tt{position:absolute;z-index:45;pointer-events:none;background:var(--plocha);color:var(--text);
  border:1px solid var(--linka);border-radius:var(--r-m);padding:10px 12px;font-size:12.5px;line-height:1.45;
  box-shadow:var(--stin-2);width:max-content;max-width:320px}
.graf-tt[hidden]{display:none}
.graf-tt-hlava{display:flex;align-items:baseline;gap:8px;margin-bottom:6px;white-space:nowrap}
.graf-tt-datum{font-weight:700}
.graf-tt-serie{color:var(--tlum);font-size:11.5px}
.graf-tt-skore{display:inline-flex;align-items:center;gap:8px;padding:5px 9px;border-radius:var(--r-s);
  background:var(--plocha-2);margin-bottom:6px;white-space:nowrap}
.graf-tt-skore b{font-family:var(--mono);font-size:14px}
.graf-tt-zmena{display:inline-flex;align-items:center;gap:3px;font-weight:700;font-family:var(--mono);color:var(--tlum)}
.graf-tt-zmena.rust{color:var(--modra-tmava)}
.graf-tt-zmena.pokles{color:var(--varovne)}
.graf-tt-zmena .ikona{width:12px;height:12px}
.graf-tt-karty{display:flex;flex-direction:column;gap:8px}
.graf-tt .uda-karta{width:220px;margin-top:0;height:auto;min-height:0}
.graf-tt .uda-karta:hover{background:var(--plocha-2)}
.graf-tt .uda-pozn{height:auto;max-height:34px}

/* legenda pod grafem — kompaktní barevný klíč (stejný jazyk jako .radar-legenda,
   NE vysvětlující blok): směr tečky + klikatelné série (klik = vypnout/zapnout) */
.graf-legenda{display:flex;gap:16px;flex-wrap:wrap;align-items:center;
  justify-content:space-between;margin-top:12px;font-size:12.5px;color:var(--tlum)}
.graf-legenda-smer{display:flex;gap:16px;flex-wrap:wrap}
.graf-legenda-smer span{display:inline-flex;align-items:center;gap:7px}
.graf-legenda-smer i{display:block;width:10px;height:10px;border-radius:50%;flex:none;
  border:2px solid var(--modra-text);background:#fff}
.graf-legenda-smer i.pokles{border-color:var(--varovne);background:var(--varovne)}
.graf-legenda-serie{display:flex;gap:4px;flex-wrap:wrap}
.graf-legenda-tl{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:12.5px;
  background:none;border:0;border-radius:var(--r-pilulka);padding:5px 9px;cursor:pointer;
  color:var(--text);transition:background .12s ease,opacity .12s ease}
.graf-legenda-tl:hover{background:var(--plocha-2)}
.graf-legenda-tl[aria-pressed="false"]{opacity:.42;text-decoration:line-through}
.graf-legenda-tl i{display:block;width:9px;height:9px;border-radius:50%;flex:none}

/* ---------- profil ---------------------------------------------------------- */
.profil-hlava{display:flex;gap:24px;align-items:center;flex-wrap:wrap;justify-content:space-between}
table.komp{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
table.komp th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--tlum);font-weight:700;padding:0 10px 10px;white-space:nowrap}
table.komp td{padding:9px 10px;box-shadow:inset 0 -1px 0 var(--linka-2);vertical-align:middle}
table.komp tbody tr:hover td{background:#fafbfd}
table.komp td.nazev{font-weight:600}
table.komp tr.stagnujici td{background:#fffaf0}
table.komp tr.stagnujici:hover td{background:#fff6e6}
/* D9 (design-audit): .obsah{overflow-x:clip} + html{overflow-x:hidden} (ř. 162,
   172) ořežou vodorovný přetok BEZ posuvníku — na úzkém okně by se širší
   table.komp (víc sloupců, akce se dvěma tlačítky) nedala doscrollovat.
   Obal takovou tabulku do .tabulka-scroll (uzivatele.html; další stránky
   s table.komp dostanou stejný obal v navazujícím kole). */
.tabulka-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabulka-scroll:focus-visible{outline:2px solid var(--modra-text);outline-offset:2px}

/* ---------- vodorovná časová osa hodnocení (profil) ------------------------- */
/* Jedna vodorovná osa: NEJNOVĚJŠÍ VPRAVO, karty visí pod osou na tečce s datem
   nad ní. Každá karta má PEVNÝ rozměr 220 × 148 px a stejné pořadí řádků
   (kompetence · změna · autor a školení · poznámka na 2 řádky), takže po zápisu
   ani po smazání nic neuskočí a prázdná poznámka nekolabuje. */
.osa-vodo{display:grid;grid-template-columns:34px minmax(0,1fr) 34px;gap:2px;align-items:start}
.osa-sip{margin-top:31px}
.osa-plocha{overflow-x:auto;overflow-y:hidden;padding:0 2px 10px;scroll-behavior:smooth;
  scrollbar-width:none}
.osa-plocha::-webkit-scrollbar{display:none}
.osa-plocha:focus-visible{outline:2px solid var(--modra-text);outline-offset:2px;border-radius:var(--r-m)}
.osa-pas{position:relative;display:flex;align-items:flex-start;width:max-content}
/* osa = 2px linka ve výšce 46 px; tečka každé karty leží přesně na ní */
.osa-pas::before{content:"";position:absolute;left:0;right:0;top:45px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--linka-2),var(--linka))}
.osa-skupina{display:flex;flex-direction:column;flex:none;padding-right:14px}
.osa-skupina + .osa-skupina{border-left:1px dashed var(--linka-2);padding-left:14px}
.osa-mesic{height:22px;display:flex;align-items:center;font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--tlum);white-space:nowrap}
.osa-radek{display:flex;gap:14px;align-items:flex-start}
.osa-prazdno{color:var(--tlum);font-size:13px;padding:18px 2px}

.uda{width:220px;flex:none;display:flex;flex-direction:column}
.uda-datum{height:18px;display:flex;align-items:center;padding-left:2px;font-family:var(--mono);
  font-size:11.5px;color:var(--tlum);font-variant-numeric:tabular-nums;white-space:nowrap}
.uda-tecka{height:12px;position:relative}
.uda-tecka i{position:absolute;left:14px;top:1px;width:10px;height:10px;border-radius:50%;
  background:var(--modra);box-shadow:0 0 0 3px var(--plocha)}
.uda-tecka::after{content:"";position:absolute;left:18px;top:11px;width:2px;height:9px;background:var(--linka)}
.uda.zvyseni .uda-tecka i{background:var(--modra-text)}
.uda.beze-zmeny .uda-tecka i{background:var(--tlum-2)}

.uda-karta{position:relative;height:148px;margin-top:8px;padding:12px 13px;
  background:var(--plocha-2);border:1px solid var(--linka);border-radius:var(--r-m);
  display:flex;flex-direction:column;gap:8px;transition:background .12s,border-color .12s}
.uda-karta:hover{background:var(--plocha);border-color:#d3d7de}
.uda-komp{height:19px;line-height:19px;font-size:13.5px;font-weight:700;padding-right:28px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uda-zmena{height:24px;display:flex;align-items:center}
.uda-zmena .chip{padding:3px 9px;background:var(--plocha);gap:6px}
.uda-znacky{height:20px;display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden}
.uda-znacky .autor{flex:none}
.uda-pozn{height:34px;margin:0;font-size:12px;line-height:1.42;color:var(--tlum);overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.uda-smaz{position:absolute;top:7px;right:7px}

/* ---------- dráha „aktuální → cílová" (reference styl-9 Carrier path) ------- */
.draha{display:flex;flex-direction:column;gap:8px}
.draha .konce{display:flex;justify-content:space-between;font-size:12px;color:var(--tlum)}
.draha .konce b{display:block;color:var(--text);font-size:13.5px;font-weight:700}
.draha .konce .vpravo{text-align:right}
.draha .segmenty{display:flex;gap:4px}
.draha .segmenty i{flex:1;height:10px;border-radius:5px;background:var(--linka-2)}
.draha .segmenty i.mam{background:var(--modra-text)}
.draha .segmenty i.chybi{background:var(--linka-2);box-shadow:inset 0 0 0 1.5px #cfd6e8}
.draha .kotva-text{font-size:12px;color:var(--tlum)}
.draha .kotva-text b{color:var(--text)}

/* ---------- cíle rozvoje ---------------------------------------------------- */
.cile{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:16px}
.cil{display:flex;flex-direction:column;gap:14px}
.cil .hl{display:flex;align-items:center;justify-content:space-between;gap:16px}
.cil .hl h3{font-size:17px}
.cil .hl .meta{font-size:12px;color:var(--tlum)}
.cil .stav{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  padding:3px 9px;border-radius:var(--r-pilulka);background:var(--modra-svetla);color:var(--modra-tmava)}
.cil .stav.splnen{background:var(--splneno-plocha);color:var(--splneno)}
.cil .sekce-nadpis{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--tlum);
  font-weight:700;margin-bottom:8px}
.prazdny{text-align:center;padding:44px 24px;display:grid;gap:12px;justify-items:center}
.prazdny h2{font-size:18px}
.prazdny p{margin:0;color:var(--tlum);max-width:52ch}

/* rozvržení profilu — jediné (radar + skóre nahoře, pak graf, tabulka, osa) */
.profil{display:grid;gap:20px;grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr);
  align-items:stretch;grid-template-areas:"radar bok" "graf graf" "komp komp" "osa osa"}
.ob-radar{grid-area:radar} .ob-bok{grid-area:bok}
.ob-graf{grid-area:graf} .ob-komp{grid-area:komp} .ob-osa{grid-area:osa}

@media (max-width:1180px){
  /* sbalení je jen desktopová záležitost (panel se tu stejně skládá nad obsah) —
     sidebar se vrací do normálního toku, na plnou šířku, BEZ animace šířky
     (i kdyby si localStorage pamatoval "sbalena" z desktopu). */
  .sidebar,html.nav-sbalena .sidebar{position:static;width:auto;height:auto;
    overflow:visible;border-right:0;border-bottom:1px solid var(--linka);transition:none}
  .sb-vnitrek{width:auto}
  .sb-oddelovac{width:auto}
  .sb-sbal-radek{display:none}
  html.nav-sbalena .sb-texty{opacity:1}
  .obsah,html.nav-sbalena .obsah{margin-left:0;transition:none}
  .bento{grid-template-columns:repeat(2,1fr)}
  .profil{grid-template-columns:1fr;grid-template-areas:"radar" "bok" "graf" "komp" "osa"}
  .legenda{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
  .btn:hover,.bnk:hover,.urovne label:hover{transform:none}
  .osa-plocha{scroll-behavior:auto}
}

/* karta Skóre v profilu: stejně vysoká jako radar, měřáky rostou do volného místa */
.ob-bok{display:flex;flex-direction:column}
.ob-bok .sloupce.ctyri{flex:1;align-items:stretch;min-height:150px;margin-bottom:20px}
.ob-bok .sloupce.ctyri .sloupec{width:auto;flex:1;display:flex;flex-direction:column}
.ob-bok .sloupce.ctyri .sloupec .telo{flex:1;height:auto;min-height:126px}
.ob-bok .fakta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}
.ob-bok .fakt{background:var(--plocha-2);border:1px solid var(--linka);border-radius:var(--r-m);padding:10px 12px}
.ob-bok .fakt .stitek{display:block;margin-bottom:4px}
.ob-bok .fakt b{font-size:17px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ob-bok .fakt small{color:var(--tlum);font-size:11.5px;display:block;margin-top:2px}
.ob-bok .fakt b.plus{color:var(--modra-tmava)}

/* ---------- ikony (Lucide sprite z ikony.js) ------------------------------ */
.ikona{width:1.05em;height:1.05em;flex:none;vertical-align:-.18em;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.ikona.s{width:14px;height:14px}.ikona.m{width:18px;height:18px}.ikona.l{width:22px;height:22px}
.ikona.tenka{stroke-width:1.75}

/* ---------- tlačítka: primární · sekundární (tón bez rámečku) · terciární; velikosti ------- */
.btn-sek{background:var(--modra-svetla);color:var(--modra-tmava);border-color:transparent;box-shadow:none}
.btn-sek:hover{background:#dfe5ff;box-shadow:none;transform:none}
.btn-ter{background:transparent;color:var(--text);border-color:transparent;box-shadow:none}
.btn-ter:hover{background:var(--plocha-2);box-shadow:none;transform:none}
.btn-ter.tlum{color:var(--tlum)}
.btn-ter.tlum:hover{color:var(--text)}
/* Danger provedení — nevratná akce bez undo (smazání účtu, BRÁNA fix 2/U12).
   .btn-sek.nebezpecne pro řádkové tlačítko, .btn-cerne.nebezpecne pro potvrzovací
   akci v dialogu (nahrazuje výchozí černou). Focus zůstává na sdíleném
   :focus-visible (řádek výše v souboru) — nepřepisuje se. */
.btn-sek.nebezpecne{background:var(--nebezpecne-plocha);color:var(--nebezpecne)}
.btn-sek.nebezpecne:hover{background:#f9d9d6}
.btn-cerne.nebezpecne{background:var(--nebezpecne);border-color:var(--nebezpecne)}
.btn-cerne.nebezpecne:hover{background:#c9382b}
.btn-maly{padding:6px 11px;font-size:12.5px;border-radius:var(--r-pilulka);gap:6px}
.btn-mini{padding:4px 8px;font-size:12px;border-radius:var(--r-pilulka);gap:5px}
.btn-ikona{padding:6px;width:30px;height:30px;justify-content:center;border-radius:10px}
/* ikona v tlačítku: pevná velikost podle velikosti tlačítka, ne podle písma */
.btn .ikona{width:15px;height:15px;vertical-align:0}
.btn-maly .ikona,.btn-mini .ikona,.btn-ikona .ikona{width:14px;height:14px}
.btn-cele .ikona{width:16px;height:16px}
/* perk chipy nesmí roztáhnout sloupec karty postavy */
.perk .chipy .chip{max-width:100%;overflow:hidden;text-overflow:ellipsis}
/* [hidden] musí vyhrát nad display:flex komponent */
.upozorneni[hidden],.karta[hidden],.seg[hidden],[hidden]{display:none!important}
/* logo Competills v sidebaru (sprite #i-logo, radar — obrysový tah, ne výplň) */
.logo .znacka-svg{width:28px;height:28px;fill:none;stroke:currentColor;color:var(--text)}
/* dropdown u pravého okraje okna: panel zarovnaný doprava */
.dd-panel.dd-vpravo{left:auto;right:0}

/* ==========================================================================
   Task 14 — Přihlášení, Změna hesla, patička účtu, chyba bootstrapu
   Vše z tokenů výše; makety mockups/demo-db/01-prihlaseni.html,
   02-zmena-hesla.html. .duha-ram/.vnitrek jsou sdílené (řádek ~214).
   ========================================================================== */

/* ---------- celostránkové karty (přihlášení, vynucená změna hesla) -------- */
.auth-plocha{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px}
.auth-karta{width:100%;max-width:420px}
.auth-karta > .vnitrek{padding:26px 26px 22px}
.auth-znacka{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.auth-znacka .ikona{width:26px;height:26px;stroke:var(--text);vertical-align:0}
.auth-znacka b{font-size:15.5px;font-weight:800;letter-spacing:-.03em}
.auth-karta h2{font-size:18px;font-weight:800}
.auth-karta .uvod{margin:6px 0 18px;color:var(--tlum);font-size:13.5px;line-height:1.5}
.auth-pata{margin:16px 0 0;font-size:12.5px;color:var(--tlum);line-height:1.5;text-align:center}
.btn-cele[disabled]{opacity:.5;cursor:not-allowed}

/* pole hesla s přepínačem zobrazení (vlastní tab stop, DESIGN.md 4.2) */
.heslo-obal{position:relative;display:flex;align-items:center}
.heslo-obal input{width:100%;padding-right:44px}
.heslo-obal .prepinac{position:absolute;right:5px}

/* ---------- živý checklist pravidel hesla (§3.2) --------------------------- */
.pravidla{list-style:none;margin:2px 0 16px;padding:10px 12px;display:grid;gap:6px;
  background:var(--plocha-2);border:1px solid var(--linka);border-radius:var(--r-m)}
.pravidla li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--tlum)}
.pravidla li .ikona{width:15px;height:15px;stroke:var(--tlum-2);vertical-align:0}
.pravidla li.hotovo{color:var(--splneno);font-weight:600}
.pravidla li.hotovo .ikona{stroke:var(--splneno)}
.duvod{margin:8px 0 0;font-size:12.5px;color:var(--tlum);text-align:center}

/* ---------- karta „Změna hesla" v panelu (dobrovolná varianta) ------------ */
.hes-karta{max-width:460px}

/* ---------- pruh chyby při selhání bootstrapu (/api/stav.js onerror) ------- */
.pruh-chyba{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:center;
  gap:6px;background:var(--varovne-plocha);color:var(--varovne);border-bottom:1px solid var(--varovne-linka);
  padding:10px 16px;font-size:13px;text-align:center}
.pruh-chyba .btn-text{color:inherit}

/* ---------- dialog re-autentizace (relace vypršela uprostřed práce) ------- */
#reauthDialog{width:min(380px,94vw)}
#reauthDialog .uvod{color:var(--tlum);font-size:13.5px;line-height:1.5;margin:0 0 16px}

/* ==========================================================================
   Uživatelé (Task 17) — tabulka účtů + dialogy (založení, dočasné heslo,
   potvrzení s důsledkem). Vzor: table.komp katalogu kompetencí.
   ========================================================================== */
table.komp td.ucet{font-family:var(--mono);font-weight:600;font-size:13px}
table.komp td.akce{text-align:right;white-space:nowrap}
table.komp td.akce .btn{margin-left:6px}
tr.neaktivni td.ucet{color:var(--tlum)}
/* .stav-uctu (NE holé .stav — kolidovalo s .cil .stav, review nález D2) */
.stav-uctu{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600}
.stav-uctu .ikona{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;vertical-align:0}
.stav-uctu.je-aktivni{color:var(--splneno)}
.stav-uctu.je-vypnuty{color:var(--tlum)}
.chip.ty{background:var(--plocha-2);color:var(--tlum);font-size:11px;padding:2px 9px}
.chip.neaktivni{background:var(--plocha-2);color:var(--tlum);font-size:11px;padding:2px 9px}
.duvod-radku{font-size:11.5px;color:var(--tlum);display:block;margin-top:3px}
/* Scoped na tabulku uctu a dialog hesla — NE holé .btn[disabled] (globalni
   dopad na vsechna disabled tlacitka appky, review nalez D2). */
table.komp td.akce .btn[disabled],
#dlgHeslo .btn[disabled]{opacity:.5;cursor:not-allowed}
.heslo-blok{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--plocha);border:1px solid var(--linka);border-radius:var(--r-m);padding:14px 16px}
.heslo-blok code{font-family:var(--mono);font-size:18px;font-weight:700;letter-spacing:.02em;
  word-break:break-all}
.jmeno-nahled{font-size:12.5px;color:var(--tlum);margin:2px 0 0}
.jmeno-nahled b{font-family:var(--mono);color:var(--text)}
.potvrzeni{display:flex;align-items:flex-start;gap:10px;margin:16px 0 0;font-size:13px}
.potvrzeni input{width:16px;height:16px;margin:2px 0 0;accent-color:var(--modra-text)}

/* ==========================================================================
   Role (Task 16a) — stránka role.html: seznam rolí, detail se zaškrtávacím
   seznamem kompetencí (UX §3.5, §4.3; maketa 04-role.html provedení A) +
   sloupec Role v katalogu kompetencí (kompetence.html, UX §3.6).
   ========================================================================== */
.role-hlava{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}
.role-hlava h2{font-size:18px}
.role-hlava p{margin:6px 0 0;color:var(--tlum);font-size:13.5px;max-width:60ch}
.role-chipy{display:flex;gap:7px;margin-top:12px;flex-wrap:wrap}
.role-akce{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.kompo-lista{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0 10px}
.kompo-lista .pocitadlo{margin-left:auto;font-family:var(--mono);font-size:12.5px}
.kompo-lista .pocitadlo b{font-weight:700;color:var(--text)}
.filtr-pozn{font-size:12px;color:var(--tlum);margin:0 0 10px 2px}
.kompo-seznam{max-height:330px;overflow:auto;margin:0 -6px;padding:0 6px;scrollbar-width:thin}
.kompo-radek{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:var(--r-s);
  cursor:pointer;box-shadow:inset 0 -1px 0 var(--linka-2)}
.kompo-radek:hover{background:var(--plocha-2)}
.kompo-radek[aria-busy="true"]{cursor:progress}
.kompo-nazev{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:13.5px;font-weight:600}
.kompo-meta{font-size:11.5px;color:var(--tlum);white-space:nowrap}
.kompo-radek input:checked ~ .kompo-nazev{color:var(--modra-tmava)}
.kompo-ukladani{display:none;align-items:center;color:var(--tlum)}
.kompo-ukladani .ikona{width:14px;height:14px;animation:kompo-toceni .9s linear infinite}
.kompo-radek[aria-busy="true"] .kompo-ukladani{display:inline-flex}
.kompo-radek[aria-busy="true"] .dd-kp-cb,
.kompo-radek[aria-busy="true"] .dd-kp-box{opacity:.55}
@keyframes kompo-toceni{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.kompo-ukladani .ikona{animation:none}}
.seznam-pata{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
/* Sloupec Role v katalogu kompetencí — víc než dvě role se přirozeně zalomí
   do druhého řádku buňky (flex-wrap), title nenese informaci sám. */
.role-chipy-katalog{display:flex;flex-wrap:wrap;gap:4px 6px;max-width:220px}

/* ==========================================================================
   Lide a filtr role (Task 16b) — Přidat/Upravit/Deaktivovat/Smazat člověka,
   prázdné stavy Lidí a Přehledu. Prázdné karty i chip „Deaktivovaný" jsou
   sdílené třídy (.duha-ram/.vnitrek.prazdny, .chip.neaktivni, .upozorneni.info)
   — tenhle blok drží jen řádek akcí v hlavičce profilu, ostatní markup je beze
   zbytku pokrytý existujícím stylem.
   ========================================================================== */
.profil-akce{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}

/* ==========================================================================
   Perk obrazek (Task 18) — drop zone (UX §4.4, 7 stavů), náhled na šachovnici
   a odznak 44×44 v kartě postavy. Maketa mockups/demo-db/05-perk-a-screening.html.
   ========================================================================== */
/* drop zone — <button> přes celou šířku dialogu */
.drop{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:20px 16px;border:1.5px dashed var(--linka);border-radius:var(--r-m);
  background:var(--plocha);color:var(--tlum);font:inherit;font-size:13px;cursor:pointer;
  transition:background .15s,border-color .15s}
.drop:hover{border-color:#d3d7de;background:var(--plocha-2)}
.drop:focus-visible{outline:2px solid var(--modra-text);outline-offset:2px}
.drop .ikona{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;vertical-align:0}
.drop b{color:var(--text);font-weight:600}
/* stav Drag-over — obsluhováno přes .pretahuje (JS přepíná při dragenter/dragover) */
.drop.pretahuje{border-style:solid;border-color:var(--modra-text);background:var(--modra-svetla);color:var(--modra-tmava)}
/* stav Chyba — samostatný alert blok (ne button), „Zkusit jiný soubor" je vedle */
.drop.chyba{border-style:dashed;border-color:var(--varovne-linka);background:var(--varovne-plocha);
  color:var(--varovne);cursor:default}
/* stav Nahrává se — tlumená zóna, aria-busy="true" */
.drop[aria-busy="true"]{opacity:.6;cursor:progress}
.drop-pravidla{margin:8px 0 0;font-size:12px;color:var(--tlum)}

/* náhled nahraného/vybraného obrázku — šachovnice ukáže průhlednost (72×72) */
.nahled{display:flex;align-items:center;gap:14px;padding:12px;border:1px solid var(--linka);
  border-radius:var(--r-m);background:var(--plocha)}
.nahled .platno{width:72px;height:72px;border-radius:var(--r-s);flex:none;
  background-color:#fff;
  background-image:linear-gradient(45deg,#eef0f3 25%,transparent 25%),
    linear-gradient(-45deg,#eef0f3 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#eef0f3 75%),
    linear-gradient(-45deg,transparent 75%,#eef0f3 75%);
  background-size:12px 12px;background-position:0 0,0 6px,6px -6px,-6px 0;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.nahled .platno img{width:100%;height:100%;object-fit:contain}
.nahled .popisek{min-width:0}
.nahled .popisek b{display:block;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nahled .popisek span{display:block;font-family:var(--mono);font-size:11.5px;color:var(--tlum);margin-top:2px}

/* odznak perku v kartě postavy (profil.html) — 44×44, obrázek nebo výchozí ikona award;
   grid-row:1/-1 ho zarovná vedle celého textového bloku (název + popis + chipy). */
.perk-odznak{width:44px;height:44px;flex:none;border-radius:12px;background:var(--plocha);
  display:flex;align-items:center;justify-content:center;overflow:hidden;grid-row:1/-1;align-self:start}
.perk-odznak img{width:100%;height:100%;object-fit:cover;display:block}
/* D8 design-audit: odznak v katalogu perků (kompetence.html .perk-karta hlavička)
   je menší než ten v kartě postavy — 28×28, ne 44×44. */
.perk-karta .perk-odznak{width:28px;height:28px;border-radius:8px}
.perk-odznak .ikona{width:22px;height:22px;stroke:var(--modra-tmava);fill:none;stroke-width:1.9;vertical-align:0}
.perk.blizky .perk-odznak{background:var(--varovne-plocha)}
.perk.blizky .perk-odznak .ikona{stroke:var(--varovne)}
.perk.zadny .perk-odznak{background:var(--plocha-2)}
.perk.zadny .perk-odznak .ikona{stroke:var(--tlum)}