/* Fediverse katalog — paleta navázaná na téma TangerineUI Lagoon
   (světlé, hlavní accent modrá #1883FF). Grid karet inspirovaný SportsBots. */

:root {
  --bg: #F2F5F8;            /* chladná téměř-bílá (laděná k modrému accentu) */
  --bg-panel: #E7EDF3;      /* header / footer / sidebar */
  --bg-card: #ffffff;       /* karty */
  --bg-card-hover: #F4F8FC; /* hover karet */
  --border: #D7E0E9;        /* chladná modrošedá linka (dříve levandulová) */
  --text: #1E2A38;          /* chladný tmavý slate */
  --text-strong: #0A1622;   /* skoro černá, chladná */
  --text-dim: #5C6B7A;      /* chladná šedá (dříve levandulová) */
  --accent: #1883FF;        /* color-accent — modrá (aktivní tlačítka) */
  --accent-focus: #0F74EA;  /* tmavší modrá pro hover/aktivní */
  --accent-bg: #E7F1FF;     /* světlý modrý nádech */
  --on-accent: #ffffff;     /* text na accentu */

  /* Barvy rodin — kategorické, ztmavené pro kontrast bílého textu na bílých kartách */
  --fam-sport: #d8502f;
  --fam-news: #2e84e0;
  --fam-culture: #a64dff;
  --fam-science_tech: #1d9c8e;
  --fam-lifestyle: #ff6f61;   /* coral — veselejší než původní amber */
  --fam-business: #4f9e34;
  --fam-humor: #ec3d86;
  --fam-government: #6b7a8f;
}

/* Dark mód — TangerineUI @media (prefers-color-scheme: dark).
   Respektuje systémové nastavení uživatele jako samotný Mastodon.
   Rodinné barvy zůstávají stejné (kategorické, bílý text na nich drží i na tmavu). */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0D1117;            /* chladná modročerná plocha (dříve plochá #111) */
    --bg-panel: #131C26;      /* header / footer / sidebar */
    --bg-card: #161F2B;       /* karty — světlejší než plocha (správná elevace) */
    --bg-card-hover: #1E2935; /* hover karet */
    --border: #2A3642;        /* chladná linka */
    --text: #C7D2DE;          /* chladná světlá (dříve levandulová) */
    --text-strong: #F2F6FB;   /* skoro bílá, chladná */
    --text-dim: #7B8896;      /* chladná šedá */
    --accent: #4D9DFF;        /* color-accent — jasná modrá pro tmavé pozadí */
    --accent-focus: #6FB2FF;  /* color-accent-focus */
    --accent-bg: #15263D;     /* tmavý modrý nádech */
    --on-accent: #06121F;     /* tmavý text na jasném accentu (lepší kontrast než bílá) */
  }
}

* { box-sizing: border-box; }

/* `hidden` atribut musí přebít display:flex/grid u .loading-state, .empty-state,
   .tag-suggestions apod. (UA pravidlo má nižší specificitu než třídy). */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.45;
}

a { color: inherit; text-decoration: none; }

/* ============================================================================
   STRUKTURA SOUBORU (v pořadí, jak bloky jdou za sebou)
   Globální: paleta/témata · header · navbar · layout · sidebar · cards ·
     loading · tabs · sort · slice · dimming · tag filtr · accordion ·
     hover preview · detail modal · footer · media queries (tablet/mobil)
   Pohledy:  O Fedíku · Vyhledávání · Instance · Odkazy · Začni tady (onboarding) ·
     Aplikace · Slovníček · Nástroje · Statistiky
   Pozn.: pořadí pravidel je ZÁMĚRNĚ zachováno kvůli kaskádě — tohle je jen mapa.
   ============================================================================ */

/* ---------- Header (hero s textovým překryvem) ---------- */
.site-header {
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
}
.hero {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 24px;
}
.hero-link {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.hero-img {
  display: block;
  width: 100%;
  height: clamp(200px, 26vw, 300px);
  object-fit: cover;
  object-position: center 40%;
  border-radius: 16px;
  border: 1px solid var(--border);
}
/* Scrim pro čitelnost textu přes obrázek (tmavší rohy TL a BR) */
.hero::after {
  content: "";
  position: absolute;
  inset: 18px 24px;
  border-radius: 16px;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 42%),
    linear-gradient(315deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 38%);
}
.hero-overlay {
  position: absolute;
  z-index: 2;
  max-width: 70%;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.55);
}
.hero-overlay-tl { top: 38px; left: 44px; }
.hero-overlay-tr { top: 38px; right: 44px; }
.hero-overlay-bl { left: 44px; bottom: 38px; }
.hero-overlay-br { right: 44px; bottom: 38px; text-align: right; }

/* Přepínač jazyka CZ | EN — vpravo nahoře v hlavičkovém obrázku */
.lang-switch { display: flex; align-items: center; gap: 6px; }
/* ---------- Navigace pod herem (sticky lišta, místo tabů přes obrázek) ---------- */
.navbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg-panel); border-bottom: 1px solid var(--border);
}
/* Vnitřní kolona zarovnaná s herem i obsahem (max-width 1280, padding 24). */
.navbar-inner {
  max-width: 1280px; margin: 0 auto; padding: 8px 24px;
  display: flex; align-items: center; gap: 12px;
}
.navbar-views { display: flex; flex-wrap: wrap; gap: 6px; }
.navbar-link {
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text);
  padding: 7px 13px; border-radius: 999px; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.navbar-link:hover { background: var(--bg-card-hover); border-color: var(--accent-focus); }
.navbar-link.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.navbar-lang { margin-left: auto; }              /* jazyk vpravo */
.navbar-burger { display: none; }                /* viditelné jen na mobilu */
/* Hamburger ikona (3 proužky → ✕ při otevřeném menu) */
.navbar-burger { align-items: center; gap: 9px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 13px;
  color: var(--text); font-weight: 600; font-size: 14px; cursor: pointer; }
.burger-icon { position: relative; width: 18px; height: 14px; flex: 0 0 auto; }
.burger-icon span { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor;
  border-radius: 2px; transition: transform .2s, opacity .2s; }
.burger-icon span:nth-child(1) { top: 0; }
.burger-icon span:nth-child(2) { top: 6px; }
.burger-icon span:nth-child(3) { top: 12px; }
.navbar-burger[aria-expanded="true"] .burger-icon span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.navbar-burger[aria-expanded="true"] .burger-icon span:nth-child(2) { opacity: 0; }
.navbar-burger[aria-expanded="true"] .burger-icon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* „Pohledy" + „Rychlé filtry" v mobilním draweru — jen na mobilu */
.views-nav { display: none; }
.views-nav .view-link.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.slices-heading { display: none; }
.slices-heading .tabs { margin-top: 10px; }   /* odsadit řezy od nadpisu */
.lang-switch button {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.03em;
  padding: 4px 9px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.lang-switch button:hover { background: rgba(0, 0, 0, 0.72); }
.lang-switch button.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.lang-sep { color: #fff; opacity: 0.6; font-weight: 700; }
.hero-overlay-tl h1 {
  margin: 0;
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
/* Fixní barvy čitelné na hero obrázku (nevážeme na téma, obrázek se nemění).
   #3D97FF = jasnější modrá z barevného schématu (accent-focus pro tmavé pozadí) —
   sladí značku „Fedík" i claim se zbytkem webu (accent #1883FF). */
.brand-prefix { font-size: 1.333em; }                /* „Fedík.online" — velký */
.brand-name   { color: #3D97FF; }                    /* „Fedík" — modrá ze schématu */
.brand-tld    { color: #ffffff; }                    /* „.online" — bílá */
.brand-domain { color: #ffffff; display: block; font-size: 0.75em; }  /* prázdné v CZ/EN */
.hero-overlay-tl .claim {
  margin: 8px 0 0;
  font-size: clamp(14px, 1.6vw, 18px);
  font-weight: 500;
  color: #3D97FF;  /* claim — stejná modrá jako značka */
}
.main-account {
  display: inline-block;
  color: #e8e4f2;  /* stejná barva jako „Mastodon katalog" (fixní, čitelná na obrázku) */
  font-weight: 700;
  font-size: clamp(13px, 1.5vw, 16px);
}
.main-account.hero-overlay-br:hover { text-decoration: underline; }
.count-line strong { color: var(--text); }

/* ---------- Layout ---------- */
.layout {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 28px;
  align-items: start;
}
/* „O Fedíku" zachovává dvousloupcový layout: menu vlevo, obsah vpravo. */

/* ---------- Pohled: O Fedíku ---------- */
.about-content {
  /* Bez max-width → vyplní sloupec obsahu, pravý okraj zarovnaný s headerem
     (stejně jako mřížka karet v pohledu Účty). Čitelnost textu drží .about-content p. */
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 32px;
}
.about-content h2 {
  margin: 0 0 16px;
  font-size: 24px;
  color: var(--text-strong);
}
.about-content p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
}
.about-content p:last-child { margin-bottom: 0; }
.about-content h3 {
  margin: 22px 0 8px;
  font-size: 17px;
  color: var(--text-strong);
}
.about-content h4 { margin: 16px 0 4px; font-size: 15px; color: var(--text-strong); }
.about-content ul {
  margin: 0 0 14px;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
}
.about-content li { margin-bottom: 4px; }
.about-content a { color: var(--accent); }
.about-content code { background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: 6px; padding: 1px 6px; font-size: 0.9em; }
/* Náhledy karet v O Fedíku — vycentrované, pod textem (skryjí se přes onerror). */
.about-figure { margin: 14px 0 20px; text-align: center; }
.about-figure img { max-width: 480px; width: 100%; height: auto; display: block;
  margin: 0 auto; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.about-figure figcaption { font-size: 13px; line-height: 1.55; color: var(--text-dim); margin-top: 8px; }
.about-figure.qr img { max-width: 220px; }   /* QR kód menší */
.about-figure--mascot img { max-width: 390px; border: none; background: none; }   /* maskot bez rámečku */
.about-figure--header img { max-width: 560px; border: none; background: none; }   /* header.png — landscape, ~stejná výška jako maskot */
/* Finanční podpora — odrážky bez teček, vzdušnější. */
.faq-support { list-style: none; padding-left: 0; }
.faq-support li { margin-bottom: 8px; }
/* Foto autora — vpravo, text obtéká. */
.author-photo { float: right; width: 45%; height: auto;
  border-radius: 14px; margin: 0 0 16px 24px; }
@media (max-width: 560px) { .author-photo { float: none; display: block; margin: 0 0 14px; width: 100%; max-width: 320px; } }

/* Menu „O Fedíku" / „Začni tady" v sidebaru — víc pod-skupin (nadpis+popis+tlačítka)
   v jednom panelu; tlačítka sdílí styl s filtry (.filter-chip). Rozestupy ať mezi
   skupinami dýchají a sedí na sobě (jinak se druhý nadpis lepí na první tlačítka). */
.about-nav .filter-buttons, .start-nav .filter-buttons { margin-bottom: 18px; }
.about-nav .search-nav-desc, .start-nav .search-nav-desc { margin: 2px 0 10px; }
.about-nav h2, .start-nav h2 { margin-top: 4px; }
.start-nav .filter-buttons:last-child { margin-bottom: 0; }

/* ---------- Pohled: Vyhledávání ---------- */
/* Dvousloupcový layout (vlevo panel s popisem, vpravo formulář + výsledky) —
   stejně jako O Fedíku. Karty účtů/postů sdílí .card / .post-card z Účtů/Postů. */
.search-nav-desc { font-size: 13px; line-height: 1.6; color: var(--text); margin: 0; }
/* „Landing" à la Google — vycentrované logo + claim nad formulářem; po zadání
   dotazu (.has-query) zmizí, ať mají výsledky místo. */
.search-hero { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 16px; flex-wrap: wrap; }
.search-logo { width: min(264px, 48%); height: auto; border-radius: 14px; }
/* Wordmark kolem loga: „Fedík" jako title, „online" bílá s fialovým obrysem. */
.search-wordmark { font-weight: 800; font-size: clamp(26px, 6vw, 52px); line-height: 1; letter-spacing: -0.01em; }
/* Když to prohlížeč umí, škáluj wordmark+logo podle ŠÍŘKY SLOUPCE OBSAHU
   (ne celého okna) a nech blok na jednom řádku — na úzké stránce se zmenší. */
@supports (container-type: inline-size) {
  .search-view { container-type: inline-size; }
  .search-hero { flex-wrap: nowrap; gap: clamp(4px, 1.2cqi, 10px); }
  .search-logo { width: clamp(128px, 30cqi, 264px); }
  .search-wordmark { font-size: clamp(20px, 7.5cqi, 56px); white-space: nowrap; }
}
.search-wordmark-l { color: var(--accent); }
/* Bílá výplň + fialový obrys. paint-order kreslí obrys POD výplň → vnitřek
   zůstane čistě bílý a tenké tvary („e") se neslijí do škrtu. */
.search-wordmark-r {
  color: #ffffff;
  -webkit-text-stroke: 2px var(--accent);
  text-stroke: 2px var(--accent);
  paint-order: stroke fill;
  margin-left: -70px;
}
.search-tagline { text-align: center; color: var(--text-dim); font-size: 13px; line-height: 1.5; margin: 12px auto 0; max-width: 560px; }
.search-tip { text-align: center; color: var(--text-dim); font-size: 12px; line-height: 1.5; margin: 6px auto 0; max-width: 600px; opacity: 0.85; white-space: pre-line; }
#search-view .search-bar { max-width: 620px; margin: 0 auto; }
.search-view.has-query .search-hero,
.search-view.has-query .search-tagline,
.search-view.has-query .search-tip { display: none; }
.search-bar input {
  width: 100%; padding: 13px 15px; font-size: 16px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-card); color: var(--text);
}
.search-bar input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.search-meta { color: var(--text-dim); font-size: 12px; margin: 10px 2px 18px; min-height: 16px; }
.s-sec { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin: 22px 2px 12px; }
.s-sec:first-child { margin-top: 4px; }
.s-sec span { font-weight: 400; }
.s-empty { color: var(--text-dim); padding: 24px 2px; }

/* ---------- Pohled: Instance ---------- */
/* Karty mají stejnou velikost jako karty postů (mřížka 320px). */
#instance-results .cards-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.inst-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
  transition: border-color .12s, transform .12s, box-shadow .12s; }
.inst-card:hover { border-color: var(--accent); transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(99, 100, 255, 0.10); }
.inst-head { display: flex; gap: 12px; align-items: flex-start; }
.inst-logo { flex: 0 0 60px; width: 60px; height: 60px; border-radius: 12px; object-fit: cover; background: var(--bg-card-hover); }
.inst-logo-fb { display: flex; align-items: center; justify-content: center; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 26px; }
/* Fallback na logo aplikace (instance bez vlastního avataru) — logo se vejde celé, ne ořez */
.inst-logo-app { object-fit: contain; padding: 8px; background: var(--bg-panel); }
.inst-headbody { min-width: 0; flex: 1; }
/* Plný název instance (max 2 řádky), ne zkrácený. */
.inst-title { font-weight: 700; color: var(--text-strong); font-size: 17px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.inst-host { color: var(--text-dim); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.inst-reg { flex: 0 0 auto; align-self: flex-start; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.inst-reg-open { background: var(--fam-business); color: #fff; }
.inst-reg-approval { background: var(--fam-lifestyle); color: #fff; }
.inst-reg-closed { background: var(--border); color: var(--text-dim); }
.inst-desc { font-size: 13px; line-height: 1.5; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.inst-stats { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-dim); }
.inst-stats strong { color: var(--text-strong); font-weight: 700; }
.inst-foot { display: flex; gap: 12px; align-items: center; margin-top: 2px; }
.inst-cat { font-size: 12px; color: var(--text-dim); }
.inst-join { margin-left: auto; font-size: 13px; font-weight: 600; text-decoration: none;
  background: var(--accent); color: var(--on-accent); padding: 7px 13px; border-radius: 8px; }
.inst-join:hover { background: var(--accent-focus); }
.inst-open { font-size: 13px; color: var(--accent); text-decoration: none; }
.inst-open:hover { text-decoration: underline; }

/* ---------- Pohled: Odkazy ---------- */
.link-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 6px;
  transition: border-color .12s, transform .12s, box-shadow .12s; }
.link-card:hover { border-color: var(--accent); transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(99, 100, 255, 0.10); }
.link-title { font-weight: 700; font-size: 15px; color: var(--text-strong);
  text-decoration: none; line-height: 1.35; }
.link-title:hover { color: var(--accent); text-decoration: underline; }
.link-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12px; color: var(--text-dim); }
.link-lang { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: var(--bg-panel); border: 1px solid var(--border); color: var(--text-dim); }
.link-lang-cs { color: var(--on-accent); background: var(--accent); border-color: transparent; }
.link-src { font-weight: 600; color: var(--text); }
.link-note { font-size: 13px; line-height: 1.5; color: var(--text); margin: 2px 0 0; }

/* ---------- Sidebar ---------- */
.sidebar {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Skupiny filtrů potřebují vzdušnější odsazení (search ↔ řadit ↔ rodina ↔ …). */
.sidebar-body {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.filter-search { display: flex; flex-direction: column; gap: 6px; }
.filter-search input {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
}
.filter-search input:focus { outline: none; border-color: var(--accent); }

.filter-group h2 {
  margin: 0 0 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.filter-buttons { display: flex; flex-wrap: wrap; gap: 8px; }

.filter-btn, .filter-chip {
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.filter-btn:hover, .filter-chip:hover { background: var(--bg-card-hover); }

.filter-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* Aktivní stav rodinných tlačítek = barva rodiny */
.filter-btn.active { color: #fff; border-color: transparent; }
.fam-sport.active { background: var(--fam-sport); }
.fam-news.active { background: var(--fam-news); }
.fam-culture.active { background: var(--fam-culture); }
.fam-science_tech.active { background: var(--fam-science_tech); }
.fam-lifestyle.active { background: var(--fam-lifestyle); }
.fam-business.active { background: var(--fam-business); }
.fam-humor.active { background: var(--fam-humor); }
.fam-government.active { background: var(--fam-government); }

.reset-btn {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}
.reset-btn:hover { color: var(--text); border-color: var(--accent); }

/* ---------- Cards ---------- */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
/* Marker pro infinite scroll — nepatrná výška, ať ho IntersectionObserver vidí. */
#cards-sentinel { width: 100%; height: 1px; }
.card {
  display: flex;
  gap: 14px;
  padding: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color .12s, transform .12s, box-shadow .12s;
}
.card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(247, 105, 2, 0.10);
}
.card-avatar {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-panel);
}
.card-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-fallback {
  background: linear-gradient(135deg, var(--accent-bg), var(--bg-panel));
}
.card-body { min-width: 0; flex: 1; }
.card-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-handle {
  display: block;          /* <a> je inline → bez block ellipsis nefunguje */
  max-width: 100%;
  color: var(--text-dim);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-labels { display: flex; gap: 6px; margin: 8px 0; flex-wrap: wrap; }
.label {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.label-type { background: var(--bg-panel); color: var(--text-dim); border: 1px solid var(--border); }
.label-bot {
  background: var(--accent-bg);
  color: var(--accent-focus);
  border: 1px solid var(--accent-focus);
  font-weight: 700;
}
.label-family { color: #fff; }
.label-family.fam-sport { background: var(--fam-sport); }
.label-family.fam-news { background: var(--fam-news); }
.label-family.fam-culture { background: var(--fam-culture); }
.label-family.fam-science_tech { background: var(--fam-science_tech); }
.label-family.fam-lifestyle { background: var(--fam-lifestyle); }
.label-family.fam-business { background: var(--fam-business); }
.label-family.fam-humor { background: var(--fam-humor); }
.label-family.fam-government { background: var(--fam-government); }

.card-stats {
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: var(--text-dim);
}
.card-stats strong { color: var(--text); font-size: 13px; }

.empty-state, .load-error {
  text-align: center;
  color: var(--text-dim);
  padding: 48px 0;
}
.empty-state .empty-hint { font-size: 13px; margin: 4px 0 16px; }

/* ---------- Loading ---------- */
.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 0;
  color: var(--text-dim);
  font-size: 14px;
}
.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Tabs (řezy) ---------- */
.tabs {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 24px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.tab {
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.tab:hover { background: var(--bg-card-hover); border-color: var(--accent-focus); }
.tab.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.tab-sep {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  padding-left: 6px;
}
.tab-sep:first-of-type { padding-left: 0; }
/* Počítadlo zobrazených zdrojů — vždy odtlačené na konec řádku řezů. */
.tabs-count {
  margin: 0 0 0 auto;
  padding-left: 12px;
  color: var(--text-dim);
  font-size: 14px;
  white-space: nowrap;
}
.tabs-count strong { color: var(--text); }

/* ---------- Sort ---------- */
.filter-sort { display: flex; flex-direction: column; gap: 6px; }
.filter-sort label,
.filter-search label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.filter-sort select {
  width: 100%;
  padding: 9px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
}
.filter-sort select:focus { outline: none; border-color: var(--accent); }

/* ---------- Slice note ---------- */
.slice-note {
  margin: 0 0 14px;
  padding: 8px 12px;
  background: var(--accent-bg);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
}

/* ---------- Dimming (Top N přepíše ostatní filtry) ---------- */
.is-dimmed { opacity: 0.45; pointer-events: none; }

/* ---------- Tag filtr ---------- */
.tag-autocomplete { position: relative; }
#tag-input {
  width: 100%;
  padding: 9px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
}
#tag-input:focus { outline: none; border-color: var(--accent); }
.tag-suggestions {
  list-style: none;
  margin: 4px 0 0;
  padding: 4px;
  position: absolute;
  z-index: 30;
  left: 0; right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  max-height: 240px;
  overflow-y: auto;
}
.tag-suggestions li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 9px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}
.tag-suggestions li:hover { background: var(--bg-card-hover); }
.tag-selected { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-selected:not(:empty) { margin-bottom: 8px; }
.tag-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.tag-chip:hover { background: var(--bg-card-hover); border-color: var(--accent-focus); }
.tag-chip .tag-count { color: var(--text-dim); font-size: 11px; }
.tag-chip-selected {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.tag-chip-selected:hover { background: var(--accent-focus); }
.tag-x { font-weight: 700; }

/* ---------- Sidebar accordion toggle (mobil) ---------- */
/* (sidebar-toggle nahrazen navbar-burgerem — viz Navigace výše) */

/* ---------- Hover preview ---------- */
.hover-preview {
  position: absolute;
  z-index: 40;
  width: 300px;
  max-width: calc(100vw - 16px);
  padding: 14px;
  background: var(--bg-card);
  border: 1px solid var(--accent);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  pointer-events: auto;
}
.hover-head { display: flex; gap: 10px; align-items: center; }
.hover-avatar {
  flex: 0 0 40px; width: 40px; height: 40px;
  border-radius: 10px; overflow: hidden; background: var(--bg-panel);
}
.hover-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hover-name { font-weight: 700; color: var(--text-strong); font-size: 14px; }
.hover-handle { color: var(--text-dim); font-size: 12px; }
.hover-bio {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text);
  max-height: 120px;
  overflow: hidden;
}
.hover-bio p { margin: 0 0 6px; }
.hover-bio a { color: var(--accent); }
.hover-meta { margin-top: 10px; font-size: 12px; color: var(--text-dim); }
.meta-line { margin: 2px 0; }

/* ---------- Detail modal (<dialog>) ---------- */
.detail-modal {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-card);
  color: var(--text);
  overflow: visible;
}
.detail-modal::backdrop { background: rgba(0,0,0,0.5); }
/* Fallback pro prohlížeče bez <dialog> */
.detail-modal.modal-fallback-open {
  position: fixed;
  inset: 0;
  margin: auto;
  z-index: 100;
}
.modal-inner { padding: 24px; overflow-y: auto; max-height: calc(100vh - 48px); }
.modal-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: 50%;
  color: var(--text-dim);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.modal-close:hover { color: var(--text); border-color: var(--accent); }
.modal-head { display: flex; gap: 14px; align-items: center; padding-right: 36px; }
.modal-avatar {
  flex: 0 0 64px; width: 64px; height: 64px;
  border-radius: 14px; overflow: hidden; background: var(--bg-panel);
}
.modal-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.modal-name { font-weight: 800; font-size: 19px; color: var(--text-strong); }
.modal-handle { color: var(--accent); font-size: 14px; }
.modal-handle:hover { text-decoration: underline; }
.modal-bio { margin: 14px 0; font-size: 14px; color: var(--text); }
.modal-bio p { margin: 0 0 8px; }
.modal-bio a { color: var(--accent); }
.detail-modal .card-labels { margin: 14px 0 6px; }
.modal-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.modal-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 16px 0;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.modal-stat { display: flex; flex-direction: column; }
.modal-stat strong { font-size: 17px; color: var(--text-strong); }
.modal-stat span { font-size: 12px; color: var(--text-dim); }
.modal-stat-wide { justify-content: center; color: var(--text-dim); font-size: 13px; }
.modal-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn {
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
}
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-focus); }
.btn-ghost { background: transparent; color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); }

.updated-relative { color: var(--text-dim); }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 32px;
  background: var(--bg-panel);
}
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 24px;
  color: var(--text-dim);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
}
.footer-inner p { margin: 4px 0; }
.footer-meta { margin: 0; text-align: left; }
.footer-inner a { color: var(--accent); }
.footer-inner a:hover { text-decoration: underline; }
/* Sponzor (OSCLOUD) — logo vlevo + text vpravo, u pravého okraje patičky. */
.footer-sponsor { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; text-decoration: none; }
.footer-sponsor:hover { text-decoration: none; }
.footer-sponsor-logo { height: 24px; width: auto; display: block; }
.footer-sponsor-text { color: var(--text-dim); font-size: 12px; line-height: 1.25; white-space: pre-line; text-align: left; }
.footer-sponsor:hover .footer-sponsor-text { color: var(--text); }
@media (max-width: 560px) {
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* ---------- Tablet/mobil (<=760px): 1 sloupec + navigace jako hamburger drawer ---------- */
@media (max-width: 760px) {
  .layout { grid-template-columns: 1fr; }
  .header-meta { text-align: left; }

  /* Navigace: skryj pilulky, ukaž hamburger; „Pohledy" + „Rychlé filtry" do draweru. */
  .navbar-views { display: none; }
  .navbar-burger { display: inline-flex; }
  .views-nav { display: block; }
  .slices-heading { display: block; }

  /* Sidebar = drawer: defaultně skrytý, otevře ho hamburger v navbaru. */
  .sidebar { position: static; display: none; }
  .sidebar.open { display: block; }

  /* Řezy lišty přesunuté JS do draweru — zarovnat na šířku panelu (bez centrování). */
  .sidebar-body .tabs { max-width: none; margin: 0; padding: 0; }
}

/* ---------- Mobile (<=640px): jednosloupcový list, jemnější odsazení ---------- */
@media (max-width: 640px) {
  .hero { padding: 12px 14px 0; }
  .header-inner { padding: 16px 14px; }
  .navbar-inner { padding: 8px 14px; }
  .tabs { padding: 12px 14px 0; }
  .layout { padding: 16px 14px; gap: 16px; }

  /* Hero overlay na mobilu: zmenšit a zúžit, ať se text vejde */
  .hero-overlay { max-width: 70%; }
  .hero-overlay-tl { top: 24px; left: 22px; }
  .hero-overlay-br { right: 22px; bottom: 22px; }

  /* Grid karet → jednosloupcový seznam */
  .cards-grid { grid-template-columns: 1fr; }

  .modal-inner { padding: 18px; }
  .modal-actions .btn { flex: 1; text-align: center; }
}

/* Touch zařízení: hover preview se nikdy nezobrazí (JS to už hlídá přes
   matchMedia, tohle je pojistka, aby element nezůstal viditelný). */
@media (hover: none) {
  .hover-preview { display: none !important; }
}

/* ============================================================
   Karta postu
   ============================================================ */

/* Karta postu — vychází z .card, ale je vertikální (sloupec) */
.post-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color .12s, transform .12s, box-shadow .12s;
}
.post-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(99, 100, 255, 0.10);
}
.post-head { display: flex; gap: 10px; align-items: center; }
.post-avatar-link { flex: 0 0 40px; display: block; line-height: 0; border-radius: 10px; }
.post-avatar-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.post-head .card-avatar { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; }
.post-head-body { min-width: 0; flex: 1; }
.post-author { display: block; font-weight: 700; font-size: 14px; color: var(--text-strong);
  text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-author:hover { text-decoration: underline; }
.post-handle { color: var(--text-dim); font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-head .label-family { flex: 0 0 auto; align-self: flex-start; }

.post-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}
.post-text.is-empty { color: var(--text-dim); font-style: italic; }
/* Zkrácení dlouhého postu (klamp na ~6 řádků), tlačítko sundá clamp. */
.post-text.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Inline odkazy v textu postu */
.post-inline-hashtag, .post-inline-mention { color: var(--accent); font-weight: 600; text-decoration: none; cursor: pointer; }
.post-inline-link { color: var(--accent); text-decoration: none; word-break: break-all; }
.post-inline-hashtag:hover, .post-inline-mention:hover, .post-inline-link:hover { text-decoration: underline; }
/* Mastodon zkrácené URL: skrytý protokol/ocásek (https://, www, …) */
.post-text .invisible {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.post-text .ellipsis::after { content: '…'; }
.post-more {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--accent); font-size: 13px; font-weight: 600;
  align-self: flex-start; margin-top: -4px;
}
.post-media-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--text-dim);
  background: var(--bg-panel); border: 1px solid var(--border);
  padding: 3px 9px; border-radius: 999px; align-self: flex-start;
}
.post-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.post-tag {
  font-size: 11px; color: var(--text-dim);
  background: var(--bg-panel); border: 1px solid var(--border);
  padding: 2px 8px; border-radius: 999px;
}

.hashtags-empty { font-size: 12px; color: var(--text-dim); margin: 2px 0 0; }
.post-foot {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 12px; color: var(--text-dim);
  border-top: 1px solid var(--border); padding-top: 10px; margin-top: auto;
}
.post-foot .post-stat { display: inline-flex; align-items: center; gap: 4px; }
.post-foot .post-stat strong { color: var(--text); font-weight: 700; }
.post-open {
  margin-left: auto; color: var(--accent); font-weight: 600;
  text-decoration: none; white-space: nowrap;
}
.post-open:hover { text-decoration: underline; }
.post-riser-badge {
  font-size: 11px; font-weight: 700; color: var(--on-accent);
  background: var(--accent); padding: 2px 8px; border-radius: 999px;
}

/* posts grid sdílí auto-fill, ale karty jsou trochu širší pro text */
.posts-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

/* ---------- Pohled: Začni tady ---------- */
/* Skládá se z .about-content bloků (stejná typografie/karta jako „O Fedíku"). */
.start-block { margin-bottom: 16px; }
.start-block:last-child { margin-bottom: 0; }

/* Blok 1 — responzivní 16:9 video */
.video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 8px 0 10px;
  border-radius: 12px; overflow: hidden; background: var(--bg-panel); border: 1px solid var(--border); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-attribution { font-size: 12px; line-height: 1.5; color: var(--text-dim); margin: 0; }

/* Bloky 2 a 5 — karty (reuse .cards-grid) */
.start-cards { margin-top: 4px; }
.start-card { display: flex; flex-direction: column; gap: 6px; padding: 16px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  text-decoration: none; color: var(--text);
  transition: border-color .12s, transform .12s, box-shadow .12s; }
.start-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text); }
.start-card-title { font-size: 15px; font-weight: 700; color: var(--text-strong); }
.start-card-link:hover { border-color: var(--accent); transform: translateY(-2px); }
.start-card-link:hover .start-card-title { color: var(--accent); }
.start-card-disabled { opacity: .65; }
.start-badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 1px 8px; border-radius: 999px; background: var(--bg-panel); border: 1px solid var(--border);
  color: var(--text-dim); margin-left: 6px; vertical-align: middle; }

/* Krok 2 — výběr aplikace: dva mraky chipů („Přicházíš z…" / „Co chceš dělat?") → karta aplikace (Pohled 2) */
.start-picker-hint { margin: 24px 0 0; font-size: 14px; line-height: 1.55; color: var(--text-dim); }
/* P3 — rychlá volba (chipy známých sítí) nad dropdownem; active dědí .filter-chip.active */
.start-quickpick-label { margin: 14px 0 6px; font-size: 14px; font-weight: 600; color: var(--text); text-align: center; }
/* Mrak tlačítek — vycentrovaný, max 75 % šířky textové části → zalomí se na 2–3 řádky (ne od kraje ke kraji) */
.start-quickpick { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 6px; max-width: 75%; }
.chip-cloud-break { flex-basis: 100%; height: 0; }   /* vynucené zalomení řádku uprostřed mraku */
.start-quickpick + .start-quickpick-label { margin-top: 28px; }   /* větší mezera před „Nebo co chceš dělat?" */
@media (max-width: 640px) { .start-quickpick { max-width: 100%; } }
.start-picker-results { margin-top: 28px; }
.start-rec-head { grid-column: 1 / -1; margin: 0 0 4px; font-size: 16px; font-weight: 700; color: var(--text-strong); text-align: center; }
.start-picker-catalog { display: inline-block; margin-top: 14px; color: var(--accent); font-weight: 600; font-size: 14px; }
.start-picker-catalog:hover { text-decoration: underline; }

/* Začni tady — obrázek Fedíka vedle textu (Blok 1/2/3/5). Čtvercové ilustrace. */
.start-figrow { display: flex; gap: 22px; align-items: flex-start; }
.start-figrow__text { flex: 1 1 auto; min-width: 0; }   /* min-width:0 → karty se smí zúžit */
:root { --mascot-h: clamp(140px, 15vw, 165px); }   /* jednotná výška VŠECH maskotů u textu */
.start-fig {
  flex: 0 0 auto;
  /* Fixní VÝŠKA (--mascot-h), šířka proporčně sama (auto). Žádný max-width — ten by
     u širších ilustrací výšku zkrátil a proporci rozbil. */
  width: auto;
  height: var(--mascot-h);
  align-self: flex-start;
  border-radius: 12px;
}
@media (max-width: 760px) {
  .start-figrow, .start-figrow--left { flex-direction: column; align-items: center; }
  .start-figrow__text { width: 100%; }
  .start-fig { width: auto; height: 160px; }
}

/* Blok 3+4 (picker) — vycentrovaný layout; maskot ~2× větší, na střed pod odstavcem. */
.start-fig--big { display: block; width: min(264px, 48%); height: auto; margin: 18px auto; }   /* = velikost maskota na Vyhledávání (.search-logo) */
/* Onboarding kroky — maskot vpravo vedle textu (jako Krok 1), všechny stejně vysoké. */
.start-fig--step { width: auto; height: clamp(170px, 26vw, 210px); }
@media (max-width: 760px) { .start-fig--step { width: auto; height: 180px; } }
/* Plovoucí varianta — delší text maskota obtéká (např. „První den"). */
.onboarding-step .start-block, .view-intro { display: flow-root; }   /* article obsáhne float, nepřeteče do dalšího bloku */
.view-intro { margin-bottom: 24px; }
/* Maskot v intro katalogu — řízený VÝŠKOU, ať různé poměry stran nedominují (čtvercové
   vs. vysoké). Sjednocená výška místo šířky řeší „obří" dojem u vyšších ilustrací. */
.view-intro .start-fig--float { width: auto; height: var(--mascot-h); }
@media (max-width: 760px) { .view-intro .start-fig--float { width: auto; height: 160px; } }
.stats-results-clear { clear: both; }   /* grafy/boxy pod plovoucím maskotem na plnou šířku */
.start-fig--float { float: right; width: auto; height: clamp(170px, 26vw, 210px); margin: 4px 0 12px 22px; border-radius: 12px; }
.onboarding-step .caveat-box { clear: both; }   /* normy nikdy zúžené vedle plovoucího maskota */
@media (max-width: 760px) {
  .start-fig--float { float: none; display: block; height: 180px; margin: 0 auto 14px; }
}
/* Intro (titulek + odstavec) zůstává vlevo; centrovaný je jen maskot a navazující texty pod mraky. */
.start-picker-block .start-picker-hint { text-align: center; white-space: pre-line; margin-top: 28px; }   /* přebíjí .about-content p */
.start-picker-block .start-picker-catalog { display: block; text-align: center; }

/* ---------- Pohled: Aplikace (Pohled 2) ---------- */
.apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.app-card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px;
  transition: border-color .12s, transform .12s, box-shadow .12s;
}
.app-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.app-card__head { display: flex; align-items: center; gap: 12px; }
.app-card__logo { width: 40px; height: 40px; border-radius: 9px; object-fit: contain;
  background: var(--bg-card-hover); flex: 0 0 auto; }
.app-card__headtext { min-width: 0; }
.app-card__name { font-weight: 700; font-size: 16px; color: var(--text-strong); line-height: 1.2; }
.app-card__type { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.app-card__desc { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.app-card__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.app-badge { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
  background: var(--bg-panel); color: var(--text-dim); border: 1px solid var(--border); }
.app-badge--cz-ano { background: #e6f4ea; color: #1f7a44; border-color: transparent; }
.app-badge--cz-castecne { background: var(--accent-bg); color: var(--accent); border-color: transparent; }
.app-badge--cz-ne { background: #fde8ea; color: #b3261e; border-color: transparent; }
@media (prefers-color-scheme: dark) {
  .app-badge--cz-ano { background: #15331f; color: #6fd699; }
  .app-badge--cz-ne { background: #3a1417; color: #f0808c; }
}
.app-card__stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: 13px; color: var(--text-dim); }
.app-card__stats strong { color: var(--accent); font-weight: 700; }
.app-card__statnote { font-size: 11px; opacity: .8; }
.app-card__sec { font-size: 12px; color: var(--text-dim); }
.app-card__links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: auto; padding-top: 4px; }
.app-card__links a { color: var(--accent); font-weight: 600; font-size: 13px; }
.app-card__links a:hover { text-decoration: underline; }
/* Tlačítko „Vybrat" v kartě aplikace (picker kroku 2 i wizard mód katalogu). */
.start-pick-app, .app-card__wizard { display: block; width: 100%; margin-top: 12px; cursor: pointer; border: none; text-align: center; }
#apps-wizard-banner { margin: 0 0 16px; }
/* Pokročilé fasety (sbalené) */
.filter-group-apps__adv-summary { cursor: pointer; font-weight: 600; color: var(--text); list-style: none;
  display: flex; align-items: center; gap: 6px; }
.filter-group-apps__adv-summary::-webkit-details-marker { display: none; }
.filter-group-apps__adv-summary::before { content: "+"; color: var(--accent); font-weight: 700; }
#apps-adv-group[open] .filter-group-apps__adv-summary::before { content: "–"; }
#apps-adv-group h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-dim); margin: 12px 0 6px; }

/* Žebříček „Nejrychleji rostoucí" — odznak růstu na kartě */
.app-card__growth { color: #1f7a44; font-weight: 700; font-size: 12px; }
@media (prefers-color-scheme: dark) { .app-card__growth { color: #6fd699; } }

/* Pohled: Instance (Pohled 3) — odznaky na kartě (app / zaměření / pro začátečníky) */
.inst-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0; }
.inst-badge { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
  background: var(--bg-panel); color: var(--text-dim); border: 1px solid var(--border); }
.inst-badge-app { background: var(--accent-bg); color: var(--accent); border-color: transparent; }
.inst-badge-beg { background: #e6f4ea; color: #1f7a44; border-color: transparent; }
@media (prefers-color-scheme: dark) { .inst-badge-beg { background: #15331f; color: #6fd699; } }
.inst-region { font-size: 12px; color: var(--text-dim); }

/* ---------- Pohled: Slovníček (Pohled 4) ---------- */
.glossary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 640px) { .glossary-grid { grid-template-columns: 1fr; } }
.gloss-card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px;
  cursor: pointer; transition: border-color .12s, transform .12s, box-shadow .12s;
}
.gloss-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.gloss-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gloss-card__term { margin: 0; font-size: 16px; font-weight: 700; color: var(--text-strong); line-height: 1.25; }
.gloss-card__short {
  margin: 0; font-size: 13px; line-height: 1.5; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.gloss-card__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.gloss-badge {
  font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
  background: var(--bg-panel); color: var(--text-dim); border: 1px solid var(--border);
}
.gloss-badge--type { background: var(--accent-bg); color: var(--accent); border-color: transparent; }
.gloss-badge--zakladni { background: #e6f4ea; color: #1f7a44; border-color: transparent; }
.gloss-badge--pokrocile { background: var(--bg-panel); color: var(--text-dim); }
.gloss-badge--order { background: transparent; color: var(--text-dim); }
@media (prefers-color-scheme: dark) { .gloss-badge--zakladni { background: #15331f; color: #6fd699; } }

/* Detail hesla (modal) */
.gloss-modal__term { margin: 0 36px 12px 0; font-size: 22px; color: var(--text-strong); }
.gloss-modal .gloss-card__badges { margin-bottom: 14px; }
.gloss-modal__short { margin: 0 0 12px; font-size: 15px; line-height: 1.55; color: var(--text-strong); }
.gloss-modal__body { margin: 0 0 14px; font-size: 14px; line-height: 1.6; color: var(--text); }
.gloss-modal__subhead { margin: 18px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }
.gloss-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; }
.gloss-steps li { font-size: 14px; line-height: 1.55; color: var(--text); }
.gloss-step__img { display: block; max-width: 100%; margin-top: 8px; border: 1px solid var(--border); border-radius: 8px; }
.gloss-modal__note { margin: 10px 0 0; font-size: 12px; color: var(--text-dim); font-style: italic; }
.gloss-modal__ext { display: inline-block; margin-top: 12px; color: var(--accent); font-weight: 600; font-size: 14px; }
.gloss-modal__ext:hover { text-decoration: underline; }
.gloss-seealso { display: flex; flex-wrap: wrap; gap: 8px; }
.gloss-seealso__link {
  font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: 999px; cursor: pointer;
  background: var(--accent-bg); color: var(--accent); border: 1px solid transparent;
}
.gloss-seealso__link:hover { border-color: var(--accent); }

/* ---------- Pohled: Nástroje (Pohled 5) ---------- */
.tool-card__for { font-size: 12px; color: var(--text-dim); }
.tool-card--own { border-color: var(--accent); }
.tool-badge {
  font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
  background: var(--bg-panel); color: var(--text-dim); border: 1px solid var(--border);
}
.tool-badge--plat { background: var(--accent-bg); color: var(--accent); border-color: transparent; }
.tool-badge--price-zdarma { background: #e6f4ea; color: #1f7a44; border-color: transparent; }
.tool-badge--price-placene { background: #fde8ea; color: #b3261e; border-color: transparent; }
.tool-badge--price-freemium { background: #fff4e0; color: #9a6300; border-color: transparent; }
.tool-badge--price-unknown { background: var(--bg-panel); color: var(--text-dim); }
.tool-badge--official { background: var(--accent-bg); color: var(--accent); border-color: transparent; }
.tool-badge--featured { background: #f3e8ff; color: #7c3aed; border-color: transparent; }
.tool-badge--own { margin-left: auto; background: var(--accent); color: var(--on-accent); border-color: transparent; align-self: flex-start; white-space: nowrap; }
.tool-card__glosslink { color: var(--accent); font-weight: 600; font-size: 13px; }
.tool-card__glosslink:hover { text-decoration: underline; }
@media (prefers-color-scheme: dark) {
  .tool-badge--price-zdarma { background: #15331f; color: #6fd699; }
  .tool-badge--price-placene { background: #3a1a1d; color: #f0a0a0; }
  .tool-badge--price-freemium { background: #33270f; color: #e0b060; }
  .tool-badge--featured { background: #2a1f3d; color: #c4a0ff; }
}

/* ---------- Pohled: Statistiky (Pohled 6) ---------- */
.stat-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 16px; }  /* boxíky v páru 2×2 */
.stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 28px 22px; text-align: center; }
.stat-card__num { font-size: 38px; font-weight: 800; color: var(--accent); line-height: 1.1; }
.stat-card__label { font-size: 14px; color: var(--text-dim); margin-top: 8px; }
@media (max-width: 520px) { .stat-cards { grid-template-columns: 1fr; } }
/* Stats přehled: maskot vždy nad boxíky — side-by-side nestačí šířka ani na středních viewportech. */
.stats-view .start-figrow { margin-top: 22px; }
.stats-figrow { flex-direction: column; align-items: center; }
.stats-figrow .start-figrow__text { width: 100%; }
.stats-figrow .start-fig--big { width: min(220px, 50%); margin: 0 auto 16px; }
/* Scoping .stats-view zvyšuje specificitu nad .about-content p (0,1,1),
   která jinak přebíjela margin/font/barvu poznámek uvnitř sjednocené karty. */
.stats-view .stat-note { font-size: 12px; color: var(--text-dim); margin: 12px 2px 0; line-height: 1.5; }
.stats-view .stat-note--approx { font-style: italic; margin-top: 32px; }   /* odsazení „orientační" od grafu/boxů */
.stats-view .stat-caveat {
  font-size: 13px; line-height: 1.55; color: var(--text-strong);
  background: #fff4e0; border: 1px solid #e6b860; border-radius: 10px; padding: 12px 14px; margin: 16px 0 8px;
}
@media (prefers-color-scheme: dark) { .stats-view .stat-caveat { background: #33270f; border-color: #6b531a; } }

/* Upozorňovací boxík (převzato ze .stat-caveat) — sdílený, používá i onboarding „normy". */
.caveat-box {
  color: var(--text-strong);
  background: #fff4e0; border: 1px solid #e6b860; border-radius: 10px; padding: 14px 16px; margin: 24px 0 8px;
}
.caveat-box > :first-child { margin-top: 0; }
.caveat-box > :last-child { margin-bottom: 0; }
.caveat-box h3::before { content: "\26A0\FE0E  "; }
@media (prefers-color-scheme: dark) { .caveat-box { background: #33270f; border-color: #6b531a; } }

/* Sloupce „Podle aplikací" */
.stat-bars { display: flex; flex-direction: column; gap: 10px; }
.stat-bar { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 12px; }
.stat-bar__name { font-size: 13px; font-weight: 600; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-bar__track { height: 12px; background: var(--bg-panel); border-radius: 999px; overflow: hidden; }
.stat-bar__fill { display: block; height: 100%; border-radius: 999px; }
.stat-bar__val { font-size: 12px; color: var(--text-dim); white-space: nowrap; }

/* SVG spojnicový graf */
.stat-chart { width: 100%; height: auto; display: block; margin: 4px 0 8px; }
.stat-chart__grid { stroke: var(--border); stroke-width: 1; }
.stat-chart__axis { fill: var(--text-dim); font-size: 11px; }
.stat-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 2px 0; }
.stat-legend__item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); }
.stat-legend__swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

@media (max-width: 560px) {
  .stat-bar { grid-template-columns: 96px 1fr; }
  .stat-bar__val { grid-column: 2; text-align: left; }
}

/* Pohled 7 (Odkazy) — typ + atribuce na kartě */
.link-type { font-size: 12px; color: var(--text-dim); }
.link-attr { font-size: 12px; color: var(--text-dim); margin-top: 6px; font-style: italic; }

/* Sekce „Co dál" pod katalogem (Aplikace, Instance…) — reuse .start-figrow / .start-card */
.view-next { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border); }
.view-next h2 { margin: 0 0 4px; }
.view-next-intro { margin: 0 0 14px; color: var(--text-dim); font-size: 14px; }

/* ========================================================
   Pohled „Začínáme" — lineární 6-krokový onboarding (P1)
   ======================================================== */
.onboarding-step { margin-top: 36px; padding-top: 28px; border-top: 2px solid var(--border); }
/* Krok 1 nemá horní oddělovač (resume banner před ním je první dítě → :first-child by selhal). */
#start-step-1 { margin-top: 0; padding-top: 0; border-top: none; }

.start-default-box {
  margin: 16px 0 20px;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: var(--bg-card);
}
.start-default-box p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text); }

.cta-btn {
  display: inline-block;
  margin-top: 16px;
  padding: 10px 20px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--bg) !important;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.cta-btn:hover { opacity: .85; }
button.cta-btn { border: none; cursor: pointer; font-family: inherit; }
/* Ghost varianta — sekundární akce (rozcestník: „Prozkoumat katalog") */
.cta-btn--ghost { background: transparent; color: var(--accent) !important;
  border: 1px solid var(--accent); }
.cta-btn--ghost:hover { background: var(--accent-bg); opacity: 1; }
.step-next-wrap { margin-top: 24px; padding-bottom: 8px; text-align: center; }

/* Krok 5 → 6: prominentní můstek na „najdi lidi" (retenčně nejdůležitější přechod) */
.start-crew-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  margin-top: 20px; padding: 16px 18px; background: var(--bg-panel);
  border: 1px solid var(--border); border-radius: 12px; }
.start-crew-cta-text { margin: 0; flex: 1 1 260px; font-weight: 600; color: var(--text); }
.start-crew-cta .cta-btn { margin-top: 0; white-space: nowrap; }
/* Kotvy v kroku 6 (Sloník / Zprávobot) zvýraznit — jsou to klíčové akce kroku */
#start-step-6 .start-card-link { border-color: var(--accent); }

/* Blok 1b — rozcestník nováček vs. už ve Fediverse (hlavní akce úvodu) */
.start-fork-block { background: var(--bg-panel);
  border: 1px solid var(--border); border-radius: 14px; padding: 20px; }
.start-fork-title { margin: 0 0 4px; }
.start-fork-lead { margin: 0 0 14px; color: var(--text-dim); }
.start-fork { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; }
.start-fork-card { display: flex; flex-direction: column; gap: 8px; padding: 16px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; }
.start-fork-card--primary { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.start-fork-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text); flex: 1 1 auto; }
.start-fork-card .cta-btn { align-self: flex-start; margin-top: 4px; }
.start-fork-mascot { width: auto; height: var(--mascot-h); align-self: center; justify-self: center; margin: 0 16px; }
@media (max-width: 640px) {
  .start-fork { grid-template-columns: 1fr; }
  .start-fork-mascot { order: -1; height: 150px; margin: 0; }
}
button[data-start][aria-pressed="true"] { font-weight: 700; background: var(--accent); color: var(--bg); }
.start-steplist { display: flex; flex-direction: column; gap: 12px; }
.start-step-item { display: flex; flex-direction: column; gap: 3px; }
.start-step-item .start-link { align-self: flex-start; }
.start-pill-desc { margin: 0; font-size: 12px; line-height: 1.4; color: var(--text-dim); }
.step-return-hint { margin-top: 12px; font-size: 13px; color: var(--text-muted, var(--text)); opacity: .75; }
.start-picker-next { margin-top: 20px; }
.start-picker-next-hint { margin: 0 0 8px; font-size: 14px; line-height: 1.5; }
.start-starter-box p { margin: 0; line-height: 1.55; }
.fday4-webonly { font-size: 13px; color: var(--text-dim); font-style: italic; }
/* P5 — inline glossary termín + popover */
.glossary-term { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: help; border-bottom: 1px dotted var(--accent); }
.glossary-term:hover { border-bottom-style: solid; color: var(--accent); }
.glossary-term:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.glossary-term--plain { border-bottom: 0; cursor: text; }   /* fail-safe: heslo chybí → čistý text */
.glossary-popover { position: absolute; z-index: 1000; max-width: 320px; background: var(--bg-card); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; box-shadow: 0 8px 24px rgba(0,0,0,.25); font-size: 13px; line-height: 1.5; }
.glossary-popover__term { display: block; font-size: 14px; color: var(--text-strong); margin-bottom: 4px; }
.glossary-popover__short { margin: 0 0 8px; }
.glossary-popover__more { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: var(--accent); font-weight: 600; }
.glossary-popover__more:hover { text-decoration: underline; }
@media (prefers-reduced-motion: no-preference) { .glossary-popover { animation: glossfade .12s ease; } }
@keyframes glossfade { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
.onb-link { display: inline-block; font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }
.onb-link:hover { text-decoration: underline; }
.start-card .onb-link { margin-top: 8px; }

/* Inline výběr instance v kroku 3 */
.start-step3-pick { margin-top: 8px; }
.start-inst-list { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 4px; }
.start-inst-heading { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.start-inst-empty, .start-inst-loading { margin: 4px 0; font-size: 14px; color: var(--text); }
.start-inst-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); }
.start-inst-item__body { flex: 1 1 auto; min-width: 0; }
.start-inst-item__top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.start-inst-item__host { font-size: 13px; color: var(--text-dim); }
.start-inst-item__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 5px; font-size: 12px; }
.start-inst-item__users { color: var(--text-dim); }
.start-inst-item__beg { color: var(--accent); font-weight: 600; }
.start-inst-item__desc { font-size: 13px; line-height: 1.5; color: var(--text); margin: 6px 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.start-inst-item__choose { flex: 0 0 auto; margin-top: 0; padding: 8px 14px; font-size: 13px; cursor: pointer; border: none; }
.start-inst-more { display: inline-block; margin-top: 6px; font-size: 14px; }

/* Vybraná instance v kroku 4 */
.start-chosen-box { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.start-chosen-lead { margin: 0; line-height: 1.55; }
.start-chosen-box .cta-btn { margin-top: 0; }
.start-chosen-change { background: none; border: none; padding: 0; color: var(--text-dim); font-size: 13px; text-decoration: underline; cursor: pointer; font-family: inherit; }

/* Zpětný oblouk registrace (krok 4) — note + uložitelný návratový odkaz */
.start-chosen-note { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text); }
.start-savelink { width: 100%; box-sizing: border-box; padding: 12px;
  border: 1px dashed var(--border); border-radius: 10px; background: var(--bg-panel); }
.start-savelink-label { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--text); }
.start-savelink-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.start-savelink-url { flex: 1 1 220px; min-width: 0; padding: 7px 10px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text); }
.start-savelink-copy { white-space: nowrap; }
.start-savelink-hint { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--text-dim); }

/* Resume banner — návrat na rozdělaný onboarding (nahoře ve „Začínáme") */
.start-resume { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 18px; }
.start-resume-text { margin: 0; flex: 1 1 240px; font-weight: 600; color: var(--text); }
.start-resume .cta-btn { margin-top: 0; }
.start-resume-dismiss { background: none; border: none; cursor: pointer; color: var(--text-dim);
  font: inherit; text-decoration: underline; padding: 6px; }
.start-resume-dismiss:hover { color: var(--text); }

@media (max-width: 560px) {
  .start-inst-item { flex-direction: column; align-items: stretch; }
  .start-inst-item__choose { width: 100%; }
}
.onboarding-checklist, .onboarding-norms { margin: 12px 0 20px; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.onboarding-checklist li, .onboarding-norms li { line-height: 1.55; }
.onboarding-step h3 { margin: 24px 0 4px; font-size: 16px; }