/* Styly aplikace. Barvy, písma a poloměry jsou v znacka.css — tady se
   nepíše žádná pevná barva kromě tiskové palety na konci souboru. */
/* ==========================================================================
   základ
   ========================================================================== */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
h1, h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }
h3, h4 { font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .7em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-1); }
::selection { background: var(--accent-soft); color: var(--accent-on-soft); }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

.eyebrow {
  font-size: .6875rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3);
}
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ==========================================================================
   shell
   ========================================================================== */
#shell {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  grid-template-rows: 56px minmax(0, 1fr);
  grid-template-areas: "brand top" "rail main";
  min-height: 100dvh;
}
body.landing #shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "main"; }
body.landing .rail, body.landing .topbar { display: none; }
body.landing #shell { grid-template-rows: 56px minmax(0, 1fr); }

.brandbar {
  grid-area: brand;
  display: flex; align-items: center; gap: 10px;
  padding: 0 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
body.landing .brandbar { border-right: 0; justify-content: space-between; }

.brandmark {
  width: 30px; height: 30px; flex: none;
  border-radius: 8px;
  background: var(--fk-kremova); color: var(--fk-navy);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  letter-spacing: -.01em;
}
.brandtext { display: flex; flex-direction: column; justify-content: center; cursor: pointer; line-height: 1.1; min-width: 0; }
.brandname {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.05rem; letter-spacing: -.01em; color: var(--text);
}
.brandname span { font-weight: 600; color: inherit; }
/* ™ je součást značky, nikdy ®. */
.brandsub {
  font-size: .5625rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-3); margin-top: 3px;
}

.topbar {
  grid-area: top;
  display: flex; align-items: center; gap: 0;
  padding: 0 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none;
}
.topbar::-webkit-scrollbar { display: none; }

.pulse {
  display: flex; align-items: baseline; gap: 6px;
  flex: none; padding: 0 16px 0 0; margin-right: 16px;
  border-right: 1px solid var(--border);
}
.pulse:has(+ .spacer) { border-right: 0; }
.pulse-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: .95rem; font-weight: 700; letter-spacing: -.03em; }
.pulse-lab { font-size: .75rem; color: var(--text-3); white-space: nowrap; }
.spacer { flex: 1 1 auto; min-width: 8px; }

/* levá lišta */
.rail {
  grid-area: rail;
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 12px 16px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  position: sticky; top: 56px; align-self: start;
  height: calc(100dvh - 56px); overflow-y: auto;
}
.rail-sec { padding: 16px 8px 6px; font-size: .625rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }

.navbtn {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 9px 11px;
  border: 0; border-radius: var(--r-2);
  background: transparent; color: var(--text-2);
  font-size: .875rem; font-weight: 500; text-align: left;
  cursor: pointer;
  transition: background 120ms var(--ease), color 120ms var(--ease);
}
.navbtn:hover { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
.navbtn[aria-current="page"] { background: var(--accent-soft); color: var(--accent-on-soft); font-weight: 600; }
.navbtn svg { width: 18px; height: 18px; flex: none; stroke-width: 1.7; }
.navbtn .count { margin-left: auto; font-family: var(--font-mono); font-size: .72rem; color: var(--text-3); }
/* „Více" existuje jen na telefonu — na širší obrazovce je celé menu v liště. */
.navbtn.vice { display: none; }

/* Zbytek menu nad spodní lištou. Řádky jsou vysoké schválně: míří se do nich
   palcem jedné ruky, ne myší. */
.vice-sez { display: flex; flex-direction: column; gap: 2px; }
.vice-r {
  display: flex; align-items: center; gap: 13px;
  width: 100%; min-height: 48px; padding: 11px 12px;
  border: 0; border-radius: var(--r-2);
  background: transparent; color: var(--text);
  font-size: 1rem; font-weight: 500; cursor: pointer;
}
.vice-r:hover { background: var(--surface-raised); }
.vice-r[aria-current="page"] { background: var(--accent-soft); color: var(--accent-on-soft); }
.vice-r svg { width: 20px; height: 20px; flex: none; stroke-width: 1.7; }
.vice-r .count { font-family: var(--font-mono); font-size: .8125rem; color: var(--text-3); }
.rail-foot { margin-top: auto; padding-top: 16px; }

main { grid-area: main; min-width: 0; overflow-y: auto; height: calc(100dvh - 56px); }
body.landing main { height: auto; overflow: visible; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 24px 24px 80px; }
.wrap-narrow { max-width: 780px; }

.page-head { margin-bottom: 24px; }
.page-head p { color: var(--text-2); max-width: 66ch; margin-top: 6px; }

/* ==========================================================================
   tlačítka
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-2);
  background: var(--surface); color: var(--text);
  font-size: .875rem; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: background 120ms var(--ease), border-color 120ms var(--ease);
}
.btn:hover { background: var(--surface-raised); border-color: var(--text-3); }
.btn:active { background: var(--surface-sunken); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; stroke-width: 1.8; flex: none; }

.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-primary:active { background: var(--accent-pressed); border-color: var(--accent-pressed); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); border-color: transparent; }

/* Bez tohohle čeká prohlížeč na dotyku ~300 ms, jestli nepřijde druhé
   ťuknutí — a když přijde (husté tabulky se trefují na druhý pokus),
   místo druhého kliknutí stránku přiblíží. */
button, [role="button"], table.husta tbody tr { touch-action: manipulation; }
.btn-sm { padding: 6px 11px; font-size: .8125rem; border-radius: var(--r-1); }
.btn-lg { padding: 13px 26px; font-size: .9375rem; border-radius: var(--r-2); }
.btn-block { width: 100%; }
.btn-pill { border-radius: var(--r-pill); }

.btn-yes { border-color: var(--t-high); color: var(--t-high); background: var(--t-high-soft); }
.btn-yes:hover { background: var(--t-high); color: var(--text-inv); border-color: var(--t-high); }
.btn-no { border-color: var(--t-low); color: var(--t-low); background: var(--t-low-soft); }
.btn-no:hover { background: var(--t-low); color: var(--text-inv); border-color: var(--t-low); }
.btn-yes[aria-pressed="true"] { background: var(--t-high); color: var(--text-inv); }
.btn-no[aria-pressed="true"] { background: var(--t-low); color: var(--text-inv); }

.iconbtn {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border: 1px solid transparent; border-radius: var(--r-1);
  background: transparent; color: var(--text-3); cursor: pointer;
  transition: background 120ms var(--ease);
}
.iconbtn:hover { background: var(--surface-raised); color: var(--text); }
.iconbtn svg { width: 17px; height: 17px; stroke-width: 1.9; }

/* ==========================================================================
   pole
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: .8125rem; font-weight: 600; color: var(--text-2); }
.field .hint { font-size: .75rem; color: var(--text-3); line-height: 1.45; }
.field .err { font-size: .75rem; color: var(--t-low); font-weight: 500; }

input[type="text"], input[type="search"], input[type="email"], input[type="tel"],
select, textarea {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-1);
  background: var(--surface); color: var(--text);
  font-size: .9375rem;
  transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
input[aria-invalid="true"] { border-color: var(--t-low); }
textarea { resize: vertical; min-height: 76px; line-height: 1.6; }
select {
  appearance: none; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: calc(100% - 16px) 53%, calc(100% - 11px) 53%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}

/* ==========================================================================
   důvěra — hlavní datový prvek
   ========================================================================== */
.truth {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 7px;
  border-radius: var(--r-pill);
  font-size: .75rem; font-weight: 600;
  white-space: nowrap;
}
.truth .num { font-size: .8125rem; font-weight: 700; }
.truth-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.t-nove { color: var(--t-nove); background: var(--t-unknown-soft); }
.t-vyvraceno { color: var(--t-vyvr); background: var(--t-low-soft); }
.t-sporne { color: var(--t-spor); background: var(--t-mid-soft); }
.t-pravdepodobne { color: var(--t-prav); background: var(--t-high-soft); }
.t-overeno { color: var(--t-over); background: var(--t-high-soft); }

.gauge { height: 4px; border-radius: var(--r-pill); background: var(--surface-sunken); overflow: hidden; }
.gauge i { display: block; height: 100%; border-radius: var(--r-pill); background: currentColor; transition: width 320ms var(--ease); }

.stamp {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px;
  border: 1.5px solid var(--t-high); border-radius: var(--r-1);
  color: var(--t-high);
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}

.age { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: .75rem; white-space: nowrap; }
.age::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.age-fresh { color: var(--t-high); }
.age-mid { color: var(--t-mid); }
.age-old { color: var(--t-low); }

/* ==========================================================================
   karty
   ========================================================================== */
.rule {
  display: block; width: 100%; text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--rule-accent, var(--border-strong));
  border-radius: var(--r-3);
  padding: 16px 18px;
  cursor: pointer;
  transition: background 120ms var(--ease), border-color 120ms var(--ease);
}
.rule:hover { background: var(--surface-raised); border-color: var(--border-strong); border-left-color: var(--rule-accent, var(--border-strong)); }
.rule-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.rule-title { display: block; font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; margin-bottom: 6px; }
.rule-claim {
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: .9375rem; line-height: 1.55; color: var(--text-2);
}
.rule-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 11px;
  border-top: 1px solid var(--border);
  font-size: .75rem; color: var(--text-3);
}
.rules-list { display: flex; flex-direction: column; gap: 12px; }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border: 1px solid var(--border); border-radius: var(--r-1);
  background: var(--surface-raised);
  font-size: .75rem; font-weight: 500; color: var(--text-2);
  white-space: nowrap;
}
.chip-bank { font-family: var(--font-mono); font-weight: 500; font-size: .7188rem; border-color: var(--border-strong); background: var(--surface); }
.chip-demo { color: var(--t-mid); border-color: var(--t-mid); background: var(--t-mid-soft); }
.chip-lock { color: var(--accent-on-soft); border-color: var(--accent); background: var(--accent-soft); }

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: 24px;
}
.panel-tight { padding: 16px; }
.panel + .panel { margin-top: 16px; }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-side { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }

.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.toolbar .grow { flex: 1 1 240px; min-width: 170px; }
/* Filtry v jedné řadě. Globální `select { width: 100% }` donutilo každý filtr
   zalomit na vlastní řádek přes celou šířku, takže seznam pravidel byl pod
   okrajem obrazovky ještě dřív, než se člověk dostal k obsahu. */
.toolbar select { width: auto; flex: 0 1 180px; min-width: 0; }

.dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: .875rem; align-items: baseline; }
.dl dt { color: var(--text-3); font-size: .8125rem; }
.dl dd { margin: 0; }

.tbl-scroll { overflow-x: auto; }
/* Přilepená hlavička v Metodikách nedržela nikde, ani na desktopu.
   `.tbl-scroll` má `overflow-x: auto`, a to podle specifikace udělá `auto`
   i ze svislé osy — je to tedy scrollovací kontejner, jenže bez omezené
   výšky přesně tak vysoký jako tabulka. Není v čem se přilepit: posouvá se
   stránka a hlavička odjede s ní. Strop výšky z něj udělá vlastní
   scrollovací plochu a `position: sticky` začne platit.
   Jen na širší obrazovce: na telefonu by vzniklo posouvání v posouvání
   a dvě stě parametrů pod prstem je horší než hlavička, která odjede. */
@media (min-width: 861px) { .tbl-scroll { max-height: calc(100dvh - 230px); } }
table.lb { width: 100%; border-collapse: collapse; font-size: .875rem; }
table.lb th {
  text-align: left; padding: 10px 12px;
  font-size: .6875rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-3); border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.lb td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.lb tr:last-child td { border-bottom: 0; }
table.lb tbody tr { cursor: pointer; transition: background 120ms var(--ease); }
table.lb tbody tr:hover { background: var(--surface-raised); }

.empty {
  text-align: center; padding: 56px 24px;
  border: 1px dashed var(--border-strong); border-radius: var(--r-3);
  background: var(--surface-raised);
}
.empty h3 { margin-bottom: 8px; }
.empty p { color: var(--text-2); max-width: 48ch; margin: 0 auto 16px; }

.avatar {
  width: 32px; height: 32px; flex: none;
  border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent-on-soft);
  display: grid; place-items: center; font-size: 1rem;
}
.avatar-lg { width: 56px; height: 56px; font-size: 1.7rem; }

/* Odznaky, úroveň a pruh zkušeností (.lvl, .badge*, .xp*) odešly s vlnou 8.
   Zvýraznění vlastního řádku v žebříčku (table.lb tr.me) taky — žebříček
   neexistuje od chvíle, kdy se báze stala anonymní. */

.whoami {
  display: flex; align-items: center; gap: 10px; flex: none;
  padding: 5px 12px 5px 5px;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface-raised); cursor: pointer;
  transition: background 120ms var(--ease), border-color 120ms var(--ease);
}
.whoami:hover { background: var(--surface-sunken); border-color: var(--border-strong); }
.whoami-txt { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.whoami-name { font-size: .8125rem; font-weight: 600; }
.whoami-meta { font-size: .6875rem; color: var(--text-3); font-family: var(--font-mono); }

/* Kreditová pilulka (.credits) odešla s klientským režimem ve vlně 8. */

/* ==========================================================================
   chat
   ========================================================================== */
.chat-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; height: calc(100dvh - 56px); }
.chat-main { display: flex; flex-direction: column; min-width: 0; }
.chat-scroll { flex: 1 1 auto; overflow-y: auto; padding: 32px 24px 8px; }
.chat-inner { max-width: 720px; margin: 0 auto; }
.chat-side { border-left: 1px solid var(--border); background: var(--surface); overflow-y: auto; padding: 24px 20px; }
.chat-side h3 { font-size: .8125rem; margin-bottom: 12px; }

.msg { margin-bottom: 32px; }
.msg-role { display: flex; align-items: center; gap: 8px; font-size: .6875rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }
.msg-role i { width: 20px; height: 20px; border-radius: var(--r-1); display: grid; place-items: center; font-style: normal; font-size: .625rem; font-weight: 700; background: var(--surface-sunken); color: var(--text-2); }
.msg-bot .msg-role i { background: var(--accent); color: var(--on-accent); }

.msg-body { font-size: 1rem; line-height: 1.65; }
.msg-user .msg-body {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-3); padding: 12px 16px; font-size: .9375rem;
}
.msg-body strong { font-weight: 600; }
.msg-body ul { margin: .5em 0 .8em; padding-left: 1.25em; }
.msg-body li { margin-bottom: .3em; }

.cite {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 0 2px; padding: 1px 7px;
  border: 1px solid currentColor; border-radius: var(--r-1);
  background: var(--surface);
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 700;
  cursor: pointer; line-height: 1.5;
}
.answer-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: .8125rem; color: var(--text-3);
}

.chat-dock { border-top: 1px solid var(--border); background: var(--surface); padding: 16px 24px 20px; }
.chat-dock-inner { max-width: 720px; margin: 0 auto; }
.chat-box {
  display: flex; align-items: flex-end; gap: 8px;
  border: 1px solid var(--border-strong); border-radius: var(--r-4);
  background: var(--surface); padding: 8px 8px 8px 16px;
  transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease);
}
.chat-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.chat-box textarea { border: 0; background: transparent; padding: 6px 0; min-height: 28px; max-height: 180px; resize: none; flex: 1 1 auto; }
.chat-box textarea:focus { box-shadow: none; }

.suggest { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.suggest button {
  padding: 7px 14px;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface-raised); color: var(--text-2);
  font-size: .8125rem; cursor: pointer;
  transition: border-color 120ms var(--ease), color 120ms var(--ease), background 120ms var(--ease);
}
.suggest button:hover { border-color: var(--accent); color: var(--accent); background: var(--surface); }

.thinking { display: inline-flex; align-items: center; gap: 9px; color: var(--text-3); font-size: .9375rem; }
.thinking i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: blip 1.05s ease-in-out infinite; }
.thinking i:nth-child(2) { animation-delay: .18s; }
.thinking i:nth-child(3) { animation-delay: .36s; }
@keyframes blip { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

/* ==========================================================================
   upozornění a hlášky
   ========================================================================== */
.note {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--border); border-left: 3px solid var(--t-mid);
  border-radius: var(--r-1); background: var(--surface);
  font-size: .875rem; color: var(--text-2);
}
.note-info { border-left-color: var(--accent); }
.note strong { color: var(--text); }
.note svg { width: 17px; height: 17px; flex: none; margin-top: 2px; stroke-width: 1.8; }

.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 60;
  padding: 12px 20px; border-radius: var(--r-2);
  background: var(--surface-inv); color: var(--text-inv);
  font-size: .875rem; font-weight: 500;
  box-shadow: 0 12px 40px -12px rgb(var(--scrim) / .5);
  animation: toastin 240ms var(--ease-in);
  max-width: min(520px, calc(100vw - 32px));
}
@keyframes toastin { from { transform: translate(-50%, 14px); opacity: 0; } }

/* ==========================================================================
   překryvy
   ========================================================================== */
.scrim { position: fixed; inset: 0; background: rgb(var(--scrim) / .5); backdrop-filter: blur(3px); z-index: 40; animation: fade 180ms var(--ease); }
@keyframes fade { from { opacity: 0; } }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(580px, 100vw);
  background: var(--canvas); border-left: 1px solid var(--border);
  z-index: 41; display: flex; flex-direction: column;
  box-shadow: -24px 0 60px -20px rgb(var(--scrim) / .35);
  animation: slide 240ms var(--ease-in);
}
@keyframes slide { from { transform: translateX(32px); opacity: .5; } }
.drawer-head { display: flex; align-items: flex-start; gap: 12px; padding: 20px; border-bottom: 1px solid var(--border); background: var(--surface); }
.drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 20px; }
.drawer-foot { border-top: 1px solid var(--border); background: var(--surface); padding: 14px 20px; display: flex; gap: 8px; flex-wrap: wrap; }

/* „Co se stalo u klienta" — formulář nastupuje na místo hlasovacích tlačítek,
   aby bylo zřejmé, že hlas ještě neodešel. */
.vyvratit { flex: 1 1 100%; display: flex; flex-direction: column; gap: 8px; }
.vyvratit label { font-size: .8125rem; color: var(--text-2); line-height: 1.45; }
.vyvratit label strong { color: var(--text); }
.vyvratit textarea { width: 100%; resize: vertical; }
.vyvratit-akce { display: flex; gap: 8px; align-items: center; }

.modal { position: fixed; inset: 0; z-index: 41; display: grid; place-items: center; padding: 20px; pointer-events: none; }
.modal-card {
  pointer-events: auto; width: min(640px, 100%);
  max-height: calc(100dvh - 40px); overflow-y: auto;
  background: var(--canvas); border: 1px solid var(--border-strong);
  border-radius: var(--r-4);
  box-shadow: 0 32px 80px -24px rgb(var(--scrim) / .45);
  animation: pop 240ms var(--ease-in);
}
@keyframes pop { from { transform: translateY(12px) scale(.985); opacity: 0; } }
.modal-head { padding: 24px 24px 0; }
.modal-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; }
.modal-foot { padding: 0 24px 24px; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

/* ==========================================================================
   marketing / titulní stránka
   --------------------------------------------------------------------------
   Vlastní rytmus: větší mezery (96/128), jiná typová škála, kulaté CTA.
   Jedna značka, dva rytmy — nikdy druhá barva.
   ========================================================================== */
.mk { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.mk-sec { padding: 128px 0; }
.mk-sec:first-child { padding-top: 96px; }
.mk-sec + .mk-sec { border-top: 1px solid var(--border); }

.hero { text-align: center; max-width: 860px; margin: 0 auto; }
.hero .eyebrow { margin-bottom: 20px; }
.hero h1 {
  font-size: clamp(2.6rem, 6.2vw, 4.5rem);
  line-height: 1.04; letter-spacing: -.035em;
  margin-bottom: 24px;
}
.hero-sub { font-size: clamp(1.0625rem, 2vw, 1.3125rem); color: var(--text-2); max-width: 52ch; margin: 0 auto 32px; line-height: 1.5; }
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 96px; }
.door {
  display: flex; flex-direction: column; align-items: flex-start;
  text-align: left; padding: 32px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-4); cursor: pointer;
  transition: border-color 180ms var(--ease), background 180ms var(--ease);
}
.door:hover { border-color: var(--accent); background: var(--surface-raised); }
.door-ico { width: 40px; height: 40px; border-radius: var(--r-2); background: var(--accent-soft); color: var(--accent-on-soft); display: grid; place-items: center; margin-bottom: 20px; }
.door-ico svg { width: 20px; height: 20px; stroke-width: 1.8; }
.door h3 { font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: 10px; }
.door p { color: var(--text-2); font-size: .9375rem; margin-bottom: 20px; }
.door ul { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 9px; width: 100%; }
.door li { display: flex; gap: 10px; align-items: flex-start; font-size: .875rem; color: var(--text-2); }
.door li::before { content: "✓"; color: var(--t-high); font-weight: 700; flex: none; }
.door .btn { margin-top: auto; }

.mk-h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); letter-spacing: -.03em; text-align: center; margin-bottom: 20px; }
.mk-lead { font-size: 1.0625rem; color: var(--text-2); text-align: center; max-width: 56ch; margin: 0 auto 96px; }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; counter-reset: krok; }
.step { counter-increment: krok; }
.step::before {
  content: counter(krok);
  display: grid; place-items: center;
  width: 34px; height: 34px; margin-bottom: 18px;
  border-radius: var(--r-pill);
  background: var(--surface-inv); color: var(--text-inv);
  font-family: var(--font-mono); font-size: .8125rem; font-weight: 700;
}
.step h3 { margin-bottom: 8px; font-size: 1.0625rem; }
.step p { color: var(--text-2); font-size: .9375rem; }

.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; text-align: center; }
.stat-num { font-family: var(--font-mono); font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 700; letter-spacing: -.045em; line-height: 1; margin-bottom: 8px; }
.stat-lab { font-size: .8125rem; color: var(--text-3); }

.mk-foot { border-top: 1px solid var(--border); padding: 48px 0 64px; font-size: .8125rem; color: var(--text-3); }
.mk-foot p { max-width: 76ch; }

/* tarify */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.tier {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-3); padding: 24px;
}
.tier.hero-tier { border-color: var(--accent); }
.tier-flag { font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.tier-name { font-size: .75rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); }
.tier-price { font-family: var(--font-mono); font-size: 2rem; font-weight: 700; letter-spacing: -.05em; margin: 10px 0 2px; }
.tier-price small { font-size: .8125rem; font-weight: 400; color: var(--text-3); letter-spacing: 0; }
.tier ul { list-style: none; margin: 18px 0 24px; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: .875rem; }
.tier li { display: flex; gap: 9px; align-items: flex-start; color: var(--text-2); }
.tier li::before { content: "—"; color: var(--text-3); flex: none; font-family: var(--font-mono); }
.tier li.on::before { content: "✓"; color: var(--t-high); font-weight: 700; }
.tier .btn { margin-top: auto; }

/* Balíčky kreditů (.packs, .pack*) odešly s klientským režimem ve vlně 8. */

/* Odznak ověření v ČNB (.verif, .v-ceka, .v-zamitnuto, .v-prosle) odešel
   s vlnou 8 — ověřovat se přestalo, takže odznak nemohl být pravdivý. */

.ico-result {
  padding: 16px; border-radius: var(--r-2);
  border: 1px solid var(--border); background: var(--surface-raised);
  font-size: .875rem;
}
.ico-result.ok { border-color: var(--t-high); background: var(--t-high-soft); color: var(--t-high); }
.ico-result.bad { border-color: var(--t-low); background: var(--t-low-soft); color: var(--t-low); }
.ico-result strong { display: block; font-size: .9375rem; margin-bottom: 4px; }
.ico-result .det { color: var(--text-2); font-weight: 400; }

/* historie ověřování */
.trail { display: flex; flex-direction: column; }
.trail-item { display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding-bottom: 16px; position: relative; }
.trail-item:not(:last-child)::before { content: ""; position: absolute; left: 11.5px; top: 24px; bottom: 0; width: 1px; background: var(--border); }
.trail-mark {
  width: 23px; height: 23px; border-radius: 50%;
  display: grid; place-items: center; font-size: .6875rem; font-weight: 700;
  background: var(--surface-sunken); color: var(--text-2); border: 1px solid var(--border); z-index: 1;
}
.trail-mark.yes { background: var(--t-high-soft); color: var(--t-high); border-color: var(--t-high); }
.trail-mark.no { background: var(--t-low-soft); color: var(--t-low); border-color: var(--t-low); }
.trail-txt { font-size: .875rem; }
.trail-when { font-size: .75rem; color: var(--text-3); font-family: var(--font-mono); }

/* katalog poradců pro klienta */
.advisor-card {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 20px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-3);
  text-align: left; width: 100%; cursor: pointer;
  transition: border-color 120ms var(--ease), background 120ms var(--ease);
}
.advisor-card:hover { border-color: var(--accent); background: var(--surface-raised); }
.advisor-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }


/* ==========================================================================
   MYSLÁNKA — mapa pokrytí
   --------------------------------------------------------------------------
   Mřížka banka × oblast. Tady dřív byla rotující koule; nahradila ji tabulka,
   protože pravdivost jako vzdálenost od středu rotující koule se nedá přečíst,
   kdežto sytost pole ano — a hlavně: prázdné pole je informace, kterou koule
   neuměla ukázat vůbec.

   Buňka je tlačítko. Mřížka proto nemá jediný dekorativní prvek: co je vidět,
   se dá zmáčknout a otevře to Bázi s nastaveným filtrem.
   ========================================================================== */
.mapa-plocha {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  min-height: calc(100dvh - 56px);
  background: var(--canvas);
}
.mapa-hlavni { padding: 26px 28px 40px; min-width: 0; }

.mapa-hl {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 20px;
}
.mapa-hl h1 { font-size: 1.3rem; letter-spacing: -.012em; margin: 0 0 5px; }
.mapa-hl p { font-size: .8125rem; margin: 0; max-width: 62ch; }
.mapa-akce { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chip-dir {
  font-family: var(--font-mono); font-size: .72rem; color: var(--accent);
  background: var(--accent-soft);
  padding: 4px 9px; border-radius: var(--r-pill); white-space: nowrap;
}

.mrizka-obal { overflow-x: auto; padding-bottom: 4px; }
.mrizka {
  display: grid;
  grid-template-columns: minmax(136px, 1.5fr) repeat(var(--sloupcu, 5), minmax(60px, 1fr));
  gap: 3px; min-width: 540px;
}
.mr-hl {
  font-size: .625rem; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-3);
  padding: 0 4px 8px; text-align: center;
  background: transparent; border: 0; cursor: pointer;
  transition: color 120ms var(--ease);
}
.mr-hl:hover { color: var(--text); }
.mr-hl.vlevo { text-align: left; cursor: default; }
.mr-hl.vlevo:hover { color: var(--text-3); }

/* První sloupec se při posunu doprava drží na místě. Bez toho se na mobilu
   odscrolují názvy bank a v mřížce zbydou holá čísla, u kterých nikdo neví,
   čí jsou. Proto má i neprůhledné pozadí — jinak by pod ním prosvítaly buňky. */
.mr-hl.vlevo, .mr-banka {
  position: sticky; left: 0; z-index: 2;
  background: var(--canvas);
}

.mr-banka {
  display: flex; align-items: center; min-width: 0;
  padding: 0 9px 0 2px; border: 0;
  font-size: .78rem; color: var(--text-2); text-align: left; cursor: pointer;
  transition: color 120ms var(--ease);
}
.mr-banka span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-banka:hover { color: var(--text); }
.mr-banka.trh { color: var(--text); font-weight: 600; }

/* Sytost nese PODÍL doloženého, ne počet: jedno ověřené pravidlo je lepší
   opora než pět sporných, takže by počet jako sytost lhal. */
.bunka {
  position: relative; aspect-ratio: 1.75 / 1;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--r-1);
  background: var(--surface-raised); color: var(--text);
  font-family: var(--font-mono); font-size: .8125rem; font-weight: 600;
  cursor: pointer;
  transition: transform 110ms var(--ease), border-color 110ms var(--ease);
}
.bunka:hover { transform: scale(1.06); border-color: var(--border-strong); z-index: 1; }
.bunka:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; z-index: 1; }

.b-silna { background: color-mix(in srgb, var(--t-over) 26%, transparent); border-color: color-mix(in srgb, var(--t-over) 40%, transparent); }
.b-slaba { background: color-mix(in srgb, var(--t-over) 13%, transparent); border-color: color-mix(in srgb, var(--t-over) 25%, transparent); }
.b-spor  { background: color-mix(in srgb, var(--t-spor) 15%, transparent); border-color: color-mix(in srgb, var(--t-spor) 30%, transparent); }
.b-vyvr  { background: color-mix(in srgb, var(--t-vyvr) 13%, transparent); border-color: color-mix(in srgb, var(--t-vyvr) 28%, transparent); }
.b-bez   { background: color-mix(in srgb, var(--t-nove) 10%, transparent); color: var(--text-2); }

.bunka.prazdno {
  background: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--text) 4%, transparent) 5px 6px);
  border-style: dashed; color: var(--text-3); font-weight: 400; font-size: .9rem;
}
.bunka .roh {
  position: absolute; top: 3px; right: 4px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--t-spor);
}

/* Čerstvá báze na Supabase je prázdná — ukázku do ní appka nesype.
   Bez tohohle by zakladatel uviděl mřížku bez jediného řádku. */
.mapa-prazdno {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 30px 28px; max-width: 54ch;
  border: 1px dashed var(--border-strong); border-radius: var(--r-3);
}
.mapa-prazdno strong { font-size: 1rem; }
.mapa-prazdno p { margin: 0; color: var(--text-2); font-size: .875rem; }

.mapa-legenda {
  display: flex; flex-wrap: wrap; gap: 7px 18px;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border);
  font-size: .75rem; color: var(--text-3);
}
.legvz { display: inline-flex; align-items: center; gap: 6px; }
.legvz i { width: 15px; height: 11px; border-radius: 3px; border: 1px solid var(--border); display: inline-block; }
.legvz i.prazdno {
  background: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--text) 4%, transparent) 5px 6px);
  border-style: dashed;
}
.legvz-tip { margin-left: auto; color: var(--text-3); }

/* vlákna: stejné pozadí jako plocha, oddělená jen linkou — ustupují, nemizí */
.mapa-vlakna {
  border-left: 1px solid var(--border);
  padding: 18px 16px; overflow-y: auto;
  opacity: .66; transition: opacity 180ms var(--ease);
}
.mapa-vlakna:hover, .mapa-vlakna:focus-within { opacity: 1; }
.vl-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.vl-h .mono { font-size: .6875rem; color: var(--text-3); }

.vlakna { display: flex; flex-direction: column; gap: 2px; }
.vlakno {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 8px 10px 8px 11px;
  background: transparent; border: 0;
  border-left: 2px solid var(--vl, var(--border-strong));
  border-radius: 0 var(--r-1) var(--r-1) 0;
  cursor: pointer; transition: background 120ms var(--ease);
}
.vlakno:hover { background: var(--surface-raised); }
.vlakno-t { font-size: .8125rem; font-weight: 600; line-height: 1.3; }
.vlakno-x {
  font-size: .75rem; color: var(--text-3); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.v-overeno { --vl: var(--t-over); }
.v-padlo { --vl: var(--t-vyvr); }
.v-stara { --vl: var(--t-spor); }
.v-osamele { --vl: var(--t-nove); }
.v-rozpor { --vl: var(--t-vyvr); }
.v-dira { --vl: var(--accent); }
.v-tenka { --vl: var(--t-nove); }
/* Zpráva z terénu: pravidlo ještě platí, ale jednomu poradci u klienta
   neprošlo. Barva sporného, ne vyvráceného — rozhodnuto to není. */
.v-teren { --vl: var(--t-spor); }

@media (max-width: 1280px) { .mapa-plocha { grid-template-columns: minmax(0, 1fr) 262px; } }
@media (max-width: 960px) {
  .mapa-plocha { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .mapa-hlavni { padding: 20px 16px 28px; }
  .mapa-vlakna { opacity: 1; border-left: 0; border-top: 1px solid var(--border); }
  .legvz-tip { margin-left: 0; width: 100%; }
}

/* stavitel případu */
.volby { display: flex; flex-wrap: wrap; gap: 7px; }
.volba {
  padding: 7px 13px;
  border: 1px solid var(--border-strong); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text-2);
  font-size: .8125rem; cursor: pointer; text-align: left;
  transition: border-color 120ms var(--ease), background 120ms var(--ease), color 120ms var(--ease);
}
.volba:hover { border-color: var(--text-3); color: var(--text); }
.volba.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-on-soft); font-weight: 500; }

.riziko { display: flex; flex-direction: column; gap: 3px; font-size: .8125rem; padding-left: 11px; border-left: 3px solid var(--rz); }
.riziko-h { font-size: .625rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--rz); }
.riziko strong { font-weight: 600; }
.riziko span:last-child { color: var(--text-2); line-height: 1.5; }
.r-stop { --rz: var(--t-vyvr); }
.r-pozor { --rz: var(--t-spor); }
.r-hlidat { --rz: var(--t-nove); }

/* srovnávací tabulka metodik */
table.srov td, table.srov th { vertical-align: top; }
table.srov tbody tr { cursor: default; }
table.srov tbody tr:hover { background: var(--surface-raised); }
tr.srov-sek td {
  background: var(--surface-sunken);
  font-size: .6875rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-3); padding: 9px 12px; height: auto;
}
table.husta tbody tr.srov-sek:hover { background: var(--surface-sunken); cursor: default; }




/* původ a kanál — rozdíl mezi „opsáno z metodiky" a „slyšel jsem od kolegy" musí být
   vidět v seznamu, ne jen ve skrytém prioru */
.puvod {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: var(--r-1);
  font-size: .6875rem; font-weight: 500;
  background: var(--surface-sunken); color: var(--text-2);
}
.p-metodika { background: var(--t-high-soft); color: var(--t-over); }
.p-doslech { background: var(--t-unknown-soft); color: var(--t-nove); font-style: italic; }

.chip-neurcena { color: var(--t-nove); border-color: var(--border-strong); background: var(--surface); font-style: italic; }
.chip-kanal { color: var(--accent-on-soft); border-color: var(--accent-soft); background: var(--accent-soft); }

/* v detailu je „kdo a kde" první věc, ne až pod matematikou procenta */
.kdo-kde { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.kdo-kde-b {
  padding: 6px 14px; border-radius: var(--r-2);
  border: 1px solid var(--border-strong); background: var(--surface);
  font-size: .9375rem; font-weight: 600; color: var(--text); cursor: pointer;
}
.kdo-kde-b:hover { border-color: var(--accent); color: var(--accent); }
.kdo-kde-b.neurcena { color: var(--t-nove); font-style: italic; font-weight: 500; cursor: default; }
.kdo-kde-k { padding: 6px 12px; border-radius: var(--r-2); background: var(--accent-soft); color: var(--accent-on-soft); font-size: .8125rem; font-weight: 600; }
.kdo-kde-z { font-size: .8125rem; color: var(--text-3); }

/* ==========================================================================
   BANKY — jistota přiřazení
   ========================================================================== */
.jist {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: var(--r-pill);
  font-size: .75rem; font-weight: 600; white-space: nowrap;
  text-transform: none; letter-spacing: 0;
}
.jist.maly { font-size: .6875rem; padding: 1px 8px; }
.jist::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.j-ok { color: var(--t-over); background: var(--t-high-soft); }
.j-mozna { color: var(--t-spor); background: var(--t-mid-soft); }
.j-ne { color: var(--t-nove); background: var(--t-unknown-soft); }

.banky-mrizka { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.banka-karta {
  display: block; text-align: left; width: 100%;
  padding: 18px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-3);
  cursor: pointer;
  transition: background 120ms var(--ease), border-color 120ms var(--ease);
}
.banka-karta:hover { background: var(--surface-raised); border-color: var(--accent); }
.banka-hlava { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.banka-nazev { font-weight: 600; font-size: 1rem; letter-spacing: -.01em; }
.banka-cisla { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .8125rem; color: var(--text-2); }
.banka-cisla b { font-weight: 700; color: var(--text); }

.prod-radek {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px;
  background: var(--surface-raised); border-radius: var(--r-2);
}

@media (max-width: 860px) { .banky-mrizka { grid-template-columns: minmax(0, 1fr); } }


/* ==========================================================================
   VLNA 2 — hustota
   --------------------------------------------------------------------------
   Jakmile uživatel začne skrolovat, srovnává z paměti a chybuje.
   Řádek 32 px a zebra místo rámečků → všechny produkty bez skrolu.
   ========================================================================== */
.segment { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--r-2); overflow: hidden; flex: none; }
.seg {
  padding: 7px 15px; border: 0; border-right: 1px solid var(--border);
  background: var(--surface); color: var(--text-2);
  font-size: .8125rem; font-weight: 500; cursor: pointer;
  transition: background 120ms var(--ease), color 120ms var(--ease);
}
.seg:last-child { border-right: 0; }
.seg:hover { background: var(--surface-raised); color: var(--text); }
.seg.on { background: var(--accent); color: var(--on-accent); font-weight: 600; }

table.husta { font-size: .8125rem; }
table.husta th { padding: 8px 10px; }
table.husta td { padding: 0 10px; height: 32px; border-bottom: 0; vertical-align: middle; }
table.husta tbody tr:nth-child(odd of :not(.srov-sek)) { background: color-mix(in srgb, var(--text) 2.5%, transparent); }
table.husta tbody tr:hover { background: var(--accent-soft); cursor: pointer; }
table.husta .srov-nazev { color: var(--text-2); white-space: nowrap; max-width: 250px; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-ui); }
.sticky-l { position: sticky; left: 0; z-index: 1; background: var(--surface); }
table.husta tbody tr:hover .sticky-l { background: var(--accent-soft); }
table.husta thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); }
table.husta thead th.sticky-l { z-index: 3; }
tr.srov-sek td { z-index: 1; }

.srov-b { font-weight: 700; color: var(--text); font-size: .8125rem; text-transform: none; letter-spacing: 0; }
.srov-p { font-weight: 400; color: var(--text-3); font-size: .6875rem; text-transform: none; letter-spacing: 0; margin-top: 1px; }
.srov-d { font-weight: 400; color: var(--text-3); font-size: .625rem; text-transform: none; letter-spacing: 0; }
.srov-btn { padding: 0 6px; min-height: 20px; margin-top: 4px; font-size: .75rem; }

/* tři různé prázdné buňky — „nevím" se nesmí číst jako „nejde" */
.b-chybi, .b-neni { color: var(--text-3); font-style: italic; font-size: .75rem; }
.b-znak { opacity: .55; margin-right: 2px; }
.b-ne { color: var(--t-vyvr); }
.b-omez { color: var(--t-spor); }
.b-ano { color: var(--t-over); }

.souhrn {
  display: flex; gap: 20px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 20px;
  background: var(--surface-raised); border-radius: var(--r-2);
  font-size: .875rem; color: var(--text-2);
}
.souhrn b { color: var(--text); font-weight: 700; }

/* pohled podle tématu */
.tema-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; }
.tema-seznam {
  display: flex; flex-direction: column; gap: 1px;
  max-height: calc(100dvh - 230px); overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--r-3);
  background: var(--surface); padding: 6px;
}
.tema-p {
  display: flex; flex-direction: column; gap: 1px; text-align: left;
  padding: 7px 10px; border: 0; border-radius: var(--r-1);
  background: transparent; color: var(--text-2);
  font-size: .8125rem; cursor: pointer; line-height: 1.3;
}
.tema-p:hover { background: var(--surface-raised); color: var(--text); }
.tema-p.on { background: var(--accent-soft); color: var(--accent-on-soft); font-weight: 600; }
.tema-p-s { font-size: .625rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); }

.tema-banky { display: flex; flex-direction: column; gap: 1px; }
.tema-b {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 16px; align-items: center;
  padding: 11px 12px; border-radius: var(--r-1);
}
.tema-b:nth-child(odd) { background: color-mix(in srgb, var(--text) 2.5%, transparent); }
.tema-b-h { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tema-b-n {
  font-weight: 600; font-size: .9375rem; text-align: left;
  background: 0; border: 0; padding: 0; color: var(--text); cursor: pointer;
}
.tema-b-n:hover { color: var(--accent); }
.tema-b-n.neurcena { color: var(--text-3); font-style: italic; font-weight: 500; cursor: default; }
.tema-b-v { font-family: var(--font-mono); font-size: .875rem; }

/* ==========================================================================
   VLNA 3 — paleta a klávesnice
   ========================================================================== */
.hledatko { gap: 7px; }
kbd {
  font-family: var(--font-mono); font-size: .6875rem;
  padding: 1px 5px; border: 1px solid var(--border-strong); border-radius: 4px;
  background: var(--surface-raised); color: var(--text-3);
}

.paleta { width: min(620px, 100%); padding: 0; overflow: hidden; }
.paleta-vstup {
  width: 100%; border: 0; border-bottom: 1px solid var(--border);
  border-radius: 0; padding: 18px 20px; font-size: 1.0625rem; background: var(--surface);
}
.paleta-vstup:focus { box-shadow: none; border-color: var(--border); }
.paleta-sez { max-height: 46vh; overflow-y: auto; padding: 6px; }
.paleta-p {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 10px; align-items: center; width: 100%; text-align: left;
  padding: 9px 12px; border: 0; border-radius: var(--r-1);
  background: transparent; color: var(--text); cursor: pointer; font-size: .875rem;
}
.paleta-p:hover, .paleta-p.on { background: var(--accent-soft); color: var(--accent-on-soft); }
.paleta-i { color: var(--text-3); text-align: center; font-family: var(--font-mono); }
.paleta-p.on .paleta-i { color: var(--accent-on-soft); }
.paleta-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.paleta-s { font-size: .75rem; color: var(--text-3); white-space: nowrap; }
.paleta-p.on .paleta-s { color: var(--accent-on-soft); opacity: .75; }
.paleta-prazdno { padding: 24px; text-align: center; color: var(--text-3); font-size: .875rem; }
.paleta-pata {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  padding: 10px 16px; border-top: 1px solid var(--border);
  background: var(--surface-raised); font-size: .6875rem; color: var(--text-3);
}

/* tichá karta — pruh nese jen to, co vyžaduje pozornost */
.rule-tichy { border-left-width: 1px; border-left-color: var(--border); padding-left: 17px; }
.rule-tichy:hover { border-left-color: var(--border-strong); }

@media (max-width: 1000px) {
  .tema-layout { grid-template-columns: minmax(0, 1fr); }
  .tema-seznam { max-height: 220px; }
  .tema-b { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (max-width: 720px) { .hledatko kbd { display: none; } }


/* ==========================================================================
   VLNA 4 — důvěra a původ
   ========================================================================== */
.ostav {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--r-1);
  font-size: .6875rem; font-weight: 600; white-space: nowrap;
}
.o-ok { color: var(--t-over); background: var(--t-high-soft); }
.o-stara { color: var(--t-spor); background: var(--t-mid-soft); }
.o-spatna { color: var(--t-vyvr); background: var(--t-low-soft); }

/* Dvakrát po termínu = ztlumit. Periferní vidění to zachytí dřív než ikonu. */
.rule-nedoveryhodny .rule-title,
.rule-nedoveryhodny .rule-claim { opacity: .6; }

.fronta-sek { margin-bottom: 40px; }
.fronta-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.fronta-n {
  font-size: .8125rem; font-weight: 700; color: var(--text-3);
  padding: 1px 8px; border-radius: var(--r-pill); background: var(--surface-raised);
}
.fronta-r { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 14px; align-items: center; }
.fronta-akce { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }

/* poznámka poradce — jiná plocha, aby se nikdy nespletla s metodikou */
.panel.poznamky { background: var(--award-soft); border-color: color-mix(in srgb, var(--award) 25%, transparent); }
.poznamka {
  padding: 11px 13px; margin-bottom: 8px;
  background: var(--surface); border-radius: var(--r-2);
  border-left: 2px solid var(--award);
  font-size: .875rem;
}
.poznamka-h { display: flex; align-items: center; gap: 7px; font-size: .75rem; color: var(--text-3); margin-bottom: 4px; }
.poznamka-h strong { color: var(--text-2); font-weight: 600; }
.poznamka-h svg { width: 13px; height: 13px; stroke-width: 2; color: var(--award); }

@media (max-width: 900px) {
  .fronta-r { grid-template-columns: minmax(0, 1fr); }
  .fronta-akce { flex-direction: row; flex-wrap: wrap; align-items: center; }
}


/* ==========================================================================
   PŘÍPAD VLASTNÍMI SLOVY
   --------------------------------------------------------------------------
   Šestnáct polí je pořádek pro aplikaci, ne pro člověka mezi schůzkami.
   Odstavec je proto první, co poradce vidí. Všechno, co z něj aplikace
   vyrozuměla, musí ale na první pohled vypadat jinak než to, co jí poradce
   opravdu řekl — od toho je přerušovaný rám a citace pod polem.
   ========================================================================== */
.zadani textarea { min-height: 104px; font-size: .9375rem; line-height: 1.55; }

/* Domyšlená hodnota nesmí splynout se zadanou. Přerušovaná linka to řekne
   dřív, než člověk stihne přečíst citaci pod polem. */
.volba.on.odvozeno {
  border-style: dashed; border-color: var(--t-spor);
  background: var(--t-mid-soft); color: var(--t-spor);
}
input.odvozeno { border-style: dashed; border-color: var(--t-spor); }
.hint-odvozeno { font-size: .72rem; color: var(--t-spor); font-style: italic; }

.pochopeno { display: flex; flex-direction: column; gap: 10px; }
.pochop { padding: 9px 11px; background: var(--surface-raised); border-radius: var(--r-2); }
.pochop-h { display: flex; align-items: center; gap: 8px; }
.pochop-h strong { font-size: .875rem; font-weight: 600; flex: 1 1 auto; min-width: 0; }
.pochop-x { margin-left: auto; flex: none; opacity: .5; }
.pochop-x:hover { opacity: 1; color: var(--t-vyvr); }
.pochop-x svg { width: 13px; height: 13px; }
.pochop-o { font-size: .72rem; color: var(--text-3); margin-top: 2px; }
.pochop-c {
  font-size: .78rem; color: var(--text-2); margin-top: 5px;
  padding-left: 8px; border-left: 2px solid var(--border-strong);
  font-family: var(--font-doc);
}

/* Otázky na klienta jsou seřazené podle dopadu, ne podle pořadí polí —
   proto číslovaný seznam, ne odrážky. */
.doptat { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; }
.doptat li { font-size: .875rem; line-height: 1.5; }
.doptat li::marker { color: var(--text-3); font-family: var(--font-mono); font-size: .8125rem; }

/* Stopka odvozená z domyšleného údaje je pořád stopka — ale poradce má vědět,
   že stojí na tom, co aplikace vyrozuměla, ne na tom, co jí řekl. */
.riziko.r-odvozene { border-left-style: dashed; }
.riziko .riziko-p {
  margin-top: 4px; font-size: .72rem; font-style: italic;
  color: var(--text-3); line-height: 1.45;
}

@media (max-width: 1000px) {
  .zadani textarea { min-height: 128px; }
}

/* ==========================================================================
   VLNA 5 — živá báze
   --------------------------------------------------------------------------
   Vlna 4 uměla říct „tohle už asi neplatí" a nenabídla k tomu žádnou akci.
   Tady se z fronty stane práce, která jde odbýt za minutu: co se mění, proč,
   a dvě tlačítka. Diff je schválně strohý — poradce potřebuje vidět rozdíl,
   ne dokument.
   ========================================================================== */
.navrh {
  padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--t-spor); border-radius: var(--r-2);
}
.navrh-h { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 7px; }
.navrh-t {
  flex: 1 1 auto; min-width: 0; text-align: left;
  background: 0; border: 0; padding: 0; cursor: pointer;
  font-size: .9375rem; font-weight: 600; color: var(--text); letter-spacing: -.01em;
}
.navrh-t:hover { color: var(--accent); }
.navrh-d { font-family: var(--font-doc); font-size: .9375rem; line-height: 1.5; color: var(--text-2); margin-bottom: 10px; }

/* Rozdíl po řádcích: co bylo je přeškrtnuté a ztlumené, co bude svítí. */
.diff { display: flex; flex-direction: column; gap: 5px; }
.diff-r {
  display: grid; grid-template-columns: 130px minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px; align-items: baseline; font-size: .8125rem;
}
.diff-p { color: var(--text-3); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.diff-z { color: var(--text-3); text-decoration: line-through; }
.diff-na { color: var(--t-over); font-weight: 500; }

.trail-mark.zmena { background: var(--t-mid-soft); color: var(--t-spor); border-color: var(--t-spor); }

/* Vyřazené pravidlo pořád existuje — a nesmí se dát splést s platným. */
.note-zneplatneno { border-left-color: var(--t-vyvr); background: var(--t-low-soft); }
.note-zneplatneno strong { color: var(--t-vyvr); }

@media (max-width: 720px) {
  .diff-r { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .diff-r + .diff-r { margin-top: 7px; }
}

/* Běh bez přihlášeného účtu se musí přiznat: data zůstávají v prohlížeči
   a nikdo další je neuvidí. Bez téhle cedulky vypadá zkušební režim úplně
   stejně jako ostrý provoz — a to je ten nejdražší omyl, jaký tu může vzniknout. */
.zkusebni {
  padding: 3px 9px; border-radius: var(--r-pill);
  border: 1px dashed var(--t-spor); color: var(--t-spor);
  font-size: .6875rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
}
/* Cedulka se dřív na telefonu schovávala — a to je přesně obráceně, než má
   být: zkušební režim znamená „data zůstávají jen v tomhle prohlížeči a
   nikdo další je neuvidí", což je věc, kterou poradce potřebuje vědět tím
   spíš, když píše u klienta. V liště stojí až za rozpěrkou, takže by na
   úzké obrazovce odjela mimo; `order` ji dá dopředu. */
@media (max-width: 860px) { .zkusebni { order: -1; margin-right: 12px; } }

/* ==========================================================================
   responzivita
   ========================================================================== */
@media (max-width: 1100px) {
  .chat-layout { grid-template-columns: minmax(0, 1fr); }
  .chat-side { display: none; }
  .grid-side { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .doors, .steps, .tiers, .packs { grid-template-columns: minmax(0, 1fr); }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-sec { padding: 72px 0; }
  .mk-sec:first-child { padding-top: 48px; }
  .mk-lead { margin-bottom: 48px; }
  .doors { margin-top: 48px; }
}
@media (max-width: 860px) {
  /* Bezpečná zóna telefonu. Bez `viewport-fit=cover` v hlavičce a bez těchhle
     tří míst sedí spodní lišta pod domovským indikátorem iPhonu: vypadá to
     správně, ale spodní řádka tlačítek se nedá zmáčknout. `env()` je všude
     se záložní nulou — bez ní by celý `calc()` spadl tam, kde prohlížeč
     bezpečné zóny nezná, a lišta by zmizela docela. */
  :root { --rail-w: 0px; --spodek: env(safe-area-inset-bottom, 0px); }
  #shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "top" "main"; grid-template-rows: 56px auto minmax(0, 1fr); padding-bottom: calc(62px + var(--spodek)); }
  .rail {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    height: calc(62px + var(--spodek)); padding-bottom: var(--spodek);
    flex-direction: row; align-items: center; justify-content: space-around;
    padding-left: 4px; padding-right: 4px; border-right: 0; border-top: 1px solid var(--border); z-index: 30; gap: 0;
  }
  .rail-sec, .rail-foot { display: none; }
  /* Pět položek místo deseti: zbytek menu je v sheetu „Více". Přepíná se to
     tady, ne v JavaScriptu — appka nikde nečte šířku okna, takže při otočení
     telefonu není co přepočítat. */
  .navbtn.jen-sirsi { display: none; }
  .navbtn.vice { display: flex; }
  .navbtn { flex-direction: column; gap: 3px; padding: 8px 4px; font-size: .625rem; font-weight: 600; text-align: center; justify-content: center; }
  /* Číslo u položky se do sloupečku nevejde — vyjma fronty, která je na
     telefonu schovaná ve „Více" a bez čísla by se na ni zapomnělo. */
  .navbtn .count { display: none; }
  .navbtn.vice .count {
    display: block; position: absolute; top: 5px; left: 50%; margin-left: 4px;
    min-width: 16px; padding: 1px 4px; border-radius: 9px;
    background: var(--accent); color: var(--on-accent);
    font-size: .5625rem; line-height: 1.35; text-align: center;
  }
  .navbtn.vice { position: relative; }
  .navbtn svg { width: 20px; height: 20px; }
  main { height: auto; overflow: visible; }
  body.landing #shell { padding-bottom: 0; }
  .chat-layout { height: auto; min-height: calc(100dvh - 180px); }
  .chat-scroll { overflow: visible; padding: 20px 16px 8px; }
  /* iOS při zaostření na pole menší než 16 px nazoomuje celou stránku a sám
     ji nevrátí zpátky — poradce pak zbytek rozhovoru s klientem posouvá
     prstem. Je to levnější než tomu bránit přes `maximum-scale`, které
     zároveň zakáže přiblížení i tomu, kdo ho opravdu potřebuje.
     `.zadani textarea` má vlastní velikost, proto je tu zvlášť. */
  input[type="text"], input[type="search"], input[type="email"], input[type="tel"],
  select, textarea, .zadani textarea { font-size: 16px; }
  .chat-dock { position: sticky; bottom: calc(62px + var(--spodek)); padding: 12px 16px 14px; }
  .wrap { padding: 20px 16px 48px; }
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .drawer { width: 100vw; }
  /* Prst není kurzor. Malá tlačítka mají na myš 32 px, což je na dotek pod
     hranicí, kde se dá trefit napoprvé — a ve frontě stojí tři vedle sebe. */
  .btn-sm { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  .iconbtn { width: 44px; height: 44px; }
  /* Vlákna „Co stojí za pozornost" ustupují průhledností a vracejí se při
     najetí myší. Na telefonu žádné najetí není, takže by zůstala ztlumená
     navždy — a na úzké obrazovce jsou až pod mapou, kde nic neruší. */
  .mapa-vlakna { opacity: 1; border-left: 0; border-top: 1px solid var(--border); }
  /* Panel vedle chatu se pod 1100 px vypínal celý, a s ním i nezodpovězené
     dotazy, které jinde na telefonu nejsou vidět (`.rail-foot` je skrytá).
     Tady už má layout automatickou výšku, takže se vejde pod chat. */
  .chat-side { display: block; border-left: 0; border-top: 1px solid var(--border); }
  /* Hlášky vyskakovaly 28 px nade dnem, tedy uprostřed spodní lišty: zakryly
     právě to tlačítko, kterým člověk akci vyvolal. */
  .toast { bottom: calc(62px + var(--spodek) + 14px); }
  /* Detail jde přes celou obrazovku, takže jeho patička leží na indikátoru
     stejně jako lišta — a jsou v ní hlasovací tlačítka i pole „co se stalo". */
  .drawer-foot { padding-bottom: calc(14px + var(--spodek)); }
  .panel { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: 120ms !important; }
}
@media print {
  .rail, .topbar, .brandbar, .chat-dock, .drawer-foot { display: none !important; }
  /* Tisk je jediná cesta k PDF, kterou appka má (viz `vytiskni`). Na papír
     patří obsah báze, ne ovládání: filtry, poznámky o ukázkových datech ani
     překryv modalu, ze kterého se tisk spustil. */
  .toolbar, .note, .page-head > .btn, .scrim, .modal, .overlay { display: none !important; }
  /* Pravidlo rozpůlené mezi dvě stránky se čte mizerně a v PDF vypadá jako
     chyba. Radši zůstane dole bílé místo. */
  .rule, .panel { break-inside: avoid; page-break-inside: avoid; }
  .rule { border: 1px solid #D6CFBD !important; margin-bottom: 8px; }
  .wrap { max-width: none; padding: 0; }
  /* Odkaz v tiskové podobě nikam nevede, ale adresa pravidla ano — je to
     jediný způsob, jak se od papíru dostat zpátky do aplikace. */
  a[href^="#/"]::after { content: " (" attr(href) ")"; font-size: .75em; color: #5A6072; }
  @page { margin: 14mm; }
  /* Na papíře je tmavá paleta nečitelná a stojí tunu toneru. Tiskne se proto
     ve světlé variantě — jediné místo v souboru, kde světlé barvy zůstaly. */
  :root {
    --canvas: #FFFFFF; --surface: #FFFFFF; --surface-raised: #F5F2EA; --surface-sunken: #ECE7D8;
    --surface-inv: #1E2A4A; --border: #D6CFBD; --border-strong: #A9A28E;
    --text: #1B2238; --text-2: #3F4558; --text-3: #5A6072; --text-inv: #FFFFFF; --on-accent: #FFFFFF;
    --accent: #8A6A2F; --accent-soft: #F1EAD6; --accent-on-soft: #5E4719; --award: #3A4A8C; --award-soft: #E8EBF7;
    --t-high: #157F3C;  --t-high-soft: #E2F4E9;
    --t-mid: #B45309;   --t-mid-soft:  #FBEEDC;
    --t-low: #C02626;   --t-low-soft:  #FBE8E8;
    --t-unknown: #6E6E7B; --t-unknown-soft: #EFEFF4;
    --t-nove: #6E6E7B; --t-vyvr: #C02626; --t-spor: #B45309; --t-prav: #4E8F3F; --t-over: #157F3C;
    --scrim: 27 34 56;
    color-scheme: light;
  }
  body { background: #fff; color: #1B2238; }
}
/* Dialog „osobní údaje v textu“ (osobni-udaje.js) */
.udaje-sez { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }

/* Zkušenosti u banky */
.zk-filtr { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.zk-sez { display: flex; flex-direction: column; gap: 10px; }
.zk { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--r-3); padding: 14px 16px; }
.zk-h { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: .75rem; color: var(--text-3); margin-bottom: 6px; }
.zk-akce { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.pr-sez { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.pr-karta { display: flex; flex-direction: column; gap: 6px; text-align: left; width: 100%;
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--r-3);
  padding: 14px 16px; color: inherit; font: inherit; cursor: pointer; }
.pr-karta:hover { border-color: var(--text-2); }
.pr-t { font-weight: 600; }
.pr-x { color: var(--text-2); font-size: .875rem; line-height: 1.5; }
.pr-m { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .75rem; }
.pr-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.zk-form { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.zk-form textarea { width: 100%; resize: vertical; }
.zk-form-radek { display: flex; gap: 8px; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.zk-form-radek select { width: auto; }

/* ---------- Domů ---------- */
.dom { max-width: 1080px; margin: 0 auto; padding: 56px 32px 48px; }
.dom-vstup { max-width: 720px; margin: 0 auto 40px; }
.dom-vstup h1 { font-size: 2.4rem; margin-bottom: 10px; }
.dom-vstup .chat-box { margin-top: 18px; }
.dom-vstup .suggest { margin-top: 14px; }
.dom-mrizka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; }
.dom-sirsi { grid-column: 1 / -1; }
.dom-blok { min-width: 0; }
.dom-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.dom-h h2 { font-size: 1.15rem; }
.dom-banky { display: flex; flex-wrap: wrap; gap: 8px; }
.dom-banka {
  display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer;
  padding: 12px 16px; min-width: 150px; border: 1px solid var(--border); border-radius: var(--r-3);
  background: var(--surface); color: var(--text);
}
.dom-banka:hover { border-color: var(--accent); background: var(--surface-raised); }
.dom-banka-n { font-weight: 600; }
.dom-banka-c { font-size: .8125rem; color: var(--text-3); }
.dom-cekani { display: flex; flex-direction: column; gap: 8px; }
.dom-dlazdice {
  display: flex; align-items: center; gap: 16px; text-align: left; cursor: pointer;
  padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--r-3);
  background: var(--surface); color: var(--text);
}
.dom-dlazdice:hover { border-color: var(--accent); background: var(--surface-raised); }
.dom-dlazdice b { font-size: 1.6rem; font-weight: 600; min-width: 2.2ch; color: var(--accent); }
.dom-dlazdice span { display: flex; flex-direction: column; font-weight: 600; }
.dom-dlazdice small { font-weight: 400; color: var(--text-3); font-size: .8125rem; }
.chat-jedno { grid-template-columns: minmax(0, 1fr); }
.chat-radek { margin-bottom: 8px; }
@media (max-width: 860px) {
  .dom { padding: 28px 16px 32px; }
  .dom-vstup h1 { font-size: 1.8rem; }
  .dom-mrizka { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- záložky Báze ---------- */
.zalozky { display: flex; gap: 4px; margin: 0 0 22px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.zalozky::-webkit-scrollbar { display: none; }
.zalozka {
  flex: none; background: transparent; border: 0; border-bottom: 2px solid transparent;
  padding: 10px 16px; margin-bottom: -1px; min-height: 44px;
  color: var(--text-2); font: 500 .9375rem var(--font-ui); cursor: pointer;
}
.zalozka:hover { color: var(--text); }
.zalozka.on { color: var(--accent-on-soft); border-bottom-color: var(--accent); font-weight: 600; }

/* ---------- zásluhy a odznaky (dobrovolné zviditelnění) ---------- */
.zaslu-hlava { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.zaslu-titul {
  display: inline-block; padding: 3px 10px; border-radius: var(--r-1);
  background: var(--accent-soft); color: var(--accent-on-soft);
  font-size: .75rem; font-weight: 600;
}
.zaslu-velky { font-family: var(--font-display); font-size: 1.3rem; padding: 4px 14px; }
.zaslu-kolega { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.zaslu-spec { flex: 1 1 100%; font-size: .8125rem; color: var(--text-3); }
.zaslu-prepinac { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.odznaky { display: flex; flex-wrap: wrap; gap: 8px; }
.odznak {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface-raised); font-size: .8125rem;
}
.odznak.off { opacity: .4; }
.odznak em { font-style: normal; }
.xp { margin-top: 14px; }
.xp-bar { height: 6px; border-radius: var(--r-pill); background: var(--surface-sunken); overflow: hidden; }
.xp-bar i { display: block; height: 100%; background: var(--accent); border-radius: var(--r-pill); transition: width 320ms var(--ease); }
.xp-lab { display: flex; justify-content: space-between; gap: 12px; font-size: .75rem; color: var(--text-3); margin-top: 6px; }

/* Pět záložek Báze se na 375 px nevejdou vedle sebe. Zúžit mezery a odsazení,
   ať je vidět i poslední (Poradna), místo skrytí za posunem. */
@media (max-width: 479px) {
  .zalozky { gap: 0; }
  .zalozka { padding-left: 9px; padding-right: 9px; font-size: .875rem; }
}