/* Komunita N760 F2 - vzhľad podľa brandu CARICIA (fakty Mozgu, stav aktualne, a plátna Finálna v3).
   Coral #ED6C64 = tlačidlá, plochy, progres (text na Coral #1F2322); Charcoal #373736 = všetok text a vybrané značky (biely text);
   Champagne Gold #C0A46E len akcenty (nikdy text na svetlom); odkazy Gold Deep #8C7240; pozadie Off White #F5F5F5, karty biele. Písmo Satoshi. */
@font-face { font-family: 'Satoshi'; src: url('/komunita/pismo/Satoshi-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('/komunita/pismo/Satoshi-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('/komunita/pismo/Satoshi-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('/komunita/pismo/Satoshi-Black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  --coral: #ED6C64; --coral-svetla: #FBE9E7; --coral-text: #1F2322; --coral-tmava: #C2453C;
  --charcoal: #373736; --gold: #C0A46E; --gold-deep: #8C7240; --gold-hover: #5E4C2A;
  --pozadie: #F5F5F5; --karta: #FFFFFF; --linka: #E4E4E7; --linka2: #D4D4D8; --tlmeny: #52525B; --tlmeny2: #5C5C5A;
  --ok-poz: #DCFCE7; --ok-text: #14532D; --caka: #78350F;
  --r: 12px; --menu: 236px;
  --spodok: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--pozadie); color: var(--charcoal); font-family: 'Satoshi', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; font-size: 15px; line-height: 1.5; -webkit-text-size-adjust: 100%; }
a { color: var(--gold-deep); text-decoration: none; }
a:hover { color: var(--gold-hover); text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.skryt { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
[hidden] { display: none !important; }
h1, h2, h3 { font-weight: 700; margin: 0; line-height: 1.25; }
h1 { font-size: 24px; } h2 { font-size: 19px; } h3 { font-size: 16px; }
.tlmeny { color: var(--tlmeny); }
.male { font-size: 13px; }

/* tlačidlá */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--coral); color: var(--coral-text); font-weight: 700; text-decoration: none; }
.btn:hover { filter: brightness(.96); text-decoration: none; color: var(--coral-text); }
.btn[disabled] { opacity: .55; cursor: default; }
.btn.plne { width: 100%; min-height: 52px; border-radius: 14px; font-weight: 800; }
.btn.tichy { background: var(--karta); color: var(--charcoal); border: 1px solid var(--linka2); font-weight: 600; }
.btn.maly { min-height: 36px; padding: 0 12px; font-size: 14px; border-radius: 10px; }
.odkaz { background: none; border: 0; padding: 4px 2px; color: var(--gold-deep); font-weight: 600; min-height: 32px; }
.odkaz:hover { color: var(--gold-hover); text-decoration: underline; }
.ikona-btn { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--linka); background: var(--karta); display: inline-flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0; }
.bodka { position: absolute; top: 9px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--coral); border: 2px solid #fff; }

/* značky (výber viac naraz) */
.znacky { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.chip { height: 34px; padding: 0 12px; border-radius: 17px; border: 1px solid var(--linka2); background: var(--karta); color: var(--charcoal); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.chip[aria-pressed="true"] { border-color: var(--charcoal); background: var(--charcoal); color: #FFFFFF; font-weight: 600; }
.chip svg { flex-shrink: 0; }
.chip.velky { height: 48px; border-radius: 12px; justify-content: center; font-weight: 600; }
.chip.velky[aria-pressed="true"] { border-width: 2px; }
.mriezka2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mriezka2 .chip { width: 100%; }
.znacky-mobil { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.znacky-mobil::-webkit-scrollbar { display: none; }
.znacky-mobil .chip { height: 36px; border-radius: 18px; }

/* prihlásenie a prvé spustenie */
.uvod { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--karta); max-width: 520px; margin: 0 auto; }
@media (min-width: 560px) { body.uvodny { background: var(--pozadie); } .uvod { min-height: auto; margin: 40px auto; border-radius: 18px; overflow: hidden; border: 1px solid var(--linka); } }
/* počítač: vľavo Coral s logom a mottom, vpravo formulár */
@media (min-width: 900px) {
  .uvod { max-width: 980px; display: grid; grid-template-columns: 1fr 1fr; min-height: 600px; margin: 48px auto; }
  .uvod > .uvod-hlava { grid-row: 1 / span 3; padding: 56px 48px; }
  .uvod > .uvod-hlava .uvod-logo { width: min(340px, 86%); }
  .uvod > .uvod-hlava .motto { font-size: 20px; font-weight: 700; line-height: 1.45; color: #FFFFFF; max-width: 400px; }
  .uvod > .uvod-telo, .uvod > .uvod-spodok { grid-column: 2; }
  .uvod > .uvod-telo { padding: 44px 40px 20px; justify-content: center; }
  .uvod > .uvod-spodok { padding: 0 40px 36px; }
}
.registracia-odkaz { margin: 4px 0 0; text-align: center; font-size: 14px; color: var(--tlmeny); }
.uvod-hlava { background: var(--coral); padding: 44px 24px 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; color: var(--coral-text); position: relative; overflow: hidden; isolation: isolate; }
/* vzor ako na banneri komunity: veľké biele sakury s nízkou krycou silou */
.uvod-hlava::before, .uvod-hlava::after { content: ''; position: absolute; z-index: -1; background: url('/komunita/ikony/caricia/sakura-biela.svg') no-repeat center / contain; opacity: .09; pointer-events: none; }
.uvod-hlava::before { width: 340px; height: 500px; right: -120px; top: -140px; transform: rotate(18deg); }
.uvod-hlava::after { width: 260px; height: 380px; left: -110px; bottom: -190px; transform: rotate(-24deg); }
.uvod-hlava .uvod-logo { width: min(260px, 72%); height: auto; }
/* text na Coral: malý tmavý #1F2322, biely len veľký (fakt Pravidlá použitia farieb CARICIA) */
.uvod-hlava .motto { margin: 2px 0 0; max-width: 360px; font-size: 15px; line-height: 1.5; color: var(--coral-text); font-weight: 500; }
.uvod-hlava h1 { font-size: 24px; font-weight: 800; color: var(--coral-text); }
.uvod-hlava .krok { font-size: 12px; font-weight: 600; }
.uvod-telo { flex: 1; padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.uvod-spodok { padding: 12px 24px calc(28px + var(--spodok)); display: flex; flex-direction: column; gap: 10px; }
.pole { display: flex; flex-direction: column; gap: 8px; }
.pole label, .pole .nadpis-pola { font-weight: 700; }
.vstup, select.vstup, textarea.vstup { width: 100%; min-height: 48px; border: 1px solid #CFC7B8; border-radius: 12px; padding: 10px 14px; background: #FFFFFF; color: var(--charcoal); }
textarea.vstup { min-height: 120px; resize: vertical; line-height: 1.5; }
.vstup.kod { font-size: 26px; letter-spacing: 8px; text-align: center; font-weight: 700; }
.pozn { font-size: 13px; color: var(--tlmeny2); }
.chyba { color: #9F1D16; font-size: 14px; font-weight: 600; }
.ok-sprava { color: var(--ok-text); font-size: 14px; font-weight: 600; }
.zaskrtni { display: flex; gap: 12px; align-items: flex-start; }
.zaskrtni input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--charcoal); flex-shrink: 0; }
.riadok-info { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 12px; background: var(--pozadie); }
.riadok-info svg { flex-shrink: 0; }
.riadok-info b { display: block; }
.riadok-info span { font-size: 13px; color: var(--tlmeny2); line-height: 1.45; }

/* rozloženie appky */
.appka { display: flex; min-height: 100vh; min-height: 100dvh; }
.menu { width: var(--menu); flex-shrink: 0; background: var(--karta); border-right: 1px solid var(--linka); padding: 18px 14px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; }
.logo { display: flex; align-items: center; gap: 10px; padding: 4px 10px 16px; color: var(--charcoal); }
.logo:hover { text-decoration: none; color: var(--charcoal); }
.logo img { width: 28px; height: 40px; }
.logo img.logo-komunita { width: 178px; height: auto; }
.zasuvka .logo img.logo-komunita { width: 150px; }
.logo span { font-weight: 800; font-size: 17px; letter-spacing: .01em; }
.logo span i { font-style: normal; font-weight: 500; }
.menu a.pol { display: flex; justify-content: space-between; align-items: center; padding: 9px 10px; border-radius: 8px; color: var(--charcoal); min-height: 40px; }
.menu a.pol:hover { background: var(--pozadie); text-decoration: none; }
.menu a.pol[aria-current="page"] { background: var(--coral-svetla); font-weight: 600; }
.menu a.pol .poc { font-size: 12px; color: var(--caka); font-weight: 600; }
.menu .skupina { font-size: 11px; font-weight: 600; color: var(--tlmeny); text-transform: uppercase; letter-spacing: .06em; padding: 14px 10px 4px; }
.profil-odkaz { margin-top: auto; padding: 12px 10px; border-top: 1px solid var(--linka); display: flex; align-items: center; gap: 10px; color: var(--charcoal); }
.profil-odkaz:hover { text-decoration: none; color: var(--charcoal); background: var(--pozadie); border-radius: 8px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: #ECE4D3; color: var(--charcoal); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.profil-odkaz b { display: block; font-weight: 600; }
.profil-odkaz small { display: block; font-size: 12px; color: var(--tlmeny); }

.hlavna { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hore { background: var(--karta); border-bottom: 1px solid var(--linka); padding: 12px 24px; display: flex; flex-direction: column; gap: 10px; position: sticky; top: 0; z-index: 5; }
.hore-riadok { display: flex; gap: 12px; align-items: center; }
.hladanie { flex: 1; position: relative; }
.hladanie input { width: 100%; height: 40px; border: 1px solid var(--linka2); border-radius: 10px; padding: 0 14px; background: #fff; }
.znacky-pozn { font-size: 12px; color: var(--tlmeny); }
.obsah { padding: 18px 24px 40px; display: flex; gap: 16px; align-items: flex-start; }
.stlpec { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.bocny { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; position: sticky; top: 120px; }

/* mobil */
.mobil-hore, .spodne-menu, .zasuvka, .zatienenie { display: none; }
@media (max-width: 899px) {
  .menu, .hore { display: none; }
  .mobil-hore { display: flex; flex-direction: column; gap: 12px; background: var(--karta); padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px; border-bottom: 1px solid var(--linka); position: sticky; top: 0; z-index: 5; }
  .mobil-riadok { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .mobil-titul { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .mobil-titul img { width: 20px; height: 29px; }
  .mobil-titul span { font-weight: 700; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .obsah { padding: 14px 16px calc(96px + var(--spodok)); flex-direction: column; }
  .bocny { width: 100%; position: static; order: -1; }
  .bocny .len-web { display: none; }
  .spodne-menu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; height: calc(72px + var(--spodok)); padding-bottom: var(--spodok); background: var(--karta); border-top: 1px solid var(--linka); z-index: 6; }
  .spodne-menu a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--tlmeny); font-size: 12px; }
  .spodne-menu a:hover { text-decoration: none; }
  .spodne-menu a[aria-current="page"] { color: var(--coral-tmava); font-weight: 600; }
  .zasuvka { display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; width: min(390px, 92vw); background: var(--karta); z-index: 21; transform: translateX(-102%); transition: transform .2s ease; }
  .zasuvka.otvorena { transform: none; }
  .zatienenie { display: block; position: fixed; inset: 0; background: rgba(31, 35, 34, .38); z-index: 20; }
  .zasuvka-hlava { padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--linka); }
  .zasuvka-telo { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; }
  .zasuvka-telo a.pol { padding: 11px 4px; color: var(--charcoal); min-height: 44px; display: flex; align-items: center; justify-content: space-between; }
  .zasuvka-telo a.pol[aria-current="page"] { font-weight: 700; }
  .zasuvka .profil-odkaz { margin: 0; padding: 12px 16px calc(12px + var(--spodok)); }
  .fab { position: fixed; right: 16px; bottom: calc(86px + var(--spodok)); z-index: 6; box-shadow: 0 4px 14px rgba(55, 55, 54, .22); }
}
@media (min-width: 900px) { .fab { display: none; } }

/* karty a zoznamy */
.karta { background: var(--karta); border: 1px solid var(--linka); border-radius: var(--r); padding: 14px 16px; }
.karta.odkazom { display: block; color: var(--charcoal); }
.karta.odkazom:hover { text-decoration: none; border-color: var(--linka2); box-shadow: 0 1px 4px rgba(55, 55, 54, .06); }
.stitky { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--tlmeny); }
.stitok { padding: 3px 8px; border-radius: 6px; background: var(--pozadie); color: var(--charcoal); font-weight: 600; }
.stitok.znacka { background: transparent; border: 1px solid var(--linka2); font-weight: 500; }
.stitok.ok { background: var(--ok-poz); color: var(--ok-text); }
.stitok.pin { background: #ECE4D3; }
.stitok.tim { background: var(--charcoal); color: #fff; }
.stitok.caka { background: #FEF3C7; color: var(--caka); }
.karta h3 { margin: 8px 0 4px; font-size: 15px; }
.karta p { margin: 0; color: #3F3F46; }
.ukazka { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.meta { margin-top: 8px; font-size: 12px; color: var(--tlmeny); display: flex; gap: 12px; flex-wrap: wrap; }
.boc-titul { font-size: 12px; color: var(--tlmeny); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.progres { height: 6px; border-radius: 3px; background: var(--linka); margin: 8px 0; overflow: hidden; }
.progres i { display: block; height: 6px; background: var(--coral); }
.filtre { display: flex; gap: 8px; flex-wrap: wrap; }
.prazdne { text-align: center; padding: 36px 16px; color: var(--tlmeny); }
.nadpis-sekcie { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.skupina-znacky { margin-top: 6px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--tlmeny); }

/* detail a komentáre */
.text-prispevku { white-space: pre-wrap; word-wrap: break-word; margin: 10px 0 0; }
.akcie { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.akcia { min-height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--linka); background: #fff; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.akcia[aria-pressed="true"] { border-color: var(--coral); background: var(--coral-svetla); font-weight: 600; }
.komentar { padding: 12px 0; border-top: 1px solid var(--linka); }
.komentar.vnoreny { margin-left: 22px; padding-left: 12px; border-left: 2px solid var(--linka); border-top: 0; }
.komentar.riesenie { background: #F2FBF4; border-radius: 10px; padding: 12px; border: 1px solid #B7E4C3; }
.kto { display: flex; gap: 8px; align-items: center; font-size: 13px; flex-wrap: wrap; }
.kto b { font-weight: 700; }
.preklad { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--pozadie); white-space: pre-wrap; }
.pisanie { display: flex; flex-direction: column; gap: 8px; position: relative; }
.navrhy-mien { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border: 1px solid var(--linka2); border-radius: 10px; z-index: 8; box-shadow: 0 6px 18px rgba(55, 55, 54, .12); overflow: hidden; }
.navrhy-mien button { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; background: #fff; min-height: 44px; }
.navrhy-mien button:hover, .navrhy-mien button:focus { background: var(--pozadie); }
.upozornenie-moder { padding: 10px 12px; border-radius: 10px; background: #FEF3C7; color: var(--caka); font-size: 14px; margin-top: 8px; }
.lea-navrh { padding: 12px; border-radius: 12px; background: #F7F2E8; border: 1px solid #E5D9BF; }
.lea-navrh b { display: block; margin-bottom: 4px; }

/* okno */
.okno-pozadie { position: fixed; inset: 0; background: rgba(31, 35, 34, .45); z-index: 30; display: flex; align-items: flex-end; justify-content: center; }
.okno { background: #fff; width: 100%; max-width: 640px; max-height: 92vh; max-height: 92dvh; overflow-y: auto; border-radius: 18px 18px 0 0; padding: 20px 20px calc(20px + var(--spodok)); display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 700px) { .okno-pozadie { align-items: center; } .okno { border-radius: 18px; } }
.okno-hlava { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.okno-spodok { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.fotky-nahlad { display: flex; gap: 8px; flex-wrap: wrap; }
.fotky-nahlad span { position: relative; }
.fotky-nahlad img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; }
.fotky-nahlad button { position: absolute; top: -6px; right: -6px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--linka2); background: #fff; font-size: 14px; line-height: 1; }

#toast { position: fixed; left: 50%; bottom: calc(92px + var(--spodok)); transform: translateX(-50%); background: var(--charcoal); color: #fff; padding: 12px 18px; border-radius: 12px; z-index: 40; max-width: min(92vw, 520px); font-size: 14px; box-shadow: 0 6px 20px rgba(0, 0, 0, .2); }
@media (min-width: 900px) { #toast { bottom: 28px; } }
.banner { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: #F7F2E8; border: 1px solid #E5D9BF; border-radius: var(--r); padding: 12px 14px; }
.nacitavam { padding: 40px; text-align: center; color: var(--tlmeny); }
.zoznam-riadky { display: flex; flex-direction: column; }
.zoznam-riadky > * { padding: 10px 0; border-bottom: 1px solid var(--linka); }
.zoznam-riadky > *:last-child { border-bottom: 0; }
.pravidla p { margin: 0 0 10px; }
/* editor menu */
.upravit-menu { display: flex; align-items: center; gap: 6px; margin: 10px 10px 0; font-size: 13px; }
.me-zoznam { display: flex; flex-direction: column; gap: 8px; }
.me-riadok { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1px solid var(--linka); border-radius: 12px; background: #fff; }
.me-riadok.skryta { opacity: .6; }
.me-riadok.me-pevny { justify-content: space-between; align-items: center; background: var(--pozadie); }
.me-sipky { display: flex; flex-direction: column; gap: 4px; }
.me-sipky .ikona-btn { width: 36px; height: 32px; font-size: 16px; }
.me-polia { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.me-volby { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.me-volby select.vstup { width: auto; min-height: 38px; padding: 6px 10px; }
.me-volby .zaskrtni { align-items: center; font-size: 14px; }
/* voľby notifikácií (prvé spustenie a Profil) */
.odporucanie { padding: 12px 14px; border-radius: 12px; background: #FEF3C7; color: var(--caka); font-weight: 600; font-size: 14px; line-height: 1.45; }
.notif-skupina { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--pozadie); }
.notif-nadpis { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 4px; }
.prepinac { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; cursor: pointer; }
.prepinac input { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--charcoal); flex-shrink: 0; }
.prepinac b { display: block; font-weight: 600; font-size: 14px; }
.prepinac.hlavny { padding: 10px 12px; margin: 2px -4px 6px; border-radius: 10px; background: #FFFFFF; border: 1px solid var(--linka2); }
.instalacia { padding: 14px 16px; border-radius: 12px; background: var(--coral-svetla); border: 1px solid #F4C2BE; display: flex; flex-direction: column; gap: 8px; }
.instalacia p { margin: 0; }
.instalacia-hlava { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.instalacia .krok-in { font-weight: 600; }
.instalacia-qr { display: flex; gap: 14px; align-items: center; }
.instalacia-qr img { background: #fff; border-radius: 8px; padding: 4px; flex-shrink: 0; }
.prepinac small { display: block; font-size: 13px; color: var(--tlmeny2); line-height: 1.4; }

/* profil: meno, priezvisko, O mne; karta osoby (Peter 8. 11. 2026) */
.dva-stlpce { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .dva-stlpce { grid-template-columns: 1fr; } }
.osoba-btn { display: inline-flex; gap: 8px; align-items: center; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.osoba-btn:hover b { text-decoration: underline; }
.o-mne { white-space: normal; line-height: 1.5; margin: 12px 0; }

/* body a úrovne (Peter 8. 11. 2026) */
.body-hlava { display: flex; gap: 12px; align-items: center; }
.odznak-uroven { display: inline-grid; place-items: center; min-width: 40px; height: 40px; border-radius: 50%; background: var(--gold-deep); color: #fff; font-weight: 700; font-size: 18px; }
.odznak-uroven.maly { min-width: 24px; height: 24px; font-size: 12px; }
.body-pruh { height: 8px; border-radius: 4px; background: rgba(0,0,0,.08); overflow: hidden; margin: 10px 0 6px; }
.body-pruh span { display: block; height: 100%; background: var(--coral); }
.body-ako { margin: 6px 0 0; padding-left: 18px; }
.rebricek { list-style: none; margin: 0; padding: 0; }
.rebricek li { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--linka); }
.rebricek li:last-child { border-bottom: 0; }
.rebricek li.ja { font-weight: 700; }
.rebricek .poradie { width: 22px; text-align: right; color: var(--gold-deep); font-weight: 700; }
.rebricek .osoba-btn { flex: 1; min-width: 0; }
.rebricek .body-n { margin-left: auto; white-space: nowrap; }
/* lupa v hľadaní (Peter 8. 11. 2026) */
.hladanie input { padding-right: 44px; }
.hl-lupa { position: absolute; right: 2px; top: 2px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: none; color: var(--tlmeny); cursor: pointer; border-radius: 8px; }
.hl-lupa:hover { color: var(--charcoal); background: var(--pozadie); }
[data-nova-otazka] { display: inline-flex; align-items: center; gap: 4px; }

/* zamknutý obsah (F3) */
.zamok-ikona { float: right; display: inline-flex; color: var(--tlmeny); margin-top: 2px; }
.zamok-karta { border: 1px dashed var(--gold); background: #FFFDF8; }
.zamok-hlava { display: flex; gap: 8px; align-items: center; color: var(--gold-deep); margin-bottom: 4px; }
.pristupy-zoz { list-style: none; margin: 0; padding: 0; }
.pristupy-zoz li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--linka); color: var(--tlmeny); }
.pristupy-zoz li:last-child { border-bottom: 0; }
.pristupy-zoz li.mam { color: var(--ok-text); }
.pristupy-zoz li > span { display: flex; flex-direction: column; flex: 1; color: var(--charcoal); }
.pristupy-zoz .odkaz { white-space: nowrap; }

/* logá značiek a editor značiek (F3) */
.chip-logo { display: inline-flex; align-items: center; gap: 6px; }
.logo-znacky { width: 18px; height: 18px; object-fit: contain; flex: 0 0 auto; }
.ze-logo { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 64px; }
.ze-logo img { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; background: #fff; border: 1px solid var(--linka); }
.ze-nahrat { font-size: 12px; cursor: pointer; }

/* školenia (F3) */
.skolenie-karta { display: flex; gap: 12px; }
.skolenie-karta img { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.skolenie-obr { width: 100%; max-height: 260px; object-fit: cover; border-radius: 10px; margin-bottom: 10px; }
.skupina-znacky { display: flex; align-items: center; gap: 8px; }
.video { position: relative; padding-top: 56.25%; border-radius: 10px; overflow: hidden; background: #000; margin: 10px 0; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lekcie { margin: 10px 0 0; padding-left: 22px; }
.lekcie li { padding: 6px 0; }
.lekcie li.hotova { color: var(--ok-text); }
.kviz fieldset { border: 1px solid var(--linka); border-radius: 10px; margin: 10px 0; padding: 10px 12px; }
.kviz fieldset.zle { border-color: var(--coral-tmava); background: var(--coral-svetla); }
.kviz legend { font-weight: 700; padding: 0 4px; }
.chyba-text { color: var(--coral-tmava); }
.sk-form .pole { margin-bottom: 10px; }
.sk-form .riadok { display: flex; gap: 8px; align-items: center; }
.sk-lekcia .me-polia { display: flex; flex-direction: column; gap: 6px; }

/* karta osoby - údaje pre vedenie; lišta novej verzie appky (8. 11. 2026) */
.pre-tim{margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--plocha-2,#F5F5F5);display:grid;gap:4px}
.pre-tim a{color:inherit;text-decoration:underline}
.lista-aktual{position:fixed;left:12px;right:12px;bottom:calc(76px + env(safe-area-inset-bottom));z-index:60;display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:12px;background:#373736;color:#fff;box-shadow:0 4px 16px rgba(0,0,0,.2);max-width:520px;margin:0 auto}
.lista-aktual .btn{background:#ED6C64;color:#fff;border:0}

/* menu v zreteľných blokoch a výber značiek v zásuvke (Peter 8. 11. 2026) */
.menu-blok { margin-top: 10px; padding: 4px 6px 6px; border-radius: 12px; background: var(--pozadie); }
.menu-blok .skupina, .menu .menu-blok .skupina { padding: 8px 6px 4px; font-size: 11px; font-weight: 700; color: var(--coral, #ED6C64); text-transform: uppercase; letter-spacing: .06em; }
.menu-blok a.pol { padding-left: 12px; }
.menu-blok a.pol + a.pol { border-top: 1px solid var(--linka); border-radius: 0; }
.menu-blok a.pol:first-of-type { border-top: 0; }
.vyber-znaciek { display: grid; gap: 6px; padding: 4px 0 14px; margin-bottom: 4px; border-bottom: 1px solid var(--linka); }
.vyber-znaciek b { font-size: 15px; }
.vyber-znaciek .mriezka2 { margin-top: 4px; }
.zasuvka-telo .menu-blok a.pol { padding-left: 12px; padding-right: 8px; }

/* E-shop a akcie (8. 11. 2026) */
.s-bodkou, .menu a.pol { position: relative; }
.bodka-nova { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #ED6C64; box-shadow: 0 0 0 2px var(--karta); }
.spodne-menu .bodka-nova { position: absolute; top: 12px; left: calc(50% + 8px); }
.menu a.pol .bodka-nova { margin-left: auto; margin-right: 4px; }
.akcia-karta h3 { margin: 8px 0 4px; }
.akcia-karta .stitok .logo-znacky { vertical-align: -3px; margin-right: 4px; }

/* pokračovať v kurze (8. 11. 2026) */
.btn.pokracuj { display: flex; width: 100%; justify-content: center; margin: 0 0 12px; }

/* náhľad fotky v zozname a prílohy zo starej komunity (9. 11. 2026) */
.prilohy { display: grid; gap: 6px; margin: 10px 0 4px; }
.priloha { display: inline-flex; gap: 6px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--pozadie); color: var(--charcoal); text-decoration: none; overflow-wrap: anywhere; }
.priloha:hover { text-decoration: underline; }

/* užitočné odkazy v pravej lište (9. 11. 2026) */
.odkazy-zoznam { display: grid; gap: 2px; margin: 8px 0 6px; }
.odkazy-zoznam a { padding: 7px 4px; color: var(--charcoal); border-bottom: 1px solid var(--linka); }
.odkazy-zoznam a:last-child { border-bottom: 0; }
.od-riadok { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 6px; margin-bottom: 6px; align-items: center; }
@media (max-width: 520px) { .od-riadok { grid-template-columns: 1fr auto; } .od-riadok input[type=url] { grid-column: 1 / 2; } }

/* blok Plus v menu a prístupy na karte osoby (9. 11. 2026) */
.menu-blok.plus-blok { background: #FDF1EF; }
.os-pristupy { display: grid; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--linka); }
.os-pristup { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.os-pristup > span:first-child { flex: 1; min-width: 120px; }

/* Udalosti (9. 11. 2026) */
.udalost-karta { display: flex; gap: 14px; align-items: flex-start; }
.udalost-karta.tlmena { opacity: .6; }
.ud-datum { flex: 0 0 52px; text-align: center; border-radius: 10px; background: var(--pozadie); padding: 6px 0; line-height: 1.1; }
.ud-datum b { display: block; font-size: 22px; }
.ud-datum span { font-size: 12px; text-transform: uppercase; }
.udalost-karta .akcie { margin-top: 8px; }
.ud-riadok { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.ud-online { margin-top: 12px; }
.ud-najblizsia { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; color: var(--charcoal); }
.ud-pripomienky { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; margin-top: 6px; }
.ud-pripomienky > span { min-width: 110px; font-size: 14px; }
/* mobil bez posúvania do strán (Peter 9. 11. 2026): stĺpce na celú šírku, dlhé slová a odkazy sa zalomia */
html, body { overflow-x: hidden; }
.stlpec, .karta, .karta-obsah { min-width: 0; max-width: 100%; }
.karta h1, .karta h3, .ukazka, .text, .zoznam-riadky a, .pozn { overflow-wrap: anywhere; }
.text img, .karta img { max-width: 100%; }
@media (max-width: 899px) {
  .obsah { align-items: stretch; }
  .stlpec, .bocny { width: 100%; max-width: 100%; }
  .bocny.mimo-domova { display: none; }
}

/* dizajn 9. 11. 2026 (Peter): vybraté značky biele s výrazným okrajom (logá nesplývajú), väčšie náhľady na PC, krajšia a skrolovateľná pravá lišta */
.chip[aria-pressed="true"] { background: #FFFFFF; color: var(--charcoal); border: 2px solid var(--charcoal); font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.chip[aria-pressed="false"] { background: transparent; color: var(--tlmeny); }
.chip[aria-pressed="false"] .logo-znacky { opacity: .55; filter: grayscale(.4); }
.chip-logo .logo-znacky { width: 20px; height: 20px; }
@media (min-width: 900px) {
  .bocny { top: 112px; max-height: calc(100vh - 128px); overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; scrollbar-width: thin; }
}
.bocny .karta { padding: 14px 16px; border-radius: 14px; }
.boc-titul { font-size: 11px; color: var(--coral-tmava, #C9544C); font-weight: 700; letter-spacing: .08em; display: flex; align-items: center; gap: 6px; }
.boc-titul::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--coral, #ED6C64); }
.bocny .zoznam-riadky { gap: 0; }
.bocny .zoznam-riadky > a { display: block; padding: 8px 0; font-size: 14px; line-height: 1.35; border-bottom: 1px solid var(--linka); }
.bocny .zoznam-riadky > a:last-child { border-bottom: 0; }
.odkazy-zoznam { gap: 0; margin: 6px 0 4px; }
.odkazy-zoznam a { display: flex; justify-content: space-between; gap: 8px; padding: 6px 2px; font-size: 14px; line-height: 1.3; border-bottom: 1px solid var(--linka); text-decoration: none; }
.odkazy-zoznam a span { color: var(--tlmeny); font-size: 12px; }
.odkazy-zoznam a:hover { color: var(--coral-tmava, #C9544C); }
.odkazy-karta #odUprav { margin-top: 6px; }

.moje-zoznam a { display: block; color: var(--charcoal); text-decoration: none; }
.moje-zoznam a:hover div:first-child { color: var(--coral-tmava, #C9544C); }

/* fotky celé a veľké ako feed na sieťach (Peter 9. 11. 2026, customer experience): nič sa neoreže (contain), pomer strán ostáva */
.karta.s-fotkou .karta-obsah { margin-bottom: 12px; }
.karta-media { border-radius: 12px; overflow: hidden; background: #F4F1EC; }
.karta-media img { display: block; max-width: 100%; }
.karta-media.jedna { display: flex; justify-content: center; }
.karta-media.jedna img { width: auto; height: auto; max-height: min(560px, 72vh); object-fit: contain; }
.karta-media.mriezka { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: var(--karta); }
.karta-media.mriezka span { position: relative; min-height: 0; background: #F4F1EC; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.karta-media.mriezka img { width: 100%; height: 100%; object-fit: contain; }
.karta-media.n2 { grid-template-rows: clamp(240px, 42vw, 440px); }
.karta-media.n4 { grid-template-rows: repeat(2, clamp(160px, 30vw, 280px)); }
.karta-media.n3 { grid-template-rows: clamp(200px, 40vw, 360px) clamp(150px, 30vw, 260px); }
.karta-media.n3 span:first-child { grid-column: 1 / -1; }
.karta-media .viac { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(30, 30, 30, .45); color: #fff; font-size: 28px; font-weight: 700; }
.karta.s-fotkou .meta { margin-top: 10px; }
@media (max-width: 520px) {
  .karta.odkazom.s-fotkou .karta-media { margin: 0 -16px; border-radius: 0 !important; }
  .karta-media.jedna img { max-height: 78vh; }
}
/* detail: fotky celé; jedna na celú šírku, viac v dvoch stĺpcoch v prirodzenom pomere */
.fotky { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; align-items: start; }
.fotky a { display: block; border-radius: 12px; overflow: hidden; background: #F4F1EC; }
.fotky img { display: block; width: 100%; height: auto; max-height: 80vh; object-fit: contain; }
.fotky.jedna { grid-template-columns: 1fr; }
.fotky.jedna a { display: flex; justify-content: center; }
.fotky.jedna img { width: auto; max-width: 100%; max-height: min(720px, 80vh); }
.fotky.male { grid-template-columns: repeat(auto-fill, minmax(140px, 220px)); }
/* Školenia a Udalosti: obálky celé */
.skolenie-karta img { width: 128px; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #F4F1EC; border-radius: 8px; }
.skolenie-obr { display: block; width: 100%; height: auto; max-height: min(480px, 70vh); object-fit: contain; background: #F4F1EC; border-radius: 12px; }
@media (max-width: 520px) { .skolenie-karta { flex-direction: column; } .skolenie-karta img { width: 100%; } }

/* krajšia komunita (Peter 9. 11. 2026: celá nech je vizuálne krásna) */
/* feed v príjemnej šírke ako na sieťach, nie roztiahnutý cez celý monitor */
@media (min-width: 900px) { .obsah { width: 100%; max-width: 1200px; margin: 0 auto; } }
/* prázdne miesto okolo celej fotky vyplní jej rozmazaná kópia (ako Instagram), fotka sama ostáva celá */
.karta-media.jedna, .karta-media.mriezka span { position: relative; isolation: isolate; overflow: hidden; }
.karta-media.jedna::before, .karta-media.mriezka span::before { content: ''; position: absolute; inset: -30px; z-index: -1; background: var(--f, none) center / cover no-repeat; filter: blur(28px) saturate(1.15); opacity: .55; }
.karta-media img { position: relative; }
/* karty: jemnejší tieň, väčšie zaoblenie, vzdušnejší obsah */
.stlpec > .karta, .stlpec .zoznam > .karta { border-radius: 16px; }
.karta.odkazom { padding: 16px 18px; border-color: #ECECEE; box-shadow: 0 1px 2px rgba(55, 55, 54, .04); transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease; }
.karta.odkazom:hover { box-shadow: 0 6px 20px rgba(55, 55, 54, .08); border-color: var(--linka2); }
.karta.odkazom h3 { font-size: 16px; line-height: 1.35; margin: 10px 0 4px; }
.karta.odkazom .ukazka { color: #52525B; font-size: 14.5px; }
.karta.s-fotkou .karta-media { border-radius: 12px; }
@media (max-width: 520px) { .karta.odkazom { padding: 14px 16px; } .karta.odkazom.s-fotkou .karta-media { margin: 0 -16px; } }
/* zoznamy akcií, školení a udalostí s medzerami; prázdny stav ako pekná karta so sakurou */
#akZoz, #skZoz, #udZoz { display: grid; gap: 12px; }
.prazdne { background: var(--karta); border: 1px dashed var(--linka2); border-radius: 16px; padding: 40px 20px 36px; color: var(--tlmeny); font-size: 15px; }
.prazdne::before { content: ''; display: block; width: 34px; height: 48px; margin: 0 auto 12px; background: url('/komunita/ikony/caricia/sakura-farebna.svg') no-repeat center / contain; opacity: .85; }
.nadpis-sekcie h1 { margin: 0; font-size: 24px; letter-spacing: -.01em; }
/* PC: fotka v zozname najviac na 1/3 šírky karty vpravo od textu, aby bola vidieť celá bez posúvania (Peter 9. 11. 2026) */
@media (min-width: 900px) {
  .karta.odkazom.s-fotkou { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-areas: "obsah media" "meta media"; grid-template-rows: auto 1fr; column-gap: 18px; align-items: start; }
  .karta.s-fotkou .karta-obsah { grid-area: obsah; margin-bottom: 0; }
  .karta.s-fotkou .meta { grid-area: meta; align-self: end; }
  .karta.s-fotkou .karta-media { grid-area: media; }
  .karta-media.jedna img { max-height: 380px; }
  .karta-media.n2 { grid-template-rows: 200px; }
  .karta-media.n3 { grid-template-rows: 170px 120px; }
  .karta-media.n4 { grid-template-rows: repeat(2, 140px); }
}
/* mobil: všetky karty pravej lišty hore, zbalené na nadpis; klik rozbalí (Peter 9. 11. 2026) */
@media (max-width: 899px) {
  .bocny { gap: 8px; }
  .bocny .len-web { display: block; }
  .bocny .karta { padding: 0; }
  .bocny .boc-titul { cursor: pointer; padding: 13px 16px; user-select: none; }
  .bocny .boc-titul::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s ease; }
  .bocny .karta.rozbalena .boc-titul::after { transform: rotate(-135deg); }
  .bocny .karta:not(.rozbalena) > :not(.boc-titul) { display: none !important; }
  .bocny .karta.rozbalena { padding-bottom: 12px; }
  .bocny .karta.rozbalena > :not(.boc-titul) { margin-left: 16px; margin-right: 16px; }
}