:root{
  --bg:#0c0a13;
  --panel:rgba(255,255,255,.055); --panel2:rgba(255,255,255,.10); --bg2:rgba(255,255,255,.032);
  --line:rgba(255,255,255,.13); --line2:rgba(255,255,255,.22);
  --glass-hi:rgba(255,255,255,.28);
  --blur:18px;   /* bolo 26 — cena rozmazania rastie s polomerom, rozdiel v pohľade je nepatrný */
  --acc:#8a67d6; --acc-l:#b39cea; --acc-xl:#e3d6fb;
  --acc-rgb:138,103,214;       /* --acc ako r,g,b pre rgba() tienovanie */
  --acc-hlboka:#5d3f96;        /* tmavý partner akcentu v gradientoch */
  --sklo-rgb:24,19,33;         /* tmavé sklo panelov (r,g,b) */
  --overlay-rgb:8,6,13;        /* overlay pod modálmi (r,g,b) */
  --sheet:#171223; --sheet2:#211a33; --panel-tmavy:#151020;
  --pozadie-vrch:#060509; --pozadie-spodok:#150f28;
  --gold:#f5c451;
  --txt:#f4f1fb; --muted:#bcb0d8; --faint:#9c8fc2;
  --up:#4ade80; --down:#fb7185;
  --r:18px; --r-s:13px;
  --shadow:0 10px 34px rgba(0,0,0,.4);
  --sheen:linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,0) 42%);
}
/* Povie prehliadaču, že stránka je tmavá — natívne prvky (rozbaľovacie
   zoznamy, scrollbary, dátumové polia) tak kreslí tmavé aj Windows.
   Bez tohto mal select na PC biely zoznam so svetlým textom = neviditeľné. */
:root{color-scheme:dark}
select option{background-color:#171321;color:var(--txt)}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  /* Zvislý prechod: hore čierno-zelená tma, dole presvitá tyrkys —
     aurora bloby dole ho ešte prehĺbia. */
  background:linear-gradient(180deg,var(--pozadie-vrch) 0%,var(--bg) 45%,var(--pozadie-spodok) 100%) fixed;
  color:var(--txt);
  /* Posúvanie áno, štipkanie a dvojklik na priblíženie nie. Toto je to,
     čo pinch-zoom naozaj zastaví — meta značku iOS Safari ignoruje. */
  touch-action:pan-x pan-y;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  min-height:100vh;
  /* Žiadny spodný padding: pätička je v toku na konci stránky a nesie si
     vlastné odsadenie. Miesto pre spodnú lištu na telefóne pridávajú
     mobilné pravidlá nižšie. */
  position:relative;
  overflow-x:hidden;
}
/* ---------- tekuté farebné pozadie, ktoré presklené panely rozmazávajú ---------- */
body::before,body::after,#pets ~ .aurora3{content:""}
.aurora{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.aurora span{position:absolute;border-radius:50%;filter:blur(90px);opacity:.78;will-change:transform}
/* Kompozícia à la Azgard: vrch takmer čierny, žiara žije DOLE a mäkko
   sa prelína nahor — žiadne svetlé fľaky pri hlavičke. */
.aurora span:nth-child(1){width:900px;height:760px;bottom:-320px;right:-200px;
  background:radial-gradient(circle at 60% 60%,var(--acc),transparent 70%)}
.aurora span:nth-child(2){width:760px;height:640px;bottom:-280px;left:-180px;
  background:radial-gradient(circle at 45% 55%,var(--acc-hlboka),transparent 72%);opacity:.85}
.aurora span:nth-child(3){width:640px;height:520px;bottom:-160px;left:30%;
  background:radial-gradient(circle at 50% 60%,var(--acc-l),transparent 72%);opacity:.28}
@keyframes blob1{0%,100%{transform:translate(0,0)}50%{transform:translate(-50px,40px)}}
@keyframes blob2{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,-50px)}}
@keyframes blob3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,-30px) scale(1.08)}}
/* POZOR na špecificitu: animácie sú priradené cez `.aurora span:nth-child(N)`,
   takže obyčajné `.aurora span{animation:none}` ich neprebije a pravidlo
   ticho nerobí nič. Preto `:nth-child(n)` — rovnaká váha, ale neskôr v poradí. */
@media(prefers-reduced-motion:reduce){.aurora span:nth-child(n){animation:none}}

/* Aurora NEHÝBE nikde (5. 9. 2026). Sú to tri gule s blur(90px) a nad nimi
   sedia panely s backdrop-filter — kým sa pozadie hýbe, prehliadač im musí
   prepočítavať rozmazanie v každom snímku. Na telefóne to trhalo, na Macu
   držalo 37 fps aj v pokoji a obsah sa pri scrolle domaľovával o sekundu
   neskôr. Farby aj hĺbka ostávajú, len stoja. Blok nižšie ostáva ako
   poistka pre prípadný návrat pohybu na počítači. */
@media(hover:none),(max-width:900px){
  .aurora span:nth-child(n){animation:none}
  .logo{animation:none}
}
.wrap{max-width:none;margin:0;padding:14px 48px 14px;position:relative;z-index:1}
@media(max-width:640px){.wrap{padding:14px 14px 10px}}

/* ---------- header ---------- */
header{display:flex;align-items:center;gap:13px;padding:10px 2px 16px}
.logo{flex:none;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));animation:float 5s ease-in-out infinite}
.logo-img{height:52px;width:auto;max-width:170px;object-fit:contain;display:block}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media (prefers-reduced-motion: reduce){.logo{animation:none}}
h1{font-size:1.4rem;font-weight:800;letter-spacing:.3px}
h1 span{color:var(--acc-l)}
.tagline{color:var(--muted);font-size:.78rem;margin-top:2px}
.head-tools{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;max-width:100%;min-width:0}
.head-tools > *,#nav > *{cursor:grab;user-select:none;-webkit-user-select:none}
.head-tools > *.tool-dragging,#nav > *.tool-dragging{cursor:grabbing;opacity:.6;z-index:5;position:relative;pointer-events:none}

/* ---------- stat tiles ---------- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:14px}
@media(min-width:640px){.stats{grid-template-columns:repeat(3,1fr)}}
.stat{background:var(--sheen),var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 13px 11px;min-width:0;
  backdrop-filter:blur(var(--blur)) saturate(160%);-webkit-backdrop-filter:blur(var(--blur)) saturate(160%);
  box-shadow:inset 0 1px 0 var(--glass-hi),var(--shadow);transition:.18s}
.stat .lbl{color:var(--muted);font-size:.66rem;text-transform:uppercase;letter-spacing:.7px;font-weight:700;line-height:1.3}
.stat .val{font-size:1.18rem;font-weight:800;margin-top:3px;white-space:nowrap}
.stat .sub{color:var(--faint);font-size:.7rem;margin-top:2px}
.stat.clickable,.item.clickable,.side-acct.clickable{cursor:pointer}
.stat.clickable:hover{border-color:var(--acc);transform:translateY(-1px);box-shadow:inset 0 1px 0 var(--glass-hi),0 14px 34px rgba(0,0,0,.42)}
.item.clickable:hover{border-color:var(--acc)}
.side-acct.clickable:hover{border-color:var(--acc);background:var(--sheen),var(--panel2)}
.stat .sub.pos{color:var(--up)}
.stat .sub.neg{color:var(--down)}
.pos{color:var(--up)} .neg{color:var(--down)}

/* ---------- tabs ---------- */
/* Dvanásť položiek s ikonami sa do jedného riadku na užšom okne
   nezmestí — posledná („Pridať") vypadávala von. `flex:1` ich nútil
   deliť si šírku rovnakým dielom bez ohľadu na text; teraz si každá
   berie, koľko potrebuje, a keď sa nezmestia, dá sa lištou posúvať. */
nav{display:flex;gap:4px;background:var(--sheen),var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:5px;
  position:sticky;top:8px;z-index:40;backdrop-filter:blur(var(--blur)) saturate(160%);-webkit-backdrop-filter:blur(var(--blur)) saturate(160%);
  box-shadow:inset 0 1px 0 var(--glass-hi),var(--shadow);
  /* Jeden riadok. Položky sa pri nedostatku miesta stláčajú (pravidlá
     nižšie), zalomenie je až posledná záchrana pre extrémne úzke okno. */
  flex-wrap:wrap;row-gap:4px}

/* Navigácia sa musí zmestiť do JEDNÉHO riadku. Jedenásť položiek sa pri
   bežnej šírke okna nezmestí s plnými odsadeniami — tak sa postupne
   uskromnia: najprv odsadenia a medzery, potom písmo, nakoniec počty. */
@media(min-width:901px) and (max-width:1500px){
  nav{gap:2px}
  nav button, nav .nav-odkaz{padding:10px 7px;font-size:.78rem}
  #nav button, #nav .nav-odkaz{gap:5px}
}
@media(min-width:901px) and (max-width:1240px){
  nav button, nav .nav-odkaz{padding:9px 5px;font-size:.74rem}
  #nav button, #nav .nav-odkaz{gap:4px}
  .nav-ik .pi-icon{width:17px;height:17px}
  /* Počty v zátvorkách sú prvé na rane — informácia je aj v sekcii. */
  nav button .cnt, nav .nav-odkaz .cnt{display:none}
}
/* Najužší desktop: bez ikoniek sa desať položiek do riadku nezmestí,
   text má prednosť — ikonky sú v tomto páse len ozdoba. */
@media(min-width:901px) and (max-width:1080px){
  nav button, nav .nav-odkaz{padding:9px 4px;font-size:.7rem;letter-spacing:0}
  #nav .nav-ik{display:none}
}
nav::-webkit-scrollbar{display:none}
/* Odkaz v navigácii (Magazín vedie mimo appky) musí vyzerať presne
   ako záložky — inak trčí iným písmom aj farbou. */
nav button, nav .nav-odkaz{flex:0 0 auto;background:none;border:0;color:var(--muted);font:inherit;font-weight:700;font-size:.82rem;padding:10px 11px;border-radius:var(--r-s);cursor:pointer;transition:.18s;white-space:nowrap;text-decoration:none}
nav button.on, nav .nav-odkaz.on{background:linear-gradient(160deg,rgba(255,255,255,.3),rgba(255,255,255,0) 40%),linear-gradient(135deg,var(--acc),var(--acc-hlboka));
  color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 18px rgba(124,92,191,.45)}
nav button:not(.on):hover, nav .nav-odkaz:hover{color:var(--txt);background:var(--panel2)}
nav button .cnt, nav .nav-odkaz .cnt{opacity:.75;font-weight:600;font-size:.74rem}
@media(max-width:900px), (max-height:560px){
  header{flex-wrap:wrap}
  .title-block{flex:1 1 0;min-width:0}
  .logo-img{height:40px;max-width:130px}

  /* Na mobile sú ovládacie tlačidlá pevne dole ako v mobilných appkách:
     ikona nad názvom, rovnomerne rozdelené, bez posúvania do strán. */
  .head-tools{
    /* NAHRADENÉ nižšie: nástroje už nie sú spodná lišta, tou je .spodna-lista. */
    position:static; left:auto; right:auto; bottom:auto; z-index:auto;
    margin:0; width:auto; order:0;
    display:flex; flex-wrap:nowrap; overflow:hidden; gap:0;
    padding:8px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    background:rgba(12,10,19,.94);
    border-top:1px solid var(--line2);
    backdrop-filter:blur(24px) saturate(170%);-webkit-backdrop-filter:blur(24px) saturate(170%);
    box-shadow:0 -6px 24px rgba(0,0,0,.45);
  }
  /* Každé tlačidlo dostane rovnaký diel šírky — nič sa nikam neposúva. */
  .head-tools > *{
    flex:1 1 0; min-width:0; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    background:none; border:0; box-shadow:none; border-radius:12px;
    padding:6px 2px; color:var(--muted); transition:.15s;
  }
  .head-tools > *:hover,.head-tools > *:active{background:var(--panel2);color:var(--txt);transform:none}
  .head-tools .ik{font-size:1.25rem;line-height:1}
  .head-tools .pop{font-size:.63rem;font-weight:700;letter-spacing:.2px;
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .head-tools .profile-avatar{width:24px;height:24px;font-size:.95rem}
  /* V spodnej lište nemajú čo robiť — príšerky sú aj tak na mobile vypnuté
     a stav ukladania hlási appka hláškou. */
  .head-tools #btnPets,.head-tools .synchro{display:none}

  /* miesto pre spodnú lištu, nech nezakrýva obsah */
  /* Lišta má pevnú výšku, aby sa pod ňu dala presne umiestniť pätička
     a obsah stránky nikdy nekončil schovaný za ňou. */
  .head-tools{height:auto}
}
@media(max-width:560px){
  nav{display:grid;grid-template-columns:1fr 1fr}
  nav button:last-child:nth-child(odd){grid-column:1 / -1}
}

/* ---------- fixný prehľad peňazí vľavo ----------
   Na úzkej obrazovke sa skryje — tam to isté nájdeš na záložke Účty. */
.sidebar{display:none}
@media(min-width:1180px) and (min-height:561px){
  body{padding-left:272px}
  body #pets{left:272px}
  .sidebar{display:block;position:fixed;top:0;left:0;bottom:0;width:272px;overflow-y:auto;z-index:60;
    background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,0) 50%),rgba(10,8,17,.55);
    border-right:1px solid var(--line);padding:16px 14px 24px;
    backdrop-filter:blur(30px) saturate(160%);-webkit-backdrop-filter:blur(30px) saturate(160%)}
}
.side-head{display:flex;align-items:center;gap:9px;margin-bottom:12px;cursor:pointer;border-radius:8px;padding:4px;margin:-4px -4px 8px;transition:.15s}
.side-head:hover{background:var(--panel2)}
.side-head h3{font-size:.98rem;color:var(--acc-xl)}
.side-logo{font-size:1.05rem}
.side-label{color:var(--muted);font-size:.64rem;text-transform:uppercase;letter-spacing:.8px;font-weight:700;margin:16px 2px 8px}
.side-sum{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:.78rem;color:var(--muted);padding:6px 2px;border-bottom:1px solid var(--line)}
.side-sum:last-child{border-bottom:0}
.side-sum b{font-weight:800;font-size:.88rem;color:var(--txt);white-space:nowrap}
.side-sum.hl b{font-size:1rem}
.side-sum b.ask{color:var(--gold)}
.side-sum b.pos{color:var(--up)}
.side-sum b.neg{color:var(--down)}
.side-acct{border:1px solid var(--line);border-radius:var(--r-s);background:var(--sheen),var(--panel2);padding:9px 10px;margin-bottom:8px;
  backdrop-filter:blur(var(--blur)) saturate(160%);-webkit-backdrop-filter:blur(var(--blur)) saturate(160%);
  box-shadow:inset 0 1px 0 var(--glass-hi)}
.side-acct .nm{font-weight:700;font-size:.83rem;overflow-wrap:anywhere;line-height:1.3}
/* Zaškrtávacie políčko je samostatné — klik na názov účtu ho zámerne neprepína. */
.sum-row{display:flex;align-items:center;gap:8px}
.sum-box{width:auto;padding:0;margin:0;accent-color:var(--acc);cursor:pointer;flex:none;
  width:16px;height:16px}
.side-acct .bal{font-weight:800;font-size:1rem;margin-top:3px}
.side-acct .pb{font-size:.71rem;color:var(--muted);margin-top:3px;line-height:1.4}

/* ---------- príšerky pri spodnom okraji ---------- */
#pets{position:fixed;left:0;right:0;bottom:22px;height:72px;pointer-events:none;z-index:0}
/* Pätička je na počítači pripnutá na spodok obrazovky (nech neposkakuje
   pri scrollovaní) a musí byť klikateľná — sú v nej pravidlá, bezpečnosť
   a právne dokumenty. Predtým mala pointer-events:none, čo by z odkazov
   spravilo obrázky. Na telefóne sa nezobrazuje, tam vedú tie isté odkazy
   z panela „Viac". */
/* Pätička sedí v páse MEDZI bočným panelom a chatovým dokom — inak jej
   text zaliezal pod jedno alebo druhé a orezával sa. Okraje sa preto
   dvíhajú presne o ich šírky, každý na svojom bode zlomu. */

/* Vycentrované napevno. So `space-between` sa pri dlhších odkazoch
   ľavá skupina vytlačila mimo obrazovku a text sa orezal. */
.pat-obsah{display:flex;align-items:center;justify-content:center;gap:6px 14px;
  flex-wrap:wrap;font-size:.68rem;letter-spacing:.2px;color:var(--faint);
  max-width:1100px;margin:0 auto;text-align:center}
.pat-odkazy{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.pat-odkaz{background:none;border:0;padding:0;font:inherit;color:var(--muted);
  cursor:pointer;transition:color .15s;text-decoration:none}
.pat-odkaz:hover{color:var(--acc-xl);text-decoration:underline}
.pat-delic{color:var(--line2);user-select:none}
.pat-znacka{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.pat-znacka a{color:var(--muted);text-decoration:none}
.pat-znacka a:hover{color:var(--acc-xl);text-decoration:underline}

@media(min-width:901px) and (min-height:561px){  }   /* miesto pre dok */
@media(min-width:1180px) and (min-height:561px){  }   /* miesto pre bočný panel */
body.host 


/* Dokumenty musia ísť nad prihlasovacie okno (z-index 300) — inak sa
   pravidlá z prihlasovacej obrazovky nedajú otvoriť. */
#dokModal{z-index:400}

/* Odkazy pod prihlasovacím oknom. */
.auth-paticka{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;
  margin-top:20px;padding:0 14px calc(6px + env(safe-area-inset-bottom, 0px));
  font-size:.68rem;color:var(--faint);text-align:center}

/* Právne texty prichádzajú ako <article class="legal-page"> s vlastným
   označením. Nepreberáme ich pôvodné CSS — malo pevné farby a vlastný
   panel, čo by v okne appky vyzeralo ako cudzie teleso. Preberáme len
   štruktúru a obliekame ju do štýlu portálu. */
.dok-text .legal-page{width:auto;margin:0;padding:0;background:none;border:0;
  box-shadow:none;border-radius:0;color:var(--txt);line-height:1.68}
.dok-text .legal-page h1{font-size:1.2rem;line-height:1.3;color:var(--acc-xl);margin:0 0 6px}
.dok-text .legal-page h2{font-size:1rem;color:var(--gold);margin:24px 0 8px}
.dok-text .legal-page h3{font-size:.92rem;color:var(--acc-l);margin:18px 0 6px}
.dok-text .legal-page p,.dok-text .legal-page li{color:var(--muted);font-size:.88rem}
.dok-text .legal-page strong{color:var(--txt)}
.dok-text .legal-page a{color:var(--acc-l)}
.dok-text .legal-page ul,.dok-text .legal-page ol{padding-left:20px;margin:0 0 12px}
.dok-text .legal-page li + li{margin-top:6px}
.dok-text .legal-page blockquote{margin:16px 0;padding:12px 16px;
  border-left:3px solid var(--acc);background:rgba(var(--acc-rgb),.09);border-radius:0 10px 10px 0}
.dok-text .legal-page table{width:100%;border-collapse:collapse;margin:12px 0;font-size:.84rem}
.dok-text .legal-page th,.dok-text .legal-page td{border:1px solid var(--line);padding:7px 9px;text-align:left}
.dok-text .legal-page th{color:var(--txt);background:var(--bg2)}

.dok-ostatne{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  margin-top:26px;padding-top:16px;border-top:1px solid var(--line);
  font-size:.78rem;color:var(--faint)}

/* Text dokumentov — čítať sa to musí dať, nie lúštiť. */
.dok-text{max-height:min(70vh,620px);overflow-y:auto;padding-right:6px;margin-top:14px;
  font-size:.92rem;line-height:1.65;color:var(--txt)}
.dok-text h4{margin:20px 0 7px;font-size:.95rem;color:var(--acc-xl);letter-spacing:.2px}
.dok-text h4:first-child{margin-top:0}
.dok-text p{margin:0 0 11px;color:var(--muted)}
.dok-text ul{margin:0 0 13px;padding-left:20px;color:var(--muted)}
.dok-text li{margin-bottom:6px}
.dok-text strong{color:var(--txt)}
.dok-text a{color:var(--acc-l)}
.pet{position:absolute;bottom:4px;left:0;width:44px;height:44px;pointer-events:auto;cursor:pointer;transform-origin:50% 100%;will-change:transform}
.pet .body{width:100%;height:100%;animation:petBob .55s ease-in-out infinite;filter:drop-shadow(0 3px 6px rgba(0,0,0,.45))}
.pet.idle .body{animation-duration:2.6s}
/* pás políčok chôdze — vlastná animácia, žiadne poskakovanie navyše */
.pet .body.sheet{background-repeat:no-repeat;background-position:0 0;image-rendering:pixelated;animation-name:petWalk;animation-iteration-count:infinite}
.pet.idle .body.sheet{animation-play-state:paused}
@keyframes petWalk{to{background-position-x:var(--walk-end)}}
.pet.hop .body{animation:petHop .5s ease}
.pet.falling .body{animation:none}
.pet.landed .body{animation:petLand .28s ease}
.pet svg,.pet img{width:100%;height:100%;display:block}
.pet img{object-fit:contain;image-rendering:pixelated}
@keyframes petBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes petHop{0%{transform:translateY(0)}40%{transform:translateY(-20px)}100%{transform:translateY(0)}}
@keyframes petLand{0%{transform:scaleY(.6) scaleX(1.2)}55%{transform:scaleY(1.12) scaleX(.92)}100%{transform:scaleY(1) scaleX(1)}}
@media (prefers-reduced-motion: reduce){#pets{display:none}}

.stale{color:var(--gold)}
.acct-new{margin-top:8px}
.acct-bal{font-size:1.3rem;font-weight:800;white-space:nowrap}
.acct-break{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);color:var(--muted);font-size:.76rem}
.acct-break b{color:var(--txt);font-weight:700}
.payback{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;
  margin-top:10px;padding:9px 11px;border-radius:var(--r-s);background:var(--bg2);border:1px solid var(--line);font-size:.82rem;color:var(--muted);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.3)}
.payback b{font-size:.95rem;font-weight:800}
.mode-switch{display:flex;gap:6px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-s);padding:5px;margin-bottom:14px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.3)}
/* Ikona a text sa bez flexu zarovnávali na účiaru textu — ikona sedela
   inde než popis a tlačidlo pôsobilo rozhodené. Flex ich zarovná na
   stred oboma smermi; ikona sa nesmie zmenšovať, skracuje sa popis. */
.mode-switch button{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:7px;
  background:none;border:0;color:var(--muted);font:inherit;font-weight:700;font-size:.85rem;
  padding:9px 6px;border-radius:7px;cursor:pointer;transition:.15s;line-height:1.25;text-align:center}
.mode-switch button > .ik,.mode-switch button > svg{flex:none}
.mode-switch button.on{background:linear-gradient(135deg,var(--acc),var(--acc-hlboka));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.mode-switch button:not(.on):hover{color:var(--txt);background:var(--panel2)}
body.mode-sealed .card-only{display:none}
body.mode-card .sealed-only{display:none}
.setup-row{border:1px solid var(--line);border-radius:var(--r-s);padding:11px 12px;margin-bottom:10px;background:var(--bg2);box-shadow:inset 0 1px 3px rgba(0,0,0,.3)}
.setup-name{font-weight:700;font-size:.9rem;margin-bottom:9px;overflow-wrap:anywhere}
#setupPreview{font-size:.8rem}
.moves{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.move-row{display:flex;align-items:center;gap:10px;padding:6px 2px;font-size:.8rem;border-bottom:1px solid var(--line)}
.move-row:last-child{border-bottom:0}
.mv-date{color:var(--faint);flex:none;width:82px;white-space:nowrap}
.mv-amt{font-weight:800;flex:none;width:82px;text-align:right;white-space:nowrap}
.mv-note{color:var(--muted);flex:1;min-width:0;overflow-wrap:anywhere}
.qmv-del,.qmv-edit{flex:none;background:none;border:0;color:var(--faint);cursor:pointer;font-size:.85rem;padding:2px 5px;border-radius:6px;font-family:inherit}
.qmv-del:hover{color:var(--down)}
.qmv-edit:hover{color:var(--acc-l)}
.payback .pos b,.payback .neg b{color:inherit}

main{margin-top:14px}
.tab{display:none}
.tab.on{display:block;animation:fade .22s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.panel{background:var(--sheen),var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:13px;
  backdrop-filter:blur(var(--blur)) saturate(160%);-webkit-backdrop-filter:blur(var(--blur)) saturate(160%);
  box-shadow:inset 0 1px 0 var(--glass-hi),var(--shadow)}
.panel h2{font-size:.98rem;margin-bottom:12px;color:var(--acc-xl)}

/* ---------- forms ---------- */
label{display:block;color:var(--muted);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;margin:0 0 4px 2px}
input,select,textarea{
  width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-s);
  color:var(--txt);font:inherit;font-size:.94rem;padding:10px 12px;outline:none;transition:border .15s,box-shadow .15s;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.32);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
input:focus,select:focus,textarea:focus{border-color:var(--acc);box-shadow:inset 0 1px 4px rgba(0,0,0,.32),0 0 0 3px rgba(var(--acc-rgb),.22)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239b8fb5' stroke-width='2' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
textarea{resize:vertical;min-height:60px}
/* Natívne pole s dátumom si na iOS drží vlastnú minimálnu šírku podľa
   formátu — v mriežke potom pretečie do vedľajšieho stĺpca a prekryje
   ho. `min-width:0` tú vnútornú šírku prebije; `width:100%` ho udrží
   v stĺpci. Rovnaká pasca ako pri mriežkach: prvok si berie viac, než
   mu bunka dáva. */
input[type=date]{min-height:42px;width:100%;min-width:0;max-width:100%;
  -webkit-appearance:none;appearance:none;box-sizing:border-box}
input[type=date]::-webkit-date-and-time-value{text-align:left;margin:0}
input[type=date]::-webkit-calendar-picker-indicator{margin-left:auto}
/* `minmax(0,1fr)` namiesto `1fr`: predvolene má položka mriežky
   `min-width:auto`, takže si vynúti šírku podľa obsahu a vytlačí susedov.
   Pri poli s dátumom to bolo presne vidieť. */
.grid{display:grid;gap:10px}
.g2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:640px){.g3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:420px){.g2,.g3{grid-template-columns:1fr}}
.field{min-width:0}

button.btn{
  background:linear-gradient(160deg,rgba(255,255,255,.32),rgba(255,255,255,0) 45%),linear-gradient(135deg,var(--acc),var(--acc-hlboka));
  color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:var(--r-s);
  font:inherit;font-weight:700;font-size:.9rem;padding:11px 18px;cursor:pointer;transition:.15s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 18px rgba(124,92,191,.35);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
button.btn:hover{filter:brightness(1.12);transform:translateY(-1px)}
button.btn.ghost{background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,0) 45%),var(--panel2);
  box-shadow:inset 0 1px 0 var(--glass-hi);border:1px solid var(--line2);color:var(--acc-xl)}
button.btn.gold{background:linear-gradient(160deg,rgba(255,255,255,.32),rgba(255,255,255,0) 45%),linear-gradient(135deg,#d8a93c,#a67c1e);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 18px rgba(245,196,81,.3)}
button.btn.danger{background:linear-gradient(160deg,rgba(255,255,255,.28),rgba(255,255,255,0) 45%),linear-gradient(135deg,#c23b5c,#8d2242);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
button.btn.sm{padding:8px 13px;font-size:.8rem}
button.btn.big{width:100%;font-size:.98rem;padding:13px}
/* Ikona a text musia stáť v jednej rovine. Predtým bolo tlačidlo bežný
   `inline-block` a ikona v ňom sedela na účiare textu — teda o kúsok
   nižšie než stred písmen. Flex so `center` to zarovná presne. */
.icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,0) 45%),var(--panel2);
  border:1px solid var(--line2);color:var(--acc-xl);border-radius:999px;padding:7px 13px;cursor:pointer;font-size:.8rem;
  transition:.15s;font-family:inherit;white-space:nowrap;
  backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
  box-shadow:inset 0 1px 0 var(--glass-hi)}
.icon-btn:hover{border-color:var(--acc);color:#fff;transform:translateY(-1px)}
/* Rad správcovských tlačidiel pri používateľovi — bez tohto boli holé
   systémové tlačidlá a vyzeralo to ako z Windows 95. */
.admin-akcie{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.admin-akcie .icon-btn{font-size:.78rem;padding:6px 11px}
a.icon-btn{text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.icon-btn.on{background:linear-gradient(135deg,var(--acc),var(--acc-hlboka));border-color:transparent;color:#fff}
.icon-btn.danger:hover{border-color:var(--down);color:var(--down)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* Polia v riadku sa zarovnávajú spodkom, nie stredom. Keď sa jednému
   popisku zalomí text do dvoch riadkov (napríklad Vyvolávacia cena (€) *),
   pri centrovaní si rámčeky posadnú každý inde a riadok vyzerá nakrivo.
   Tlačidlá a ostatný obsah riadku ostávajú centrované ako doteraz. */
.row > .field{align-self:flex-end}

/* ---------- filter bar ---------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.filters input,.filters select{width:auto;flex:1;min-width:120px;padding:9px 11px;font-size:.86rem}
.filters select{flex:0 1 auto}

/* ---------- item cards ---------- */
.item{background:var(--sheen),var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:13px 14px;margin-bottom:10px;
  backdrop-filter:blur(var(--blur)) saturate(160%);-webkit-backdrop-filter:blur(var(--blur)) saturate(160%);
  box-shadow:inset 0 1px 0 var(--glass-hi),0 6px 20px rgba(0,0,0,.28);transition:.18s}
.item:hover{border-color:var(--line2);box-shadow:inset 0 1px 0 var(--glass-hi),0 12px 30px rgba(0,0,0,.34);transform:translateY(-1px)}
.item-top{display:flex;gap:10px;align-items:flex-start}
.item-main{min-width:0;flex:1}
.item-name{font-weight:700;font-size:.96rem;line-height:1.3;overflow-wrap:anywhere}
.item-sub{color:var(--muted);font-size:.76rem;margin-top:3px;line-height:1.45}
.item-note{color:var(--faint);font-size:.75rem;margin-top:4px;white-space:pre-wrap}
.item-right{text-align:right;flex:none}
.item-right .money{font-weight:800;font-size:1rem;white-space:nowrap}
.item-right .money-sub{color:var(--faint);font-size:.7rem;margin-top:2px;white-space:nowrap}
.item-right .money-sub.pos{color:var(--up)}
.item-right .money-sub.neg{color:var(--down)}
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:.66rem;font-weight:700;background:rgba(124,92,191,.22);color:var(--acc-xl);
  vertical-align:2px;margin-right:6px;white-space:nowrap;border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.badge.gold{background:rgba(245,196,81,.16);color:var(--gold)}
.badge.type{background:var(--panel2);color:var(--muted)}
.badge.inv{background:rgba(124,92,191,.24);color:var(--acc-xl)}
.badge.flip{background:rgba(245,196,81,.16);color:var(--gold)}
.hint{color:var(--faint);font-size:.75rem;line-height:1.5;margin:-2px 2px 14px}
.item-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;align-items:center}
.mkt-wrap{display:flex;align-items:center;gap:5px;margin-left:auto}
.mkt-wrap label{margin:0;font-size:.62rem}
.mkt-wrap input{width:86px;padding:6px 8px;font-size:.82rem;text-align:right}
.item-photo{width:64px;height:64px;flex:none;object-fit:cover;border-radius:var(--r-s);border:1px solid var(--line2);cursor:zoom-in}
/* minmax(0,1fr): bez toho sa stĺpec mriežky roztiahne na šírku
   najdlhšieho riadku (položky majú min-width:auto) a celý blok pretečie
   von z panela — presne to robil dlhý popis „Obal (https://…)". */
.pricebox{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;min-width:150px}
.pricebox .pl{display:flex;justify-content:space-between;gap:12px;font-size:.76rem;color:var(--muted);white-space:nowrap}
/* Popis vie byť dlhý — „Obal (https://www.jbacrylics.cz/)" na telefóne
   odtlačil sumu za okraj a nedala sa prečítať. Skracuje sa popis,
   nikdy nie číslo. */
.pricebox .pl > span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.pricebox .pl b{color:var(--txt);font-weight:800;font-size:.86rem;flex:none}
.pricebox .pl b.ask{color:var(--gold)}
.pricebox .pl b.pos{color:var(--up)}
.pricebox .pl b.neg{color:var(--down)}
.profit-line{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);display:flex;justify-content:space-between;gap:10px;font-size:.82rem;flex-wrap:wrap}
.profit-line b{font-size:.9rem}

.empty{padding:40px 20px;text-align:center;color:var(--muted)}
.empty .g{font-size:2.4rem;margin-bottom:10px}
.empty p{font-size:.86rem;line-height:1.5}

/* ---------- stats tab ---------- */
.chart{display:flex;align-items:flex-end;gap:6px;height:150px;padding:6px 2px 0}
.chart .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:2px;min-width:0;height:100%}
.chart .bars{display:flex;gap:2px;align-items:flex-end;width:100%;height:100%;justify-content:center}
.chart .bar{width:46%;max-width:16px;border-radius:3px 3px 0 0;min-height:2px}
.chart .bar.buy{background:var(--acc)}
.chart .bar.sell{background:var(--up)}
.chart .m{color:var(--faint);font-size:.6rem;white-space:nowrap}
.legend{display:flex;gap:14px;margin-top:10px;font-size:.74rem;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
/* klikateľné krivky v grafe investícií */
.chart-keys{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.ckey{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:.74rem;font-weight:600;
  padding:5px 11px;border-radius:999px;cursor:pointer;transition:.15s;white-space:nowrap;
  background:var(--bg2);border:1px solid var(--line);color:var(--muted)}
.ckey i{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none;opacity:.35;transition:.15s}
.ckey:hover{border-color:var(--line2);color:var(--txt)}
.ckey.on{background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,0) 45%),var(--panel2);
  border-color:var(--line2);color:var(--txt);box-shadow:inset 0 1px 0 var(--glass-hi)}
.ckey.on i{opacity:1}
.ckey.ghost{cursor:default;opacity:.75}
.ckey.ghost:hover{border-color:var(--line);color:var(--muted)}
.cat-tbl{width:100%;border-collapse:collapse;font-size:.82rem}
.cat-tbl th{text-align:left;color:var(--muted);font-size:.66rem;text-transform:uppercase;letter-spacing:.6px;padding:7px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.cat-tbl td{padding:8px;border-bottom:1px solid var(--line);white-space:nowrap}
.cat-tbl tr:last-child td{border-bottom:0}
.cat-tbl td.num,.cat-tbl th.num{text-align:right}
.tbl-scroll{overflow-x:auto}
/* Na telefóne sa päť stĺpcov nezmestí a tabuľka sa posúva do strán —
   pri odskrolovaní však zmizne stĺpec s typom produktu a človek nevie,
   ktorý riadok číta. Prvý stĺpec preto ostáva prilepený a zvyšok sa
   stlačí, nech je posúvanie čo najkratšie. */
@media(max-width:640px){
  .cat-tbl{font-size:.74rem}
  .cat-tbl th,.cat-tbl td{padding:6px 6px}
  .cat-tbl th:first-child,.cat-tbl td:first-child{
    position:sticky;left:0;z-index:1;background:#171321;
    box-shadow:1px 0 0 var(--line)}
}

/* ---------- modal ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(var(--overlay-rgb),.55);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  display:none;align-items:flex-start;justify-content:center;z-index:100;overflow:auto;
  /* Odsadenie rešpektuje výrez a hodiny — bez toho lezie nadpis okna
     na telefóne pod stavový riadok. */
  padding:calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px));
  /* Bez `contain` sa na dotyku posúvanie prenesie na stránku pod oknom:
     scrollovalo pozadie a obsah okna stál na mieste. */
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

/* Kým je otvorené ktorékoľvek okno, stránka pod ním stojí. Robí sa to
   cez :has(), aby to platilo pre všetkých devätnásť okien naraz a nedalo
   sa na to pri pridávaní ďalšieho zabudnúť. */
body:has(.modal-bg.on:not(#podporaModal)){overflow:hidden}
.modal-bg.on{display:flex}
.modal{background:var(--sheen),rgba(var(--sklo-rgb),.72);border:1px solid var(--line2);border-radius:var(--r);max-width:560px;width:100%;padding:18px;margin:auto;
  box-shadow:inset 0 1px 0 var(--glass-hi),0 24px 70px rgba(0,0,0,.55);
  backdrop-filter:blur(34px) saturate(170%);-webkit-backdrop-filter:blur(34px) saturate(170%)}
.modal h3{font-size:1rem;color:var(--acc-xl);margin-bottom:4px}
/* Krížik na zatvorenie detailu (inzerát, aukcia). Je sticky — pri scrollovaní
   dlhého detailu ostáva v pravom hornom rohu, nie až dole pod obsahom. */
.modal-x{position:sticky;top:0;float:right;z-index:5;margin:-4px -4px -40px 0;
  width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(var(--sklo-rgb),.72);border:1px solid var(--line2);color:var(--txt);
  font-size:1rem;line-height:1;cursor:pointer;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 4px 14px rgba(0,0,0,.35);transition:background .15s,transform .15s}
.modal-x:hover{background:var(--panel2);transform:scale(1.06)}
@media(max-width:640px){
  .modal-dolne-zavriet{display:none}
  .modal-x{top:4px;margin-right:-2px}
}
.modal .modal-sub{color:var(--muted);font-size:.8rem;margin-bottom:14px}
.sell-preview{margin-top:12px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-s);padding:10px 12px;font-size:.84rem;
  display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;box-shadow:inset 0 1px 3px rgba(0,0,0,.3)}
.history-list{max-height:min(60vh,440px);overflow-y:auto;margin-top:2px}
.history-list .moves{margin-top:0;padding-top:0;border-top:0}
.acct-modal-grid{display:grid;grid-template-columns:220px 1fr;gap:10px 22px;margin-top:6px;align-items:start}
.acct-modal-actions{display:flex;flex-direction:column;gap:8px}
.acct-modal-history{border-left:1px solid var(--line);padding-left:22px;min-width:0}
@media(max-width:600px){
  .acct-modal-grid{grid-template-columns:1fr}
  .acct-modal-history{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:12px}
}

/* ---------- pruh so zálohou ---------- */
.backup-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;padding:11px 14px;
  border-radius:var(--r);border:1px solid var(--line2);background:var(--sheen),var(--panel);font-size:.84rem;line-height:1.45;
  backdrop-filter:blur(var(--blur)) saturate(160%);-webkit-backdrop-filter:blur(var(--blur)) saturate(160%);
  box-shadow:inset 0 1px 0 var(--glass-hi)}
.backup-bar.warn{border-color:rgba(245,196,81,.5);background:var(--sheen),rgba(245,196,81,.1)}
.backup-bar.danger{border-color:rgba(251,113,133,.5);background:var(--sheen),rgba(251,113,133,.1)}
.backup-bar .bb-txt{flex:1;min-width:180px}
.backup-bar .bb-sub{color:var(--muted);font-size:.76rem;margin-top:2px}
.backup-bar button{flex:none}

/* ---------- prihlásenie / výber profilu ---------- */
/* Stĺpec, nie riadok: brána má pod sebou dve veci — obsah a pätičku
   s právnymi odkazmi. Kým to bol riadkový flex, pätička si sadla vedľa
   obsahu a ubrala mu polovicu šírky. */
.auth-gate{position:fixed;inset:0;z-index:300;display:none;flex-direction:column;
  /* POZOR: žiadne justify-content:center! Fixný flex kontajner s centrovaním
     odstrihne vrch obsahu, keď je vyšší než displej — na Androide sa potom
     nedalo doskrolovať k prihláseniu. Centrovanie robí margin:auto na
     .auth-obal: pri krátkom obsahu centruje, pri dlhom sa normálne roluje. */
  align-items:center;
  overflow:auto;padding:32px 16px;
  /* Vlastné farebné svetlá, nie tie z tela stránky. Aurora leží na
     z-index -2, takže by ju nepriehľadné pozadie brány aj tak zakrylo —
     a priehľadná brána by zase ukázala appku pod sebou. Toto je statický
     gradient: rovnaká paleta, rovnaký dojem, nulová cena za vykreslenie. */
  /* Kompozícia à la Azgard: vrch takmer čierny, všetka žiara býva DOLE
     a mäkko sa vpíja nahor. */
  background:
    radial-gradient(900px 640px at 88% 100%, rgba(var(--acc-rgb),.50), transparent 70%),
    radial-gradient(780px 560px at 6% 102%,  rgba(15,97,83,.60),   transparent 72%),
    radial-gradient(540px 420px at 52% 96%,  rgba(74,222,128,.16), transparent 70%),
    linear-gradient(180deg,#050908 0%,#0a1310 46%,#0c231d 100%)}
.auth-gate.on{display:flex}
/* Kto tu bol naposledy prihlásený, tomu sa brána pri obnovení stránky
   nekreslí vôbec (predstart.js) — inak preblikla pri každom refreshi,
   kým server potvrdzoval sedenie. Keď sedenie medzitým vypršalo,
   ukazBranu() triedu z <html> zloží a brána sa normálne ukáže. */
html.caka-sedenie .auth-gate{display:none}

/* ---------- úvodná stránka pre návštevníkov ----------
   Na počítači vedľa seba: vľavo čo tu je, vpravo prihlásenie. Na telefóne
   pod sebou, ale prihlásenie ide HORE — kto sa vracia, nemá sa prelistovať
   cez marketing, aby sa dostal k formuláru. */
/* `center`, nie `start`: prihlasovacie okno je nižšie než ľavý stĺpec,
   a prilepené hore pôsobilo, akoby vypadlo z rozloženia. Na zvislom
   strede sedí voči obsahu vedľa. */
.auth-obal{margin:auto;display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:36px;
  align-items:center;max-width:1180px;width:100%;margin:auto 0}
.auth-obal .auth-card{margin:0}

.uvod{min-width:0}

/* Posledný riadok nadpisu v zlate. Dva tóny, nie plochá farba — inak
   pôsobí ako zvýrazňovač, nie ako akcent. */
.uvod-zlata{background:linear-gradient(100deg,#f5c451,#f7d98a 45%,#e0a92f);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent}


.uvod-nadpis{font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.14;letter-spacing:-.5px;
  margin:0 0 10px;color:var(--txt)}
.uvod-podnadpis{font-size:1rem;line-height:1.55;color:var(--muted);margin:0 0 18px;max-width:56ch}

.uvod-cisla{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:9px;margin-bottom:18px}
.uvod-cislo{background:var(--sheen),rgba(var(--sklo-rgb),.55);border:1px solid var(--line);
  border-radius:var(--r-s);padding:12px 10px;text-align:center;min-width:0}
.uvod-cislo strong{display:block;font-size:1.5rem;font-weight:800;color:var(--acc-xl);line-height:1.1}
.uvod-cislo span{display:block;font-size:.7rem;color:var(--faint);margin-top:3px;letter-spacing:.2px}


/* Napevno dva stĺpce: pri auto-fit sa štyri karty lámali 3+1 a štvrtá
   ostávala sama na riadku, čo vyzeralo ako chyba. */
.uvod-karty{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-bottom:22px}
@media(max-width:560px){.uvod-karty{grid-template-columns:1fr}}
.uvod-karta{background:var(--sheen),rgba(var(--sklo-rgb),.5);border:1px solid var(--line);
  border-radius:var(--r);padding:14px;min-width:0;transition:border-color .15s,transform .15s}
.uvod-karta:hover{border-color:var(--acc);transform:translateY(-2px)}
.uvod-karta-ikona{font-size:1.6rem;line-height:1;display:block;margin-bottom:8px}
.uvod-karta h3{font-size:1rem;color:var(--acc-xl);margin:0 0 6px}
.uvod-karta p{font-size:.86rem;line-height:1.55;color:var(--muted);margin:0}

.uvod-kroky{margin-bottom:0}
.uvod-kroky-rad{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:10px}
.uvod-krok{display:flex;gap:11px;align-items:flex-start;min-width:0}
.uvod-krok-cislo{flex:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:.8rem;font-weight:800;color:#fff;
  background:linear-gradient(160deg,rgba(255,255,255,.28),rgba(255,255,255,0)),var(--acc)}
.uvod-krok strong{display:block;font-size:.9rem;color:var(--txt);margin-bottom:2px}
.uvod-krok p{font-size:.82rem;line-height:1.5;color:var(--muted);margin:0}


@media(max-width:960px) and (min-height:561px){
  .auth-obal{grid-template-columns:1fr;gap:26px;max-width:520px}
  .auth-obal .auth-card{position:static}   /* text hore, prihlásenie pod ním */
  .uvod-nadpis{text-align:center}
  .uvod-podnadpis{text-align:center;margin-left:auto;margin-right:auto}
}
/* Na nižšom okne sa všetko stiahne, aby sa úvod stále zmestil na jednu
   obrazovku. Skrývať obsah by bolo horšie než ho o kúsok zmenšiť. */
@media(max-height:860px){
  .auth-gate{padding:18px 16px}
  .uvod-nadpis{font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:8px}
  .uvod-podnadpis{font-size:.92rem;margin-bottom:13px}
  .uvod-cisla{margin-bottom:13px;gap:8px}
  .uvod-cislo{padding:9px 8px}
  .uvod-cislo strong{font-size:1.25rem}
  .uvod-karty{gap:9px;margin-bottom:15px}
  .uvod-karta{padding:11px}
  .uvod-karta p{font-size:.8rem;line-height:1.45}
  .auth-card{padding:18px}
  .auth-logo{max-height:104px}
}

@media(max-width:640px){
  /* Horný okraj drží pod hodinami a výrezom — env() je na obyčajnej
     stránke nula, ale v odloženej na plochu (PWA) má skutočnú výšku
     stavového pásu. Tých 40px navyše je pre bežný Safari, kde okraj
     síce nezasahuje do hodín, ale karta sa ich takmer dotýkala. */
  .auth-gate{padding:calc(40px + env(safe-area-inset-top, 0px)) 14px 26px}
  .uvod-cisla{grid-template-columns:repeat(2,1fr)}
}
body.gate-open{overflow:hidden}
.auth-card{background:var(--sheen),rgba(var(--sklo-rgb),.72);border:1px solid var(--line2);border-radius:var(--r);max-width:420px;width:100%;
  padding:26px 22px;margin:auto;box-shadow:inset 0 1px 0 var(--glass-hi),0 24px 70px rgba(0,0,0,.55);text-align:center;
  backdrop-filter:blur(34px) saturate(170%);-webkit-backdrop-filter:blur(34px) saturate(170%)}
.auth-card h3{font-size:1.15rem;color:var(--acc-xl);margin-bottom:4px}
.auth-card .modal-sub{margin-bottom:16px}
.auth-card form,.auth-card .field{text-align:left}
.profile-pick{display:flex;align-items:center;gap:11px;width:100%;background:var(--bg2);border:1px solid var(--line);
  border-radius:var(--r-s);padding:10px 12px;margin-bottom:8px;cursor:pointer;transition:.15s;color:var(--txt);font:inherit;text-align:left;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.3)}
.profile-pick:hover{border-color:var(--acc);background:var(--panel2)}
.profile-pick .nm{flex:1;font-weight:700;font-size:.92rem}
.profile-pick .tag{font-size:.66rem;color:var(--gold);font-weight:700;text-transform:uppercase;letter-spacing:.5px}

/* ---------- verejný profil ---------- */
.profil-hlava{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;margin-bottom:14px}
.profil-meno{flex:1;min-width:200px}
.profil-meno h2{font-size:1.35rem;font-weight:800;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.profil-meta{color:var(--muted);font-size:.8rem;margin-top:4px;line-height:1.5}
.profil-pocty{display:flex;gap:16px;margin-top:9px;font-size:.8rem;color:var(--muted);flex-wrap:wrap}
.profil-pocty b{color:var(--txt);font-weight:800}
.odznak{padding:2px 9px;border-radius:20px;font-size:.6rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.5px}
.odznak.spravca{background:rgba(245,196,81,.16);color:var(--gold)}
.odznak.overeny{background:rgba(74,222,128,.15);color:var(--up)}
.profil-bio{color:var(--txt);font-size:.9rem;line-height:1.55;margin:0 2px 12px;white-space:pre-wrap}
.profil-zbiera{font-size:.85rem;color:var(--muted);margin:0 2px 14px}
.profil-zbiera .lbl{color:var(--faint);font-size:.66rem;text-transform:uppercase;
  letter-spacing:.7px;font-weight:700;margin-right:6px}
.profil-mriezka{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:640px){.profil-mriezka{grid-template-columns:1fr 1fr}}
.profil-mriezka .panel{margin-bottom:0}
.profil-mriezka .lbl{color:var(--muted);font-size:.68rem;text-transform:uppercase;
  letter-spacing:.8px;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.profil-mriezka .velke{font-size:1.7rem;font-weight:800;margin:6px 0 4px;line-height:1.1}
.profil-mriezka .velke .zo{font-size:.9rem;color:var(--faint);font-weight:700}
.profil-akcie{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}

.hviezdy{color:var(--gold);letter-spacing:1px;font-size:.9rem;white-space:nowrap}
.hviezdy.velke{font-size:1.15rem}
.hviezdy .prazdne{color:var(--line2)}
.hodn-riadok{display:flex;align-items:center;gap:9px;font-size:.76rem;color:var(--muted);margin-top:5px}
.hodn-riadok span{width:74px;flex:none}
.hodn-riadok b{width:26px;text-align:right;color:var(--txt)}
.hodn-pruh{flex:1;height:6px;border-radius:20px;background:var(--bg2);overflow:hidden}
.hodn-pruh i{display:block;height:100%;border-radius:20px}

.hodn-zoznam{display:grid;gap:10px}
.hodn-karta{display:flex;gap:11px;padding:11px 13px;border-radius:var(--r-s);
  background:var(--bg2);border:1px solid var(--line)}
.hodn-karta > div:last-child{flex:1;min-width:0}
.hodn-hlava{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.hodn-kedy{color:var(--faint);font-size:.72rem}
.hodn-karta p{font-size:.84rem;line-height:1.5;margin-top:4px;overflow-wrap:anywhere}
.hodn-karta p.bez-textu{color:var(--faint);font-style:italic}
.profil-odkaz{background:none;border:0;padding:0;font:inherit;font-weight:800;font-size:.86rem;
  color:var(--acc-l);cursor:pointer}
.profil-odkaz:hover{text-decoration:underline}

/* ---------- detail položky ---------- */
.detail-vrch{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-top:4px}
.detail-foto{width:120px;height:120px;flex:none;object-fit:cover;border-radius:var(--r-s);
  border:1px solid var(--line2);cursor:zoom-in}
.detail-foto.prazdna{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:var(--bg2);border:1px dashed var(--line2);color:var(--muted);font:inherit;font-size:1.5rem;
  cursor:pointer;transition:.15s}
.detail-foto.prazdna span{font-size:.7rem}
.detail-foto.prazdna:hover{border-color:var(--acc);color:var(--acc-l)}
.detail-vrch .pricebox{min-width:190px}
.detail-vrch .pl{font-size:.84rem;padding:2px 0}
.detail-vrch .pl b{font-size:.92rem}
.detail-akcie{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px;padding-top:14px;
  border-top:1px dashed var(--line)}

/* ---------- domovská plocha ---------- */
.uvitanie{display:flex;align-items:center;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.uvitanie h2{font-size:1.5rem;font-weight:800;letter-spacing:.2px}
.uvitanie p{color:var(--muted);font-size:.86rem;margin-top:3px}
.domov-mriezka{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:760px){.domov-mriezka{grid-template-columns:1.2fr 1.4fr 1fr}}
.domov-mriezka .panel{margin-bottom:0}
.domov-mriezka .lbl{color:var(--muted);font-size:.68rem;text-transform:uppercase;
  letter-spacing:.8px;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.domov-mriezka .velke{font-size:1.9rem;font-weight:800;margin:6px 0 4px;line-height:1.1}
.domov-mriezka .velke .zo{font-size:.95rem;color:var(--faint);font-weight:700}
.domov-mriezka .pod{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  font-size:.8rem;color:var(--muted)}
.domov-mriezka .pod .pos,.domov-mriezka .pod .neg{font-weight:800}

.trust-znacka{padding:2px 9px;border-radius:20px;font-size:.62rem;letter-spacing:.4px}
.trust-znacka.vysoky{background:rgba(74,222,128,.15);color:var(--up)}
.trust-znacka.stredny{background:rgba(245,196,81,.15);color:var(--gold)}
.trust-znacka.nizky{background:var(--panel2);color:var(--muted)}
.trust-znacka.riziko{background:rgba(251,113,133,.15);color:var(--down)}
/* Checklist krokov dôveryhodnosti (vlastný profil). */
.trust-kroky{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.trust-kroky li{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--muted)}
.trust-kroky li.hotovo{color:var(--txt)}
.trust-kroky .tk-ik{width:18px;flex:none;display:inline-flex;justify-content:center;color:var(--faint)}
.trust-kroky li.hotovo .tk-ik{color:var(--up)}
.trust-kroky .tk-text{flex:1;min-width:0}
.trust-kroky .tk-body{font-weight:600;font-size:.72rem;color:var(--faint);flex:none}
.trust-kroky li.hotovo .tk-body{color:var(--up)}
.trust-zrazka{margin:8px 0 0;color:var(--down)}
/* Panel Vyvoj hodnoty investicii je v Portfoliu schovany na zelanie; kod ostava. */
#invHistoryPanel{display:none}
/* Úprava správy v bubline (5 minút po odoslaní). */
.chat-uprav:hover{color:var(--acc-l)}
.chat-upravene{font-style:italic;opacity:.75}
.chat-uprava{display:flex;flex-direction:column;gap:6px;min-width:220px}
.chat-uprava textarea{width:100%;min-height:44px;font-size:.88rem;padding:8px 10px;resize:vertical}
.chat-uprava-tlacidla{display:flex;gap:6px;justify-content:flex-end}
.chat-uprava-tlacidla .btn.sm{padding:5px 10px;font-size:.74rem}
.inz-fotky-zona.povinne{border-color:rgba(var(--acc-rgb),.55)}
.inz-fotky-zona.chyba-blik{border-color:var(--down);box-shadow:0 0 0 3px rgba(251,113,133,.25)}
/* Prepínač jazyka kariet v Katalógu (EN / DE / JA). */
.kat-jazyky{display:inline-flex;gap:4px;align-items:center;flex:none}
.kat-jazyky .kat-jazyk{border:1px solid var(--line);background:var(--bg2);color:var(--muted);border-radius:999px;
  padding:6px 10px;font-size:.74rem;font-weight:700;letter-spacing:.04em;cursor:pointer;transition:.15s}
.kat-jazyky .kat-jazyk.on{background:linear-gradient(135deg,var(--acc),var(--acc-hlboka));color:#fff;border-color:transparent}
.kat-jazyky .kat-jazyk:not(.on):hover{color:var(--txt);border-color:var(--line2)}
/* Nepovinné polia formulára pridávania sú zbalené — človek vidí menej vecí. */
.nepovinne-rozbal{border:1px solid var(--line);border-radius:var(--r-s);background:var(--bg2)}
.nepovinne-rozbal summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 14px;cursor:pointer;
  list-style:none;font-size:.8rem;font-weight:600;color:var(--acc-xl);user-select:none}
.nepovinne-rozbal summary::-webkit-details-marker{display:none}
.nepovinne-rozbal summary::before{content:"";width:7px;height:7px;border-right:1.5px solid var(--faint);border-bottom:1.5px solid var(--faint);
  transform:rotate(-45deg);transition:transform .15s;flex:none;margin-right:2px}
.nepovinne-rozbal[open] summary::before{transform:rotate(45deg)}
.nepovinne-rozbal .nr-pod{font-weight:400;color:var(--faint);font-size:.72rem}
.nepovinne-rozbal .nr-telo{padding:4px 14px 12px;border-top:1px solid var(--line)}
.nepovinne-rozbal .nr-telo > .field, .nepovinne-rozbal .nr-telo > .grid{margin-top:10px}
/* Povinné a nepovinné polia vo formulároch — hviezdička, resp. tichý dovetok. */
label.povinne::after{content:" *";color:var(--down);font-weight:700}
label.nepovinne::after{content:" · " attr(data-nep);color:var(--faint);font-weight:400;text-transform:none;letter-spacing:0}
.legenda-povinne{margin:-4px 0 12px}
/* Ikona v obalovom <span class=ik> vnútri tlačidla sedela o pár px vyššie
   než text — span je inline a svg sa lepí na základnú čiaru. */
.icon-btn .ik,.btn .ik{display:inline-flex;align-items:center;line-height:0}
.trust-pruh{height:7px;border-radius:20px;background:var(--bg2);overflow:hidden;margin:2px 0 12px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.35)}
.trust-pruh i{display:block;height:100%;border-radius:20px;
  background:linear-gradient(90deg,var(--acc),var(--up));transition:width .5s ease}
.trust-rozpis{display:grid;gap:5px}
.trust-riadok{display:flex;justify-content:space-between;gap:10px;font-size:.78rem;
  color:var(--muted);cursor:help}
.trust-riadok b{color:var(--txt);font-weight:700;white-space:nowrap}

.chystane{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:640px){.chystane{grid-template-columns:1fr 1fr}}
.chystana-karta{display:flex;gap:13px;align-items:flex-start;padding:14px 15px;border-radius:var(--r);
  border:1px dashed var(--line2);background:var(--bg2);opacity:.85}
.chystana-karta .ch-ikona{font-size:1.5rem;flex:none;line-height:1}
.chystana-karta b{font-size:.94rem}
.chystana-karta p{color:var(--muted);font-size:.78rem;line-height:1.45;margin-top:3px}
.ch-znacka{margin-left:8px;padding:2px 8px;border-radius:20px;font-size:.6rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;background:var(--panel2);color:var(--acc-l)}

/* ---------- ukazovateľ ukladania na server ---------- */
.synchro{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:999px;
  font-size:.76rem;font-weight:700;white-space:nowrap;align-self:center;
  border:1px solid var(--line2);background:var(--panel2);color:var(--muted);transition:.2s}
.synchro.uklada{color:var(--acc-l)}
.synchro.ulozene{color:var(--up);border-color:rgba(74,222,128,.4);background:rgba(74,222,128,.1)}
.synchro.chyba{color:var(--down);border-color:rgba(251,113,133,.5);background:rgba(251,113,133,.12)}

/* ---------- prihlasovacie formuláre ---------- */
.auth-form .btn.big{margin-top:2px}
.auth-prepnut{margin:14px 0 0;text-align:center;color:var(--muted);font-size:.84rem}
.auth-odkaz{background:none;border:0;padding:0;font:inherit;font-size:.84rem;font-weight:700;
  color:var(--acc-l);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.auth-odkaz:hover{color:var(--acc-xl)}
.auth-oznam{margin-bottom:14px;padding:10px 13px;border-radius:var(--r-s);font-size:.85rem;
  line-height:1.45;text-align:left;
  border:1px solid rgba(251,113,133,.45);background:rgba(251,113,133,.1);color:var(--down)}
.auth-oznam.ok{border-color:rgba(74,222,128,.45);background:rgba(74,222,128,.1);color:var(--up)}

/* ---------- avatary ---------- */
.profile-avatar{width:26px;height:26px;border-radius:50%;background:var(--panel2);display:flex;align-items:center;
  justify-content:center;font-size:1rem;flex:none;overflow:hidden;border:1px solid var(--line2)}
.profile-avatar img{width:100%;height:100%;object-fit:cover}
.profile-pick .profile-avatar{width:38px;height:38px;font-size:1.3rem}
.profile-avatar-big{width:76px;height:76px;border-radius:50%;background:var(--bg2);border:1px solid var(--line2);
  display:flex;align-items:center;justify-content:center;font-size:2.2rem;flex:none;overflow:hidden}
.profile-avatar-big img{width:100%;height:100%;object-fit:cover}
.profile-edit-row{display:flex;align-items:center;gap:14px;margin-bottom:4px}
.profile-edit-row .icon-btn{display:block;width:100%;margin-bottom:6px;text-align:center}
.profil-fotka-akcie{flex:1;min-width:0}
/* Na počítači nemá zmysel ťahať dve tlačidlá cez celé okno — sadnú si
   vedľa fotky v svojej šírke. Na telefóne ostávajú široké, tam sa to
   trafí prstom lepšie. */
@media(min-width:761px){
  .profil-fotka-akcie{flex:none;display:flex;gap:8px}
  .profile-edit-row .icon-btn{width:auto;margin-bottom:0}
}

/* Hlavička profilového okna. Tlačidlá sa musia vedieť zalomiť — inak
   na telefóne vytlačia okno mimo obrazovku a „Uložiť" ostane neviditeľné. */
.profil-hlavicka{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.profil-hlavicka-text{flex:1 1 160px;min-width:0}
.profil-hlavicka-akcie{display:flex;gap:8px;flex-wrap:wrap;min-width:0}
.profil-hlavicka-akcie .btn{white-space:nowrap}
@media(max-width:640px){
  .profil-hlavicka-akcie{width:100%}
  .profil-hlavicka-akcie .btn{flex:1 1 0;min-width:0;padding-left:10px;padding-right:10px;font-size:.82rem}
}

/* ---------- profilový štítok v hlavičke ---------- */
.profile-pill{display:flex;align-items:center;gap:7px;background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,0) 45%),var(--panel2);
  border:1px solid var(--line2);border-radius:999px;padding:5px 12px 5px 5px;cursor:pointer;color:var(--txt);font:inherit;font-weight:700;
  font-size:.82rem;transition:.15s;white-space:nowrap;backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
  box-shadow:inset 0 1px 0 var(--glass-hi)}
.profile-pill:hover{border-color:var(--acc);transform:translateY(-1px)}
#profileNameMini{max-width:110px;overflow:hidden;text-overflow:ellipsis}

/* ---------- achievementy ---------- */
/* #achGrid je kontajner troch úrovní, nie samotných dlaždíc. Kým bol
   mriežkou, každá úroveň dostala len ~150 px — vznikli tri vysoké úzke
   stĺpce a napravo pol okna prázdneho. Úrovne idú pod seba a dlaždice si
   berú celú šírku. */
.ach-grid{display:block;margin-top:10px}
.ach-skupina + .ach-skupina{margin-top:16px}
.ach{border:1px solid var(--line);border-radius:var(--r-s);padding:10px;text-align:center;background:var(--bg2);
  opacity:.4;filter:grayscale(1);box-shadow:inset 0 1px 3px rgba(0,0,0,.3)}
.ach.unlocked{opacity:1;filter:none;border-color:rgba(245,196,81,.45);background:var(--sheen),rgba(245,196,81,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 4px 16px rgba(245,196,81,.18);
  backdrop-filter:blur(var(--blur)) saturate(160%);-webkit-backdrop-filter:blur(var(--blur)) saturate(160%)}
.ach .ico{font-size:1.6rem;margin-bottom:4px}
.ach .nm{font-size:.74rem;font-weight:700;line-height:1.25}
.ach .dt{font-size:.62rem;color:var(--faint);margin-top:3px}

/* ---------- toast ---------- */
#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,0) 45%),rgba(var(--sklo-rgb),.75);
  border:1px solid var(--line2);color:var(--txt);padding:10px 18px;border-radius:999px;font-size:.85rem;font-weight:600;
  opacity:0;pointer-events:none;transition:.25s;z-index:200;max-width:90vw;text-align:center;
  backdrop-filter:blur(24px) saturate(170%);-webkit-backdrop-filter:blur(24px) saturate(170%);
  box-shadow:inset 0 1px 0 var(--glass-hi),0 14px 34px rgba(0,0,0,.4)}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.clickable{pointer-events:auto}
.toast-undo{background:var(--acc);border:0;color:#fff;font:inherit;font-weight:700;font-size:.8rem;
  padding:5px 11px;border-radius:8px;cursor:pointer;margin-left:6px}
.toast-undo:hover{filter:brightness(1.15)}


/* ================================================================
   BURZA — výpis inzerátov, detail, formulár.
   ================================================================ */

/* ---------- lišta nad výpisom ---------- */
/* Celá lišta je jeden riadok: režimy + prepínač druhov + nástroje.
   Tlačidlá sú preto tesnejšie — tri pásy pod sebou kradli pol obrazovky. */
.burza-lista{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.burza-rezimy{display:flex;gap:5px}
.burza-rezimy .icon-btn{padding:7px 10px;font-size:.79rem;white-space:nowrap}
.burza-nastroje{margin-left:auto;display:flex;align-items:center;gap:5px;flex-wrap:nowrap}
.burza-nastroje .icon-btn{padding:7px 10px;font-size:.79rem;white-space:nowrap}
.burza-nastroje .btn{padding:8px 14px;font-size:.82rem;white-space:nowrap}
.burza-pocet{color:var(--faint);font-size:.78rem;margin-right:4px;white-space:nowrap}
#burzaOblubene.on{color:var(--down);border-color:var(--down)}
/* Tlačidlo „Filtre" je teraz na každej šírke — filtre sa štandardne
   zbalia a nechajú viditeľné len hľadanie (nižšie .zbalene). */
.iba-mobil{display:inline-flex}
/* Naozaj len telefón: výber režimu zobrazenia. Na počítači sú režimy
   vedľa seba ako tlačidlá, tam sa nič skrývať nemusí. */
.len-mobil{display:none}
.rv-nazov{max-width:12ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- filtre ---------- */
.burza-filtre{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px;
  background:var(--sheen),var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:11px 12px;
  backdrop-filter:blur(var(--blur)) saturate(160%);-webkit-backdrop-filter:blur(var(--blur)) saturate(160%);
  box-shadow:inset 0 1px 0 var(--glass-hi)}
/* Globálne `input{width:100%}` by tu roztiahlo každé pole na celý riadok —
   vo filtroch chceme, aby si každé bralo len toľko, koľko potrebuje. */
.burza-filtre input,.burza-filtre select{background:var(--bg2);border:1px solid var(--line);color:var(--txt);
  border-radius:var(--r-s);padding:8px 10px;font:inherit;font-size:.82rem;
  width:auto;flex:0 0 auto;min-width:0}
.burza-filtre input:focus,.burza-filtre select:focus{outline:none;border-color:var(--acc)}
.f-hladaj{flex:1 1 220px !important;min-width:180px}
.f-mesto{width:130px}
.f-oblast,.f-typ,.f-kvalita{max-width:180px}
.f-radenie{margin-left:auto}
.f-cena{display:flex;align-items:center;gap:5px;color:var(--faint);font-size:.8rem}
.f-cena input{width:86px}
/* Je to <label>, ktorý má v appke veľké písmená a blokové zobrazenie — tu nie. */
.f-prepinac{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--muted);cursor:pointer;
  white-space:nowrap;text-transform:none;letter-spacing:normal;font-weight:500;margin:0}
.f-prepinac input{accent-color:var(--acc);width:16px;height:16px;flex:0 0 auto;cursor:pointer}

/* Zbalené filtre: viditeľné ostáva len hľadanie (a nedávne pod ním),
   zvyšok sa odkryje tlačidlom „Filtre". Hľadanie je hlavná akcia, tak
   nech je vždy poruke — instantne filtruje pri písaní. */
.burza-filtre.zbalene > *:not(.f-hladaj):not(.burza-nedavne){display:none}
.burza-filtre.zbalene .f-hladaj{flex:1 1 100% !important;margin:0}
.burza-nedavne{display:flex;gap:6px;flex-wrap:wrap;flex:1 1 100%;align-items:center}
.burza-nedavne .nd-popis{color:var(--faint);font-size:.76rem;margin-right:2px}
.burza-cip{background:var(--bg2);border:1px solid var(--line);color:var(--muted);border-radius:999px;
  padding:5px 12px;font-size:.78rem;cursor:pointer;font:inherit;transition:.14s}
.burza-cip:hover{color:var(--txt);border-color:var(--acc)}

/* ---------- bottom sheet (spoločný komponent) ----------
   Na telefóne vysúva zdola (palcom dosiahnuteľné), na desktope je to
   vycentrovaný dialóg. Používa ho vizuálny výber zo zbierky aj rýchle
   pridanie z hlavičky. */
.sheet-overlay{position:fixed;inset:0;z-index:1300;background:rgba(var(--overlay-rgb),.72);
  display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .2s;
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}
.sheet-overlay.on{opacity:1}
/* Takmer nepriehľadné: cez sheet nemá presvitať obsah pod ním — pri
   priesvitnom paneli sa text bil s grafmi a kartami v pozadí. */
.sheet{background:var(--sheen),var(--sheet);border:1px solid var(--line2);border-bottom:0;
  border-radius:22px 22px 0 0;width:100%;max-width:640px;max-height:84vh;display:flex;flex-direction:column;
  transform:translateY(100%);transition:transform .26s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 -20px 60px rgba(0,0,0,.5)}
.sheet-overlay.on .sheet{transform:translateY(0)}
.sheet-uchyt{width:40px;height:4px;border-radius:2px;background:var(--line2);margin:10px auto 2px;flex:none}
.sheet-hlava{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 20px 12px;flex:none}
.sheet-hlava h3{font-size:1.05rem;font-weight:800;margin:0}
.sheet-telo{overflow-y:auto;padding:4px 16px 22px;-webkit-overflow-scrolling:touch}
@media(min-width:641px){
  .sheet-overlay{align-items:center}
  .sheet{border-bottom:1px solid var(--line);border-radius:20px;transform:translateY(16px) scale(.98);max-height:80vh}
  .sheet-overlay.on .sheet{transform:none}
}

/* Výber položky zo zbierky — vizuálne karty s náhľadom. */
.pz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.pz-karta{display:flex;flex-direction:column;gap:6px;background:var(--sheet2);border:1px solid var(--line);
  border-radius:14px;padding:8px;cursor:pointer;text-align:left;font:inherit;color:var(--txt);transition:.14s}
.pz-karta:hover{border-color:var(--acc);transform:translateY(-2px)}
.pz-foto{aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--sheet);
  display:flex;align-items:center;justify-content:center;color:var(--faint)}
.pz-foto img{width:100%;height:100%;object-fit:cover}
.pz-nazov{font-size:.8rem;font-weight:600;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.pz-meta{font-size:.72rem;color:var(--faint)}

/* Rýchle pridanie z hlavičky — veľké ciele, ikona + názov + popis. */
.rp-volba{display:flex;align-items:center;gap:14px;width:100%;text-align:left;font:inherit;color:var(--txt);
  background:var(--sheet2);border:1px solid var(--line);border-radius:16px;padding:15px 16px;cursor:pointer;transition:.14s}
.rp-volba+.rp-volba{margin-top:10px}
.rp-volba:hover{border-color:var(--acc);transform:translateY(-1px)}
.rp-volba.on{border-color:var(--acc)}
.rp-fajka{margin-left:auto;color:var(--up);display:inline-flex;flex:none}
.rp-ik{width:46px;height:46px;border-radius:13px;flex:none;display:flex;align-items:center;justify-content:center;
  background:rgba(var(--acc-rgb),.18);color:var(--acc-l)}
.rp-volba b{display:block;font-size:.95rem}
.rp-volba small{display:block;font-size:.78rem;color:var(--faint);margin-top:1px}

/* Ukážkové ponuky v prázdnom predlaunchi. */
.demo-pruh{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:linear-gradient(160deg,rgba(245,196,81,.12),rgba(245,196,81,0) 60%),var(--panel);
  border:1px dashed rgba(245,196,81,.5);border-radius:var(--r);padding:12px 16px;margin-bottom:2px}
.demo-pruh-text{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.85rem;min-width:0}
.demo-pruh-text span{color:var(--txt)}
.inz-demo{cursor:default}
.inz-demo-odznak{position:absolute;top:8px;left:8px;z-index:2;background:var(--gold);color:#1a1206;
  font-size:.68rem;font-weight:800;padding:3px 9px;border-radius:999px;letter-spacing:.4px;text-transform:uppercase;
  box-shadow:0 2px 8px rgba(0,0,0,.3)}

/* ---------- mriežka inzerátov ---------- */
/* 190px namiesto 230: pri malom počte inzerátov sa dlaždice rozťahovali
   na obrie karty — hustejšia mriežka ich drží v rozumnej veľkosti. */
.inz-mriezka{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.inz-mriezka.mala{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}

.inz-karta{background:var(--sheen),var(--panel);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;cursor:pointer;transition:.18s;display:flex;flex-direction:column;
  backdrop-filter:blur(var(--blur)) saturate(160%);-webkit-backdrop-filter:blur(var(--blur)) saturate(160%);
  box-shadow:inset 0 1px 0 var(--glass-hi),var(--shadow)}
.inz-karta:hover,.inz-karta:focus-visible{border-color:var(--acc);transform:translateY(-2px);outline:none;
  box-shadow:inset 0 1px 0 var(--glass-hi),0 16px 38px rgba(0,0,0,.45)}
.inz-karta.vyblednuty{opacity:.55}

.inz-foto{position:relative;aspect-ratio:1/1;background:rgba(0,0,0,.25);overflow:hidden}
.inz-foto img{width:100%;height:100%;object-fit:cover;display:block}
.inz-bez-foto{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:2.4rem;opacity:.28}
.inz-pocet-fotiek{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.6);color:#fff;
  font-size:.68rem;padding:3px 7px;border-radius:999px;backdrop-filter:blur(6px)}
.inz-stav{position:absolute;left:8px;top:8px;font-size:.66rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.5px;padding:4px 8px;border-radius:999px;color:#0a1310}
.inz-stav.rez{background:var(--gold)} .inz-stav.pred{background:var(--muted)}
.inz-stav.skr{background:var(--faint);color:#fff} .inz-stav.ok{background:var(--up)}

.inz-srdce{position:absolute;right:8px;top:8px;width:32px;height:32px;border-radius:50%;
  background:rgba(0,0,0,.5);border:1px solid var(--line);color:var(--muted);font-size:.95rem;
  cursor:pointer;transition:.16s;backdrop-filter:blur(8px);line-height:1}
.inz-srdce:hover{color:var(--down);border-color:var(--down);transform:scale(1.1)}
.inz-srdce.on{color:var(--down);border-color:var(--down);background:rgba(251,113,133,.18)}

.inz-telo{padding:10px 11px 11px;display:flex;flex-direction:column;gap:6px;flex:1}
.inz-telo h4{font-size:.86rem;font-weight:700;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.inz-cena{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.inz-cena .cena{font-size:1.05rem;font-weight:800;color:var(--acc-xl)}
.inz-cena .cena.dohodou{font-size:.86rem;color:var(--gold)}
.inz-cena.velka .cena{font-size:1.6rem}
.inz-kusov{color:var(--faint);font-size:.74rem}
.inz-stitky{display:flex;gap:5px;flex-wrap:wrap}
/* Štítok mal fialový text na fialovej priesvitnej výplni — pomer 1,96,
   čiže prakticky nečitateľný, obzvlášť keď cezeň presvitala aurora.
   Výplň je tmavšia a nepriehľadná, text takmer biely. */
/* inline-flex + center: štítky nesú aj ikonky (overený, dôvera) a text
   s SVG sedeli na rôznych účaroch — riadok potom „poskakoval". */
.stitok{background:rgba(20,16,32,.85);border:1px solid rgba(var(--acc-rgb),.45);color:var(--acc-xl);
  font-size:.68rem;padding:2px 8px;border-radius:999px;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;gap:4px}
.stitok.jemny{background:var(--bg2);border-color:var(--line);color:var(--muted)}
.inz-pata{margin-top:auto;padding-top:6px;display:flex;justify-content:space-between;gap:8px;
  color:var(--faint);font-size:.7rem;border-top:1px solid var(--line);align-items:center}
.inz-kedy{white-space:nowrap}
.inz-stav-text{font-weight:700}
.inz-stav-text.ok{color:var(--up)} .inz-stav-text.rez{color:var(--gold)}
.inz-stav-text.pred{color:var(--muted)} .inz-stav-text.skr{color:var(--faint)}

/* ---------- stránkovanie ---------- */
.strankovanie{display:flex;gap:5px;justify-content:center;align-items:center;margin-top:22px;flex-wrap:wrap}
.strankovanie .icon-btn.on{background:var(--acc);border-color:var(--acc);color:#fff}
.strankovanie .icon-btn[disabled]{opacity:.35;cursor:default}
.str-medzera{color:var(--faint);padding:0 2px}

/* ---------- detail inzerátu ---------- */
.inz-pas{text-align:center;font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:1px;
  padding:7px;border-radius:var(--r-s);margin-bottom:14px;color:#0a1310}
.inz-pas.rez{background:var(--gold)} .inz-pas.pred{background:var(--muted)}
.inz-pas.skr{background:var(--faint);color:#fff}

.inz-detail{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:760px){.inz-detail{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

.inz-hlavna-foto{aspect-ratio:1/1;background:rgba(0,0,0,.3);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;display:flex;align-items:center;justify-content:center}
.inz-hlavna-foto img{width:100%;height:100%;object-fit:contain;display:block}
.inz-nahlady{display:flex;gap:7px;margin-top:9px;overflow-x:auto;padding-bottom:4px}
.inz-nahlad{flex:none;width:62px;height:62px;border-radius:var(--r-s);overflow:hidden;padding:0;
  border:2px solid transparent;background:rgba(0,0,0,.3);cursor:pointer;transition:.15s}
.inz-nahlad img{width:100%;height:100%;object-fit:cover;display:block}
.inz-nahlad.on{border-color:var(--acc)}
.inz-nahlad:hover{border-color:var(--line2)}

.inz-info h2{font-size:1.3rem;font-weight:800;line-height:1.3;margin-bottom:10px}
.inz-parametre{margin:14px 0;display:flex;flex-direction:column;gap:7px}
.inz-parametre > div{display:flex;gap:10px;font-size:.83rem}
.inz-parametre dt{color:var(--faint);min-width:96px;flex:none}
.inz-parametre dd{color:var(--txt)}
.inz-akcie{display:flex;gap:7px;flex-wrap:wrap;margin:16px 0}
.inz-akcie .icon-btn.on{color:var(--down);border-color:var(--down)}
.inz-stav-vyber{background:var(--bg2);border:1px solid var(--line);color:var(--txt);
  border-radius:var(--r-s);padding:8px 10px;font:inherit;font-size:.82rem}
.inz-popis{margin-top:14px;font-size:.88rem;line-height:1.65;color:var(--muted);
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-s);padding:12px 14px;
  max-height:340px;overflow-y:auto;overflow-wrap:anywhere}

.inz-predajca{display:flex;gap:13px;align-items:center;
  background:var(--sheen),var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:13px}
.inz-predajca .profile-avatar-big{flex:none;cursor:pointer;border:0;padding:0;background:none}
.profil-odkaz.velky{font-size:1.02rem;font-weight:700}
.inz-hodnotenia{font-size:.82rem;color:var(--muted);margin-top:5px}
.inz-hodnotenia .jemne{color:var(--faint)}

.inz-upozornenie{margin-top:14px;font-size:.8rem;line-height:1.6;color:var(--muted);
  background:rgba(245,196,81,.08);border:1px solid rgba(245,196,81,.28);
  border-radius:var(--r-s);padding:11px 13px}
.inz-upozornenie b{color:var(--gold)}

/* ---------- formulár inzerátu ---------- */
.inz-form-mriezka{display:grid;grid-template-columns:1fr;gap:18px;margin-top:12px}
@media(min-width:720px){.inz-form-mriezka{grid-template-columns:1fr 1fr}}
.inz-form-stlpec{display:flex;flex-direction:column;gap:10px;min-width:0}

.inz-fotky-zona{border:1px dashed var(--line2);border-radius:var(--r);padding:11px;transition:.16s}
.inz-fotky-zona.nad{border-color:var(--acc);background:rgba(var(--acc-rgb),.08)}
.inz-fotky{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px}
.inz-fotky:empty{display:none}
.inz-foto-polozka{position:relative;aspect-ratio:1/1;border-radius:var(--r-s);overflow:hidden;
  border:2px solid transparent;background:rgba(0,0,0,.3);cursor:grab}
.inz-foto-polozka.hlavna{border-color:var(--acc)}
.inz-foto-polozka.taha{opacity:.4}
.inz-foto-polozka img{width:100%;height:100%;object-fit:cover;display:block}
.inz-hlavna-znacka{position:absolute;left:3px;bottom:3px;background:var(--acc);color:#fff;
  font-size:.6rem;font-weight:700;padding:1px 5px;border-radius:5px}
.inz-foto-x{position:absolute;right:3px;top:3px;width:20px;height:20px;border-radius:50%;border:0;
  background:rgba(0,0,0,.65);color:#fff;font-size:.7rem;cursor:pointer;line-height:1}
.inz-foto-x:hover{background:var(--down)}
.inz-fotky-pridaj{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;
  padding:14px 8px;color:var(--acc-l);font-size:.85rem;font-weight:600;text-align:center;
  text-transform:none;letter-spacing:normal;margin:0}
.inz-fotky-pridaj small{color:var(--faint);font-weight:400;font-size:.7rem;line-height:1.4}
.inz-fotky-pridaj:hover{color:var(--acc-xl)}

/* ---------- režim hosťa ----------
   Neprihlásený vidí len burzu. Bočný prehľad peňazí ani osobné záložky
   preňho neexistujú, a jediná záložka sa nesmie roztiahnuť cez celý pás. */
body.host .len-prihlaseny{display:none !important}
body.host .sidebar{display:none !important}
/* Hosť nemá bočný panel s účtami, tak preň nedrž ani miesto — inak sa
   obsah tlačí do stredu a po stranách ostávajú prázdne pásy. */
body.host{padding-left:0}
body.host #pets{left:0}
/* Chat je len pre prihlásených, dok nemá hosťovi čo ponúknuť. */
body.host .chat-dok, body.host .spravy-rozbal{display:none}
/* Rozbaľovací panel správ pri profile — plávajúce okno ako Messenger.
   Farby, sklo aj vstupná animácia sú ZHODNÉ s panelom upozornení —
   dve okná z tej istej hlavičky nesmú vyzerať každé inak. Animácia sa
   spustí pri každom zobrazení (prepína sa display), rovnako ako pri
   zvončeku. */
.spravy-rozbal{position:fixed;top:118px;right:18px;z-index:290;width:360px;max-width:calc(100vw - 24px);
  background:var(--sheen),rgba(var(--sklo-rgb),.94);backdrop-filter:blur(30px) saturate(170%);-webkit-backdrop-filter:blur(30px) saturate(170%);
  border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.6),inset 0 1px 0 var(--glass-hi);
  animation:vstup-zhora .26s cubic-bezier(.32,.72,.28,1);transform-origin:top right}
@media(prefers-reduced-motion:reduce){.spravy-rozbal{animation:none}}
.rozbal-hlava{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line)}
.rozbal-hlava b{font-size:1.02rem}
.rozbal-zoznam{max-height:min(430px, 60vh);overflow-y:auto;padding:6px}
.rozbal-zoznam .chat-vlakno{width:100%}
.rozbal-vsetky{display:block;width:100%;padding:11px;background:none;border:0;border-top:1px solid var(--line);
  color:var(--acc-l);font:inherit;font-weight:700;font-size:.85rem;cursor:pointer}
.rozbal-vsetky:hover{background:var(--panel)}
.chat-dok.skryty{display:none}

/* Mini-katalóg na dashboarde. */
.dom-katalog input{margin-top:4px}
.dom-kat-vysledky{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.dom-kat-riadok{display:flex;align-items:center;gap:10px;padding:7px 9px;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-s);
  color:var(--txt);font:inherit;cursor:pointer;transition:.15s}
.dom-kat-riadok:hover{border-color:var(--acc)}
.dom-kat-riadok img{width:34px;height:auto;border-radius:4px;flex:none}
.dom-kat-text{display:flex;flex-direction:column;min-width:0}
.dom-kat-text i{color:var(--faint);font-style:normal}
.dom-kat-text small{color:var(--muted)}

/* Podzáložky Portfólia — Boxy / Karty / Investície v jednej sekcii. */
.portf-taby{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.portf-taby button{display:inline-flex;align-items:center;gap:6px;
  background:var(--panel);border:1px solid var(--line);border-radius:999px;color:var(--muted);
  font:inherit;font-weight:700;font-size:.82rem;padding:8px 15px;cursor:pointer;transition:.15s}
.portf-taby button.on{color:#fff;background:linear-gradient(135deg,var(--acc),var(--acc-hlboka));border-color:transparent}
.portf-taby button:not(.on):hover{color:var(--txt);border-color:var(--acc)}
.portf-taby .cnt{opacity:.8;font-weight:600;font-size:.74rem}

/* ================= KATALÓG (Pokeindex) ================= */
.kat-sekcie{display:flex;gap:6px;margin-top:10px}
.kat-sekcia{background:var(--panel);border:1px solid var(--line);border-radius:999px;color:var(--muted);
  font:inherit;font-weight:700;font-size:.82rem;padding:8px 16px;cursor:pointer;transition:.15s}
.kat-sekcia.on{color:#fff;background:linear-gradient(135deg,var(--acc),var(--acc-hlboka));border-color:transparent}
.kat-sekcia:not(.on):hover{color:var(--txt);border-color:var(--acc)}
.kat-box-graf{width:100%;max-width:640px;margin-top:8px;padding:12px;background:var(--bg2);
  border:1px solid var(--line);border-radius:var(--r-s)}

.kat-hlava h2{font-size:1.5rem;margin-bottom:4px}
/* Bočný panel filtrov je preč — výsledky idú na celú šírku. */
.kat-telo{display:block;margin-top:14px}
/* Sekcie a hľadanie v jednom riadku nad výsledkami. */
.kat-hlava-riadok{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
/* Hľadanie v produktoch stálo nalepené na prepínači sekcií. */
#katBoxHladaj{margin-top:12px}
.kat-hlava-riadok .kat-sekcie{margin-top:0;flex:0 0 auto}
.kat-hladaj{flex:1 1 260px;min-width:200px;width:auto;
  background:var(--bg2);border:1px solid var(--line);color:var(--txt);
  border-radius:var(--r-s);padding:9px 12px;font:inherit;font-size:.85rem}
.kat-hladaj:focus{outline:none;border-color:var(--acc)}
.kat-filtre{display:flex;flex-direction:column;gap:6px;align-self:start;position:sticky;top:10px}
.kat-volba{display:flex;align-items:center;gap:8px;font-size:.84rem;color:var(--muted);cursor:pointer}
.kat-volba input{flex:0 0 auto;width:auto;accent-color:var(--acc)}
.kat-ery{display:flex;flex-wrap:wrap;gap:6px}
.kat-era{background:var(--panel);border:1px solid var(--line);border-radius:999px;color:var(--muted);
  font:inherit;font-size:.76rem;font-weight:700;padding:6px 11px;cursor:pointer;transition:.15s}
.kat-era.on,.kat-era:hover{color:var(--txt);border-color:var(--acc)}
.kat-listata{display:flex;align-items:center;gap:10px;margin-bottom:10px;color:var(--muted);flex-wrap:wrap}
/* Počet výsledkov odtláča radenie doprava, prepínač ostáva vľavo. */
.kat-listata > span{margin-right:auto;white-space:nowrap}
.kat-prepin{display:flex;gap:6px}
.kat-prepin .kat-era{padding:5px 12px;font-size:.76rem}
/* Bez tohto sa rozbaľovacie radenie roztiahne cez celý zvyšok lišty —
   formulárové polia majú v appke šírku 100 %. */
.kat-listata select{width:auto;flex:none;min-width:180px;max-width:100%}
/* Zbaľovanie filtrov je len pre telefón — na počítači je na ne miesto
   v bočnom stĺpci a tlačidlo by tam len zavadzalo. */
.kat-filtre-prep{display:none}
.kat-filtre-prep .kat-zn{margin-left:2px}
@media(max-width:640px){
  .kat-listata{gap:8px}
  .kat-prepin{order:-1;width:100%}
  .kat-prepin .kat-era{flex:1;text-align:center}
  .kat-listata select{min-width:0;flex:1}
  .kat-filtre-prep{display:flex;align-items:center;gap:7px;width:100%;margin-top:10px;
    background:var(--panel);border:1px solid var(--line);border-radius:var(--r-s);
    color:var(--muted);font:inherit;font-weight:700;font-size:.82rem;padding:9px 12px;cursor:pointer}
  .kat-filtre-prep.on{color:var(--txt);border-color:var(--acc)}
  .kat-filtre-telo{display:none}
  .kat-filtre-telo.on{display:block}
}
.kat-mriezka{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.kat-pokemon{display:flex;flex-direction:column;gap:4px;text-align:left;padding:12px;
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);color:var(--txt);
  font:inherit;cursor:pointer;transition:.15s}
.kat-pokemon:hover{border-color:var(--acc);transform:translateY(-2px)}
.kat-obrazok{display:flex;justify-content:center;padding:6px 0}
.kat-obrazok img{width:130px;height:auto;border-radius:7px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))}
.kat-p-meno i{color:var(--faint);font-style:normal;font-size:.78rem}
.kat-p-sub{color:var(--muted);font-size:.74rem}
.kat-p-hodnota{font-size:.8rem}
.kat-znacky{display:flex;gap:4px;flex-wrap:wrap;margin-top:2px}
.kat-zn{font-style:normal;font-size:.64rem;font-weight:800;letter-spacing:.4px;color:var(--gold);
  border:1px solid rgba(245,196,81,.4);border-radius:6px;padding:2px 6px}
.kat-zn.velka{font-size:.72rem;align-self:flex-start}
.kat-pokemon-hlava{margin:12px 0 6px}
.kat-pokemon-hlava h2 i{color:var(--faint);font-style:normal}
.kat-set{margin-top:18px}
.kat-set-hlava{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.kat-set-hlava img{width:22px;height:22px;object-fit:contain}
.kat-karty{display:grid;grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:8px}
.kat-karta{display:flex;flex-direction:column;gap:3px;padding:8px;text-align:left;
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-s);color:var(--txt);
  font:inherit;cursor:pointer;transition:.15s;min-width:0}
.kat-karta:hover{border-color:var(--acc);transform:translateY(-2px)}
/* Pomer strán karty (63×88 mm) drží pevne. Skeny sa líšia o pár pixelov
   a bez neho každá dlaždica začínala text v inej výške — mriežka potom
   vyzerá rozhádzane, hoci sú dlaždice rovnako vysoké. */
.kat-karta img{width:100%;aspect-ratio:63/88;object-fit:contain;border-radius:6px}
.kat-k-riadok{display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:.76rem}
/* Čísla ako „#SWSH284" sú dlhšie než stĺpec a bez orezania sa podliezali
   pod cenu vpravo. Prednosť má cena — tá sa nesmie skrátiť nikdy. */
.kat-k-riadok i{color:var(--faint);font-style:normal;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kat-k-riadok b{white-space:nowrap;flex:none}
/* Dlhé názvy kariet („Bulbasaur ex Special Illustration Rare") rozťahovali
   riadok mriežky do výšky podľa najdlhšieho z nich a vedľajšie dlaždice
   ostávali z polovice prázdne. Dva riadky stačia, zvyšok s výpustkou. */
.kat-k-meno{font-size:.78rem;font-weight:700;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kat-k-rarita,.kat-k-set{color:var(--muted);font-size:.66rem;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kat-k-set{color:var(--faint)}
.kat-detail{display:grid;grid-template-columns:minmax(260px,420px) minmax(0,1fr);gap:22px;margin-top:12px}
@media(max-width:760px){.kat-detail{grid-template-columns:1fr}}
.kat-detail-obrazok img{width:100%;height:auto;border-radius:14px;filter:drop-shadow(0 14px 34px rgba(0,0,0,.5))}
.kat-detail-info h2{font-size:1.7rem;margin:2px 0 8px}
.kat-detail-info{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.kat-cena-hlavna{font-size:2rem;font-weight:800}
.kat-cena-hlavna .jemne{font-size:.8rem;font-weight:600;margin-left:6px}
.kat-ceny{display:flex;flex-direction:column;gap:6px;width:100%}
.kat-cena-riadok{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:9px 12px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-s);font-size:.78rem}
.kat-cena-riadok b{min-width:86px}
.kat-cena-riadok span{color:var(--faint);display:flex;flex-direction:column}
.kat-cena-riadok i{font-style:normal;color:var(--txt);font-weight:700;font-size:.86rem}
/* Sprievodca pre nováčika na dashboarde. */
/* Skrytý sprievodca sa pri obnovení nevykreslí (poznámka z predstart.js). */
html.bez-sprievodcu .dom-sprievodca{display:none}
.dom-sprievodca{margin-bottom:14px;padding:14px 16px;border:1px solid var(--line2);border-radius:var(--r);
  background:linear-gradient(160deg,rgba(var(--acc-rgb),.14),rgba(255,255,255,.03))}
.dom-spr-hlava{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.dom-spr-hlava b{display:flex;align-items:center;gap:7px;font-size:.95rem}
.dom-spr-hlava .icon-btn{margin-left:auto}
.dom-spr-kroky{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
/* Krátke zvýraznenie karty v Nastaveniach, ku ktorej sprievodca doviedol. */
.nast-karta.zvyrazni{outline:2px solid var(--acc);outline-offset:3px;transition:outline-color .3s}
.dom-spr-krok{display:flex;align-items:center;gap:10px;text-align:left;padding:10px 12px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-s);
  color:var(--txt);font:inherit;cursor:pointer;transition:.15s}
.dom-spr-krok:hover{border-color:var(--acc);transform:translateY(-1px)}
.dom-spr-krok.hotovo{opacity:.6}
.dom-spr-krok.hotovo .dom-spr-ik{color:var(--up)}
.dom-spr-text{display:flex;flex-direction:column;min-width:0}
.dom-spr-text b{font-size:.83rem}
.dom-spr-text small{color:var(--muted);font-size:.72rem;line-height:1.4}
/* Návštevnosť a chyby v štatistikách správcu. */
.statp-navstevy{display:flex;gap:5px;align-items:flex-end;padding:8px 2px 0}
.statp-den{flex:1 1 0;text-align:center;min-width:0}
.statp-den small{color:var(--faint);font-size:.62rem}
/* POZOR: pôvodne sa tento stĺpec volal .statp-stlpec rovnako ako stĺpce
   mesačného grafu nižšie — a pravidlo `span` z neho menilo popisky
   (číslo a mesiac) na široké farebné pruhy cez celý graf. Premenované
   na .statp-navstevy-stlpec, aby si dva grafy nešliapali po názvoch. */
.statp-navstevy-stlpec{height:72px;display:flex;align-items:flex-end;justify-content:center}
.statp-navstevy-stlpec span{display:block;width:70%;min-height:2px;border-radius:4px 4px 0 0;
  background:linear-gradient(180deg,var(--acc-l),var(--acc))}
.statp-chyby{display:flex;flex-direction:column;gap:8px;max-height:260px;overflow-y:auto}
.statp-chyba{font-size:.78rem;line-height:1.5;padding:8px 10px;border:1px solid rgba(251,113,133,.35);
  border-radius:var(--r-s);background:rgba(251,113,133,.07);word-break:break-word}
/* Fotka/video v bubline správy. */
.chat-priloha{display:block;max-width:100%;max-height:280px;border-radius:12px;margin-bottom:4px;background:#000}
video.chat-priloha{width:100%}
body.host nav button, body.host nav .nav-odkaz{flex:0 0 auto;padding:10px 18px}
#btnPrihlasitHost{flex:0 0 auto;white-space:nowrap}

/* ---------- burza na mobile ---------- */
@media(max-width:760px){
  /* Režimy sa na telefóne zbalia pod jedno tlačidlo — tri široké pruhy
     nad sebou zbytočne zjedli dva riadky. */
  .len-mobil{display:inline-flex}
  .burza-rezimy{display:none}
  .f-radenie,.f-mesto,.f-hladaj{margin-left:0;width:100%;flex:1 1 100%}
  .inz-mriezka{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .inz-mriezka.mala{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .burza-nastroje{margin-left:0;width:100%}
  .burza-nastroje .btn{margin-left:auto}
}


/* ================================================================
   AUKCIE — karty, odpočet, príhoz, história.
   Základ (mriežka, fotky, štítky, stránkovanie) je spoločný s burzou.
   ================================================================ */

.auk-karta{background:var(--sheen),var(--panel);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;cursor:pointer;transition:.18s;display:flex;flex-direction:column;
  backdrop-filter:blur(var(--blur)) saturate(160%);-webkit-backdrop-filter:blur(var(--blur)) saturate(160%);
  box-shadow:inset 0 1px 0 var(--glass-hi),var(--shadow)}
.auk-karta:hover,.auk-karta:focus-visible{border-color:var(--acc);transform:translateY(-2px);outline:none;
  box-shadow:inset 0 1px 0 var(--glass-hi),0 16px 38px rgba(0,0,0,.45)}
.auk-karta.vyblednuty{opacity:.55}
.auk-karta.vediem{border-color:var(--up);box-shadow:inset 0 1px 0 var(--glass-hi),0 0 0 1px rgba(74,222,128,.28),var(--shadow)}

/* ---------- odpočet ---------- */
/* Odpočet sedí DOLE na fotke — hore prekrýval kresbu produktu a vľavo
   hore sa bil s pozornosťou názvu. Počítadlo fotiek preto v aukcii
   uhýba do pravého dolného rohu (srdce je vpravo hore). */
.auk-cas{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.62);border-radius:999px;
  padding:4px 9px;backdrop-filter:blur(8px)}
.auk-karta .inz-pocet-fotiek{left:auto;right:8px}
.odpocet{font-size:.72rem;font-weight:800;letter-spacing:.3px;color:var(--txt);font-variant-numeric:tabular-nums}
.odpocet.sur{color:var(--gold)}
.odpocet.kriticky{color:var(--down);animation:tep 1s ease-in-out infinite}
.odpocet.koniec{color:var(--faint)}
.odpocet.velky{font-size:1.5rem;font-weight:800}
@keyframes tep{0%,100%{opacity:1}50%{opacity:.45}}
@media(prefers-reduced-motion:reduce){.odpocet.kriticky{animation:none}}

.auk-prihody{color:var(--faint);font-size:.72rem}
.auk-rezerva{color:var(--gold);font-size:.7rem;font-weight:700}
.auk-vediem{color:var(--up);font-size:.72rem;font-weight:800}
.stitok.kup{background:rgba(245,196,81,.16);border-color:rgba(245,196,81,.36);color:var(--gold)}

/* ---------- panel príhozu v detaile ---------- */
.auk-panel{margin-top:12px;background:var(--bg2);border:1px solid var(--line2);
  border-radius:var(--r);padding:14px;box-shadow:inset 0 1px 3px rgba(0,0,0,.28)}
.auk-panel.vediem{border-color:rgba(74,222,128,.45);background:rgba(74,222,128,.06)}
.auk-riadok{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.auk-panel .lbl{color:var(--muted);font-size:.64rem;text-transform:uppercase;letter-spacing:.7px;font-weight:700}
.auk-cena{font-size:1.9rem;font-weight:800;color:var(--acc-xl);line-height:1.15}
.auk-cas-blok{text-align:right}
.auk-koniec-datum{color:var(--faint);font-size:.72rem;margin-top:2px}

.auk-rezerva-pas{margin-top:11px;font-size:.76rem;font-weight:700;padding:7px 10px;border-radius:var(--r-s);
  background:rgba(245,196,81,.1);border:1px solid rgba(245,196,81,.3);color:var(--gold)}
.auk-rezerva-pas.ok{background:rgba(74,222,128,.1);border-color:rgba(74,222,128,.3);color:var(--up)}
.auk-vediem-pas{margin-top:11px;font-size:.78rem;font-weight:700;color:var(--up)}
.auk-prebity-pas{margin-top:11px;font-size:.78rem;font-weight:700;color:var(--down)}

.auk-prihoz{display:flex;gap:8px;align-items:flex-end;margin-top:13px}
.auk-prihoz .field{margin:0}
.auk-prihoz .btn{flex:none;white-space:nowrap}
/* Zablokovaný účet na verejnom profile — musí byť vidieť na prvý pohľad. */
.profil-ban{border:2px solid var(--down);border-radius:var(--r);
  background:linear-gradient(180deg,rgba(251,113,133,.20),rgba(251,113,133,.07));
  padding:14px 16px;margin:0 0 16px}
.profil-ban-nadpis{display:flex;align-items:center;gap:9px;color:var(--down);
  font-size:1.15rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase}
.profil-ban-dovod{margin-top:7px;font-weight:700;overflow-wrap:anywhere}
.profil-ban-rada{margin-top:5px;font-size:.85rem;color:var(--muted)}
@media(max-width:600px){.profil-ban-nadpis{font-size:1rem}}

/* Oficiálny účet portálu — jediný odznak správcu, ktorý ľudia vidia. */
.odznak.oficialny{display:inline-flex;align-items:center;gap:4px;
  background:rgba(var(--acc-rgb),.18);border:1px solid rgba(var(--acc-rgb),.5);
  color:var(--acc-xl);font-weight:700}

/* Filter účtov v Správe — hľadanie podľa mena, e-mailu a dátumu. */
.uziv-filter{margin-top:8px;padding:10px;border:1px solid var(--line);border-radius:var(--r-s);
  background:rgba(0,0,0,.18)}
.uziv-filter-riadok{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.uziv-filter-pole{display:flex;flex-direction:column;gap:4px;min-width:0;flex:0 0 auto}
.uziv-filter-pole.siroke{flex:1 1 200px}
.uziv-filter-pole .lbl{font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.uziv-filter-pole input{width:100%;min-width:0}
.uziv-filter-zrus{flex:0 0 auto;align-self:flex-end}
.uziv-filter-zrus:disabled{opacity:.45;cursor:default}
.uziv-filter-pocet{margin-top:8px;font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums}
@media(max-width:600px){
  .uziv-filter-pole{flex:1 1 100%}
  .uziv-filter-zrus{width:100%;justify-content:center}
}

/* Zoznam blokovaných registrácií v Správe. */
.blok-zoznam{display:flex;flex-direction:column;gap:6px;max-height:280px;overflow:auto}
.blok-riadok{display:flex;align-items:center;gap:9px;padding:7px 10px;border:1px solid var(--line);
  border-radius:var(--r-s);background:rgba(0,0,0,.18);font-size:.82rem}
.blok-riadok .blok-hodnota{overflow-wrap:anywhere;min-width:0}
.blok-riadok .jemne{margin-left:auto;text-align:right;overflow-wrap:anywhere}
.blok-riadok .icon-btn.maly{flex:none;padding:4px 7px}

/* Rýchle sumy pod poľom príhozu — jedno ťuknutie namiesto písania.
   Pole samo ostáva prázdne, aby sa zadané číslice nemali do čoho vlepiť. */
/* Aukcia tieňového (demo) účtu — vidí ju len jej majiteľ a správca. */
.stitok.skryta{background:rgba(148,163,184,.16);border-color:var(--line2);color:var(--muted)}
.auk-skryta-pas{display:flex;align-items:center;gap:8px;margin-top:12px;padding:9px 12px;
  border:1px dashed var(--line2);border-radius:var(--r-s);background:rgba(148,163,184,.10);
  color:var(--muted);font-size:.84rem}
.auk-rychle{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:8px 0 0}
.auk-chip{padding:6px 12px;border-radius:999px;border:1px solid var(--line2);
  background:rgba(0,0,0,.2);color:var(--txt);font-size:.82rem;cursor:pointer;
  font-variant-numeric:tabular-nums;transition:.15s}
.auk-chip:hover{border-color:var(--acc)}
.auk-vysvetlenie{margin:8px 0 0;line-height:1.55}
.auk-vysvetlenie b{color:var(--acc-xl)}
.btn.kup-hned{margin-top:11px;width:100%;background:linear-gradient(160deg,rgba(255,255,255,.28),rgba(255,255,255,0) 40%),
  linear-gradient(135deg,var(--gold),#c9942b);color:#231a05}

/* ---------- história príhozov ---------- */
.auk-historia{border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden;
  max-height:340px;overflow-y:auto}
.auk-riadok-historie{display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:.8rem;
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.auk-riadok-historie:last-child{border-bottom:0}
.auk-riadok-historie.vedie{background:rgba(74,222,128,.07)}
.auk-h-cena{font-weight:800;color:var(--acc-xl);font-variant-numeric:tabular-nums}
.auk-h-kedy{margin-left:auto;color:var(--faint);font-size:.72rem;white-space:nowrap}
/* Krížik na zrušenie príhozu (len správca) — drží sa vpravo pri čase. */
.auk-riadok-historie .icon-btn.maly{flex:none;padding:3px 7px;font-size:.72rem}

/* ---------- súhrn vo formulári ---------- */
.auk-suhrn{margin-top:10px;font-size:.8rem;line-height:1.6;color:var(--muted);
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-s);padding:10px 12px}
.auk-suhrn b{color:var(--txt)}
.auk-suhrn .jemne{color:var(--faint)}
.auk-problem{color:var(--down);font-weight:600}

.auk-moje .inz-mriezka{margin-top:4px}

/* ---------- rozcestník na dashboarde ---------- */
.chystana-karta.hotova{cursor:pointer;border-color:var(--line2)}
.chystana-karta.hotova:hover,.chystana-karta.hotova:focus-visible{border-color:var(--acc);
  transform:translateY(-1px);outline:none;background:var(--sheen),var(--panel2)}
.ch-znacka.hotova{background:rgba(var(--acc-rgb),.2);border-color:rgba(var(--acc-rgb),.4);color:var(--acc-l)}

@media(max-width:760px){
  .auk-cas-blok{text-align:left}
  .auk-prihoz{flex-wrap:wrap}
  .auk-prihoz .field{flex:1 1 100%}
  .auk-prihoz .btn{width:100%}
}


/* ================================================================
   SPRÁVY — dva stĺpce na počítači, jedna obrazovka na telefóne.
   ================================================================ */

.chat-rozlozenie{display:grid;grid-template-columns:320px minmax(0,1fr);gap:14px;
  height:calc(100vh - 210px);min-height:440px}

.chat-bok{display:flex;flex-direction:column;min-height:0;
  background:var(--sheen),var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  backdrop-filter:blur(var(--blur)) saturate(160%);-webkit-backdrop-filter:blur(var(--blur)) saturate(160%);
  box-shadow:inset 0 1px 0 var(--glass-hi)}
.chat-bok-taby{display:flex;gap:5px;padding:8px;border-bottom:1px solid var(--line);flex:none}
.chat-bok-taby .icon-btn{flex:1;justify-content:center}
.chat-bok-obsah{flex:1;min-height:0;overflow-y:auto;padding:8px}

/* ---------- zoznam vlákien ---------- */
.chat-vlakno{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 10px;
  background:none;border:1px solid transparent;border-radius:var(--r-s);color:var(--txt);
  font:inherit;cursor:pointer;transition:.15s;margin-bottom:3px}
.chat-vlakno:hover{background:var(--panel2)}
.chat-vlakno.on{background:rgba(var(--acc-rgb),.16);border-color:rgba(var(--acc-rgb),.4)}
.chat-vlakno .profile-avatar{flex:none}
.chat-vlakno-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.chat-vlakno-hlava{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.chat-vlakno-hlava b{font-size:.86rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-kedy{color:var(--faint);font-size:.68rem;flex:none}
.chat-k-inzeratu{color:var(--acc-l);font-size:.7rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-ukazka{color:var(--muted);font-size:.76rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-vlakno.neprecitane .chat-ukazka{color:var(--txt);font-weight:600}
.chat-bublina{flex:none;background:var(--acc);color:#fff;font-size:.66rem;font-weight:800;
  min-width:19px;height:19px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 5px}

/* ---------- okno rozhovoru ---------- */
.chat-hlavne{display:flex;flex-direction:column;min-height:0;
  background:var(--sheen),var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  backdrop-filter:blur(var(--blur)) saturate(160%);-webkit-backdrop-filter:blur(var(--blur)) saturate(160%);
  box-shadow:inset 0 1px 0 var(--glass-hi)}
.chat-hlavicka{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line);flex:none}
.chat-osoba{display:flex;align-items:center;gap:10px;background:none;border:0;color:var(--txt);
  font:inherit;cursor:pointer;padding:2px;border-radius:var(--r-s);flex:1;min-width:0;text-align:left}
.chat-osoba:hover{background:var(--panel2)}
.chat-osoba b{font-size:.9rem;display:block}
.chat-osoba-sub{color:var(--faint);font-size:.72rem;display:block}

.chat-inzerat{display:flex;align-items:center;gap:10px;width:100%;padding:8px 12px;text-align:left;
  background:rgba(var(--acc-rgb),.08);border:0;border-bottom:1px solid var(--line);
  color:var(--txt);font:inherit;cursor:pointer;flex:none}
.chat-inzerat:hover{background:rgba(var(--acc-rgb),.16)}
.chat-inzerat img{width:38px;height:38px;border-radius:8px;object-fit:cover;flex:none}
.chat-inz-bez{width:38px;height:38px;border-radius:8px;background:rgba(0,0,0,.3);flex:none;
  display:flex;align-items:center;justify-content:center}
.chat-inzerat b{font-size:.82rem;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-inz-cena{color:var(--acc-l);font-size:.75rem;font-weight:700}
.chat-inz-sipka{margin-left:auto;color:var(--faint);font-size:1.2rem;flex:none}

/* ---------- bubliny ---------- */
.chat-spravy{flex:1;min-height:0;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:3px;
  overscroll-behavior:contain}
.chat-den{align-self:center;color:var(--faint);font-size:.68rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.6px;margin:12px 0 6px}
.chat-sprava{max-width:min(78%,520px);display:flex;flex-direction:column;gap:2px}
.chat-sprava.moja{align-self:flex-end;align-items:flex-end}
.chat-sprava.cudzia{align-self:flex-start}
.chat-bublina-text{padding:8px 12px;border-radius:16px;font-size:.87rem;line-height:1.5;
  overflow-wrap:anywhere;white-space:normal}
.chat-sprava.moja .chat-bublina-text{background:linear-gradient(135deg,var(--acc),var(--acc-hlboka));color:#fff;
  border-bottom-right-radius:5px}
.chat-sprava.cudzia .chat-bublina-text{background:var(--panel2);border:1px solid var(--line);
  border-bottom-left-radius:5px}
.chat-meta{display:flex;align-items:center;gap:5px;color:var(--faint);font-size:.66rem;padding:0 4px}
/* Odoslané ✓ je jemné, prečítané ✓✓ svieti — rozdiel musí byť vidieť
   na prvý pohľad, nie po lúštení. */
.chat-precitane{font-weight:700;letter-spacing:-2px;margin-left:2px;color:var(--faint);transition:color .2s}
.chat-precitane.videne{color:var(--acc-l);letter-spacing:-3px}
.chat-zmaz{background:none;border:0;color:var(--faint);cursor:pointer;font-size:.66rem;padding:0 2px;
  opacity:0;transition:.15s}
.chat-sprava:hover .chat-zmaz{opacity:1}
.chat-zmaz:hover{color:var(--down)}

/* ---------- písanie ---------- */
.chat-rychle{display:flex;gap:8px;flex-wrap:wrap;padding:10px 12px 0;flex:none}
.chat-rychla{border:1px solid var(--line);background:var(--bg2,transparent);color:var(--txt,inherit);
  border-radius:999px;padding:7px 13px;font-size:.82rem;cursor:pointer;transition:border-color .15s,background .15s}
.chat-rychla:hover{border-color:var(--acc)}
.chat-pisanie{display:flex;gap:8px;align-items:flex-end;padding:10px 12px;border-top:1px solid var(--line);flex:none}
.chat-pisanie textarea{flex:1;min-height:42px;max-height:140px;resize:none;font-size:.88rem;padding:10px 12px}
.chat-pisanie .btn{flex:none;padding:11px 16px;font-size:1rem;line-height:1}
.chat-blokovany{padding:14px;text-align:center;color:var(--down);font-size:.84rem;
  border-top:1px solid var(--line);flex:none}

/* Nahrávanie prílohy v chate — dočasná bublina s pruhom priebehu. */
.chat-upload{opacity:.85}
.chat-upload-pruh{height:4px;border-radius:2px;background:rgba(255,255,255,.16);
  overflow:hidden;margin-top:8px}
.chat-upload-pruh i{display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--acc),var(--gold));transition:width .15s ease}
.chat-upload-pct{font-variant-numeric:tabular-nums}

/* ---------- priatelia ---------- */
.pr-hladanie{margin-bottom:6px}
.pr-hladanie input{font-size:.84rem;padding:8px 11px}
.pr-clovek{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:var(--r-s);
  transition:.15s;flex-wrap:wrap}
.pr-clovek:hover{background:var(--panel2)}
.pr-osoba{display:flex;align-items:center;gap:9px;background:none;border:0;color:var(--txt);font:inherit;
  cursor:pointer;padding:0;flex:1;min-width:0;text-align:left}
/* Textový blok sa MUSÍ vedieť zmenšiť — bez min-width:0 flex dieťa drží
   šírku obsahu, meno podtečie pod tlačidlá a prekrýva sa s nimi. */
.pr-osoba > span:not(.profile-avatar){min-width:0;flex:1}
.pr-osoba .profile-avatar{flex:none}
.pr-osoba b{font-size:.84rem;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr-sub{color:var(--faint);font-size:.7rem;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr-akcie{display:flex;gap:4px;flex:none}
.pr-caka{color:var(--gold);font-size:.7rem;font-weight:700;align-self:center}
.btn.maly,.icon-btn.maly{padding:5px 9px;font-size:.74rem}

/* ---------- telefón: jedna obrazovka naraz ----------
   Zoznam vlákien necháme plynúť so stránkou. Otvorený rozhovor ale musí
   zabrať celú obrazovku — počítať mu výšku od hornej lišty sa nedá, tá je
   na telefóne dvojstĺpcová a vysoká. Fixné umiestnenie je jediné, čo sedí
   vždy. Keď sa prepne záložka, `.tab{display:none}` ho schová samo. */
@media(max-width:760px){
  .chat-rozlozenie{grid-template-columns:1fr;height:auto;min-height:0}
  .chat-bok-obsah{overflow:visible}
  .chat-hlavne{display:none}
  body.chat-vlakno-otvoreny .chat-bok{display:none}
  body.chat-vlakno-otvoreny .chat-hlavne{
    display:flex;position:fixed;left:0;right:0;top:0;bottom:0;
    z-index:60;border-radius:0;border:0;
    padding-top:env(safe-area-inset-top, 0px);
    /* Bez klávesnice drží riadok na písanie nad indikátorom domov. */
    padding-bottom:env(safe-area-inset-bottom, 0px);
    /* clip namiesto hidden: pri fokuse poľa sa pripnuté okno nesmie
       vnútorne odscrollovať (hlavička potom zmizla pod stavový riadok). */
    overflow:clip}
  /* V rozhovore je spodná lišta zbytočná: človek je vnútri vlákna a späť
     sa vracia šípkou v hlavičke. Vlákno tak dostane celú plochu a nemusí
     si nad ňu odsadzovať sedemdesiat pixelov. */
  body.chat-vlakno-otvoreny .spodna-lista{display:none}
  /* Animácia záložky (fade s transform) robí zo sekcie containing block
     pre pripnuté okno vlákna — okno sa potom lepí na sekciu, nie na
     obrazovku. Pri otvorenom vlákne animácia nesmie bežať. */
  body.chat-vlakno-otvoreny .tab.on{animation:none;transform:none}
  /* Pri klávesnici sa nemení nič v CSS: odsadenie pod výrez a hodiny musí
     ostať (inak hlavička vlezie pod stavový riadok) a spodok nastavuje JS
     podľa toho, koľko zospodu prekrýva klávesnica. Odsadenie na indikátor
     domov vtedy netreba, tú plochu zaberá klávesnica. */
  body.chat-klavesnica .chat-hlavne{padding-bottom:0}
  .chat-pisanie{min-width:0}
  .chat-pisanie textarea{min-width:0;width:0}
  /* Pätička sedí presne tam, kde je políčko na písanie — počas rozhovoru preč. */
  .chat-sprava{max-width:86%}
}


/* ================================================================
   FÓRUM — kategórie, zoznam tém, detail témy.
   ================================================================ */

.fo-kategorie{display:grid;gap:9px}
.fo-kategoria{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:14px 16px;
  background:var(--sheen),var(--panel);border:1px solid var(--line);border-radius:var(--r);
  color:var(--txt);font:inherit;cursor:pointer;transition:.18s;
  backdrop-filter:blur(var(--blur)) saturate(160%);-webkit-backdrop-filter:blur(var(--blur)) saturate(160%);
  box-shadow:inset 0 1px 0 var(--glass-hi)}
.fo-kategoria:hover{border-color:var(--acc);transform:translateY(-1px)}
.fo-k-ikona{font-size:1.7rem;flex:none;line-height:1}
.fo-k-text{flex:1;min-width:0}
.fo-k-text b{font-size:1rem;display:block}
.fo-k-popis{color:var(--muted);font-size:.79rem;line-height:1.45;display:block;margin-top:2px}
.fo-k-cisla{flex:none;text-align:right;display:flex;flex-direction:column;gap:1px}
.fo-k-cisla b{font-size:1.05rem;font-weight:800;color:var(--acc-xl)}
.fo-k-cisla span{color:var(--faint);font-size:.7rem}
.fo-k-kedy{margin-top:3px}

/* ---------- zoznam tém ---------- */
.fo-hlava{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.fo-hlava h3{font-size:1.05rem;color:var(--acc-xl)}
.fo-hlava .burza-pocet{margin-left:auto}

.fo-temy{display:flex;flex-direction:column;gap:7px}
.fo-tema{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;padding:12px 14px;
  background:var(--sheen),var(--panel);border:1px solid var(--line);border-radius:var(--r);
  color:var(--txt);font:inherit;cursor:pointer;transition:.16s}
.fo-tema:hover{border-color:var(--acc);background:var(--sheen),var(--panel2)}
.fo-tema.pripnuta{border-color:rgba(245,196,81,.4);background:var(--sheen),rgba(245,196,81,.06)}
.fo-t-avatar{width:38px;height:38px;border-radius:50%;flex:none;overflow:hidden;background:var(--panel2);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.fo-t-avatar img{width:100%;height:100%;object-fit:cover}
.fo-t-telo{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.fo-t-nadpis{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.fo-t-nadpis b{font-size:.93rem;line-height:1.35}
.fo-t-ukazka{color:var(--muted);font-size:.78rem;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fo-t-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:var(--faint);font-size:.72rem}
.fo-t-cisla{flex:none;text-align:right;display:flex;flex-direction:column;gap:1px;min-width:96px}
.fo-t-cisla b{font-size:1rem;font-weight:800;color:var(--acc-l)}
.fo-t-cisla span{color:var(--faint);font-size:.68rem}
.fo-t-posledna{margin-top:3px}

.fo-znacka{font-size:.66rem;font-weight:800;padding:2px 7px;border-radius:999px;white-space:nowrap}
.fo-znacka.pripnuta{background:rgba(245,196,81,.18);color:var(--gold);padding:2px 5px}
.fo-znacka.vyriesena{background:rgba(74,222,128,.16);border:1px solid rgba(74,222,128,.35);color:var(--up)}
.fo-znacka.zamknuta{background:var(--bg2);color:var(--faint)}

/* ---------- detail témy ---------- */
.fo-detail-hlava{border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:16px}
.fo-drobky{margin-bottom:6px}
.fo-detail-hlava h2{font-size:1.25rem;font-weight:800;line-height:1.35;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.fo-prispevky{display:flex;flex-direction:column;gap:12px}
/* Vlákno fóra nemá čo zaberať celú šírku obrazovky — dlhé riadky sa
   zle čítajú. Príspevky aj hlavička témy sa držia v čitateľnom stĺpci. */
.fo-detail-hlava, .fo-prispevky, .fo-uprava, .fo-odpoved{max-width:900px;margin-left:auto;margin-right:auto}
/* Autor je kompaktný riadok NAD textom, nie vysoký bočný stĺpec —
   ten naťahoval okno na ~200 px aj pri jednoslovnej odpovedi. Výška
   príspevku teraz kopíruje výšku textu. */
.fo-prispevok{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.fo-prispevok.prvy{border-color:var(--line2);background:var(--sheen),var(--panel)}
.fo-prispevok.najlepsia{border-color:rgba(74,222,128,.45);background:rgba(74,222,128,.05)}
.fo-p-autor{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:10px}
.fo-p-autor .profile-avatar-big{border:0;padding:0;background:var(--bg2);cursor:pointer;
  width:34px;height:34px;font-size:1.05rem}
.fo-p-autor .profil-odkaz{font-weight:800}
.fo-p-sub{color:var(--faint);font-size:.68rem;line-height:1.3}
.fo-p-telo{min-width:0;display:flex;flex-direction:column}
.fo-najlepsia-pas{color:var(--up);font-size:.76rem;font-weight:800;margin-bottom:8px}
.fo-p-text{font-size:.88rem;line-height:1.65;overflow-wrap:anywhere;white-space:normal}
.fo-p-text a{color:var(--acc-l)}
.fo-p-pata{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;padding-top:8px;
  border-top:1px solid var(--line);color:var(--faint);font-size:.7rem}
.fo-p-kedy{margin-right:auto}
.fo-p-akcia{background:none;border:0;color:var(--muted);font:inherit;font-size:.72rem;cursor:pointer;
  padding:2px 4px;border-radius:6px;transition:.15s}
.fo-p-akcia:hover{color:var(--txt);background:var(--panel2)}
.fo-p-akcia.danger:hover{color:var(--down)}
.fo-p-akcia.on{color:var(--up);font-weight:700}

.fo-uprava .fo-u-nazov{margin-bottom:8px;font-weight:700}
.fo-uprava textarea{font-size:.88rem;line-height:1.6}

.fo-odpoved{margin-top:20px;border-top:1px solid var(--line);padding-top:14px}
.fo-odpoved textarea{font-size:.88rem;line-height:1.6;min-height:110px}
.fo-zamknute{margin-top:20px;padding:14px;text-align:center;color:var(--muted);font-size:.84rem;
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-s)}

@media(max-width:700px){
  .fo-k-cisla,.fo-t-cisla{display:none}
  .fo-p-autor{flex-direction:row;align-items:center;text-align:left;gap:8px;flex-wrap:wrap;
    border-right:0;padding-right:0;border-bottom:1px solid var(--line);padding-bottom:9px}
  .fo-p-autor .profile-avatar-big{width:34px;height:34px;font-size:1rem}
  .fo-hlava h3{font-size:.95rem;width:100%;order:3}
}


/* ---------- moje obchody ---------- */
.ob-vyzva{background:rgba(245,196,81,.1);border:1px solid rgba(245,196,81,.32);color:var(--gold);
  border-radius:var(--r-s);padding:10px 13px;font-size:.82rem;font-weight:600;margin-bottom:12px}
.ob-vyzva.jemna{background:rgba(var(--acc-rgb),.1);border-color:rgba(var(--acc-rgb),.3);color:var(--acc-l)}

.ob-zoznam{display:flex;flex-direction:column;gap:9px}
.ob-karta{background:var(--sheen),var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px}
.ob-karta.ok{border-color:rgba(74,222,128,.3)}
.ob-karta.skr{opacity:.6}
.ob-hlava{display:flex;align-items:flex-start;gap:11px;flex-wrap:wrap}
.ob-ikona{font-size:1.3rem;flex:none;line-height:1.2}
.ob-nazov{flex:1;min-width:0}
.ob-nazov b{font-size:.92rem;display:block}
.ob-meta{color:var(--faint);font-size:.75rem;display:block;margin-top:2px}
.ob-akcie{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:11px;
  padding-top:10px;border-top:1px solid var(--line)}
.ob-akcie .hint{margin:0}
.ob-hodnotenie{font-size:.8rem;display:flex;align-items:center;gap:6px}
.ob-hodnotenie .jemne{color:var(--faint);font-size:.72rem}

/* ---------- formulár hodnotenia ---------- */
.hv-hviezdy{display:flex;flex-direction:column;gap:5px}
.hv-hviezdy label{display:flex;align-items:center;gap:9px;cursor:pointer;padding:7px 10px;
  border:1px solid var(--line);border-radius:var(--r-s);transition:.15s;
  text-transform:none;letter-spacing:normal;font-weight:600;margin:0;color:var(--gold);font-size:.95rem}
.hv-hviezdy label:hover{border-color:var(--line2);background:var(--panel2)}
.hv-hviezdy label:has(input:checked){border-color:var(--acc);background:rgba(var(--acc-rgb),.12)}
.hv-hviezdy input{accent-color:var(--acc);width:16px;height:16px;flex:none}
.hv-hviezdy span{color:var(--muted);font-size:.78rem;font-weight:400;margin-left:auto}

/* ---------- mobil: pätička a obsah nad plávajúcou spodnou lištou ----------
   Lišta je fixná a pláva 8 px nad spodkom; bez tejto rezervy by pätičku
   aj posledné karty prekryla. Rovnaká podmienka, pri akej sa lišta zapína. */
@media(max-width:900px), (max-height:560px){
  body{padding-bottom:calc(80px + env(safe-area-inset-bottom, 0px))}
}

/* ---------- presúvanie účtov ---------- */
.side-acct,#listAccounts .item[data-acct]{cursor:grab}
.side-acct.acct-dragging,#listAccounts .item.acct-dragging{
  cursor:grabbing;opacity:.75;z-index:5;position:relative;pointer-events:none;
  box-shadow:0 12px 30px rgba(0,0,0,.5);border-color:var(--acc)}
/* Odsadený riadok pod hlavným číslom v dlaždiciach na dashboarde. */
.panel .pod.odsadene{margin-top:7px;padding-top:7px;border-top:1px solid var(--line)}

/* ---------- sociálne siete na profile ---------- */
.profil-siete{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0 4px}
.siet-odkaz{display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  background:var(--bg2);border:1px solid var(--line);border-radius:999px;
  padding:6px 12px;color:var(--txt);font-size:.79rem;font-weight:600;transition:.15s;
  max-width:100%;overflow:hidden}
.siet-odkaz:hover{border-color:var(--acc);background:var(--panel2);color:var(--acc-xl)}
.siet-odkaz span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.siet-ikona{font-size:.95rem;line-height:1;flex:none}
.siet-varovanie{margin:0 0 4px;font-size:.7rem}
.siete-polia{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px}
@media(max-width:600px){.siete-polia{grid-template-columns:1fr}}

/* ---------- podržanie pred presúvaním ----------
   Kým sa prvok nepodrží, správa sa normálne. Po podržaní sa nadvihne
   a jemne pulzuje, nech je vidno, že sa teraz dá ťahať. */
.presun-pripraveny{
  transform:scale(1.04);
  box-shadow:0 10px 26px rgba(0,0,0,.45),0 0 0 2px var(--acc);
  z-index:6;position:relative;
  animation:presun-cakanie .9s ease-in-out infinite}
@keyframes presun-cakanie{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18)}}
@media(prefers-reduced-motion:reduce){.presun-pripraveny{animation:none}}

/* ---------- burza: ponuky verzus dopyty ----------
   Nie je to filter, ale dve strany trhu — preto veľký prepínač nad
   výpisom, nie políčko medzi ostatnými filtrami. */
/* Segmentový prepínač — kompaktný riadok troch piluliek namiesto veľkých
   kariet. Ušetrí zvislé miesto (hlavne na telefóne) a je čitateľný na
   prvý pohľad. Popisky (small) sa skryjú — názvy Ponuky/Dopyty/Výmeny
   stačia. */
.burza-druhy{display:flex;gap:3px;padding:3px;flex:0 1 auto;
  /* Obsah (Ponuky/Dopyty/Výmeny) je logicky prvý — hovorí ČO pozeráš;
     režimy (Všetky/Moje) sú až za ním a hovoria ČIE. Pill tvar zjednotený
     s ostatnými tlačidlami lišty. */
  order:-1;
  background:var(--bg2);border:1px solid var(--line);border-radius:999px}
.bd-tlacidlo{flex:0 1 auto;display:flex;align-items:center;justify-content:center;gap:6px;padding:7px 11px;
  background:transparent;border:0;border-radius:999px;color:var(--muted);font:inherit;cursor:pointer;transition:.16s;
  white-space:nowrap}
.bd-tlacidlo:hover{color:var(--txt)}
.bd-tlacidlo.on{color:#fff;background:linear-gradient(135deg,var(--acc),var(--acc-hlboka));
  box-shadow:0 4px 14px rgba(124,92,191,.35)}
.bd-ikona{font-size:1.15rem;line-height:1;flex:none;display:inline-flex}
.bd-tlacidlo b{font-size:.82rem;font-weight:700}
.bd-tlacidlo small{display:none}

/* Dopyt sa musí dať odlíšiť od ponuky na prvý pohľad. */
.inz-karta.dopyt{border-color:rgba(245,196,81,.3)}
.inz-karta.dopyt .inz-bez-foto{opacity:.4}
.cena.dopyt{color:var(--gold)}

@media(max-width:520px){
  .bd-tlacidlo{padding:9px 4px}
  .bd-tlacidlo b{font-size:.78rem}
}

/* ---------- vec zo zbierky na trhu ---------- */
.badge.trh{background:rgba(var(--acc-rgb),.2);border:1px solid rgba(var(--acc-rgb),.4);color:var(--acc-l)}
.icon-btn.trh{border-color:rgba(var(--acc-rgb),.4);color:var(--acc-l)}
.icon-btn.trh:hover{border-color:var(--acc);color:var(--acc-xl);background:rgba(var(--acc-rgb),.14)}

/* ================================================================
   CHATOVÝ DOK — malé okno v pravom dolnom rohu (Facebook štýl).
   ================================================================ */
.chat-dok{position:fixed;right:20px;bottom:0;width:320px;z-index:90;
  display:flex;flex-direction:column;
  border:1px solid var(--line2);border-bottom:0;border-radius:var(--r) var(--r) 0 0;
  background:var(--sheen),rgba(var(--sklo-rgb),.86);
  backdrop-filter:blur(26px) saturate(170%);-webkit-backdrop-filter:blur(26px) saturate(170%);
  box-shadow:inset 0 1px 0 var(--glass-hi),0 -8px 30px rgba(0,0,0,.45);
  transition:box-shadow .2s}
.chat-dok:empty{display:none}

.dok-lista{display:flex;align-items:center;border-radius:var(--r) var(--r) 0 0;overflow:hidden}
.dok-hlavny{display:flex;align-items:center;gap:9px;flex:1;min-width:0;padding:11px 4px 11px 13px;
  background:none;border:0;color:var(--txt);font:inherit;font-weight:700;font-size:.85rem;
  cursor:pointer;text-align:left}
.dok-hlavny:hover{background:var(--panel2)}
/* Minimalizovanie je vlastné tlačidlo — nie schovaná šípka, ktorú treba hľadať. */
.dok-min{flex:none;width:34px;height:38px;background:none;border:0;color:var(--muted);
  font-size:1.15rem;line-height:1;cursor:pointer;transition:.15s}
.dok-min:hover{background:var(--panel2);color:var(--txt)}
.dok-ikona{font-size:1.05rem;line-height:1}
.dok-titul{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Nová správa — lišta sa rozsvieti, nech si ju človek všimne aj boční pohľadom. */
.chat-dok.svieti{border-color:var(--acc)}
.chat-dok.svieti .dok-lista{color:var(--acc-xl)}
.chat-dok.svieti{animation:dok-pulz 2s ease-in-out infinite}
@keyframes dok-pulz{
  0%,100%{box-shadow:inset 0 1px 0 var(--glass-hi),0 -8px 30px rgba(0,0,0,.45)}
  50%{box-shadow:inset 0 1px 0 var(--glass-hi),0 -8px 30px rgba(0,0,0,.45),0 0 0 2px rgba(var(--acc-rgb),.55)}}
@media(prefers-reduced-motion:reduce){.chat-dok.svieti{animation:none}}

.dok-telo{display:flex;flex-direction:column;height:390px;min-height:0;
  border-top:1px solid var(--line)}
.dok-zoznam{flex:1;min-height:0;overflow-y:auto;padding:6px}
.dok-zoznam .chat-vlakno{padding:7px 9px}
.dok-zoznam .chat-vlakno b{font-size:.82rem}
.dok-prazdne{padding:22px 16px;text-align:center;color:var(--muted);font-size:.82rem;line-height:1.55}
.dok-prazdne .jemne{color:var(--faint);font-size:.76rem}

.dok-hlavicka{display:flex;align-items:center;gap:7px;padding:7px 9px;
  border-bottom:1px solid var(--line);flex:none}
.dok-osoba{display:flex;align-items:center;gap:7px;flex:1;min-width:0;
  background:none;border:0;color:var(--txt);font:inherit;cursor:pointer;padding:2px;border-radius:8px}
.dok-osoba:hover{background:var(--panel2)}
.dok-osoba b{font-size:.83rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.dok-spravy{flex:1;min-height:0;overflow-y:auto;padding:10px;
  display:flex;flex-direction:column;gap:3px;overscroll-behavior:contain}
.dok-spravy .chat-sprava{max-width:88%}
.dok-spravy .chat-bublina-text{font-size:.83rem;padding:7px 10px}

.dok-pisanie{display:flex;gap:6px;align-items:flex-end;padding:8px 9px;
  border-top:1px solid var(--line);flex:none}
.dok-pisanie textarea{flex:1;min-height:36px;max-height:90px;resize:none;font-size:.84rem;padding:8px 10px}
.dok-pisanie .btn{flex:none;padding:9px 12px;line-height:1}

/* Na telefóne dok nemá zmysel — je tam spodná lišta a celoobrazovkové Správy. */
@media(max-width:900px), (max-height:560px){ .chat-dok{display:none} }

/* ================================================================
   DOMOVSKÁ PLOCHA — graf, upozornenia, živé stĺpce.
   ================================================================ */
.dom-uvod{margin-bottom:16px}
.dom-uvod h2{font-size:1.6rem;font-weight:800;letter-spacing:.2px}
.dom-uvod p{color:var(--muted);font-size:.86rem;margin-top:3px}

/* ---------- upozornenia ---------- */
.dom-upozornenia{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.dom-upoz{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:11px 14px;border-radius:var(--r-s);cursor:pointer;font:inherit;
  background:var(--sheen),var(--panel);border:1px solid var(--line);color:var(--txt);transition:.16s}
.dom-upoz:hover{border-color:var(--acc);transform:translateX(2px)}
.dom-upoz.naliehave{border-color:rgba(245,196,81,.42);background:var(--sheen),rgba(245,196,81,.08)}
.dom-u-ikona{font-size:1.1rem;line-height:1;flex:none}
.dom-u-text{flex:1;min-width:0;font-size:.86rem;font-weight:600}
.dom-u-akcia{flex:none;color:var(--acc-l);font-size:.78rem;font-weight:700}

/* ---------- horný pás: graf + dlaždice ---------- */
.dom-hlava{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:14px;margin-bottom:18px}
.dom-portfolio{display:flex;flex-direction:column;padding:18px 20px}
.dom-p-vrch{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.dom-p-suma{font-size:2.4rem;font-weight:800;line-height:1.1;letter-spacing:-.5px;margin-top:2px}
.dom-p-zmena{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-top:5px;font-size:.85rem;font-weight:700}
.dom-p-zmena .jemne{color:var(--faint);font-weight:400;font-size:.78rem}
.dom-p-obdobie{margin-top:12px;font-size:.8rem;font-weight:700}

.dom-rozsahy{display:flex;gap:3px;background:var(--bg2);border:1px solid var(--line);
  border-radius:999px;padding:3px;flex:none}
.dom-rozsah{background:none;border:0;color:var(--muted);font:inherit;font-size:.74rem;font-weight:700;
  padding:5px 11px;border-radius:999px;cursor:pointer;transition:.15s}
.dom-rozsah:hover{color:var(--txt)}
.dom-rozsah.on{background:var(--acc);color:#fff;box-shadow:0 3px 10px rgba(124,92,191,.4)}

.dom-graf-obal{margin-top:14px;flex:1;display:flex;flex-direction:column;justify-content:flex-end}
.dom-graf{width:100%;height:auto;display:block;overflow:visible}
.dom-graf-popis{display:flex;justify-content:space-between;gap:8px;margin-top:6px;
  color:var(--faint);font-size:.7rem}
.dom-graf-prazdny{color:var(--faint);font-size:.82rem;text-align:center;padding:36px 12px;line-height:1.6}

.dom-dlazdice{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dom-dlazdica{background:var(--sheen),var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 15px;display:flex;flex-direction:column;justify-content:center;transition:.16s;
  backdrop-filter:blur(var(--blur)) saturate(160%);-webkit-backdrop-filter:blur(var(--blur)) saturate(160%);
  box-shadow:inset 0 1px 0 var(--glass-hi)}
.dom-dlazdica:hover{border-color:var(--line2)}
.dom-d-hodnota{font-size:1.42rem;font-weight:800;margin-top:4px;white-space:nowrap}
.dom-d-hodnota .zo{font-size:.82rem;color:var(--faint);font-weight:600}
.dom-d-popis{color:var(--faint);font-size:.72rem;margin-top:3px;line-height:1.4}

/* ---------- živé stĺpce ---------- */
.dom-stlpce{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.dom-stlpec{padding:14px 15px;display:flex;flex-direction:column;min-width:0}
.dom-s-hlava{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:10px}
.dom-s-hlava h3{font-size:.9rem;color:var(--acc-xl)}
.dom-s-obsah{display:flex;flex-direction:column;gap:3px;max-height:264px;overflow-y:auto}

.dom-riadok{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 9px;
  background:none;border:1px solid transparent;border-radius:var(--r-s);color:var(--txt);
  font:inherit;cursor:pointer;transition:.15s}
.dom-riadok:hover{background:var(--panel2);border-color:var(--line)}
.dom-r-foto{width:38px;height:38px;border-radius:9px;flex:none;overflow:hidden;background:rgba(0,0,0,.28);
  display:flex;align-items:center;justify-content:center;font-size:1.05rem}
.dom-r-foto img{width:100%;height:100%;object-fit:cover}
.dom-r-telo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dom-r-telo b{font-size:.83rem;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dom-r-sub{color:var(--faint);font-size:.71rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dom-r-vpravo{flex:none;text-align:right;display:flex;flex-direction:column;gap:2px}
.dom-r-cena{font-size:.88rem;font-weight:800;color:var(--acc-l);white-space:nowrap}

/* ---------- veci na predaj ---------- */
.dom-napredaj{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.dom-np-karta{display:flex;flex-direction:column;gap:9px;padding:11px;
  background:var(--sheen),var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.dom-np-foto{height:96px;border-radius:var(--r-s);background:rgba(0,0,0,.28);overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-size:1.7rem;opacity:.95}
.dom-np-foto img{width:100%;height:100%;object-fit:cover}
.dom-np-telo{display:flex;flex-direction:column;gap:2px;min-width:0}
.dom-np-telo b{font-size:.84rem;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dom-np-cena{color:var(--gold);font-size:.78rem;font-weight:700}
.dom-np-akcie{display:flex;gap:5px;flex-wrap:wrap}
.dom-np-akcie .btn,.dom-np-akcie .icon-btn{flex:1;justify-content:center;white-space:nowrap}

@media(max-width:1000px){
  .dom-hlava{grid-template-columns:1fr}
  .dom-stlpce{grid-template-columns:1fr}
}
@media(max-width:560px){
  .dom-uvod h2{font-size:1.3rem}
  .dom-p-suma{font-size:1.9rem}
  .dom-dlazdice{grid-template-columns:1fr 1fr}
  .dom-rozsahy{width:100%;justify-content:space-between}
  .dom-u-akcia{display:none}
}

/* ================================================================
   FAREBNÉ SCHÉMY — mení sa len dominantná farba, nič iné.
   Aurora na pozadí a akcenty sa ťahajú z tých istých premenných,
   takže na novú schému stačí päť riadkov.
   ================================================================ */
html[data-tema="modra"]{ --acc:#4c8dff; --acc-l:#8fb6ff; --acc-xl:#d8e6ff; }
html[data-tema="modra"] .aurora span:nth-child(1){background:radial-gradient(circle at 30% 30%,#4c8dff,transparent 72%)}
html[data-tema="modra"] .aurora span:nth-child(3){background:radial-gradient(circle at 50% 50%,#35b6c9,transparent 72%)}

html[data-tema="smaragd"]{ --acc:#2fbf87; --acc-l:#7fd9b6; --acc-xl:#d6f5e8; }
html[data-tema="smaragd"] .aurora span:nth-child(1){background:radial-gradient(circle at 30% 30%,#2fbf87,transparent 72%)}
html[data-tema="smaragd"] .aurora span:nth-child(3){background:radial-gradient(circle at 50% 50%,#4c8dff,transparent 72%)}

html[data-tema="zlata"]{ --acc:#d9a441; --acc-l:#ecc884; --acc-xl:#faedd0; }
html[data-tema="zlata"] .aurora span:nth-child(1){background:radial-gradient(circle at 30% 30%,#d9a441,transparent 72%)}
html[data-tema="zlata"] .aurora span:nth-child(3){background:radial-gradient(circle at 50% 50%,#e05563,transparent 72%)}

html[data-tema="karmin"]{ --acc:#e05563; --acc-l:#f193a0; --acc-xl:#fbdde1; }
html[data-tema="karmin"] .aurora span:nth-child(1){background:radial-gradient(circle at 30% 30%,#e05563,transparent 72%)}
html[data-tema="karmin"] .aurora span:nth-child(3){background:radial-gradient(circle at 50% 50%,#d9a441,transparent 72%)}

html[data-tema="tyrkys"]{ --acc:#2fb4c9; --acc-l:#7fd6e3; --acc-xl:#d4f2f7; }
html[data-tema="tyrkys"] .aurora span:nth-child(1){background:radial-gradient(circle at 30% 30%,#2fb4c9,transparent 72%)}
html[data-tema="tyrkys"] .aurora span:nth-child(3){background:radial-gradient(circle at 50% 50%,#2fbf87,transparent 72%)}

html[data-tema="ruzova"]{ --acc:#e56db1; --acc-l:#f0a3ce; --acc-xl:#fbdfef; }
html[data-tema="ruzova"] .aurora span:nth-child(1){background:radial-gradient(circle at 30% 30%,#e56db1,transparent 72%)}
html[data-tema="ruzova"] .aurora span:nth-child(3){background:radial-gradient(circle at 50% 50%,#8a67d6,transparent 72%)}

html[data-tema="oranzova"]{ --acc:#e8823d; --acc-l:#f3ab77; --acc-xl:#fce7d4; }
html[data-tema="oranzova"] .aurora span:nth-child(1){background:radial-gradient(circle at 30% 30%,#e8823d,transparent 72%)}
html[data-tema="oranzova"] .aurora span:nth-child(3){background:radial-gradient(circle at 50% 50%,#e05563,transparent 72%)}

html[data-tema="limetka"]{ --acc:#8fc748; --acc-l:#b6dc85; --acc-xl:#e8f5d4; }
html[data-tema="limetka"] .aurora span:nth-child(1){background:radial-gradient(circle at 30% 30%,#8fc748,transparent 72%)}
html[data-tema="limetka"] .aurora span:nth-child(3){background:radial-gradient(circle at 50% 50%,#2fbf87,transparent 72%)}

html[data-tema="indigo"]{ --acc:#5b6bd6; --acc-l:#94a0e8; --acc-xl:#dde1f8; }
html[data-tema="indigo"] .aurora span:nth-child(1){background:radial-gradient(circle at 30% 30%,#5b6bd6,transparent 72%)}
html[data-tema="indigo"] .aurora span:nth-child(3){background:radial-gradient(circle at 50% 50%,#2fb4c9,transparent 72%)}

html[data-tema="medena"]{ --acc:#c07a50; --acc-l:#d9a686; --acc-xl:#f4e2d6; }
html[data-tema="medena"] .aurora span:nth-child(1){background:radial-gradient(circle at 30% 30%,#c07a50,transparent 72%)}
html[data-tema="medena"] .aurora span:nth-child(3){background:radial-gradient(circle at 50% 50%,#d9a441,transparent 72%)}

html[data-tema="strieborna"]{ --acc:#9aa3b5; --acc-l:#bcc3d0; --acc-xl:#e9ecf1; }
html[data-tema="strieborna"] .aurora span:nth-child(1){background:radial-gradient(circle at 30% 30%,#9aa3b5,transparent 72%)}
html[data-tema="strieborna"] .aurora span:nth-child(3){background:radial-gradient(circle at 50% 50%,#5b6bd6,transparent 72%)}

/* Zvýraznenia, ktoré mali fialovú natvrdo — nech idú s témou. */
body[data-tema] .stitok{background:color-mix(in srgb, var(--acc) 16%, transparent);
  border-color:color-mix(in srgb, var(--acc) 32%, transparent);color:var(--acc-l)}
body[data-tema] .chat-vlakno.on{background:color-mix(in srgb, var(--acc) 16%, transparent);
  border-color:color-mix(in srgb, var(--acc) 42%, transparent)}
body[data-tema] .badge.trh,body[data-tema] .ch-znacka.hotova{
  background:color-mix(in srgb, var(--acc) 20%, transparent);
  border-color:color-mix(in srgb, var(--acc) 40%, transparent);color:var(--acc-l)}
body[data-tema] .bd-tlacidlo.on{background:linear-gradient(135deg,var(--acc),var(--acc-hlboka));color:#fff}
body[data-tema] .dom-rozsah.on{box-shadow:0 3px 10px color-mix(in srgb, var(--acc) 45%, transparent)}

/* ---------- výber schémy v profile ---------- */
.tema-vyber{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.tema-vzorka{display:flex;align-items:center;gap:9px;padding:10px 12px;cursor:pointer;
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-s);
  color:var(--txt);font:inherit;font-size:.82rem;font-weight:600;transition:.15s;text-align:left}
.tema-vzorka:hover{border-color:var(--line2);background:var(--panel2)}
.tema-vzorka.on{border-color:var(--acc);background:color-mix(in srgb, var(--acc) 12%, transparent)}
.tema-bod{width:20px;height:20px;border-radius:50%;flex:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 8px rgba(0,0,0,.35)}
.tema-nazov{flex:1;min-width:0}
.tema-fajka{color:var(--acc-l);font-weight:800}

/* ================================================================
   OPRAVA PRETEKANIA V OKNÁCH NA ÚZKEJ OBRAZOVKE

   Prvok v CSS mriežke má predvolene `min-width:auto`, takže ho dlhý
   obsah (pás náhľadov, dlhý názov, adresa) dokáže roztiahnuť nad šírku
   stĺpca. Okno potom pretečie a na telefóne sa dá scrollovať do strany.
   Preto všetkým stĺpcom v oknách výslovne povieme, že sa smú stlačiť.
   ================================================================ */
.modal-bg{overflow-x:hidden}
.modal{max-width:min(100%, var(--modal-max, 560px))}

.inz-detail > *,
.inz-form-mriezka > *,
.inz-galeria,.inz-info,
.chat-rozlozenie > *,
.dom-hlava > *,.dom-stlpce > *,
.profil-mriezka > *,
.fo-prispevok > *{min-width:0}

/* Vodorovné pásy sa musia scrollovať vnútri, nie tlačiť okno. */
.inz-nahlady{max-width:100%}
.inz-parametre dd{min-width:0;overflow-wrap:anywhere}
.inz-info h2,.dom-riadok b{overflow-wrap:anywhere}

/* Dlhé slová v popisoch a názvoch nesmú rozšíriť kartu. */
.inz-telo h4,.auk-karta h4,.fo-t-nadpis b,.ob-nazov b{overflow-wrap:anywhere}

@media(max-width:760px){
  /* Náhľady fotiek zaberú celú šírku a scrollujú sa prstom. */
  .inz-nahlady{margin-left:0;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .inz-parametre > div{flex-wrap:wrap}
  .inz-parametre dt{min-width:0;flex:1 1 100%;font-size:.72rem}
  .inz-akcie .btn,.inz-akcie .icon-btn{flex:1 1 auto;justify-content:center}
}

/* ================================================================
   MOBILNÁ NAVIGÁCIA — spodná lišta a panel „Viac".

   Horná dvojstĺpcová mriežka záložiek zabrala pol obrazovky a lepila sa
   pri scrollovaní. Na telefóne ju nahradí lišta dole s piatimi položkami
   a zvyšok sa vysunie zdola pod „Viac" — tak, ako to majú mobilné appky.
   ================================================================ */
.spodna-lista{display:none}
.viac-panel{display:none}

@media(max-width:900px), (max-height:560px){
  /* Stará navigácia aj lišta nástrojov idú preč — obsah začína hneď. */
  #nav{display:none}
  .head-tools{position:static;display:flex;flex-wrap:nowrap;gap:6px;padding:0;
    background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
    height:auto;width:auto;margin-left:auto}
  .head-tools > *{flex:0 0 auto;flex-direction:row;padding:7px 10px;border-radius:999px;
    background:var(--sheen),var(--panel);border:1px solid var(--line);color:var(--muted)}
  .head-tools #btnMoney,.head-tools #btnFeedback{display:none}   /* sú pod „Viac" */
  .head-tools .pop{display:none}
  .head-tools .profile-avatar{width:26px;height:26px}

  /* Appka pridaná na plochu beží pod hodinami a výrezom — hlavička sa
     musí posunúť pod ne, inak logo lezie do stavového riadku. */
  .wrap{padding-top:calc(14px + env(safe-area-inset-top, 0px))}
  header{padding-top:4px}

  /* ---------- spodná lišta ---------- */
  /* Plávajúca sklenená lišta — neprilepená na spodok, ale nadnesená nad
     obsahom, ako zvyšok webu. `top:auto` je tu naschvál: keby sa lišta
     niekedy vrátila do <nav>, zdedila by `top:8px` zo základných štýlov
     a natiahla by sa cez celú výšku obrazovky. */
  .spodna-lista{
    display:flex; gap:2px; position:fixed; top:auto; z-index:70;
    left:10px; right:10px; bottom:calc(8px + env(safe-area-inset-bottom, 0px));
    padding:6px;
    /* Sklo, nie tmavý pás: podklad je len jemne stmavený a prácu robí
       rozostrenie so zvýšenou sýtosťou — farby spod lišty presvitajú.
       Vnútorná svetlá linka hore a tmavšia dole dávajú hrúbku. */
    background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 55%,rgba(255,255,255,.06)),
               rgba(14,11,22,.38);
    border:1px solid rgba(255,255,255,.30); border-radius:26px;
    backdrop-filter:blur(34px) saturate(220%);-webkit-backdrop-filter:blur(34px) saturate(220%);
    box-shadow:0 12px 40px rgba(0,0,0,.42),
               inset 0 1px 0 rgba(255,255,255,.42),
               inset 0 -1px 0 rgba(0,0,0,.28);
  }
  .sl-polozka{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:3px;padding:7px 2px;border-radius:18px;
    background:none;border:0;color:var(--faint);font:inherit;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:color .18s ease}
  /* Podsvietenie je samostatná vrstva, aby sa dalo animovať cez opacity
     a transform — teda na GPU, bez prekresľovania. */
  .sl-polozka::before{content:"";position:absolute;inset:0;border-radius:inherit;
    background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,.06)),var(--acc);
    border:1px solid rgba(255,255,255,.34);
    opacity:0;transform:scale(.82);
    transition:opacity .2s ease,transform .28s cubic-bezier(.22,1,.36,1)}
  .sl-polozka.on::before{opacity:.52;transform:scale(1)}
  .sl-polozka:active::before{opacity:.24;transform:scale(.94)}
  .sl-polozka > *{position:relative;z-index:1}
  .sl-polozka.on{color:#fff}
  .sl-polozka.on .sl-ikona{transform:translateY(-1px) scale(1.06)}
  .sl-ikona{font-size:1.28rem;line-height:1;transition:transform .28s cubic-bezier(.22,1,.36,1)}
  .sl-text{font-size:.63rem;font-weight:700;letter-spacing:.2px;
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sl-odznak{position:absolute;top:2px;right:calc(50% - 22px);
    background:var(--down);color:#fff;font-size:.6rem;font-weight:800;
    min-width:16px;height:16px;border-radius:999px;padding:0 4px;
    display:flex;align-items:center;justify-content:center}

  /* ---------- panel „Viac" ---------- */
  .viac-panel{display:block;position:fixed;inset:0;z-index:95;
    background:rgba(var(--overlay-rgb),.42);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    opacity:0;pointer-events:none;transition:opacity .2s}
  .viac-panel.on{opacity:1;pointer-events:auto}
  /* Priesvitnejšie sklo — cez panel má presvitať farebné pozadie appky.
     Rozmazanie ostáva silné, aby text bol čitateľný aj nad obsahom. */
  .viac-obal{position:absolute;left:0;right:0;bottom:0;max-height:84vh;overflow-y:auto;
    padding:8px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.02) 30%),rgba(20,16,29,.44);
    border-top:1px solid rgba(255,255,255,.26);border-radius:24px 24px 0 0;
    backdrop-filter:blur(40px) saturate(200%);-webkit-backdrop-filter:blur(40px) saturate(200%);
    transform:translateY(100%);transition:transform .24s cubic-bezier(.22,1,.36,1)}
  .viac-panel.on .viac-obal{transform:translateY(0)}
  /* Úchyt je zámerne cez celú šírku a s odsadením — pomlčka je len to,
     čo vidno, chytať sa musí dať aj tesne vedľa nej. `touch-action:none`
     je nutné, inak prehliadač ťahanie prevezme ako scrollovanie. */
  .viac-uchyt{width:100%;padding:9px 0 12px;margin:0;cursor:grab;
    display:flex;justify-content:center;touch-action:none}
  .viac-uchyt:active{cursor:grabbing}
  .viac-uchyt::after{content:"";width:44px;height:4px;border-radius:999px;background:var(--line2)}
  .viac-obal.tiahne{transition:none}
  .viac-hlava{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
  .viac-hlava h3{font-size:1.05rem;color:var(--acc-xl)}

  .viac-skupina{margin-bottom:6px}
  .viac-polozka{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
    padding:12px 12px;border-radius:var(--r-s);background:none;border:0;
    color:var(--txt);font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;transition:.14s}
  .viac-polozka:active{background:var(--panel2)}
  .viac-ikona{font-size:1.15rem;line-height:1;flex:none;width:24px;text-align:center}
  .viac-text{flex:1;min-width:0}
  .viac-pocet{color:var(--faint);font-size:.8rem;font-weight:700}
  .viac-sipka{color:var(--faint);font-size:1.05rem;flex:none}

  body.viac-otvoreny{overflow:hidden}
}

/* ---------- telefón otočený na šírku ----------
   Výšky je tu najmenej zo všetkého, tak sa všetko, čo ju zožiera,
   stiahne: hlavička, spodná lišta aj panel „Viac“. Šírky je naopak dosť,
   takže obsah sa rozloží do viacerých stĺpcov sám. */
@media(max-height:560px) and (orientation:landscape){
  .wrap{padding-top:calc(8px + env(safe-area-inset-top, 0px));
        padding-left:calc(14px + env(safe-area-inset-left, 0px));
        padding-right:calc(14px + env(safe-area-inset-right, 0px))}
  header{padding:6px 2px 4px}
  header .logo-hlavne{max-height:42px;max-width:150px}
  main{margin-top:2px}

  .spodna-lista{left:calc(10px + env(safe-area-inset-left, 0px));
                right:calc(10px + env(safe-area-inset-right, 0px));
                bottom:calc(6px + env(safe-area-inset-bottom, 0px));padding:4px}
  .sl-polozka{padding:4px 2px;gap:1px}
  .sl-ikona{font-size:1.05rem}
  .sl-text{font-size:.58rem}
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom, 0px))}

  .viac-obal{max-height:94vh;
             padding-left:calc(16px + env(safe-area-inset-left, 0px));
             padding-right:calc(16px + env(safe-area-inset-right, 0px))}
  .viac-polozka{padding:8px 12px;font-size:.85rem}
  .viac-uchyt{padding:6px 0 8px}

  .auth-gate{padding:14px 16px}
  .uvod-nadpis{font-size:1.35rem;margin-bottom:6px}
  .uvod-podnadpis{font-size:.85rem;margin-bottom:10px}
  .uvod-karty{margin-bottom:12px}
  .uvod-karta{padding:9px}
  .uvod-karta h3{font-size:.9rem;margin-bottom:3px}
  .uvod-karta p{font-size:.75rem;line-height:1.4}
  .auth-logo{max-height:72px}
}

/* ---------- achievementy: menšie dlaždice, tri úrovne ---------- */
.ach-skupina{margin-bottom:14px}
.ach-pocet{color:var(--faint);font-weight:600;letter-spacing:0;text-transform:none}
.ach-mriezka{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:7px}
.ach-mriezka .ach{padding:9px 5px;border-radius:12px;text-align:center;
  background:var(--bg2);border:1px solid var(--line);opacity:.45;transition:.15s;
  font:inherit;color:inherit;cursor:pointer;width:100%;display:block;
  -webkit-tap-highlight-color:transparent}
.ach-mriezka .ach:hover{border-color:var(--acc);opacity:.75}
.ach-mriezka .ach.unlocked:hover{opacity:1}
.ach-mriezka .ach:active{transform:scale(.96)}
.ach-mriezka .ach.unlocked{opacity:1;background:var(--sheen),var(--panel)}
.ach-mriezka .ach .ico{font-size:1.35rem;line-height:1.1;filter:grayscale(1)}
.ach-mriezka .ach.unlocked .ico{filter:none}
.ach-mriezka .ach .nm{font-size:.63rem;font-weight:700;line-height:1.25;margin-top:4px;
  color:var(--muted);overflow-wrap:anywhere}
.ach-mriezka .ach.unlocked .nm{color:var(--txt)}
/* Náročné majú zlatý okraj — nech je na prvý pohľad vidno, čo niečo stálo. */
.ach-mriezka .ach.unlocked.tazke{border-color:rgba(245,196,81,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(245,196,81,.16)}
.ach-mriezka .ach.unlocked.stredne{border-color:var(--line2)}
/* Na verejnom profile sú len odomknuté — mriežka môže byť hustejšia. */
.ach-mriezka.verejne{grid-template-columns:repeat(auto-fill,minmax(78px,1fr))}

@media(max-width:760px){
  /* Prepínače nad výpisom sa musia zalomiť — tri tlačidlá vedľa seba
     sa na telefón nezmestia a posúvali celú stránku do strany. */
  .burza-rezimy{flex-wrap:wrap;width:100%}
  .burza-rezimy .icon-btn{flex:1 1 auto;justify-content:center;white-space:nowrap}
  .burza-lista{gap:8px}
  .burza-nastroje{width:100%;justify-content:flex-start;flex-wrap:wrap}
  .burza-nastroje .btn{flex:1 1 100%;justify-content:center;order:5}
}

/* ---------- prázdne stavy: všetko na stred ----------
   `grid-column:1/-1` je tu podstatné: zoznamy sú mriežky, takže prázdny
   stav bez neho sadne do prvého stĺpca a text vyzerá odtlačený doľava. */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  grid-column:1 / -1;width:100%;text-align:center}
.empty p{max-width:34ch;margin:0}
.empty .btn,.empty .icon-btn{margin-top:4px}

/* ================================================================
   NASTAVENIA
   ================================================================ */
.nast-sekcia{display:none}
.nast-sekcia.on{display:block;animation:fade .2s ease}

/* ---------- výber ikoniek do spodnej lišty ---------- */
.lista-vyber{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:7px}
.lista-volba{display:flex;align-items:center;gap:9px;padding:10px 12px;cursor:pointer;
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-s);
  color:var(--txt);font:inherit;font-size:.83rem;font-weight:600;transition:.15s;text-align:left}
.lista-volba:hover:not([disabled]){border-color:var(--line2);background:var(--panel2)}
.lista-volba.on{border-color:var(--acc);background:color-mix(in srgb, var(--acc) 12%, transparent)}
.lista-volba.plno{opacity:.4;cursor:not-allowed}
.lv-ikona{font-size:1.1rem;line-height:1;flex:none}
.lv-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv-znak{flex:none;font-weight:800;color:var(--faint)}
.lista-volba.on .lv-znak{color:var(--acc-l)}

/* ---------- presúvanie položiek v paneli „Viac" ---------- */
.viac-polozka{touch-action:manipulation}
.viac-polozka.presun-pripraveny{background:var(--panel2)}

/* ---------- logo ----------
   Obrázok má názov aj podnadpis v sebe, takže sa vedľa neho neopakujú
   textom. Pôvodná predloha bola štvorec 1254×1254 s čiernym pozadím
   a 1,5 MB — orezal som ju na obsah, pozadie spriehľadnil a zmenšil na
   700 px. Originál ostal v Loga/1-povodne.png. */
.logo-hlavne{display:block;height:auto;width:auto;object-fit:contain;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,.5))}
.logo-odkaz{display:block;flex:none;line-height:0}
header .logo-hlavne{max-height:64px;max-width:230px}
.auth-logo{max-height:150px;max-width:100%;margin:0 auto 10px}

/* Text názvu ostáva v kóde pre čítačky obrazovky a vyhľadávače,
   ale nezobrazuje sa — je už v obrázku. */
.vizualne-skryte{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media(max-width:900px), (max-height:560px){
  /* Väčšie logo a menšia medzera pod hlavičkou — pozdrav má sedieť hneď
     pod ním, nie o pol obrazovky nižšie. */
  header .logo-hlavne{max-height:70px;max-width:230px}
  header{padding-bottom:6px}
  main{margin-top:4px}
  .auth-logo{max-height:110px}
}


/* Detail achievementu v okne dokumentov. */
.ach-detail-stav{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  padding:10px 13px;border-radius:var(--r-s);margin-bottom:16px;
  background:var(--bg2);border:1px solid var(--line)}
.ach-detail-stav strong{color:var(--muted);font-size:.92rem}
.ach-detail-stav span{color:var(--faint);font-size:.8rem}
.ach-detail.splneny .ach-detail-stav{border-color:rgba(245,196,81,.45);
  background:rgba(245,196,81,.09)}
.ach-detail.splneny .ach-detail-stav strong{color:var(--gold)}

/* ================= UPOZORNENIA (zvonček) ================= */
.upoz-zvoncek{position:relative}
.upoz-zvoncek.ma-nove .ik{animation:zvoncek 2.4s ease-in-out infinite;transform-origin:50% 12%}
@keyframes zvoncek{
  0%,88%,100%{transform:rotate(0)}
  90%{transform:rotate(11deg)} 94%{transform:rotate(-9deg)} 97%{transform:rotate(5deg)}}
@media(prefers-reduced-motion:reduce){.upoz-zvoncek.ma-nove .ik{animation:none}}

.upoz-odznak{position:absolute;top:-4px;right:-4px;background:var(--down);color:#fff;
  font-size:.6rem;font-weight:800;min-width:17px;height:17px;border-radius:999px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--bg);box-shadow:0 2px 6px rgba(0,0,0,.5)}

.upoz-zoznam{max-height:min(62vh,520px);overflow-y:auto;overscroll-behavior:contain;
  margin-top:14px;display:flex;flex-direction:column;gap:6px}

.upoz-polozka{display:flex;align-items:flex-start;gap:11px;padding:11px 12px;
  border-radius:var(--r-s);background:var(--bg2);border:1px solid var(--line);
  cursor:pointer;transition:border-color .15s,background .15s;min-width:0}
.upoz-polozka:hover{border-color:var(--acc)}
/* Neprečítané majú farebný pásik zľava — nie inú farbu pozadia. Farebné
   pozadie by pri desiatich položkách vyzeralo ako chyba. */
.upoz-polozka.nove{border-left:3px solid var(--acc);background:var(--panel)}
.upoz-ikona{font-size:1.15rem;line-height:1.2;flex:none}
.upoz-text{flex:1;min-width:0}
.upoz-text p{margin:0;font-size:.87rem;line-height:1.45;color:var(--txt);overflow-wrap:anywhere}
.upoz-polozka:not(.nove) .upoz-text p{color:var(--muted)}
.upoz-kedy{font-size:.72rem;color:var(--faint)}
.upoz-zmaz{flex:none;background:none;border:0;color:var(--faint);font:inherit;font-size:.9rem;
  cursor:pointer;padding:2px 4px;border-radius:6px;transition:.15s}
.upoz-zmaz:hover{color:var(--down);background:var(--panel2)}

.upoz-prazdne{text-align:center;padding:26px 14px;color:var(--muted)}
.upoz-prazdne-ikona{font-size:2.2rem;opacity:.5;margin-bottom:8px}
.upoz-prazdne p{margin:0 0 6px;font-size:.9rem}

/* Na telefóne sa v hlavičke skrýva popis, zvonček musí ostať. */
@media(max-width:900px), (max-height:560px){
  .head-tools .upoz-zvoncek .pop{display:none}
}

/* Stav účtu v zozname správcu. */
.admin-blok{margin-top:6px;padding:6px 9px;border-radius:9px;font-size:.76rem;
  background:rgba(251,113,133,.10);border:1px solid rgba(251,113,133,.35);color:var(--down)}

/* Súhlas pri registrácii. Musí sa dať prečítať a odkazy musia byť
   klikateľné bez toho, aby klik prepol zaškrtávacie políčko. */
.suhlas-riadok{display:flex;align-items:flex-start;gap:9px;margin-bottom:8px;
  font-size:.82rem;line-height:1.45;color:var(--muted);text-align:left;cursor:pointer}
.suhlas-riadok input{flex:none;margin-top:2px;width:17px;height:17px;accent-color:var(--acc);cursor:pointer}
.suhlas-riadok .auth-odkaz{font-size:inherit}
.suhlas-poznamka{margin:0 0 14px;font-size:.76rem;text-align:left}

/* ================= ŠTATISTIKY PORTÁLU (správca) ================= */
.statp-obsah{max-height:min(70vh,640px);overflow-y:auto;overscroll-behavior:contain;margin-top:14px}
.statp-skupina{margin-bottom:20px}
.statp-mriezka{display:grid;grid-template-columns:repeat(auto-fit,minmax(122px,1fr));gap:8px;margin-top:8px}
.statp-karta{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-s);
  padding:11px 10px;text-align:center;min-width:0}
.statp-karta strong{display:block;font-size:1.28rem;font-weight:800;color:var(--txt);line-height:1.15;
  overflow-wrap:anywhere}
.statp-karta span{display:block;font-size:.68rem;color:var(--faint);margin-top:3px}
/* Čísla, ktoré naozaj niečo hovoria, majú farbu — zvyšok je kontext. */
.statp-karta.dolezite{border-color:rgba(245,196,81,.4);background:rgba(245,196,81,.07)}
.statp-karta.dolezite strong{color:var(--gold)}

.statp-graf{display:flex;align-items:flex-end;gap:4px;height:132px;margin-top:10px;
  padding:8px 6px 0;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-s)}
.statp-stlpec{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;height:100%;gap:3px}
.statp-bar{width:100%;max-width:34px;border-radius:5px 5px 0 0;
  background:linear-gradient(180deg,var(--acc-l),var(--acc));min-height:3px}
.statp-hodnota{font-size:.64rem;color:var(--muted);font-weight:700}
.statp-mesiac{font-size:.6rem;color:var(--faint)}

/* Výber položiek do panela „Viac“. Kontajner je blok, nie mriežka —
   mriežku má až každá skupina zvlášť. */
#vyberViac{display:block}
.viac-vyber-skupina{margin-bottom:14px}
.viac-vyber-skupina:last-child{margin-bottom:0}
.viac-vyber-skupina .side-label{margin-bottom:7px}
.viac-vyber-mriezka{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:7px}
/* Dlhé názvy (Ochrana osobných údajov) sa musia zmestiť, nie pretiecť. */
.viac-vyber-mriezka .lista-volba{min-width:0}
@media(max-width:520px){
  .viac-vyber-mriezka{grid-template-columns:1fr}
}

/* Krížik na konverzácii — nenápadný, kým naň nejdeš myšou. Na dotyku je
   vidieť vždy, tam sa nedá „prejsť ponad“. */
/* Krížik musí byť vidieť vždy. Skrývať ho do prejdenia myšou znamenalo,
   že o ňom na dotykovom zariadení nikto nevedel — a práve tam sa
   konverzácie mažú najčastejšie. */
.chat-vlakno-zmaz{flex:none;color:var(--down);font-size:.82rem;line-height:1;
  padding:6px 7px;border-radius:8px;opacity:.5;transition:.15s;cursor:pointer;
  align-self:center;-webkit-tap-highlight-color:transparent}
.chat-vlakno:hover .chat-vlakno-zmaz,
.dok-vlakno:hover .chat-vlakno-zmaz{opacity:.85}
.chat-vlakno-zmaz:hover{opacity:1;background:rgba(251,113,133,.16)}

/* ================= smajlíci ================= */
.chat-smajlik{flex:none;background:none;border:1px solid var(--line);border-radius:999px;
  width:36px;height:36px;font-size:1.05rem;cursor:pointer;color:inherit;
  display:flex;align-items:center;justify-content:center;transition:.15s;
  -webkit-tap-highlight-color:transparent}
.chat-smajlik:hover{border-color:var(--acc);background:var(--panel2)}

.smajlik-panel{position:fixed;z-index:1300;display:none;max-height:268px;overflow-y:auto;
  overscroll-behavior:contain;padding:10px;border-radius:var(--r);
  background:var(--sheen),rgba(var(--sklo-rgb),.94);border:1px solid var(--line2);
  box-shadow:0 18px 50px rgba(0,0,0,.6),inset 0 1px 0 var(--glass-hi);
  backdrop-filter:blur(30px) saturate(170%);-webkit-backdrop-filter:blur(30px) saturate(170%)}
.smajlik-panel.on{display:block}
.smajlik-skupina{margin-bottom:10px}
.smajlik-skupina:last-child{margin-bottom:0}
.smajlik-nadpis{font-size:.66rem;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  color:var(--faint);margin-bottom:5px}
.smajlik-mriezka{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:2px}
.smajlik{background:none;border:0;font-size:1.24rem;line-height:1;padding:5px;border-radius:8px;
  cursor:pointer;transition:.12s;-webkit-tap-highlight-color:transparent}
.smajlik:hover{background:var(--panel2);transform:scale(1.18)}

/* ================= panel upozornení ================= */
.upoz-panel{position:fixed;z-index:310;display:none;
  border-radius:var(--r);overflow:hidden;
  background:var(--sheen),rgba(var(--sklo-rgb),.94);border:1px solid var(--line2);
  box-shadow:0 18px 50px rgba(0,0,0,.6),inset 0 1px 0 var(--glass-hi);
  backdrop-filter:blur(30px) saturate(170%);-webkit-backdrop-filter:blur(30px) saturate(170%)}
.upoz-panel.on{display:block}
.upoz-hlava{display:flex;align-items:center;gap:9px;padding:11px 13px;
  border-bottom:1px solid var(--line)}
.upoz-hlava strong{flex:1;min-width:0;font-size:.92rem;color:var(--acc-xl)}
.upoz-vsetky{background:none;border:0;color:var(--muted);font:inherit;font-size:.74rem;
  cursor:pointer;padding:3px 6px;border-radius:6px;transition:.15s}
.upoz-vsetky:hover{color:var(--acc-xl);background:var(--panel2)}
.upoz-zavri{background:none;border:0;color:var(--faint);font:inherit;font-size:.9rem;
  cursor:pointer;padding:3px 6px;border-radius:6px}
.upoz-zavri:hover{color:var(--txt);background:var(--panel2)}
.upoz-panel .upoz-zoznam{margin:0;padding:8px;max-height:min(58vh,420px)}


/* ================= online stav =================
   Bodka je vedľa mena, nie na fotke — na fotke zakrývala tvár. */
.online-bodka{display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--faint);margin-right:6px;vertical-align:1px;flex:none}
.online-bodka.je{background:var(--up);box-shadow:0 0 7px rgba(74,222,128,.8)}

.pritomnost{font-size:.72rem;color:var(--faint)}
.pritomnost.je-online{color:var(--up);font-weight:700}

/* ================= zbalenie bočného panela =================

   Tlačidlo sedí v hlavičke ako bežný prvok. Skúšal som ho mať plávajúce
   nad panelom; vtedy tlačilo jeho obsah dolu a k účtom sa muselo
   scrollovať. V hlavičke nikomu neprekáža a je stále na tom istom mieste. */
.side-prepinac{display:none}
@media(min-width:1180px) and (min-height:561px){
  .side-prepinac{display:flex;flex:none;width:38px;height:38px;
    flex-direction:column;align-items:center;justify-content:center;gap:4px;
    background:var(--sheen),var(--panel);border:1px solid var(--line);border-radius:11px;
    cursor:pointer;transition:border-color .15s;
    backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%)}
  .side-prepinac:hover{border-color:var(--acc)}
  .side-prepinac .ik{color:var(--muted);transition:color .15s,transform .2s;display:flex}
  .side-prepinac:hover .ik{color:var(--acc-l)}
  /* Zbalený panel = ikona preklopená. Bez toho tlačidlo v oboch stavoch
     vyzerá rovnako a nie je vidieť, čo klik spraví. */
  body.panel-zbaleny .side-prepinac .ik{transform:scaleX(-1)}

  /* Zbalené: panel odíde doľava, obsah si vezme jeho miesto. Posúva sa
     `transform`, nie šírka — to je jediné, čo prehliadač zvláda plynulo.
     Odsadenie tela sa zámerne NEanimuje: `padding` núti prehliadač
     prepočítať celé rozloženie v každom snímku. */
  body.panel-zbaleny{padding-left:0}
  body.panel-zbaleny .sidebar{transform:translateX(-100%)}
  body.panel-zbaleny #pets{left:0}
  /* To isté podľa poznámky z predstart.js — platí od prvého vykreslenia,
     kým nepríde stav účtu zo servera; panel tak pri obnovení neodchádza
     pred očami. */
  html.panel-zbaleny body{padding-left:0}
  html.panel-zbaleny .sidebar{transform:translateX(-100%)}
  html.panel-zbaleny #pets{left:0}
  html.panel-zbaleny .side-prepinac .ik{transform:scaleX(-1)}

  .sidebar{transition:transform .24s cubic-bezier(.22,1,.36,1)}
}

/* ================= vlastné potvrdzovacie okno ================= */
.potvrd-obal{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(var(--overlay-rgb),.6);opacity:0;transition:opacity .16s;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.potvrd-obal.on{opacity:1}
.potvrd-okno{max-width:400px;width:100%;padding:22px;border-radius:var(--r);text-align:center;
  background:var(--sheen),rgba(var(--sklo-rgb),.9);border:1px solid var(--line2);
  box-shadow:0 24px 70px rgba(0,0,0,.6),inset 0 1px 0 var(--glass-hi);
  transform:scale(.94);transition:transform .2s cubic-bezier(.22,1,.36,1)}
.potvrd-obal.on .potvrd-okno{transform:scale(1)}
.potvrd-okno h3{font-size:1.05rem;color:var(--acc-xl);margin:0 0 8px}
.potvrd-okno p{font-size:.88rem;line-height:1.55;color:var(--muted);margin:0 0 18px}
/* Siete predajcu v upozornení pred obchodom. Sú kliknuteľné a otvárajú sa
   v novej karte, aby okno ostalo otvorené — kto si predajcu overí, vráti sa
   a pokračuje tam, kde prestal. Kým sa profil ťahá, je tu „Načítavam…";
   keď predajca žiadnu sieť nemá alebo sa profil načítať nedá, riadok zmizne. */
.over-siete{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
  align-items:center;margin:-6px 0 16px}
.over-siete:empty{display:none}
/* Keď predajca nemá uvedenú ani jednu sieť, je to to najdôležitejšie
   v okne — nesmie splynúť s poznámkou pod čiarou. */
.over-siete.ziadna{color:var(--down);font-size:.8rem}
.over-siet{padding:4px 11px;border-radius:999px;border:1px solid var(--line2);
  background:var(--panel2);color:var(--acc-xl);text-decoration:none;font-weight:600}
.over-siet:hover{border-color:var(--acc);color:#fff}
.potvrd-tlacidla{display:flex;gap:9px}
.potvrd-tlacidla .btn{flex:1 1 0;min-width:0}
.btn.nebezpecne{background:linear-gradient(160deg,rgba(255,255,255,.2),rgba(255,255,255,0)),var(--down);
  border-color:rgba(251,113,133,.5)}

/* Odkiaľ pochádza hodnota portfólia. Farby rozlišujú istotu údaja:
   zelená = nameraná cena, žltá = tvoj odhad, sivá = len to, čo si zaplatil. */
.dom-p-zdroj{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.zdroj{font-size:.7rem;padding:3px 9px;border-radius:999px;border:1px solid var(--line)}
.zdroj.z-trhu{color:var(--up);border-color:rgba(74,222,128,.4);background:rgba(74,222,128,.09)}
.zdroj.z-odhadu{color:var(--gold);border-color:rgba(245,196,81,.4);background:rgba(245,196,81,.09)}
.zdroj.z-nakupu{color:var(--faint)}
.dom-graf-popis{font-size:.72rem;color:var(--faint);margin:8px 0 0;line-height:1.45}


/* Indikátor ukladania v hlavičke sa nezobrazuje. Zbierka sa ukladá sama
   a hlásiť to po každej zmene je len šum — keď sa ukladanie NEPODARÍ,
   dozvieš sa to z hlásenia, a to je jediné, čo treba vedieť. */
#synchroStav{display:none !important}
.graf-legenda{color:var(--faint);letter-spacing:-1px}

/* ================= kreslené ikony ================= */
.ikona{display:block;flex:none}
.sl-ikona .ikona,.viac-ikona .ikona,.lv-ikona .ikona{margin:0 auto}
.icon-btn .ik{display:inline-flex;align-items:center;justify-content:center}
/* Aktívna položka v lište má ikonu o kúsok hrubšiu — rozdiel musí byť
   vidieť aj bez farby. */
.sl-polozka.on .ikona{stroke-width:2.1}

/* Lišta ešte priehľadnejšia — nech je pod ňou obsah naozaj vidieť. */
@media(max-width:900px), (max-height:560px){
  .spodna-lista{
    background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.02) 55%,rgba(255,255,255,.05)),
               rgba(14,11,22,.20);
    border-color:rgba(255,255,255,.26);
    backdrop-filter:blur(40px) saturate(240%);-webkit-backdrop-filter:blur(40px) saturate(240%);
    box-shadow:0 12px 40px rgba(0,0,0,.34),
               inset 0 1px 0 rgba(255,255,255,.40),
               inset 0 -1px 0 rgba(0,0,0,.22);
  }
  /* Pri takmer priehľadnom skle musí text držať kontrast sám. */
  .sl-text{text-shadow:0 1px 3px rgba(0,0,0,.75)}
  .sl-polozka .ikona{filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
}

/* ================= ikony v hornej navigácii =================
   Zarovnané k účiaru textu, nie na stred tlačidla — inak ikona „pláva“
   nad písmenami. Farba podľa oblasti: trh, zbierka, peniaze, komunita.
   Farbí sa jemne, aby lišta nevyzerala ako paleta. */
#nav button, #nav .nav-odkaz{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  /* flex-grow: položky si podelia CELÚ šírku pruhu — pri otvorenom
     bočnom paneli sa nehrčia vľavo s prázdnym chvostom. Basis auto
     necháva prirodzené šírky, takže nič nepretečie ani sa nestláča. */
  flex:1 0 auto}
.nav-ik{display:inline-flex;align-items:center;flex:none;line-height:0}
.nav-ik .ikona{width:18px;height:18px}

.nav-ik[data-farba="domov"]    { color:var(--acc-l) }
.nav-ik[data-farba="trh"]      { color:#7fc8ff }
.nav-ik[data-farba="zbierka"]  { color:#8fe3c0 }
.nav-ik[data-farba="peniaze"]  { color:var(--gold) }
.nav-ik[data-farba="komunita"] { color:#c9a3ff }
.nav-ik[data-farba="nastroje"] { color:var(--muted) }
/* Aktívna položka je biela ako jej text — farba by tam už len rušila. */
#nav button.on .nav-ik{color:inherit}
#nav button.on .ikona{stroke-width:2.1}

/* ================= rýchly pás vývoja investícií =================
   Úzky náhľad na dashboarde. Zámerne bez ovládania — je to informácia
   na jeden pohľad, podrobnosti sú v Investíciách o kliknutie ďalej. */
.dom-pas{display:block;width:100%;margin-top:14px;padding:12px 14px 10px;
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-s);
  color:inherit;font:inherit;text-align:left;cursor:pointer;transition:border-color .15s}
.dom-pas:hover{border-color:var(--acc)}
.dom-pas-hlava{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  flex-wrap:wrap;margin-bottom:6px}
.dom-pas-nazov{font-size:.76rem;color:var(--faint);letter-spacing:.2px}
.dom-pas-hodnota{font-size:.95rem;font-weight:800;color:var(--txt)}
.dom-pas-hodnota b{font-weight:700;font-size:.82rem;margin-left:6px}
.dom-pas-graf{display:block;width:100%;height:64px}
.dom-pas-popis{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;
  font-size:.68rem;color:var(--faint);margin-top:4px}
.dom-pas-prazdny{font-size:.78rem;color:var(--faint);margin:14px 0 0;line-height:1.5}

/* Panel s hodnotou portfólia už nedrží vysoký graf, tak nemá byť vysoký. */
.dom-portfolio{min-height:0}

/* Nadpis skupiny políčok. Nie je to <label> — nepopisuje jedno políčko,
   takže by čítačke sľuboval prepojenie, ktoré neexistuje. Vyzerá rovnako. */
.pole-nadpis{display:block;font-size:.74rem;font-weight:700;letter-spacing:.3px;
  color:var(--muted);margin-bottom:6px}


/* Ikona vnútri tlačidla: bez vlastného riadkovania, aby neťahala výšku. */
.icon-btn .ik{display:inline-flex;align-items:center;line-height:0;flex:none}
.icon-btn .ik .ikona{width:17px;height:17px}
.profile-pill{gap:8px}

/* Jednotková a celková cena. Malý rozdiel v písme stačí — hlavné je, že
   sa už nedá prečítať „450 € za všetkých šesť“. */
.cena-jednotka{font-size:.62em;font-weight:600;color:var(--muted);margin-left:4px}
.inz-spolu{display:block;font-size:.72rem;color:var(--faint);margin-top:2px}


/* ================= burza: čitateľnosť filtrov =================
   Text filtrov bol rovnako tlmený ako popisky pod kartami, takže sa
   v ňom zle čítalo. A medzi filtrami a výpisom nebolo vidieť predel. */
.burza-filtre{margin-bottom:22px;gap:9px}
.burza-filtre input,.burza-filtre select{color:var(--txt);font-size:.84rem}
.burza-filtre input::placeholder{color:var(--muted)}
.f-cena{color:var(--muted)}

/* Filter, v ktorom je niečo zvolené, musí byť vidieť — inak človek
   nechápe, prečo mu výpis niečo skrýva. */
.burza-filtre select.zvoleny,
.burza-filtre input.zvoleny{border-color:var(--acc);
  background:color-mix(in srgb, var(--acc) 12%, var(--bg2));color:var(--acc-xl)}

/* Počet výsledkov a prepínače nech nelepia na karty. */
.burza-hlava{margin-bottom:14px}

/* Kto predáva — súkromná osoba či podnikateľ. Nie je to ozdoba: pri
   podnikateľovi má kupujúci právo na odstúpenie a záruku, pri súkromnej
   osobe nie. Musí to vidieť pred obchodom, nie sa to dozvedieť potom. */
.inz-predajca-typ{display:inline-block;font-size:.72rem;padding:4px 10px;border-radius:999px;
  margin-bottom:8px;border:1px solid var(--line2);color:var(--muted);background:var(--bg2)}
.inz-predajca-typ.obchodnik{border-color:rgba(74,222,128,.4);
  background:rgba(74,222,128,.09);color:var(--up)}

/* Účet čaká na súhlas zákonného zástupcu. Zámerne nápadné, ale nie
   výstražné — nie je to chyba používateľa, len stav. */
.pas-suhlas{margin-bottom:14px;padding:11px 15px;border-radius:var(--r-s);
  font-size:.84rem;line-height:1.5;
  background:rgba(245,196,81,.10);border:1px solid rgba(245,196,81,.38);color:var(--gold)}

/* ================= čitateľnosť (audit, bod 8) =================

   Pätička bola .68rem vo farbe --faint — na tmavom pozadí to bolo na
   hranici čitateľnosti a sú v nej právne odkazy, ktoré musia byť vidieť.
   Placeholdery filtrov mali ten istý problém. */
.pat-obsah{font-size:.74rem;color:var(--muted)}
.pat-odkaz{color:var(--muted)}
.pat-znacka{color:var(--faint)}
.pat-znacka a{color:var(--muted)}

input::placeholder,textarea::placeholder{color:var(--muted);opacity:.85}
.burza-filtre input::placeholder{color:var(--muted);opacity:1}

/* Prázdny stav má povedať, čo tam človek nájde, keď sa portál naplní —
   nie len konštatovať, že tam nič nie je. */
.empty .empty-navod{font-size:.8rem;color:var(--faint);max-width:40ch;margin:2px 0 0;line-height:1.5}

/* ================= passkeys =================

   Prihlásenie bez hesla. Vzhľadovo je to zámerne druhá možnosť, nie
   hlavná: heslo ostáva plnohodnotnou cestou a passkey sa má ponúkať,
   nie tlačiť. Preto tenký oddeľovač a tlačidlo bez výplne. */
.pk-prihlasenie{margin-top:16px}
.pk-alebo{display:flex;align-items:center;gap:10px;margin:0 0 12px;
  font-size:.72rem;color:var(--faint);text-transform:uppercase;letter-spacing:.08em}
.pk-alebo::before,.pk-alebo::after{content:"";flex:1;height:1px;background:var(--line)}

.pk-velke{width:100%;justify-content:center;padding:11px 14px;font-size:.9rem}
.pk-vysvetlenie{margin:9px 0 0;text-align:center;line-height:1.5}

/* Zoznam zariadení v nastaveniach. */
.pk-zoznam{display:flex;flex-direction:column;gap:8px}
.pk-riadok{display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:var(--r-s);
  background:var(--bg2);border:1px solid var(--line)}
/* minmax/min-width:0 — bez toho dlhý názov zariadenia rozohne riadok
   a tlačidlá vytlačí mimo panela. */
.pk-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pk-info strong{font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-info .hint{margin:0;font-size:.72rem}
.pk-akcie{display:flex;gap:6px;flex-shrink:0}
.pk-akcie .icon-btn{padding:5px 9px;font-size:.85rem}
.pk-akcie [data-pk-zmaz]{color:var(--down)}

/* ================= profil a nastavenia — jedno okno =================

   Bočné menu vľavo, obsah vpravo. Na telefóne sa menu položí do
   vodorovného posúvateľného pásu — zvislé by zjedlo celú obrazovku. */
.nast-layout{display:flex;gap:20px;margin-top:16px;align-items:flex-start}
/* Pás záložiek NIE JE lepivý. Bol — a keďže lepivá je aj hlavička
   okna, obe sa prilepili na to isté `top:0` a prekryli sa: záložky sú
   v DOM neskôr, takže prekreslili nadpis, e-mail aj tlačidlo Zavrieť.
   Lepivá ostáva hlavička, lebo v nej je „Zavrieť" — to je to, k čomu sa
   človek musí dostať kedykoľvek. Záložiek je pár a scrollujú s obsahom. */
/* position:static musí byť VÝSLOVNE — pás záložiek je <nav> a globálne
   pravidlo `nav{position:sticky}` (hlavná lišta appky) naň sadá tiež.
   Prilepil sa preto na to isté `top:0` ako hlavička okna a prekryl jej
   nadpis, e-mail aj tlačidlo Zavrieť. */
/* z-index:auto musí byť tiež VÝSLOVNE. Pás záložiek je flex položka
   (.nast-layout je display:flex) a pre flex položky platí z-index aj pri
   position:static. Globálne `nav{z-index:40}` ho preto kreslilo NAD
   prilepenú hlavičku okna (z-index:6): pri scrollovaní záložky prekryli
   nadpis aj e-mail, hoci samy scrollovali s obsahom. S auto sa kreslia
   v bežnom poradí a hlavička ostáva navrchu. */
.nast-menu{display:flex;flex-direction:column;gap:3px;min-width:172px;position:static;z-index:auto}
.nast-polozka{text-align:left;padding:9px 13px;border-radius:var(--r-s);
  background:transparent;border:1px solid transparent;color:var(--muted);
  cursor:pointer;font:inherit;font-size:.88rem;white-space:nowrap;
  transition:background .15s,color .15s}
.nast-polozka:hover{background:var(--panel);color:var(--txt)}
.nast-polozka.on{background:var(--panel2);border-color:var(--line);color:var(--txt)}
.nast-obsah{flex:1;min-width:0}

/* Zrušenie účtu — oddelené čiarou a odsadené, nech nestojí vedľa
   každodenných vecí. */
.nast-nebezpecne{margin-top:26px;padding-top:16px;border-top:1px solid var(--line)}

@media(max-width:700px){
  .nast-layout{flex-direction:column;gap:12px}
  .nast-menu{flex-direction:row;overflow-x:auto;min-width:0;width:100%;
    padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .nast-polozka{flex:0 0 auto}
}

/* ================= kompaktná registrácia =================

   Formulár sa musí zmestiť do okna bez posúvania — dvojice polí idú
   vedľa seba a medzery sú tesnejšie. Na úzkom telefóne sa dvojice
   rozpadnú pod seba (pravidlo .g2 vyššie). */
.auth-kompakt .auth-dvojica{margin-bottom:8px}
.auth-kompakt .auth-pole{margin-bottom:8px}
.auth-kompakt .field label{margin-bottom:3px}
.auth-kompakt .suhlas-riadok{margin:10px 0 12px}

/* ================= strážené hľadania na burze ================= */
.strazenia-riadok{display:flex;flex-wrap:wrap;gap:7px;align-items:center;
  margin-top:10px}
.straz-pridaj{color:var(--acc-l);border-color:var(--acc)}
.straz-cip{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;
  border-radius:999px;background:var(--bg2);border:1px solid var(--line);
  font-size:.78rem;color:var(--muted)}
.straz-cip small{color:var(--faint)}
.straz-cip button{background:none;border:0;color:var(--down);cursor:pointer;
  font-size:.82rem;padding:0 2px;line-height:1}

/* ================= odznak dôvery v karte inzerátu ================= */
.stitok.dovera{color:var(--up);border-color:color-mix(in srgb, var(--up) 40%, transparent)}

/* ================= cenová história v detaile ================= */
.inz-cenova-historia{margin-top:14px;padding:11px 14px;border-radius:var(--r-s);
  background:var(--bg2);border:1px solid var(--line);font-size:.86rem;line-height:1.5}

/* ================= pás „čo sa zmenilo" na Domove ================= */
.dom-zmeny{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-bottom:14px;padding:11px 14px;border-radius:var(--r-s);
  background:color-mix(in srgb, var(--acc) 9%, transparent);
  border:1px solid color-mix(in srgb, var(--acc) 32%, transparent);
  font-size:.86rem;line-height:1.5}
.dom-zmeny-uvod{color:var(--acc-l);font-weight:600}
.dom-zmeny .icon-btn{margin-left:auto;padding:5px 10px;font-size:.78rem}

/* ================= rýchle šablóny v chate ================= */
.chat-sablony{display:flex;gap:6px;overflow-x:auto;padding:7px 10px 2px;
  -webkit-overflow-scrolling:touch}
.chat-sablona{flex:0 0 auto;padding:5px 10px;border-radius:999px;cursor:pointer;
  background:var(--bg2);border:1px solid var(--line);color:var(--muted);
  font:inherit;font-size:.76rem;white-space:nowrap;transition:color .15s,border-color .15s}
.chat-sablona:hover{color:var(--txt);border-color:var(--line2)}

/* ================= prepínače v nastaveniach ================= */
/* Prebíja globálny štýl `label` (drobný popisok poľa VEĽKÝMI písmenami).
   Toto nie je popisok poľa, ale celá veta — musí byť normálny text. */
.prepinac-riadok{display:flex;gap:10px;align-items:flex-start;padding:10px 0;
  cursor:pointer;font-size:.86rem;line-height:1.45;
  text-transform:none;letter-spacing:normal;font-weight:400;color:var(--txt)}
.prepinac-riadok b{font-weight:600}
.prepinac-riadok + .prepinac-riadok{border-top:1px solid var(--line)}
/* Checkbox NESMIE zdediť globálnu 100% šírku formulárových polí —
   roztiahol by sa na celý riadok a text by vytlačil mimo okna. */
.prepinac-riadok input{margin-top:3px;flex:0 0 auto;width:auto}
.prepinac-riadok small{color:var(--muted)}

/* ================= vizitka zbierky na verejnom profile ================= */
.pv-zbierka{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pv-zb-cislo{display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:9px 14px;border-radius:var(--r-s);background:var(--bg2);
  border:1px solid var(--line);min-width:86px}
.pv-zb-cislo strong{font-size:1.05rem}
.pv-zb-cislo span{font-size:.7rem;color:var(--muted)}

/* ================= denný graf v štatistikách ================= */
.statp-graf.denny .statp-stlpec{min-width:0}
.statp-graf.denny .statp-hodnota{font-size:.58rem}
.statp-graf.denny .statp-mesiac{font-size:.56rem;white-space:nowrap}

/* ================= výber jazyka: spúšťač + vyskakovacie okno =================
   Spúšťač je nenápadná pilulka s vlajkou (v pätičke, rovnaká váha ako
   právne odkazy). Po klepnutí sa otvorí plávajúci panel so zoznamom
   jazykov — vzhľad v štýle iOS: tmavé sklo, jemný okraj, fajka pri
   aktívnom. Panel polohuje JS (nad spúšťač), preto position:fixed. */
.jazyk-trigger{display:inline-flex;align-items:center;gap:6px;
  background:var(--panel);border:1px solid rgba(255,255,255,.10);
  border-radius:999px;padding:4px 10px;cursor:pointer;font:inherit;
  color:var(--muted);line-height:1;transition:background .15s,color .15s,border-color .15s}
.jazyk-trigger:hover{background:var(--panel2);color:var(--txt);border-color:rgba(255,255,255,.18)}
.jazyk-tr-vlajka{font-size:1.05em}
.jazyk-tr-kod{font-weight:600;letter-spacing:.04em;font-size:.82em}
.jazyk-tr-sip{opacity:.7;transition:transform .15s}
.jazyk-trigger[aria-expanded="true"] .jazyk-tr-sip{transform:rotate(180deg)}

.jazyk-popup{position:fixed;inset:0;z-index:1200}
.jazyk-popup[hidden]{display:none}
.jazyk-popup-panel{position:fixed;min-width:220px;max-width:calc(100vw - 20px);
  background:rgba(20,17,28,.86);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,.12);border-radius:var(--r);
  box-shadow:var(--shadow);padding:7px;
  animation:jazykPopup .16s cubic-bezier(.2,.8,.25,1)}
@keyframes jazykPopup{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
.jazyk-riadok{width:100%;display:flex;align-items:center;gap:12px;
  background:none;border:0;cursor:pointer;font:inherit;color:var(--txt);
  padding:11px 12px;border-radius:var(--r-s);text-align:left;transition:background .12s}
.jazyk-riadok:hover{background:rgba(255,255,255,.07)}
.jazyk-riadok.on{background:rgba(var(--acc-rgb),.16)}
.jazyk-riadok .jazyk-vlajka{font-size:1.35em;line-height:1;width:1.5em;text-align:center}
.jazyk-riadok .jazyk-nazov{flex:1;font-size:1rem;font-weight:500}
.jazyk-riadok.on .jazyk-nazov{font-weight:700}
.jazyk-riadok .jazyk-fajka{color:var(--acc-l);font-weight:700;width:1em;text-align:center}

/* ================= domov: klikateľná hlavička stĺpca =================
   Bola to len <div> s odkazom vpravo — klik na nadpis nerobil nič,
   hoci naň človek mieri prvý. Teraz je klikateľná celá. */
.dom-s-hlava{width:100%;background:none;border:0;cursor:pointer;font:inherit;
  color:inherit;text-align:left;padding:0;display:flex;align-items:center;
  justify-content:space-between;gap:10px}
.dom-s-hlava:hover h3{color:var(--acc-xl)}
.dom-s-hlava:hover .auth-odkaz{color:var(--acc-l)}

/* ================= domov: pruh magazínu ================= */
.dom-magazin{margin-top:16px}
.dom-mag-hlava{display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:12px}
.dom-mag-hlava h3{margin:0 0 2px}
.dom-mag-hlava .hint{margin:0;max-width:56ch}
.dom-mag-hlava .icon-btn{flex:0 0 auto;text-decoration:none}
.dom-mag-clanky{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:9px}
.dom-mag-clanok{display:flex;align-items:center;gap:10px;padding:11px 13px;
  border-radius:var(--r-s);text-decoration:none;color:var(--txt);font-size:.85rem;
  line-height:1.35;background:var(--bg2);border:1px solid var(--line);
  transition:border-color .15s,transform .15s}
.dom-mag-clanok:hover{border-color:var(--acc);transform:translateY(-2px)}
.dom-mag-ikona{font-size:1.3rem;flex-shrink:0}

/* ================= generátor inzerátu: voľby ================= */
.lst-volby{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px;margin-bottom:10px}
.lst-volby .field{margin:0}
.lst-prepinace{gap:8px;flex-wrap:wrap;margin-bottom:14px}

/* =====================================================================
   IKONY — farebné tokeny napojené na existujúce témy.

   Hlavná línia dedí farbu textu, takže ikona vždy sedí k tomu, vedľa
   čoho stojí. Akcent ide z premennej témy — pri prepnutí schémy sa
   prefarbí sám, bez druhého prepínača a bez zásahu do SVG.
   ===================================================================== */
/* Tokeny sedia na `body`, nie na `:root` — schémy prepisujú --acc-l
   práve na body[data-tema], a keby sa akcent odvodzoval od koreňa,
   ostal by vo všetkých schémach rovnaký. */
body{
  --pi-icon-primary: currentColor;
  --pi-icon-accent:  var(--acc-l);
  --pi-icon-muted:   var(--muted);
  --pi-icon-success: var(--up);
  --pi-icon-warning: var(--gold);
  --pi-icon-danger:  var(--down);
}

.pi-icon{
  /* Veľkosť určujú width/height atribúty z ikona() — CSS ju neprebíja.
     Pevných 22px tu kedysi normalizovalo staré strokové kresby; Phosphor
     vypĺňa box hustejšie a pri vynútených 22px pôsobili ikony prerastene
     („krivo") všade, kde si volajúci pýtal menšie. flex:0 0 auto ostáva —
     ikona nikdy nemení výšku tlačidla ani nestláča text vedľa seba. */
  flex:0 0 auto;
  display:inline-block; vertical-align:-.22em;
  color:inherit; overflow:visible;
  transition:color .18s ease, transform .18s ease;
}
.pi-icon--sm{ width:18px; height:18px }
.pi-icon--lg{ width:30px; height:30px }
.pi-icon--muted   { color:var(--pi-icon-muted) }
.pi-icon--success { color:var(--pi-icon-success); --pi-icon-accent:currentColor }
.pi-icon--warning { color:var(--pi-icon-warning); --pi-icon-accent:currentColor }
.pi-icon--danger  { color:var(--pi-icon-danger);  --pi-icon-accent:currentColor }

/* Ikona v riadku textu — zarovná sa na účiaru a nechá dýchať medzeru. */
.pi-inline{ vertical-align:-.2em; margin-right:.35em }

/* Jemný pohyb pri nabehnutí. Nič, čo by skákalo. */
button:hover > .pi-icon, a:hover > .pi-icon,
.icon-btn:hover .pi-icon{ transform:translateY(-1px) }
@media(prefers-reduced-motion:reduce){
  .pi-icon{ transition:none }
  button:hover > .pi-icon, a:hover > .pi-icon,
  .icon-btn:hover .pi-icon{ transform:none }
}

/* Obal `.ik`/`.nav-ik` drží ikonu v strede riadka. Farby skupín
   navigácie ostávajú — ikona ich dedí cez currentColor.

   `align-self:center` je tu podstatné: obal je v tlačidle položkou
   flexboxu a bez neho sa naťahuje na celú výšku riadka, takže ikona
   vyšla o niekoľko pixelov nad text. */
.ik, .nav-ik{ display:inline-flex; align-items:center; align-self:center; line-height:0 }
/* Ikona v obyčajnom (ne-flex) tlačidle sedela nad účiarou textu —
   „Odhlásiť" malo šípku vyššie než písmená. Stred ikony na stred textu. */
button.btn .ik{vertical-align:middle;margin-top:-2px}

/* Ikona priamo v tlačidle (bez obalu) — to isté centrovanie a bez
   posunu účiary, ktorý platí len pre riadkový text. */
.btn > .pi-icon, .icon-btn > .pi-icon, button > .pi-icon, a.icon-btn > .pi-icon,
.ik > .pi-icon, .nav-ik > .pi-icon{ align-self:center; vertical-align:middle }
.nav-ik .pi-icon{ width:20px; height:20px }
.head-tools .pi-icon{ width:21px; height:21px }
.sl-ikona .pi-icon, .viac-ikona .pi-icon{ vertical-align:0 }

/* ================= komu si predal ================= */
.predaj-zoznam{display:flex;flex-direction:column;gap:7px;margin-top:14px}
.predaj-osoba{display:flex;align-items:center;gap:11px;width:100%;
  padding:10px 13px;border-radius:var(--r-s);cursor:pointer;font:inherit;text-align:left;
  background:var(--bg2);border:1px solid var(--line);color:var(--txt);
  transition:border-color .15s,background .15s}
.predaj-osoba:hover{border-color:var(--acc);background:var(--panel)}
.predaj-osoba .profile-avatar{width:36px;height:36px;flex:0 0 auto}
.predaj-osoba-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.predaj-osoba-text b{font-size:.9rem}
.predaj-osoba-text .jemne{font-size:.75rem}
.predaj-sipka{flex:0 0 auto;color:var(--faint)}

/* Ikona v hláške — zarovnaná s textom, nech nič neposkakuje. */
#toast .toast-ik{display:inline-flex;align-items:center;margin-right:7px;vertical-align:-.25em}
#toast .toast-ik .pi-icon{width:18px;height:18px}

/* ================= pätička na spodku stránky =================
   Body je zvislý flex a pätička má margin-top:auto — pri krátkom
   obsahu tak sadne na spodok okna, pri dlhom na koniec stránky.
   Pripnuté prvky (modaly, dok, toast) flex nechajú tak. */
body{display:flex;flex-direction:column;min-height:100dvh}
.wrap{width:100%}
#appZnacka{margin-top:auto;padding:6px 16px calc(env(safe-area-inset-bottom, 0px) + 10px) 16px;
  width:100%}
.znacka-obsah{display:flex;align-items:center;justify-content:center;gap:5px 7px;flex-wrap:wrap;
  font-size:.6rem;line-height:1.3;letter-spacing:.15px;color:var(--faint);max-width:1100px;margin:0 auto}
/* Prepínač jazyka v pätičke je drobný — nemá trčať ako tlačidlo. */
.znacka-obsah .jazyk-trigger{padding:2px 7px;gap:4px;font-size:.95em}
.znacka-obsah .jazyk-tr-sip{width:10px;height:10px}
.znacka-obsah a{color:var(--muted);text-decoration:none}
.znacka-obsah a:hover{color:var(--acc-xl);text-decoration:underline}


/* ================= dokumenty v nastaveniach ================= */
.nast-dokumenty{display:flex;flex-direction:column;gap:7px}
.nast-dokument{display:flex;align-items:center;gap:11px;width:100%;padding:11px 13px;
  border-radius:var(--r-s);cursor:pointer;font:inherit;text-align:left;
  background:var(--bg2);border:1px solid var(--line);color:var(--txt);
  transition:border-color .15s,background .15s}
.nast-dokument:hover{border-color:var(--acc);background:var(--panel)}
.nast-dok-ikona{display:inline-flex;align-items:center;color:var(--acc-l);flex:0 0 auto}
.nast-dok-text{flex:1;min-width:0;font-size:.88rem}
.nast-dok-sipka{flex:0 0 auto;color:var(--faint);display:inline-flex}

/* ================= rozpad portfólia ================= */
.dom-p-rozpad{margin-top:8px;font-size:.82rem}
.rozpad-modal{max-width:760px;width:min(760px,94vw)}
.rozpad-obsah{max-height:min(62vh,560px);overflow-y:auto;display:flex;flex-direction:column;gap:8px;margin-top:10px;padding-right:4px}
.rozpad-rad{display:grid;grid-template-columns:48px minmax(0,1fr) 140px 96px;gap:12px;align-items:center;
  padding:9px 10px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2, rgba(255,255,255,.02))}
.rozpad-rad.ma-katalog{cursor:pointer}
.rozpad-rad.ma-katalog:hover{border-color:var(--accent);background:rgba(255,255,255,.04)}
.rozpad-foto{width:48px;height:48px;object-fit:contain;border-radius:8px;display:flex;align-items:center;justify-content:center}
.rozpad-foto-prazdna{background:rgba(255,255,255,.05);color:var(--faint)}
.rozpad-info{min-width:0}
.rozpad-nazov{font-weight:600;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rozpad-meta{font-size:.78rem;color:var(--faint);display:flex;gap:8px;align-items:center;white-space:nowrap;overflow:hidden}
/* Odznak zdroja („cenník") musí ostať celý — skracuje sa názov edície
   pred ním, inak bol odznak na telefóne odrezaný v polovici. */
.rozpad-set{min-width:0;overflow:hidden;text-overflow:ellipsis}
.rozpad-meta .zdroj{flex:none}
.rozpad-spark{width:140px;height:40px;flex:none}
.rozpad-bez-grafu{width:140px;font-size:.72rem;color:var(--faint);text-align:center}
.rozpad-cisla{text-align:right}
.rozpad-hodnota{font-weight:700;font-variant-numeric:tabular-nums}
.rozpad-zmena{font-size:.8rem;font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .rozpad-rad{grid-template-columns:40px minmax(0,1fr) 84px}
  .rozpad-spark,.rozpad-bez-grafu{display:none}
  .rozpad-foto{width:40px;height:40px}
}

/* ================= katalóg: sety a dokončenosť ================= */
.kat-sety{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin-top:10px}
.kat-set{display:flex;gap:12px;align-items:center;text-align:left;padding:12px;border:1px solid var(--line);
  border-radius:12px;background:transparent;color:inherit;cursor:pointer;font:inherit}
.kat-set:hover{border-color:var(--accent);background:rgba(255,255,255,.03)}
.kat-set-logo{width:52px;height:36px;flex:none;display:flex;align-items:center;justify-content:center}
.kat-set-logo img{max-width:52px;max-height:36px;object-fit:contain}
.kat-set-info{min-width:0;display:flex;flex-direction:column;gap:2px;flex:1}
.kat-set-info b{font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kat-set-info i{font-style:normal;font-size:.75rem;color:var(--faint)}
.kat-set-cisla{font-size:.78rem;font-variant-numeric:tabular-nums}
.kat-progres{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.kat-progres i{display:block;height:100%;border-radius:3px;background:var(--accent);transition:width .3s}
.kat-progres.velky{height:8px;flex:1;min-width:140px;max-width:340px}
.kat-set-hlava{display:flex;gap:14px;align-items:center;margin-top:10px}
.kat-set-velke-logo{max-width:120px;max-height:56px;object-fit:contain}
.kat-set-suhrn{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:10px}
.kat-set-hotovo{color:var(--up);font-weight:600;font-size:.85rem}
.kat-set-karty .kat-karta.chyba-mi img{opacity:.45;filter:grayscale(.5)}
.kat-set-karty .kat-karta.mam{border-color:var(--up)}
.kat-k-stav{font-size:.7rem;color:var(--faint)}
.kat-karta.mam .kat-k-stav{color:var(--up)}

/* ================= burza: výmeny ================= */
.inz-karta.vymena{border-color:rgba(140,120,255,.35)}
.inz-karta.vymena .inz-bez-foto{opacity:.4}
.cena.vymena{color:#a08cff;display:inline-flex;align-items:center;gap:6px}
.kat-set-riadok{display:inline-flex;align-items:center;gap:6px}
.kat-set-symbol{height:14px;max-width:26px;object-fit:contain;vertical-align:middle}
.kat-stavy{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0 2px}
.kat-stav{display:inline-flex;flex-direction:column;align-items:center;gap:2px;padding:6px 10px;
  border:1px solid var(--line);border-radius:10px;min-width:52px}
.kat-stav b{font-size:.72rem;color:var(--faint)}
.kat-stav i{font-style:normal;font-size:.85rem;font-weight:600;font-variant-numeric:tabular-nums}
.kat-stavy-pozn{flex-basis:100%;font-size:.72rem}
.stitok.zlava{color:var(--up);border-color:var(--up)}

/* ================= zbierka setov a obľúbené ================= */
.kat-k-prepni{display:block;margin-top:4px;font-size:.72rem;padding:3px 6px;border-radius:8px;
  border:1px solid var(--line);color:var(--faint);text-align:center;cursor:pointer}
.kat-k-prepni:hover{border-color:var(--accent);color:var(--text)}
.kat-k-prepni.mam{border-color:var(--up);color:var(--up)}
/* Verzie karty v sete: Base / RH / Holo. Zelený čip = túto verziu vlastníš.
   Dokončenosť setu ráta kartu pri ktorejkoľvek verzii. */
.kat-k-varianty{display:flex;gap:4px;margin-top:4px}
.kat-k-var{flex:1;text-align:center;font-size:.68rem;font-style:normal;padding:3px 2px;
  border:1px solid var(--line);border-radius:8px;color:var(--muted);cursor:pointer;transition:.14s}
.kat-k-var:hover{border-color:var(--acc);color:var(--txt)}
.kat-k-var.on{border-color:var(--up);color:var(--up);background:rgba(74,222,128,.10);font-weight:700}
.btn.kat-mam{border-color:var(--up);color:var(--up)}
.kat-set-hodnota b{color:var(--gold)}
.kat-set{position:relative}
.kat-set-hviezda{position:absolute;top:6px;right:8px;font-size:.95rem;color:var(--faint);
  opacity:.55;cursor:pointer;line-height:1;padding:4px}
.kat-set-hviezda:hover{opacity:1}
.kat-set-hviezda.on{color:var(--gold);opacity:1}

/* ================= PDF report (tlač) ================= */
#tlacReport{display:none}
@media print{
  body > *:not(#tlacReport){display:none !important}
  #tlacReport{display:block;color:#000;background:#fff;font:12px/1.5 -apple-system,Arial,sans-serif;padding:24px}
  #tlacReport h1{font-size:20px;margin:0 0 4px}
  #tlacReport .tlac-sub{color:#555;margin:0 0 12px}
  #tlacReport .tlac-suhrn{margin:0 0 14px}
  #tlacReport table{width:100%;border-collapse:collapse}
  #tlacReport th,#tlacReport td{border-bottom:1px solid #ccc;padding:5px 8px;text-align:left}
  #tlacReport th:nth-child(n+3),#tlacReport td:nth-child(n+3){text-align:right}
}

/* výber produktu pod pásom grafu na dashboarde */
.dom-pas-vyber{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.pas-chip{font:inherit;font-size:.74rem;padding:4px 10px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--faint)}
.pas-chip:hover{border-color:var(--accent);color:var(--text)}
.pas-chip.on{border-color:var(--accent);color:var(--text);background:rgba(255,255,255,.06)}
.dom-kat-taby{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.dom-kat-zmena{margin-left:auto;text-align:right;display:flex;flex-direction:column;flex:none}
.dom-kat-zmena small{color:var(--muted)}

/* Katalógové okno na dashboarde drží kompaktnú výšku — dlhé zoznamy
   (pohyby cien, výsledky) sa rolujú vnútri, panel sa nenaťahuje. */
.dom-katalog .dom-kat-vysledky{max-height:295px;overflow-y:auto;padding-right:4px}

/* Kompaktné riadky katalógového okna — polovičná výška. */
.dom-katalog .dom-kat-vysledky{max-height:185px}
.dom-katalog .dom-kat-riadok{padding:4px 8px;gap:8px}
.dom-katalog .dom-kat-riadok img{width:22px;border-radius:3px}
.dom-katalog .dom-kat-text b{font-size:.8rem;line-height:1.25}
.dom-katalog .dom-kat-text small{font-size:.7rem;line-height:1.2}
.dom-kat-zmena b{font-size:.8rem}
.dom-kat-zmena small{font-size:.7rem}

/* ================= fotoaparát: výber akcie + známka ================= */
.foto-vyber-modal{max-width:440px}
.foto-vyber{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.foto-volba{display:grid;grid-template-columns:32px 1fr;grid-template-rows:auto auto;gap:2px 10px;
  align-items:center;text-align:left;padding:12px;border:1px solid var(--line);border-radius:12px;
  background:transparent;color:inherit;cursor:pointer;font:inherit}
.foto-volba:hover{border-color:var(--accent);background:rgba(255,255,255,.04)}
.foto-volba .ik{grid-row:1/3}
.foto-volba b{font-size:.92rem}
.foto-volba small{color:var(--faint);font-size:.76rem;grid-column:2}
.znamka-modal{max-width:420px}
.znamka-final{text-align:center;margin:14px 0}
.znamka-final b{display:inline-flex;align-items:center;justify-content:center;width:110px;height:110px;
  border-radius:50%;border:4px solid var(--gold);font-size:2.2rem;font-weight:700}
.znamka-final small{display:block;color:var(--faint);margin-top:6px}
.znamka-riadok{display:flex;align-items:center;gap:10px;margin:8px 0}
.znamka-riadok span{width:90px;color:var(--faint);font-size:.82rem}
.znamka-riadok i{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;font-style:normal}
.znamka-riadok i b{display:block;height:100%;background:var(--gold)}
.znamka-riadok em{font-style:normal;font-weight:600;width:34px;text-align:right;font-variant-numeric:tabular-nums}

/* ================= mobil: horný pruh a katalógové filtre ================= */
@media(max-width:900px){
  /* Prilepené filtre sa na mobile bili s mriežkou — roluje sa celá strana. */
  .kat-filtre{position:static}
}

/* ================= navigácia: vždy jeden riadok =================
   So skrytým bočným panelom sa tlačidlá roztiahnu na celú šírku,
   s otvoreným sa stiahnu — ale nikdy nezalomia do druhého riadka. */
nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
body.panel-zbaleny nav{justify-content:space-between}
body.panel-zbaleny nav > button, body.panel-zbaleny nav > .nav-odkaz{flex:1 1 auto;justify-content:center}

/* Mobil: logo a ikony tesnejšie k obsahu — medzera bola priveľká. */
@media(max-width:900px){
  header{padding-bottom:2px;margin-bottom:0}
  .dom-uvod{margin-top:2px}
  .dom-uvod h2{margin-top:4px}
}

/* Pätička je dole, odsadenie od výrezu (notchu) preto nesie .wrap —
   inak by logo na telefóne sedelo v systémovom status bare. */
@media(max-width:900px){
  .wrap{padding-top:calc(env(safe-area-inset-top, 0px) + 8px)}
}

/* Mobil: poradie brány = nadpis → prihlásenie → zvyšok úvodu.
   .uvod sa „rozpustí" (display:contents), takže jeho časti sa dajú
   zoradiť spolu s prihlasovacou kartou v jednom stĺpci. */
@media(max-width:960px) and (min-height:561px){
  .auth-obal{display:flex;flex-direction:column}
  .uvod{display:contents}
  .uvod > *{order:3}
  .uvod > .uvod-hlava{order:1}
  .auth-card{order:2;width:100%;max-width:520px;margin:0 auto}
}

/* Mobil: čísla portálu patria POD prihlásenie, nadpis nad ním. */
@media(max-width:960px) and (min-height:561px){
  .uvod-hlava{display:contents}
  .uvod-nadpis, .uvod-podnadpis{order:1}
  .uvod-cisla{order:3;margin-top:4px}
  .uvod > *{order:4}
}

/* Mobil: podnadpis a prihlásenie tesnejšie pri sebe. */
@media(max-width:960px) and (min-height:561px){
  .auth-obal{gap:12px}
  .uvod-podnadpis{margin-bottom:0}
}

.kat-set-filtre{margin-left:auto;display:flex;gap:6px}

/* AI PSA nadpis nad známkou */
.znamka-psa{display:block;text-align:center;font-weight:800;letter-spacing:2px;
  color:var(--gold);font-size:.85rem;margin-bottom:8px}

/* Mobil: prepínač dostane vlastný riadok cez celú šírku (vedľa režimov
   sa už nezmestí) a tlačidlá si ju rovnomerne rozdelia. */
@media(max-width:900px){
  .burza-druhy{width:100%;flex:1 1 100%}
  .burza-druhy .bd-tlacidlo{flex:1;padding:8px 6px}
}

/* Mobil: pás ikoniek v hlavičke sa križoval s logom — o kúsok nižšie. */
@media(max-width:900px){
  header .head-tools{margin-top:16px;align-self:flex-end}
}

/* ================= prehliadač fotiek (chat, inzeráty, aukcie) =================
   Logika v js/jadro/lightbox.js. Plátno má touch-action:none, lebo
   <body> štipnutie vypína — gestá sa spracúvajú ručne. */
.foto-lightbox{position:fixed;inset:0;z-index:400;display:none;
  background:rgba(4,3,8,.94);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  overscroll-behavior:contain;user-select:none;-webkit-user-select:none}
.foto-lightbox.on{display:block;animation:fade .18s ease}
.lb-platno{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:calc(env(safe-area-inset-top, 0px) + 66px) 16px calc(env(safe-area-inset-bottom, 0px) + 82px);
  touch-action:none;overflow:hidden;cursor:zoom-in}
.foto-lightbox.zoomnute .lb-platno{cursor:grab}
.lb-platno img{max-width:100%;max-height:100%;border-radius:14px;object-fit:contain;display:block;
  box-shadow:0 24px 60px rgba(0,0,0,.6);transform-origin:center center;will-change:transform;
  -webkit-user-drag:none;-webkit-touch-callout:none;pointer-events:auto}
.lb-zavri,.lb-sipka{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:rgba(20,18,30,.9);color:var(--txt);cursor:pointer;line-height:1;display:flex;align-items:center;
  justify-content:center;z-index:2;touch-action:manipulation}
.lb-zavri{position:absolute;top:calc(env(safe-area-inset-top, 0px) + 14px);right:16px;font-size:1.2rem}
/* Šípky: na počítači vysunuté k okrajom obrazovky (fixed = voči oknu,
   prehliadač ho vypĺňa celé), bez galérie sa nezobrazujú. */
.lb-sipka{position:fixed;top:50%;transform:translateY(-50%);display:none}
.lb-sipka.vlavo{left:12px}
.lb-sipka.vpravo{right:12px}
.foto-lightbox.galeria .lb-sipka{display:flex}
.lb-zavri:hover,.lb-sipka:hover,.lb-zoom button:hover{border-color:var(--acc)}
.lb-lista{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom, 0px) + 14px);
  display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;z-index:2}
.lb-lista button{pointer-events:auto}
.lb-riadok{display:flex;align-items:center;justify-content:center;gap:14px;min-height:1em}
.lb-pocet{font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums;min-width:3.5em;text-align:center}
.lb-zoom{display:flex;border:1px solid var(--line);border-radius:999px;background:rgba(20,18,30,.9);overflow:hidden}
.lb-zoom button{background:none;border:0;border-right:1px solid var(--line);color:var(--txt);width:44px;height:38px;
  font-size:1.15rem;cursor:pointer;line-height:1;touch-action:manipulation}
.lb-zoom button:last-child{border-right:0}
.lb-zoom .lb-mierka{width:auto;min-width:64px;padding:0 10px;font-size:.78rem;font-variant-numeric:tabular-nums}
.lb-napoveda{display:none;font-size:.72rem;color:var(--muted);text-align:center;padding:0 24px;max-width:340px}
.foto-lightbox.napoveda .lb-napoveda{display:block}
/* Nápoveda lištu zvýši — plátno jej nechá miesto, aby neprekrývala fotku. */
.foto-lightbox.napoveda .lb-platno{padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 122px)}
body.foto-otvorena{overflow:hidden}
/* Plávajúce okno PokeTalku (z-index 1200) by inak ležalo nad prehliadačom. */
body.foto-otvorena .klub-okno{visibility:hidden}
.chat-priloha[data-foto-zvacsi]{cursor:zoom-in}
/* Na dotyku šípky ostávajú v spodnej lište pri počítadle (listuje sa aj
   potiahnutím) — lišta je vyššia, plátno to zohľadní. */
@media(pointer:coarse){
  .foto-lightbox.galeria .lb-sipka{position:static;transform:none;width:38px;height:38px}
  .foto-lightbox.galeria .lb-platno{padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 118px)}
  .foto-lightbox.galeria.napoveda .lb-platno{padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 156px)}
}
/* Telefón naležato: minimum odsadenia hore, nápoveda preč. */
@media(orientation:landscape) and (max-height:500px){
  .lb-platno,.foto-lightbox.napoveda .lb-platno,.foto-lightbox.galeria .lb-platno,
  .foto-lightbox.galeria.napoveda .lb-platno{
    padding:calc(env(safe-area-inset-top, 0px) + 10px) 16px calc(env(safe-area-inset-bottom, 0px) + 100px)}
  .foto-lightbox.napoveda .lb-napoveda{display:none}
  .lb-lista{bottom:calc(env(safe-area-inset-bottom, 0px) + 8px)}
}
/* Hlavná fotka inzerátu/aukcie sa dá otvoriť — kurzor lupy, značka v rohu,
   z klávesnice Enter/medzerník. */
.inz-hlavna-foto[data-galeria]{position:relative;cursor:zoom-in}
.inz-hlavna-foto[data-galeria]:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.inz-hlavna-foto[data-galeria]::after{content:"⤢";position:absolute;right:8px;bottom:8px;width:30px;height:30px;
  border-radius:50%;background:rgba(20,18,30,.78);border:1px solid var(--line);color:var(--txt);
  display:flex;align-items:center;justify-content:center;font-size:.95rem;pointer-events:none}

/* ================= čakací zoznam ================= */
.cak-uvod{color:var(--muted);font-size:.9rem;line-height:1.55;margin:0 0 14px}
.cakacka-zoznam{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.cak-suhrn{font-size:.82rem;color:var(--faint);margin-bottom:4px}
.cak-riadok{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;
  padding:8px 10px;border:1px solid var(--line);border-radius:10px}
.cak-hlava{display:flex;flex-direction:column;min-width:0}
.cak-hlava b{font-size:.88rem;overflow:hidden;text-overflow:ellipsis}
.cak-hlava .jemne{font-size:.74rem}
.cak-poznamka{grid-column:1/-1;font-size:.8rem;color:var(--muted);white-space:normal}

/* ---------- čakací zoznam: rozbaľovanie a odpovede ---------- */
.cak-prepinac{display:flex;justify-content:space-between;align-items:center;width:100%;gap:10px;
  padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:transparent;
  color:inherit;font:inherit;font-weight:600;cursor:pointer}
.cak-prepinac:hover{border-color:var(--acc)}
.cak-prepinac .jemne{font-weight:400;font-size:.78rem}
.cak-panel{margin-top:8px}
.cak-nastroje{display:flex;gap:14px;margin-bottom:8px;font-size:.82rem}
.cak-okno{max-height:380px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding-right:4px}
.cak-riadok{display:flex;flex-direction:column;gap:6px;padding:9px 11px;
  border:1px solid var(--line);border-radius:10px}
/* Schválený záujemca — zelený prúžok, nech je na prvý pohľad vidno,
   komu už pozvánka odišla. Schválení idú v zozname dole. */
.cak-riadok.pozvany{border-color:color-mix(in oklab,var(--up) 45%,var(--line))}
.cak-znacka{display:inline-flex;align-items:center;gap:4px;font-size:.7rem;font-weight:700;
  color:var(--up);white-space:nowrap}
.icon-btn.maly.schvalit{color:var(--up);border-color:color-mix(in oklab,var(--up) 40%,var(--line))}
.icon-btn.maly.schvalit:hover{border-color:var(--up)}

.cak-riadok.odpovedane{border-color:rgba(74,222,128,.35)}
.cak-akcie{display:flex;gap:6px;justify-content:flex-end}
.cak-odpoved textarea{width:100%;resize:vertical;font:inherit;font-size:.86rem;padding:9px 11px;
  border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--txt)}

/* ---------- chybový log: stav vyriešenia ---------- */
.statp-chyby-hlava{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.statp-chyba{display:flex;flex-direction:column;gap:6px}
.statp-chyba-stav{display:flex;justify-content:flex-end;align-items:center;gap:10px;font-size:.74rem}
.statp-chyba.opravene{border-color:rgba(74,222,128,.4);background:rgba(74,222,128,.07);opacity:.75}
.statp-znacka{display:inline-flex;align-items:center;gap:5px;color:var(--up);font-weight:600}

/* Okno s dokumentmi sa dá otvoriť aj z prihlasovacej brány (#authGate má
   z-index 300) — bez vyššej vrstvy by sa otvorilo pod ňou a návštevník
   by videl, že klik „nič nerobí". */
#dokModal{z-index:500}

/* Kto vedie v aukcii — bez toho je z ceny len číslo bez príbehu. */
.auk-vedie{margin-top:6px;font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:6px}
.auk-vedie.ja{color:var(--up);font-weight:600}


/* Vstupné pole v potvrdzovacom okne (náhrada za prompt). */
.potvrd-vstup{width:100%;margin:10px 0 4px;font:inherit;font-size:.92rem;padding:10px 12px;
  border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--txt);resize:vertical}
.potvrd-vstup:focus{outline:none;border-color:var(--acc)}

/* =====================================================================
   RESTOCK CENTER
   Stavia na existujúcich premenných a tvaroch portálu — žiadna nová
   paleta ani nové rádiusy, len usporiadanie pre hustý dátový výpis.
   ===================================================================== */
.rest-hlava{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.rest-hlava h2{display:flex;align-items:center;gap:10px;margin:0 0 4px}

.rest-hladaj-rad{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.rest-filtre{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.rest-hladaj{flex:1 1 240px;min-width:180px}

/* Deväť rozbaľovacích políčok zaberalo na telefóne pol obrazovky, preto sa
   zbaľujú. Zbalený stav je `display:none` — animovať výšku zoznamu, ktorý
   sa zalamuje do neznámeho počtu riadkov, sa nedá spoľahlivo. */
.rest-filtre.zbalene{display:none}
.rest-prepinac{white-space:nowrap}
.rest-prepinac .pi-icon:last-child{transition:transform .18s ease}
.rest-prepinac.otvorene .pi-icon:last-child{transform:rotate(180deg)}
.rest-pocitadlo{display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--acc);color:#fff;font-size:11px;font-weight:700;line-height:1}
.rest-filter{flex:0 1 auto;max-width:190px}
.rest-pocet{font-size:.8rem;color:var(--faint);margin:2px 0 8px}

/* ---------- karta produktu ----------
   Tvar vychádza z oznamov, aké chodia na Discorde: farebný pás podľa
   stavu, názov ako odkaz priamo do obchodu, značka „prečo je to tu"
   a tri fakty vedľa seba (stav, obchod, cena). Riadok s dvoma číslami
   po stranách sa čítal horšie — pri prezeraní na telefóne sa nedalo
   na prvý pohľad povedať, čo sa vlastne stalo. */
.rest-karta{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:start;
  padding:12px 14px 12px 16px;margin-bottom:8px;border:1px solid var(--line);border-radius:var(--r-s);
  border-left:3px solid var(--line2);background:var(--panel);cursor:pointer;
  transition:border-color .15s,transform .15s,background .15s}
.rest-karta.up{border-left-color:var(--up)}
.rest-karta.gold{border-left-color:var(--gold)}
.rest-karta.down{border-left-color:var(--down)}
.rest-karta:hover{border-color:var(--acc);transform:translateY(-1px);background:var(--sheen),var(--panel)}
.rest-karta:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* Neviditeľný odkaz cez celú kartu — klik kdekoľvek vedie do obchodu.
   Tlačidlá vpravo si vlastnou vrstvou udržia prednosť. */
.rest-plocha{position:absolute;inset:0;z-index:1;border-radius:inherit;text-decoration:none}
.rest-plocha:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.rest-karta .rest-akcie{position:relative;z-index:2}

/* Tri pohľady na tie isté dáta. Podčiarknutie namiesto rámčeka —
   rovnaká reč ako záložky inde na portáli. */
/* Koľko ľudí je práve na portáli. Zámerne drobné a bez rámčeka — je to
   znamenie „žije to tu", nie štatistika, a nemá súťažiť s pozdravom. */
.dom-online{display:inline-flex;align-items:center;gap:5px;margin-left:10px;
  font-size:.7rem;font-weight:700;color:var(--up);vertical-align:middle;
  padding:2px 8px;border-radius:999px;background:rgba(74,222,128,.12)}
.dom-online-bod{width:6px;height:6px;border-radius:50%;background:var(--up);
  box-shadow:0 0 0 3px rgba(74,222,128,.18)}

.rest-rezimy{display:flex;gap:2px;margin-bottom:12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.rest-rezim{padding:9px 14px;border:0;border-bottom:2px solid transparent;background:transparent;
  color:var(--muted);font-size:.86rem;font-weight:600;cursor:pointer;transition:color .15s,border-color .15s}
.rest-rezim:hover{color:var(--txt)}
.rest-rezim.on{color:var(--txt);border-bottom-color:var(--acc)}

/* Dlaždica zlúčeného produktu — jeden riadok na produkt, nie na obchod. */
.rest-skupina{display:grid;grid-template-columns:56px minmax(0,1fr) auto 16px;gap:12px;align-items:center;
  padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);
  margin-bottom:8px;cursor:pointer;transition:border-color .15s,transform .1s}
.rest-skupina:hover{border-color:var(--acc);transform:translateY(-1px)}
/* Obrázok musí vyplniť svoj stĺpec, nie mať vlastnú pevnú veľkosť —
   .rest-obrazok je 64 px, stĺpec 56 (na mobile 44) a rozdiel pretekal
   do textu, takže sa názov prekrýval s fotkou. */
.rest-skupina .rest-obrazok{width:100%;height:auto;aspect-ratio:1;min-width:0;flex:0 0 auto}
.rest-skupina-hlavne{min-width:0}
.rest-skupina-cena{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.rest-skupina-cena b{font-size:1.05rem}
.rest-usporis{color:var(--up);font-weight:700}

/* Zoznam obchodov v detaile — najlacnejší zvýraznený, vypredané stlmené. */
.rest-ponuky{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.rest-ponuka{display:grid;grid-template-columns:26px minmax(0,1fr) auto auto;gap:10px;align-items:center;
  padding:9px 10px;border:1px solid transparent;border-radius:10px;text-decoration:none;color:inherit;
  transition:background .15s,border-color .15s}
.rest-ponuka:hover{background:rgba(255,255,255,.04);border-color:var(--line)}
.rest-ponuka.najlacnejsia{border-color:color-mix(in oklab,var(--up) 45%,var(--line));
  background:color-mix(in oklab,var(--up) 9%,transparent)}
.rest-ponuka.vypredana{opacity:.5}
.rest-ponuka-obchod{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.rest-ponuka-obchod small{color:var(--muted);font-size:.72rem}
.rest-ponuka-cena{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.rest-ponuka-cena small{color:var(--muted);font-size:.72rem}

/* Náhrada za chýbajúce logo — iniciály obchodu. */
.rest-logo.nahrada{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:5px;background:var(--sheen),rgba(255,255,255,.07);
  color:var(--muted);font-size:.6rem;font-weight:800;letter-spacing:-.02em}

@media (max-width:640px){
  /* ---------- katalóg kompaktnejšie ----------
     Dlaždica setu mala obrázok karty vedľa textu a oba si brali plnú
     šírku, takže na obrazovku sa zmestili dva sety a medzi nimi zívalo
     miesto. Užšie stĺpce, menší obrázok a text na jeden riadok. */
  .kat-mriezka{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
  .kat-pokemon{padding:9px;gap:3px}
  .kat-obrazok{padding:2px 0}
  .kat-obrazok img{width:96px}
  .kat-karty{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}
  .kat-karta{padding:6px;gap:2px}
  .kat-k-riadok{font-size:.7rem}
  .kat-k-meno{font-size:.72rem}
  .kat-k-rarita,.kat-k-set{font-size:.62rem}
  .kat-set{padding:9px;gap:9px}
  .kat-set-logo{width:40px;height:28px}
  .kat-set-logo img{max-width:40px;max-height:28px}
  .kat-set-info b{font-size:.84rem}
  .kat-set-info i{font-size:.7rem}
  .kat-set-hlava{margin-bottom:6px}

  .rest-skupina{grid-template-columns:44px minmax(0,1fr) auto;gap:9px}
  .rest-skupina > svg:last-child{display:none}
  .rest-ponuka{grid-template-columns:22px minmax(0,1fr) auto;gap:8px}
  .rest-ponuka .rest-stav{display:none}

  /* ---------- kompaktná dlaždica na telefóne ----------
     Na širokej obrazovke sú tri fakty vedľa seba s nadpismi STAV /
     OBCHOD / CENA. Na telefóne sa preložili pod seba a jeden produkt
     zabral celú obrazovku — človek videl dva kusy a nič viac.

     Tu je z toho jeden riadok bez nadpisov: obchod, cena, stav. Nadpisy
     sú aj tak zbytočné, zelená bodka a „Kč" hovoria samy za seba. */
  .rest-karta{grid-template-columns:52px minmax(0,1fr);gap:10px;padding:10px 12px;
    grid-template-areas:"obr telo" "akcie akcie"}
  .rest-karta > .rest-obrazok{grid-area:obr;width:52px;height:52px}
  .rest-karta > .rest-telo{grid-area:telo}
  .rest-karta > .rest-akcie{grid-area:akcie;justify-content:flex-end;margin-top:2px}

  .rest-titul{font-size:.9rem;line-height:1.3;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

  .rest-fakty{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:5px}
  .rest-fakt{display:inline-flex;align-items:baseline;gap:4px}
  .rest-fakt dt{display:none}
  .rest-fakt dd{margin:0;font-size:.8rem}
  .rest-cena{font-size:.95rem}

  /* Značka a odznak vedľa seba, nie každý na vlastnom riadku. */
  .rest-hlava{gap:6px}
  .rest-znacka{margin-top:2px;font-size:.72rem}
  .rest-hot{font-size:.65rem;padding:1px 6px}

  .rest-pata{margin-top:6px;padding-top:5px;font-size:.7rem;gap:6px}
  .rest-pata .jemne{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
  .rest-srdce{width:30px;height:30px}
}

/* Prepínač krajiny — kto zbiera na Slovensku, nechce české obchody. */
.rest-krajiny{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.rest-krajina{padding:7px 14px;border:1px solid var(--line);border-radius:999px;
  background:transparent;color:var(--muted);font-size:.82rem;font-weight:600;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s}
.rest-krajina:hover{border-color:var(--acc);color:var(--txt)}
.rest-krajina.on{border-color:var(--acc);color:var(--txt);background:var(--sheen),rgba(255,255,255,.04)}

.rest-obrazok{width:64px;height:64px;display:flex;align-items:center;justify-content:center;
  border-radius:10px;background:rgba(255,255,255,.04);color:var(--faint);overflow:hidden}
.rest-obrazok img{max-width:100%;max-height:100%;object-fit:contain}

.rest-telo{min-width:0}
.rest-hlava{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rest-titul{font-weight:700;font-size:.95rem;color:var(--acc-l);text-decoration:none}
a.rest-titul:hover{text-decoration:underline}

.rest-znacka{display:inline-flex;align-items:center;gap:6px;margin-top:4px;
  font-size:.75rem;font-weight:700;color:var(--muted)}
.rest-znacka.nova{color:var(--up)}
.rest-znacka.znovu{color:var(--acc-l)}
.rest-znacka.cena{color:var(--gold)}
.rest-znacka.prec{color:var(--down)}

/* Tri fakty vedľa seba. `auto-fit` ich na úzkej obrazovke sám preloží
   pod seba, takže netreba druhý breakpoint. */
.rest-fakty{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
  gap:4px 16px;margin:8px 0 0}
.rest-fakt dt{font-size:.68rem;text-transform:uppercase;letter-spacing:.4px;color:var(--faint)}
.rest-fakt dd{margin:2px 0 0;font-size:.85rem;font-weight:600;display:flex;align-items:center;gap:5px}
.rest-fakt dd.up{color:var(--up)} .rest-fakt dd.gold{color:var(--gold)} .rest-fakt dd.down{color:var(--down)}

.rest-pata{display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;margin-top:8px;padding-top:7px;border-top:1px solid var(--line);font-size:.75rem}
.rest-logo{width:16px;height:16px;object-fit:contain;border-radius:4px}
.rest-hot{font-size:.7rem;font-weight:800;letter-spacing:.3px;padding:2px 8px;border-radius:999px;
  color:#ff9f43;border:1px solid rgba(255,159,67,.45);background:rgba(255,159,67,.12)}
.rest-skore{letter-spacing:1px;color:var(--gold);font-size:.78rem}
.rest-skore i{color:var(--line2);font-style:normal}
.rest-cas{font-size:.75rem;color:var(--faint);white-space:nowrap}
.rest-cena{font-weight:800;font-size:1rem;font-variant-numeric:tabular-nums}

.rest-akcie{display:flex;align-items:center;gap:6px}
.rest-srdce{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--faint);cursor:pointer}
.rest-srdce:hover{border-color:var(--acc);color:var(--txt)}
.rest-srdce.on{color:#ff6fae;border-color:rgba(255,111,174,.5);background:rgba(255,111,174,.12)}

/* ---------- skeleton ---------- */
.rest-karta.kostra{grid-template-columns:1fr;cursor:default;pointer-events:none;border-left-color:var(--line)}
.kostra-blok{display:block;height:48px;border-radius:10px;
  background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.09),rgba(255,255,255,.04));
  background-size:200% 100%;animation:kostraPohyb 1.2s ease-in-out infinite}
@keyframes kostraPohyb{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---------- rebríčky ---------- */
.rest-trending{display:flex;flex-direction:column;gap:14px;margin-bottom:18px}
.rest-trend-rad{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.rest-trend-rad::-webkit-scrollbar{display:none}
.rest-trend-karta{flex:0 0 168px;display:flex;flex-direction:column;gap:5px;padding:10px;text-align:left;
  border:1px solid var(--line);border-radius:12px;background:transparent;color:inherit;font:inherit;cursor:pointer}
.rest-trend-karta:hover{border-color:var(--acc)}
.rest-trend-obr{height:56px;display:flex;align-items:center;justify-content:center;color:var(--faint)}
.rest-trend-obr img{max-height:56px;max-width:100%;object-fit:contain}
.rest-trend-nazov{font-size:.82rem;font-weight:700;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rest-trend-sub{font-size:.72rem;color:var(--faint)}

.rest-strankovanie{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px;font-size:.85rem}

/* ---------- detail ---------- */
.rest-modal{max-width:820px;width:min(820px,94vw)}
.rest-detail-hlava{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.rest-detail-obr{width:120px;height:120px;flex:none;display:flex;align-items:center;justify-content:center;
  border-radius:12px;background:rgba(255,255,255,.04);color:var(--faint);overflow:hidden}
.rest-detail-obr img{max-width:100%;max-height:100%;object-fit:contain}
.rest-detail-hlava h3{margin:0 0 4px}
.rest-detail-riadok{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:8px 0}
.rest-detail-cena{font-size:1.25rem;font-weight:800;font-variant-numeric:tabular-nums}
.rest-detail-akcie{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
/* Kúpiť je hlavná akcia — tvarom sedí k ostatným, farbou vystupuje,
   a `margin-left:auto` ho odsunie na pravý okraj riadka. */
.icon-btn.kup{margin-left:auto;border-color:var(--acc);color:#fff;
  background:linear-gradient(160deg,rgba(255,255,255,.24),rgba(255,255,255,0) 45%),var(--acc)}
.icon-btn.kup:hover{filter:brightness(1.1);border-color:var(--acc)}
/* V dlaždici výpisu je akcií málo a sú vpravo — tam by odsun nič neriešil. */
.rest-akcie .icon-btn.kup{margin-left:0}
@media (max-width:560px){ .icon-btn.kup{margin-left:0;flex:1 1 100%;justify-content:center} }

.rest-udaje{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:16px}
/* Malé údajové dlaždice v detaile. Volali sa .rest-karta rovnako ako
   dlaždica produktu vo výpise — tá je mriežka o troch stĺpcoch, takže
   sa nadpis s hodnotou prekrývali. Vlastné meno to rieši natrvalo. */
.rest-udaj{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg2);
  display:flex;flex-direction:column;gap:2px;min-width:0}
.rest-udaj.mam{border-color:rgba(74,222,128,.4);background:rgba(74,222,128,.07)}
.rest-udaj .lbl{font-size:.68rem;text-transform:uppercase;letter-spacing:.4px;color:var(--faint)}
.rest-udaj-hodnota{font-size:1.3rem;font-weight:800;line-height:1.15;overflow-wrap:anywhere}
.rest-udaj .jemne{font-size:.74rem;line-height:1.35;overflow-wrap:anywhere}

.rest-graf{display:flex;align-items:flex-end;gap:4px;height:96px;margin-top:8px;padding:8px 6px 0;
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-s)}
.rest-graf-stlpec{flex:1 1 0;height:100%;display:flex;align-items:flex-end}
.rest-graf-bar{width:100%;border-radius:4px 4px 0 0;min-height:3px;
  background:linear-gradient(180deg,var(--acc-l),var(--acc))}
.rest-graf-popis{display:flex;justify-content:space-between;font-size:.7rem;color:var(--faint);margin-top:4px}

.rest-tabulka-obal{max-height:280px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--r-s);margin-top:8px}
.rest-tabulka{width:100%;border-collapse:collapse;font-size:.82rem}
.rest-tabulka th{position:sticky;top:0;background:var(--panel);text-align:left;font-weight:700;
  padding:8px 10px;border-bottom:1px solid var(--line);color:var(--muted)}
.rest-tabulka td{padding:7px 10px;border-bottom:1px solid var(--line)}
.rest-tabulka tr:last-child td{border-bottom:0}

.rest-inde{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.rest-inde-riadok{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;
  padding:8px 11px;border:1px solid var(--line);border-radius:10px;background:transparent;
  color:inherit;font:inherit;text-align:left;cursor:pointer}
.rest-inde-riadok:hover{border-color:var(--acc)}

/* ---------- živý pás na dashboarde ---------- */
  padding:6px 8px;border-radius:9px;border:1px solid transparent;background:transparent;
  color:inherit;font:inherit;text-align:left;cursor:pointer}

/* ---------- mobil ---------- */
@media(max-width:900px){
  .dom-hlava{grid-template-columns:1fr}
  .rest-karta{grid-template-columns:52px minmax(0,1fr);gap:10px;padding:10px 10px 10px 12px}
  .rest-obrazok{width:52px;height:52px}
  .rest-akcie{grid-column:1/-1;justify-content:flex-end}
  .rest-filter{max-width:none;flex:1 1 46%}
  .rest-detail-obr{width:88px;height:88px}
}

/* ---------- našepkávač zapečatených produktov ----------
   Ponuka sa prekrýva cez formulár, preto position:absolute nad ním —
   inak by odtláčala polia a formulár by pri každom písmene poskakoval. */
.napoved{position:relative}
.napoved-zoznam{position:absolute;left:0;right:0;top:100%;z-index:40;margin-top:4px;
  max-height:min(46vh,340px);overflow-y:auto;overscroll-behavior:contain;
  background:#171321;border:1px solid var(--line2);border-radius:var(--r-s);
  box-shadow:var(--shadow)}
.napoved-polozka{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nazov cena" "sub cena";
  gap:2px 10px;width:100%;text-align:left;padding:9px 12px;background:none;border:0;
  border-bottom:1px solid var(--line);color:var(--txt);font:inherit;cursor:pointer}
.napoved-polozka:last-child{border-bottom:0}
.napoved-polozka:hover,.napoved-polozka.on{background:var(--panel2)}
.napoved-nazov{grid-area:nazov;font-weight:700;font-size:.85rem;line-height:1.3}
.napoved-sub{grid-area:sub;display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.74rem}
.napoved-cena{grid-area:cena;align-self:center;font-weight:800;font-size:.86rem;white-space:nowrap}
.napoved-prazdne{padding:11px 12px;color:var(--muted);font-size:.8rem}

/* Typ zapečateného produktu sa nevyberá — je súčasťou názvu a odvodí sa
   z neho. V režime karty ostáva („Druh karty": Raw / Graded). */
body.mode-sealed #aTypeField{display:none}
body.mode-sealed #aSetTypeRow{grid-template-columns:minmax(0,1fr)}

/* Skončené aukcie: archív, nie výklad.

   Prečo to prvý pokus nespravil: #aukcieMriezka je sám .inz-mriezka a
   blok „Moje aukcie" (.auk-moje) v ňom sedel ako JEDNA bunka široká
   ~350 px — všetko vnútri sa tlačilo do jedného stĺpca a zvyšok stránky
   zostal prázdny. Blok sa preto roztiahne cez všetky stĺpce vonkajšej
   mriežky. A fotka: .inz-foto má pevný štvorec (aspect-ratio 1/1),
   takže max-height na <img> vnútri box nezmenšil — obmedziť treba box. */
.auk-moje{grid-column:1/-1}
.auk-skoncene .inz-foto{aspect-ratio:auto;height:110px}
.auk-skoncene .inz-foto img{height:100%;object-fit:cover}
.auk-skoncene .auk-karta{font-size:.82rem}
.auk-skoncene .auk-cena{font-size:1.05rem}

/* Graf investícií sa rozťahoval na celú šírku obsahu — SVG má pomer
   600:200 a width:100 %, takže na širokom monitore z neho bola stena
   cez pol obrazovky a písmo v ňom sa škálovalo do obrích rozmerov.
   Panel sa zastropuje; všetky funkcie (rozsah, aktualizácia, série)
   ostávajú, mení sa výhradne veľkosť. */
/* Graf investícií je prehľad, nie hlavný obsah stránky — na širokom
   monitore sa rozťahoval cez celú plochu a odtláčal zoznam položiek
   pod okraj obrazovky. Zastropovaná šírka aj menšie odsadenie. */
#invHistoryPanel{max-width:660px;padding:12px 14px}
#invHistoryPanel h2{font-size:1rem}
#invHistoryPanel .chart-keys{margin-top:8px;gap:5px}
#invHistoryPanel .ckey{font-size:.7rem;padding:4px 9px}

/* Vysvetlenie pod „Zatiaľ vedieš". Proxy aukcia je správna, ale mätúca:
   človek dá maximum 25 € a cena ostane na 20 € — a myslí si, že je to
   chyba. Preto sa rovno napíše, čo v tej chvíli naozaj platí. */
.auk-vediem-vysvetlenie{display:block;margin-top:4px;font-weight:400;font-size:.78rem;opacity:.85;line-height:1.4}

/* ---------- overenie účtu ---------- */
.ov-hotovo{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-s);
  border:1px solid rgba(74,222,128,.4);background:rgba(74,222,128,.07);color:var(--txt);font-size:.86rem}
.ov-hotovo > div{flex:1;min-width:0}
.ov-hotovo .jemne{font-size:.76rem;color:var(--muted)}
/* Odznak overeného účtu — vedľa odznaku dôvery pri predajcovi. */
.stitok.overeny{border-color:rgba(74,222,128,.45);color:var(--up)}

/* Hlavička Profilu a nastavení ostáva na mieste pri posúvaní.
   Matej hlási, že v niektorých kartách chýba tlačidlo na vrátenie —
   v skutočnosti tam „Zavrieť" je, ale odscrolluje sa preč a v dlhom
   formulári (napr. zmena hesla) sa k nemu človek nedostane bez cesty
   späť nahor. Sklo pod ním, nech text pod hlavičkou nepresvitá. */
#profileModal .profil-hlavicka{position:sticky;top:0;z-index:6;
  margin:-18px -18px 0;padding:14px 18px 12px;
  background:rgba(20,16,29,.92);
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid var(--line);border-radius:var(--r) var(--r) 0 0}

/* ---------- rotujúci pruh na dashboarde (magazín ↔ fórum) ----------
   Okno má výšku práve zobrazeného listu a tá sa animuje spolu s
   posunom — inak by pri rôzne vysokom obsahu ostávalo prázdne miesto
   alebo by sa spodok orezal. */
.dom-widget-okno{overflow:hidden;transition:height .9s cubic-bezier(.4,0,.2,1)}
.dom-widget-pas{display:flex;flex-direction:column;
  transition:transform .9s cubic-bezier(.4,0,.2,1);will-change:transform}
.dom-widget-list{flex:none}
.dom-widget-ovladanie{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.dom-widget-bodky{display:flex;gap:5px}
.dom-widget-bodka{width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--line2);transition:background .2s,transform .2s}
.dom-widget-bodka.on{background:var(--acc-l);transform:scale(1.25)}
.dom-widget-bodka:hover{background:var(--acc)}
/* Téma fóra je dvojriadková — názov a pod ním kategória s počtom. */
.dom-widget-tema{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left}
.dom-widget-tema small{color:var(--faint);font-size:.7rem}
@media(prefers-reduced-motion:reduce){
  .dom-widget-okno,.dom-widget-pas{transition:none}
}

/* „Zatiaľ vedieš" je pri aukcii to najpodstatnejšie — kto vedie, vie
   hneď, či má konať. Preto väčšie a výraznejšie než ostatné pásy. */
.auk-vediem-pas{font-size:1rem;font-weight:800;padding:10px 12px;gap:8px}
.auk-prebity-pas{font-size:.95rem;font-weight:700}

/* Približný prepočet pod cenou aukcie. Menší a tlmený zámerne — je to
   pomôcka na predstavu, nie suma, ktorú niekto zaplatí. */
.auk-prepocet{font-size:.78rem;color:var(--faint);margin-top:2px}

/* ---------- Restock: prémiový zámok ---------- */
.rest-premium{max-width:520px;margin:26px auto;text-align:center;
  background:var(--sheen),var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:34px 30px;backdrop-filter:blur(var(--blur)) saturate(160%)}
.rest-premium-zamok{width:72px;height:72px;margin:0 auto 14px;border-radius:22px;
  display:flex;align-items:center;justify-content:center;color:var(--gold);
  background:rgba(245,196,81,.12);border:1px solid rgba(245,196,81,.35)}
.rest-premium h3{font-size:1.25rem;margin-bottom:8px}
.rest-premium p{color:var(--muted);line-height:1.45}
.rest-premium ul{list-style:none;margin:16px 0;padding:0;text-align:left;display:inline-block}
.rest-premium li{display:flex;align-items:center;gap:10px;padding:5px 0;color:var(--txt)}
/* Restock pred spustením: účet bez prémia sekciu v navigácii vôbec
   nevidí (horná lišta aj mobilná/panel Viac). Server dáta aj tak nevydá;
   priamy odkaz /restock ukáže zdvorilý teaser. Triedu nastavuje
   prihlásenie; správca ju nemá, takže sekciu vidí normálne. */
body.bez-restock #nav [data-tab="restock"],
body.bez-restock [data-tab="restock"],
body.bez-restock [data-sl-tab="restock"]{display:none !important}

/* Ikony v dlaždiciach inzerátov — drobné mierky k drobnému textu.
   Volania majú historicky 18 px; tu ich zrovnáva kontext, nech štítky
   a pätička kariet nepôsobia prerastene (hlavne na telefóne). */
.inz-stitky .pi-icon{width:13px;height:13px}
.inz-pata .pi-icon{width:14px;height:14px}
.inz-pocet-fotiek .pi-icon{width:14px;height:14px}
.inz-hodnotenia .pi-icon{width:14px;height:14px}

/* ---------- Dashboard: okno „Dianie" ---------- */
.dom-karta-dna{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:10px 12px;
  cursor:pointer;font:inherit;color:var(--txt);transition:.15s}
.dom-karta-dna:hover{border-color:var(--acc);transform:translateY(-1px)}
.dom-karta-dna img{height:86px;width:auto;border-radius:6px;flex:none;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
.dkd-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.dkd-text small{color:var(--gold);font-size:.66rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase}
.dkd-text b{font-size:.95rem}
.dkd-text span{color:var(--muted);font-size:.76rem}
.dom-predane-riadok{display:flex;align-items:center;gap:8px;padding:6px 2px;font-size:.8rem;
  border-bottom:1px solid var(--line)}
.dom-predane-riadok:last-child{border-bottom:0}
.dp-nazov{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dp-cena{font-weight:800;color:var(--up);flex:none}
.dp-kedy{color:var(--faint);font-size:.7rem;flex:none}

/* Najnovší článok magazínu v okne „Dianie" na dashboarde. */
.dom-mag-clanok{display:flex;align-items:center;gap:10px;padding:8px 10px;margin-top:2px;
  background:var(--bg2);border:1px solid var(--line);border-radius:12px;
  color:var(--txt);text-decoration:none;font-size:.82rem;transition:.15s}
.dom-mag-clanok:hover{border-color:var(--acc);transform:translateY(-1px)}
.dmc-ik{font-size:1.1rem;flex:none}
.dmc-titulok{flex:1;min-width:0;font-weight:600;line-height:1.3}

/* Magazínové okno na dashboarde — celý článok, scrolluje sa vo vnútri. */
.dom-mag-hlava{display:flex;align-items:center;gap:10px;padding:2px 2px 8px}
.dmc-meta{display:flex;flex-direction:column;flex:1;min-width:0}
.dmc-meta small{color:var(--gold);font-size:.64rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase}
.dmc-meta span{color:var(--faint);font-size:.72rem}
.dom-mag-telo{max-height:340px;overflow-y:auto;padding:2px 10px 2px 2px;
  border:1px solid var(--line);border-radius:12px;background:var(--bg2)}
.dom-mag-telo h1{font-size:1.02rem;line-height:1.35;margin:10px 8px 6px}
.dom-mag-telo h2{font-size:.86rem;margin:14px 8px 4px;color:var(--acc-l)}
.dom-mag-telo p{font-size:.8rem;line-height:1.55;color:var(--muted);margin:6px 8px}
.dom-mag-telo ul{margin:6px 8px 6px 24px;font-size:.8rem;line-height:1.5;color:var(--muted)}
.dom-mag-telo li{margin:3px 0}
.dom-mag-telo strong{color:var(--txt)}
.dom-mag-telo .tip{margin:10px 8px;padding:9px 11px;border:1px solid rgba(245,196,81,.35);
  border-radius:10px;background:rgba(245,196,81,.07);font-size:.78rem;line-height:1.5}
.dom-mag-telo a{color:var(--acc-l)}
.dom-mag-telo .mg-obr{margin:10px 8px;text-align:center}
.dom-mag-telo .mg-obr img{max-width:min(220px,100%);border-radius:10px}
.dom-mag-telo .mg-obr figcaption{font-size:.68rem;color:var(--faint);margin-top:4px}

/* Magazínové okno bez tabov — článok dostáva celú výšku panela. */
.dom-mag-telo.velke{max-height:540px}

/* Magazínové okno: panel drží SVOJU veľkosť, článok scrolluje len
   vo vnútri tela. Strop 295/185px starých výsledkov hľadania prebíja
   ID aj v mobilných media pravidlách — ale pevným číslom, žiadny flex,
   nech dĺžka článku nikdy nenafúkne panel. */
/* Výšku panela určuje mriežka (sused Portfólio) — vnútro ju NESMIE
   zväčšovať, len vyplniť: flex-basis 0 + min-height znamenajú, že telo
   do intrinsic výšky riadku neprispieva nič navyše, a keď panel dostane
   od mriežky viac, telo sa natiahne po jeho spodok a scrolluje vnútri. */
.dom-katalog{display:flex;flex-direction:column;min-height:0}
#domDianie{max-height:none;flex:1 1 0;min-height:0;overflow:hidden}
.dom-mag-telo.velke{flex:1 1 0;height:0;min-height:200px;max-height:none}

/* ---------- Záloha len pre správcu ---------- */
body:not(.je-admin) [data-nast="data"],
body:not(.je-admin) [data-nast-tab="data"]{display:none !important}

/* ---------- plynulé vstupy panelov a okien ----------
   Panely sa doteraz len „zjavili" (display prepínač) — so silným blur
   pozadím to pôsobilo sekane. Krátky transform+opacity vstup beží na
   GPU a pôsobí natívne; kto má vypnuté animácie, nedostane žiadnu. */
@keyframes vstup-zhora{from{opacity:0;transform:translateY(-8px) scale(.985)}to{opacity:1;transform:none}}
@keyframes vstup-okna{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes vstup-pozadia{from{opacity:0}to{opacity:1}}
.upoz-panel.on{animation:vstup-zhora .26s cubic-bezier(.32,.72,.28,1);transform-origin:top right}
.modal-bg.on{animation:vstup-pozadia .22s ease}
.modal-bg.on .modal{animation:vstup-okna .3s cubic-bezier(.32,.72,.28,1)}
@media(prefers-reduced-motion:reduce){
  .upoz-panel.on,.modal-bg.on,.modal-bg.on .modal{animation:none}
}

/* ---------- dotykové zariadenia: hover sa neprilepuje ----------
   Na mobile ostáva :hover „visieť" po ťuknutí (prst neodíde ako myš) —
   zvonček a správy tak po otvorení panela svietili inou farbou. Na
   zariadeniach bez ozajstného hoveru sa preto hover štýl nepoužije;
   spätnú väzbu ťuknutia dáva :active. */
@media (hover: none){
  .icon-btn:hover{border-color:var(--line2);color:var(--acc-xl);transform:none}
  .icon-btn:hover .pi-icon{transform:none}
  .icon-btn:active{border-color:var(--acc);color:#fff}
}

/* ---------- a11y dolaďovačky ---------- */
/* ✕ na zmazanie: už je to button — vynulovať button vzhľad a ukázať ho
   aj z klávesnice a na dotyku (hover-only bol pre oboch neviditeľný). */
button.chat-vlakno-zmaz{background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:2px 6px}
.chat-zmaz:focus-visible{opacity:1}
@media (hover: none){ .chat-zmaz{opacity:.55} }
.chat-vlakno-zmaz:focus-visible,.inz-srdce:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* Bezpečnostný pruh v konverzácii s inzerátom — nenápadný, ale stály. */
.chat-bezpecie{display:flex;align-items:center;gap:7px;padding:7px 12px;font-size:.72rem;
  color:var(--gold);background:rgba(245,196,81,.07);border-bottom:1px solid var(--line)}




/* ---------- Azgard zeleň: verejná tvár + voliteľná téma ----------
   Základ appky je fialový (root). Tyrkysovo-zelený „Azgard" vzhľad platí
   pre hostí (kým sa neprihlásia) a pre každého, kto si ho vyberie ako
   tému vo Vzhľade. Jedna definícia pre oba prípady. */
:is(html:not(.prihlaseny):not([data-tema]), html[data-tema="azgard"]){
  --acc:#17b8a2; --acc-l:#63d9c4; --acc-xl:#d6f5ec;
  --acc-rgb:23,184,162; --acc-hlboka:#0f6153;
  --bg:#0a1310;
  --sklo-rgb:19,33,29; --overlay-rgb:6,13,11;
  --sheet:#122320; --sheet2:#1a332d; --panel-tmavy:#10201b;
  --pozadie-vrch:#060a09; --pozadie-spodok:#0c2620;
  --txt:#eef7f3; --muted:#a9cbc1; --faint:#84ada1;
}
:is(html:not(.prihlaseny):not([data-tema]), html[data-tema="azgard"]) .aurora span:nth-child(3){
  background:radial-gradient(circle at 50% 60%,#4ade80,transparent 72%)}
html:is(:not(.prihlaseny):not([data-tema]),[data-tema="azgard"]) .aurora span:nth-child(1){
  background:radial-gradient(circle at 60% 60%,#17b8a2,transparent 70%)}

/* ---------- Instagram správanie spodnej lišty ----------
   Scroll dole = kompakt (popisky sa zložia, lišta sa stiahne a mierne
   zúži); scroll hore = plná. Trieda .zmensena z mobilna-navigacia.js.
   Animujú sa len transform/opacity/výškové rezervy — žiadny layout jank. */
@media(max-width:900px), (max-height:560px){
  .spodna-lista{transition:padding .28s cubic-bezier(.32,.72,.28,1),
                           left .28s cubic-bezier(.32,.72,.28,1),
                           right .28s cubic-bezier(.32,.72,.28,1)}
  .sl-text{transition:opacity .2s ease,max-height .28s cubic-bezier(.32,.72,.28,1);
           max-height:14px;overflow:hidden}
  .spodna-lista.zmensena{padding:4px 6px !important;left:34px !important;right:34px !important}
  .spodna-lista.zmensena .sl-text{opacity:0 !important;max-height:0 !important}
  .spodna-lista.zmensena .sl-polozka{padding:5px 2px !important;gap:0 !important}
  @media(prefers-reduced-motion:reduce){
    .spodna-lista,.sl-text{transition:none}
  }
}

/* Magazínové okno na telefóne: kratší náhľad s dovybledaným koncom,
   celé okno je ťuknuteľné (otvára článok). */
@media(max-width:900px){
  #domDianie{cursor:pointer}
  .dom-mag-telo.velke{max-height:210px;overflow:hidden;position:relative}
  .dom-mag-telo.velke::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;
    background:linear-gradient(180deg,transparent,var(--bg2))}
}

/* Mobil: sekcie Nastavení cez jedno tlačidlo + sheet — pás chipov preč. */
@media(max-width:700px){
  .nast-menu{display:none}
  .nast-sekcia-vyber{width:100%;justify-content:space-between;padding:11px 14px;font-size:.9rem}
}

/* ---------- pokémon kartičky v pozadí appky ----------
   Žijú v aurora vrstve (z-index -2), takže sú ZA všetkými oknami —
   presklené panely ich rozmazávajú, vidno ich v okrajoch a medzerách.
   Decentné: nízka priehľadnosť + blur, jemné vznášanie. */
.poz-karta{position:absolute;border-radius:4.5% / 3.4%;opacity:.16;filter:blur(1.8px) saturate(1.05);
  box-shadow:0 20px 50px rgba(0,0,0,.5)}   /* bez animácie — 8 rozmazaných vrstiev v pohybe stálo desktop tretinu snímkov */
@keyframes poz-vznasanie{0%,100%{transform:translateY(0) rotate(var(--otoc,0deg))}
  50%{transform:translateY(-16px) rotate(var(--otoc,0deg))}}
.poz-karta.pk1{--otoc:-10deg;width:190px;top:9%;left:-52px}
.poz-karta.pk2{--otoc:9deg;width:170px;top:14%;right:-44px;animation-delay:-5s}
.poz-karta.pk3{--otoc:-7deg;width:150px;bottom:6%;left:4%;opacity:.12;filter:blur(2.6px);animation-delay:-11s}
.poz-karta.pk4{--otoc:12deg;width:150px;bottom:10%;right:5%;opacity:.13;filter:blur(2.4px);animation-delay:-8s}
/* na telefóne okraje nie sú — kartičky by liezli pod obsah */
@media(max-width:900px){.poz-karta{display:none}}
@media(prefers-reduced-motion:reduce){.poz-karta{animation:none}}

/* Mobil: jednostĺpcové rozloženie panel nenaťahuje — flex-basis 0 by
   magazínové okno zbalil na nulu (prázdny panel, nedá sa ťuknúť).
   Na telefóne preto rastie z obsahu; výšku stráži telo (210px + fade). */
@media(max-width:900px){
  #domDianie{flex:0 0 auto;min-height:0;overflow:visible}
}

/* ďalšie kartičky pozadia appky — stredové pásma, hlbšie vrstvy */
.poz-karta.pk5{--otoc:6deg;width:135px;top:44%;left:-38px;opacity:.11;filter:blur(2.8px);animation-delay:-3s}
.poz-karta.pk6{--otoc:-9deg;width:140px;top:40%;right:-36px;opacity:.12;filter:blur(2.6px);animation-delay:-13s}
.poz-karta.pk7{--otoc:11deg;width:110px;top:66%;left:12%;opacity:.10;filter:blur(3.2px);animation-delay:-9s}
.poz-karta.pk8{--otoc:-13deg;width:120px;top:62%;right:13%;opacity:.10;filter:blur(3px);animation-delay:-16s}

/* Kartičky pozadia vľavo sa posúvajú s bočným panelom — panel je fixný
   nepriehľadný pás, karty pod ním nebolo vidno. Keď je panel otvorený
   (široká obrazovka, bez .panel-zbaleny), ľavé kotvy sa odsadia o jeho
   272 px; po zbalení sa vrátia k okraju. Prechod nech ladí s panelom. */
.poz-karta{transition:left .25s ease}
@media(min-width:1180px) and (min-height:561px){
  body:not(.panel-zbaleny) .poz-karta.pk1{left:calc(272px - 52px)}
  body:not(.panel-zbaleny) .poz-karta.pk3{left:calc(272px + 4%)}
  body:not(.panel-zbaleny) .poz-karta.pk5{left:calc(272px - 38px)}
  body:not(.panel-zbaleny) .poz-karta.pk7{left:calc(272px + 12%)}
}

/* ================= SHEET 2.0 — moderný grouped štýl =================
   Namiesto naukladaných orámovaných boxov jedna tichá skupina: kompaktné
   riadky s hairline deliacimi čiarami, mäkké dlaždice ikon, aktívna
   voľba len jemným akcentovým nádychom + fajkou. Vstup má pružinu
   a položky nabiehajú postupne. Prebíja pôvodné .rp-volba pravidlá. */
.sheet{transition:transform .42s cubic-bezier(.34,1.15,.32,1)}
.sheet-hlava{padding:6px 20px 8px}
.sheet-hlava h3{font-size:1rem;letter-spacing:.2px}
.sheet-hlava .icon-btn{padding:6px;border-radius:10px;background:var(--sheet2);border-color:transparent}
.sheet-telo{padding:2px 10px 18px}
.sheet-telo .rp-volba{background:transparent;border:0;border-radius:12px;padding:11px 10px;transition:background .15s}
.sheet-telo .rp-volba+.rp-volba{margin-top:0}
.sheet-telo .rp-volba+.rp-volba::before{content:none}
.sheet-telo .rp-volba:not(:first-child){position:relative}
.sheet-telo .rp-volba:not(:first-child)::after{content:"";position:absolute;left:58px;right:10px;top:0;
  height:1px;background:var(--line);opacity:.55}
.sheet-telo .rp-volba:hover,.sheet-telo .rp-volba:active{background:var(--panel2);transform:none;border:0}
.sheet-telo .rp-volba.on{background:rgba(var(--acc-rgb),.13);border:0}
.sheet-telo .rp-volba.on::after,.sheet-telo .rp-volba.on+.rp-volba::after{opacity:0}
.sheet-telo .rp-ik{width:36px;height:36px;border-radius:10px;background:rgba(var(--acc-rgb),.14)}
.sheet-telo .rp-ik .pi-icon{width:19px;height:19px}
.sheet-telo .rp-volba b{font-size:.92rem;font-weight:650}
.sheet-telo .rp-volba small{font-size:.74rem}
.sheet-telo .rp-fajka{color:var(--acc-l)}
/* postupný nábeh položiek */
.sheet-overlay .rp-volba{opacity:0}
.sheet-overlay.on .rp-volba{animation:sheet-polozka .34s cubic-bezier(.32,.72,.28,1) both}
.sheet-overlay.on .rp-volba:nth-child(1){animation-delay:.04s}
.sheet-overlay.on .rp-volba:nth-child(2){animation-delay:.07s}
.sheet-overlay.on .rp-volba:nth-child(3){animation-delay:.10s}
.sheet-overlay.on .rp-volba:nth-child(4){animation-delay:.13s}
.sheet-overlay.on .rp-volba:nth-child(5){animation-delay:.16s}
.sheet-overlay.on .rp-volba:nth-child(6){animation-delay:.19s}
.sheet-overlay.on .rp-volba:nth-child(7){animation-delay:.22s}
.sheet-overlay.on .rp-volba:nth-child(8){animation-delay:.25s}
.sheet-overlay.on .rp-volba:nth-child(n+9){animation-delay:.28s}
@keyframes sheet-polozka{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .sheet{transition:transform .2s ease}
  .sheet-overlay .rp-volba{opacity:1}
  .sheet-overlay.on .rp-volba{animation:none}
}

/* ================= Market/Aukcie na mobile — upratané =================
   1) Veľké CTA (Pridať inzerát / Nová aukcia) na telefóne preč — na
      pridávanie je „+" v hlavičke s rýchlymi akciami; kradlo celý riadok.
   2) ZBALENÝ panel filtrov už nie je box v boxe: hľadanie stojí samé ako
      čistá pilulka, sklo panela sa ukáže až po rozbalení filtrov. */
@media(max-width:900px){
  #burzaNovy,#aukcieNova{display:none}
  .burza-filtre.zbalene{background:none;border:0;box-shadow:none;padding:0;
    backdrop-filter:none;-webkit-backdrop-filter:none;margin-top:2px}
  .burza-nastroje{width:100%}
  #burzaRezimVyber,#aukcieRezimVyber{flex:1;min-width:0;justify-content:space-between}
}

/* ---------- rozklikávacie bloky v Nastaveniach ---------- */
.nast-zbal{border:1px solid var(--line);border-radius:14px;margin-bottom:10px;
  background:var(--bg2);overflow:hidden}
.nast-zbal summary{display:flex;align-items:center;gap:10px;padding:13px 14px;
  cursor:pointer;font-weight:700;font-size:.92rem;list-style:none;user-select:none;
  transition:background .15s}
.nast-zbal summary::-webkit-details-marker{display:none}
.nast-zbal summary:hover{background:var(--panel)}
.nast-zbal-sipka{margin-left:auto;color:var(--faint);font-size:1.1rem;
  transition:transform .22s cubic-bezier(.32,.72,.28,1)}
.nast-zbal[open] .nast-zbal-sipka{transform:rotate(90deg)}
.nast-zbal > :not(summary){margin-left:14px;margin-right:14px}
.nast-zbal > :last-child{margin-bottom:14px}

/* „Označiť prečítané" — plnohodnotný odkaz, nie sivá drobnosť. */
.upoz-vsetky{font-weight:800;font-size:.8rem;color:var(--acc-l);text-decoration:underline;
  text-underline-offset:3px}
.upoz-vsetky:hover{color:var(--acc-xl)}

/* ---------- 2FA a overenie e-mailu v Nastaveniach ---------- */
.nast-karta{margin-top:16px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--bg2)}
.nast-karta > b{display:block;font-size:.92rem;margin-bottom:4px}
.nast-karta .hint{margin-bottom:10px}
.dvojfaktor-kluc{font-family:ui-monospace,Menlo,monospace;font-size:1rem;letter-spacing:1px;
  background:var(--sheet);border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  margin:8px 0;word-break:break-all;user-select:all}
.dvojfaktor-zalozne{font-family:ui-monospace,Menlo,monospace;font-size:.92rem;line-height:2;
  background:var(--sheet);border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  word-spacing:10px;user-select:all}

/* ---------- Magazínové okno: vizuálna hlavička (v2) ----------
   Produktové fotky bývajú na výšku s bielym podkladom — absolútne
   umiestnenie ich orezávalo na biele fľaky. Teraz: flex rad, fotky CELÉ,
   výškou prispôsobené bannerú, biely podklad priznaný ako foto-rámik
   s okrajom a jemným naklonením. */
.dom-mag-hero{position:relative;display:flex;align-items:center;justify-content:center;
  flex:none;   /* v flex stĺpci okna sa NESMIE stláčať — inak z neho ostane pásik */
  gap:10px;height:112px;padding:0 16px;border-radius:12px;overflow:hidden;margin-bottom:10px;
  background:
    radial-gradient(420px 170px at 85% 130%, rgba(var(--acc-rgb),.36), transparent 70%),
    linear-gradient(120deg, rgba(var(--acc-rgb),.15), transparent 55%),
    var(--sheet);
  border:1px solid var(--line)}
.dom-mag-stitok{position:absolute;left:12px;top:12px;font-size:.62rem;font-weight:800;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--acc-l);
  background:rgba(var(--acc-rgb),.14);border:1px solid rgba(var(--acc-rgb),.35);
  padding:4px 10px;border-radius:999px}
.dom-mag-hero img{height:86px;width:auto;flex:none;border-radius:8px;
  border:1px solid rgba(255,255,255,.25);background:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.5)}
.dom-mag-hero .dmh-a{transform:rotate(-5deg);z-index:2}
.dom-mag-hero .dmh-b{transform:rotate(6deg);margin-left:-26px;opacity:.95}
.dom-mag-hero .dmh-a.solo{height:94px;transform:rotate(-3deg)}
.dmh-emoji{font-size:3.1rem;transform:rotate(-6deg);
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.45))}
@media(max-width:900px){
  .dom-mag-hero{height:96px}
  .dom-mag-hero img{height:70px}
  .dom-mag-hero .dmh-b{margin-left:-20px}
}

/* Fórum na dashboarde — úryvky posledných príspevkov. */
.dom-prispevok .dom-p-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;font-size:.82rem;line-height:1.35;color:var(--txt);font-weight:400}
.dom-prispevok .dom-p-text b{font-weight:700;color:var(--acc-l)}

/* ---------- prepínač zobrazenia (zoznam / mriežka) ---------- */
.zobraz-prepinac{display:inline-flex;border:1px solid var(--line);border-radius:11px;overflow:hidden;flex:none}
.zp-tlacidlo{display:inline-flex;align-items:center;justify-content:center;width:38px;height:36px;
  background:transparent;border:0;color:var(--faint);cursor:pointer;transition:.15s}
.zp-tlacidlo+.zp-tlacidlo{border-left:1px solid var(--line)}
.zp-tlacidlo:hover{color:var(--txt)}
.zp-tlacidlo.on{background:rgba(var(--acc-rgb),.16);color:var(--acc-l)}

/* Mriežkové zobrazenie kariet — riadky sa preložia na dlaždice:
   veľká fotka hore, texty pod ňou. Čisté CSS nad existujúcim markupom
   (.item / .item-photo / .item-main / .item-right). */
.polozky-mriezka{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.polozky-mriezka .item{flex-direction:column;align-items:stretch;gap:9px;padding:10px}
.polozky-mriezka .item-photo{width:100%;height:180px;border-radius:10px;flex:none}
.polozky-mriezka .item-photo img{width:100%;height:100%;object-fit:contain}
.polozky-mriezka .item-main{min-width:0}
.polozky-mriezka .item-name{font-size:.85rem;line-height:1.25;white-space:normal;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.polozky-mriezka .item-right{text-align:left;margin-left:0}
@media(max-width:700px){.polozky-mriezka{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px}
  .polozky-mriezka .item-photo{height:140px}}
.dom-mag-hero{cursor:pointer}
.dom-mag-hero:hover{border-color:var(--acc)}

/* Prémiové prvky: bez prémia sa nevykresľujú (trieda z loginu). */
body.bez-premium .len-premium{display:none !important}

/* Galéria fotiek v detaile položky. */
.detail-foto-blok{display:flex;flex-direction:column;gap:8px;flex:none}
.detail-nahlady{display:flex;gap:6px;flex-wrap:wrap;max-width:180px}
.detail-nahlad{width:38px;height:38px;border-radius:8px;overflow:hidden;padding:0;
  border:2px solid transparent;background:var(--sheet2);cursor:pointer;flex:none}
.detail-nahlad img{width:100%;height:100%;object-fit:cover;display:block}
.detail-nahlad.on{border-color:var(--acc)}

/* ---------- verejný profil: typografická politúra ---------- */
.pv-zb-cislo strong{font-size:1.35rem;font-weight:800;color:var(--txt)}
.pv-zb-cislo span{font-weight:600;color:var(--muted)}
.pv-zb-cislo.jemne strong{color:var(--faint);font-weight:700}
.stitok.pv-typ{font-weight:600}
.stitok.pv-typ b{color:var(--acc-l);font-weight:800}
/* bio a „zbiera" nech nesú váhu */
.pv-bio{font-size:1.02rem;font-weight:650;color:var(--txt)}
.pv-zbiera-hodnota,.pv-zbiera b{font-weight:700;color:var(--txt)}
/* nadpisy sekcií profilu o stupienok pevnejšie */
#tab-verejny .side-label,.pv-stranka .side-label{font-weight:800;letter-spacing:1px}

/* ---------- spodná lišta: čitateľnosť ----------
   Sklo s alfou .38 sa nad svetlým obsahom strácalo (Správy/Viac splývali).
   Tmavší podklad + plné farby textu; sklenený charakter ostáva. */
.spodna-lista{
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.02) 55%,rgba(255,255,255,.04)),
             rgba(10,8,16,.78) !important;
  border-color:rgba(255,255,255,.22) !important;
}
.sl-polozka{color:#cfc9e2}
.sl-polozka .sl-text{color:inherit;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.sl-polozka .sl-ikona{filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.sl-polozka.on{color:#fff}

/* ---------- hlavička profilového okna: vždy prilepená ---------- */
#profileModal .profil-hlavicka{
  background:rgba(var(--sklo-rgb),.96);
  position:-webkit-sticky;position:sticky;top:0;
}

/* ---------- premium odznak pri mene ---------- */
.stitok.premium,.odznak.premium{color:#ffd166;border-color:rgba(255,209,102,.45);
  background:rgba(255,209,102,.10)}

/* Overenie telefónom je zatiaľ schované — vraciame, keď bude SMS brána ostrá. */
#ovSekcia{display:none !important}

/* ---------- AI podpora: chatové okno ---------- */
.pod-spravy{display:flex;flex-direction:column;gap:8px;overflow-y:auto;
  min-height:220px;max-height:min(48vh,420px);padding:4px 2px;margin:10px 0}
.pod-b{max-width:86%;padding:9px 12px;border-radius:14px;font-size:.86rem;
  line-height:1.45;white-space:pre-wrap;overflow-wrap:break-word}
.pod-b.u{align-self:flex-end;background:rgba(var(--acc-rgb),.18);
  border:1px solid rgba(var(--acc-rgb),.3);border-bottom-right-radius:4px}
.pod-b.a{align-self:flex-start;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);border-bottom-left-radius:4px}
.pod-b.docasna{opacity:.6;font-style:italic}
.pod-riadok{gap:8px;align-items:flex-end}
.pod-riadok textarea{flex:1;resize:none;min-height:42px}

/* ---------- AI podpora: plávajúce okno vpravo dole ---------- */
#podporaModal{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  pointer-events:none;align-items:flex-end;justify-content:flex-end;
  padding:0 20px 20px 0}
#podporaModal .pod-modal{pointer-events:auto;width:min(380px,calc(100vw - 24px));
  max-height:min(56vh,460px);display:flex;flex-direction:column;margin:0;
  background:rgba(17,13,27,.97);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  box-shadow:0 18px 60px rgba(0,0,0,.55)}
#podporaModal .pod-spravy{flex:1;min-height:180px;max-height:none}
@media(max-width:640px){
  #podporaModal{padding:0;align-items:flex-end;justify-content:stretch}
  #podporaModal .pod-modal{width:100%;max-width:none;max-height:68vh;
    border-radius:18px 18px 0 0;
    padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  #podporaModal .pod-spravy{min-height:120px}
}

/* ---------- Poki: LIVE indikátor ---------- */
.pod-nadpis{display:flex;align-items:center;gap:9px}
.pod-online{width:9px;height:9px;border-radius:50%;background:var(--up);
  box-shadow:0 0 0 0 rgba(46,204,113,.55);animation:podPulz 2.2s ease-out infinite}
@keyframes podPulz{
  0%{box-shadow:0 0 0 0 rgba(46,204,113,.55)}
  70%{box-shadow:0 0 0 8px rgba(46,204,113,0)}
  100%{box-shadow:0 0 0 0 rgba(46,204,113,0)}}

/* ---------- Portfólio: skupina Na predaj ---------- */


/* ---------- Poki: hlavička s ovládaním + minimalizovaný stav ---------- */
.pod-hlava{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pod-hlava h3{margin:0}
.pod-akcie{display:flex;gap:6px}
.pod-btn{width:30px;height:30px;font-size:1rem;line-height:1;display:inline-flex;
  align-items:center;justify-content:center}
#podporaModal.pod-mini .pod-modal{width:220px;max-height:none;padding:10px 14px;
  cursor:pointer;border-radius:16px}
#podporaModal.pod-mini .pod-spravy,#podporaModal.pod-mini .pod-riadok,
#podporaModal.pod-mini #btnPodMini{display:none}
@media(max-width:640px){
  #podporaModal.pod-mini{padding:0 12px calc(76px + env(safe-area-inset-bottom)) 0;
    align-items:flex-end;justify-content:flex-end}
  #podporaModal.pod-mini .pod-modal{width:220px;border-radius:16px}
}

/* ---------- Klubovňa: spoločná miestnosť ---------- */
.chat-klub{border:1px solid rgba(var(--acc-rgb),.35);border-radius:14px;
  background:rgba(var(--acc-rgb),.07);margin-bottom:8px}
.chat-klub.on{background:rgba(var(--acc-rgb),.16)}
.klub-avatar{display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;flex:none;
  background:rgba(var(--acc-rgb),.18);border:1px solid rgba(var(--acc-rgb),.35)}
.klub-bodka{display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--up);margin-right:6px;
  box-shadow:0 0 6px rgba(46,204,113,.6)}
.klub-autor{display:block;background:none;border:0;padding:0;margin:0 0 3px;
  font-size:.74rem;font-weight:700;color:rgba(var(--acc-rgb),1);cursor:pointer;
  text-align:left}
.klub-autor .odznak,.klub-autor .stitok{font-size:.62rem;padding:1px 5px}
.klub-sprava .klub-nahlas{opacity:.4}
.klub-sprava:hover .klub-nahlas{opacity:1}

/* ---------- Klubovňa: plávajúce okno na ploche ---------- */
.nie-mobil{display:inline-flex}
@media(max-width:900px){.nie-mobil{display:none !important}}
.klub-okno{position:fixed;right:20px;bottom:20px;z-index:1200;
  width:min(340px,calc(100vw - 24px));max-height:min(56vh,440px);
  display:flex;flex-direction:column;border-radius:18px;
  background:rgba(17,13,27,.97);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  border:1px solid rgba(var(--acc-rgb),.3);
  box-shadow:0 18px 60px rgba(0,0,0,.55);padding:12px 14px}
.klub-okno .chat-spravy{flex:1;min-height:160px;overflow-y:auto;margin:8px 0}
.klub-okno-hlava{display:flex;align-items:center;justify-content:space-between;gap:8px}
.klub-okno-nazov{display:flex;align-items:center;gap:7px;min-width:0}
.klub-okno-nazov .chat-osoba-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.klub-okno.mini{cursor:pointer;max-height:none;width:auto;padding:10px 16px}
.klub-okno.mini .chat-spravy,.klub-okno.mini .chat-pisanie,
.klub-okno.mini #btnKlubMini,.klub-okno.mini .chat-osoba-sub{display:none}
.klub-okno-badge{position:static;margin-left:4px}
/* riadok so @označením */
.chat-sprava.klub-znacka{background:rgba(var(--acc-rgb),.14);
  border:1px solid rgba(var(--acc-rgb),.4);border-radius:12px}

/* nahlásená správa otvorená z upozornenia — chvíľu zabliká */
.chat-sprava.klub-flash{outline:2px solid rgba(var(--acc-rgb),.9);
  background:rgba(var(--acc-rgb),.2);border-radius:12px;
  transition:outline-color .4s, background .4s}

/* iOS pri fokuse pola s písmom < 16 px stránku priblíži a rozhodí šírky —
   vstupom plávajúcich chatov dáme na mobile presne 16 px. */
@media(max-width:640px){
  #podOtazka,#klubText{font-size:16px}
  #podporaModal .pod-modal{margin:0;min-width:0;max-width:100%}
  #podporaModal .pod-riadok textarea{min-width:0}
}

/* iOS automaticky zoomuje pri fokuse každého poľa s písmom < 16 px —
   na dotykových šírkach preto majú VŠETKY polia presne 16 px. Vyzerá
   to o chlp väčšie, ale rozloženie sa už nikdy nerozhodí. */
@media(max-width:760px){
  input:not([type=checkbox]):not([type=radio]),textarea,select{font-size:16px}
}

/* ---------- plávajúce widgety si neprekážajú ----------
   Pozícia sa počíta v klubRozloz() — bez transition, nech sadne hneď. */


/* ---------- minimalizované pilulky: výraznejší šat ---------- */
.klub-okno.mini{
  background:linear-gradient(135deg,rgba(var(--acc-rgb),.38),rgba(var(--acc-rgb),.10) 60%),
             rgba(17,13,27,.97);
  border-color:rgba(var(--acc-rgb),.6);
  box-shadow:0 8px 28px rgba(var(--acc-rgb),.35),0 4px 14px rgba(0,0,0,.4)}
.klub-okno.mini .klub-okno-nazov b{
  background:linear-gradient(90deg,#fff,rgba(var(--acc-rgb),1));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#podporaModal.pod-mini .pod-modal{
  background:linear-gradient(135deg,rgba(var(--acc-rgb),.38),rgba(var(--acc-rgb),.10) 60%),
             rgba(17,13,27,.97);
  border:1px solid rgba(var(--acc-rgb),.6);
  box-shadow:0 8px 28px rgba(var(--acc-rgb),.35),0 4px 14px rgba(0,0,0,.4)}
#podporaModal.pod-mini .pod-nadpis span[data-i18n]{
  background:linear-gradient(90deg,#fff,rgba(var(--acc-rgb),1));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  font-weight:800}

/* ---------- minimalizované pilulky: kompaktnejšie ---------- */
.klub-okno.mini{padding:7px 12px;border-radius:14px}
.klub-okno.mini .klub-okno-nazov b{font-size:.85rem}
.klub-okno.mini .pod-btn{width:24px;height:24px;font-size:.85rem}
#podporaModal.pod-mini .pod-modal{width:auto;max-width:230px;padding:7px 12px;
  border-radius:14px;cursor:pointer}
#podporaModal.pod-mini .pod-nadpis span[data-i18n]{font-size:.85rem;white-space:nowrap}
#podporaModal.pod-mini .pod-btn{width:24px;height:24px;font-size:.85rem}


/* Minimalizovaná pilulka = len menovka: X aj mínus sú schované,
   klik ju roztvorí (ako Messenger na počítači). */
.klub-okno.mini #btnKlubOknoZavri{display:none}
#podporaModal.pod-mini #btnPodZavri{display:none}
.klub-okno.mini .klub-okno-hlava,.klub-okno.mini{cursor:pointer}

/* ---------- redakcia magazínu ---------- */
.maga-modal{display:flex;flex-direction:column;max-height:92vh}
.maga-telo{display:flex;gap:14px;flex:1;min-height:0}
.maga-zoznam{width:250px;flex:none;overflow-y:auto;border-right:1px solid var(--line);
  padding-right:10px}
.maga-editor{flex:1;min-width:0;overflow-y:auto;padding-right:4px}
.maga-polozka{display:flex;gap:8px;align-items:center;width:100%;text-align:left;
  background:none;border:1px solid transparent;border-radius:10px;padding:8px;
  color:var(--txt);font:inherit;cursor:pointer}
.maga-polozka:hover{background:var(--panel2)}
.maga-polozka.on{background:rgba(var(--acc-rgb),.14);border-color:rgba(var(--acc-rgb),.3)}
.maga-p-ikona{font-size:1.2rem;flex:none}
.maga-p-text{min-width:0}
.maga-p-text b{display:block;font-size:.8rem;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.maga-p-text small{color:var(--muted);font-size:.68rem}
.maga-bloky{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.maga-blok{border:1px solid var(--line);border-radius:12px;padding:8px 10px;
  background:rgba(255,255,255,.03)}
.maga-blok-hlava{display:flex;justify-content:space-between;align-items:center;
  margin-bottom:5px}
.maga-blok-hlava small{color:var(--muted);text-transform:uppercase;font-size:.62rem;
  letter-spacing:.6px;font-weight:700}
.maga-blok-akcie{display:flex;gap:4px}
.maga-blok textarea,.maga-blok input,.maga-blok select{width:100%}
.maga-nahlad{max-width:150px;max-height:100px;border-radius:8px;object-fit:cover}
.maga-jazyky{display:flex;gap:4px}
.btn.maly{padding:6px 12px;font-size:.78rem}
.maga-pridat{margin-top:8px}
@media(max-width:760px){
  .maga-telo{flex-direction:column}
  .maga-zoznam{width:100%;border-right:0;border-bottom:1px solid var(--line);
    padding:0 0 10px;max-height:180px}
}

/* Redaktor magazínu bez admin práv: v sekcii Správa vidí len Magazín. */
body.je-redaktor:not(.je-admin) [data-nast="sprava"] > *:not(.pre-redaktora){display:none}

/* ---------- WYSIWYG plocha redakcie ---------- */
.maga-listy{display:flex;gap:4px;flex-wrap:wrap;align-items:center;
  padding:6px;border:1px solid var(--line);border-bottom:0;
  border-radius:12px 12px 0 0;background:rgba(255,255,255,.04)}
.maga-listy button{background:none;border:1px solid transparent;border-radius:8px;
  color:var(--txt);font:inherit;font-size:.8rem;padding:5px 9px;cursor:pointer}
.maga-listy button:hover{background:var(--panel2);border-color:var(--line)}
.maga-del{width:1px;height:18px;background:var(--line);margin:0 3px}
.maga-obr-poz{display:inline-flex;gap:4px;align-items:center;font-size:.74rem;
  color:var(--muted)}
.maga-plocha{min-height:280px;max-height:52vh;overflow-y:auto;
  border:1px solid var(--line);border-radius:0 0 12px 12px;
  padding:14px 16px;background:rgba(255,255,255,.03);outline:none;
  font-size:.92rem;line-height:1.65}
.maga-plocha:focus{border-color:rgba(var(--acc-rgb),.5)}
.maga-plocha p{margin:0 0 10px}
.maga-plocha h2{font-size:1.05rem;color:rgba(var(--acc-rgb),1);margin:16px 0 8px;
  padding-left:10px;border-left:3px solid rgba(var(--acc-rgb),.8)}
.maga-plocha ul,.maga-plocha ol{margin:0 0 10px 22px}
.maga-plocha li{margin-bottom:4px}
.maga-plocha a{color:rgba(var(--acc-rgb),1)}
.maga-plocha .tip{border:1px solid rgba(var(--acc-rgb),.4);border-radius:10px;
  padding:9px 12px;margin:10px 0;background:rgba(var(--acc-rgb),.08)}
.maga-plocha blockquote{border-left:3px solid var(--line2);margin:10px 0;
  padding:4px 12px;color:var(--muted)}
.maga-plocha table{border-collapse:collapse;margin:10px 0;font-size:.84rem}
.maga-plocha td,.maga-plocha th{border:1px solid var(--line);padding:5px 9px}
.maga-plocha figure.mg-obr{margin:12px 0}
.maga-plocha figure.mg-obr img{max-width:100%;border-radius:10px;display:block}
.maga-plocha figure.mg-obr.poz-lavo{float:left;max-width:45%;margin:4px 14px 8px 0}
.maga-plocha figure.mg-obr.poz-pravo{float:right;max-width:45%;margin:4px 0 8px 14px}
.maga-plocha figure.mg-obr.vybrany img{outline:2px solid rgba(var(--acc-rgb),.9)}
.maga-plocha figcaption{font-size:.74rem;color:var(--muted);margin-top:4px;
  text-align:center}

/* ---------- listovanie fotkami vo zväčšení ---------- */
/* Čisté šípky bez krúžku — len znak s tieňom, nech neruší fotku. */
.foto-sipka{position:absolute;top:calc(50% - 30px);z-index:2;
  width:48px;height:60px;font-size:2.4rem;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;color:rgba(255,255,255,.85);cursor:pointer;
  text-shadow:0 2px 10px rgba(0,0,0,.8)}
/* globálny hover tlačidiel posúva transformom — šípky musia stáť na mieste */
.foto-sipka:hover,.foto-sipka:active{transform:none;background:none;
  color:rgba(var(--acc-rgb),1)}
.foto-sipka.lava{left:10px}
.foto-sipka.prava{right:10px}

/* ---------- fórum: dlaždice kategórií ---------- */
.fo-mriezka{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:22px}
@media(max-width:980px){.fo-mriezka{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fo-dlazdica{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  padding:20px 14px 14px;background:var(--sheet);border:1px solid var(--line);
  border-radius:16px;color:var(--txt);font:inherit;cursor:pointer;transition:.15s}
.fo-dlazdica:hover{border-color:rgba(var(--acc-rgb),.6);background:rgba(var(--acc-rgb),.07);
  transform:translateY(-2px)}
.fo-d-ikona{font-size:2.2rem;line-height:1;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
.fo-d-nazov{font-size:.95rem}
.fo-d-popis{font-size:.74rem;color:var(--muted);line-height:1.35}
.fo-d-pocty{font-size:.7rem;color:var(--faint);margin-top:2px}

/* ---------- fórum: najnovšie príspevky ---------- */
.fo-sekcia{font-size:1rem;color:var(--acc-xl);margin:0 0 10px}
.fo-n-zoznam{display:flex;flex-direction:column;gap:6px}
.fo-n-riadok{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:11px 14px;background:var(--sheet);border:1px solid var(--line);
  border-radius:12px;color:var(--txt);font:inherit;cursor:pointer;transition:.15s}
.fo-n-riadok:hover{border-color:rgba(var(--acc-rgb),.5);background:rgba(var(--acc-rgb),.06)}
.fo-n-ikona{flex:none;font-size:1.2rem}
.fo-n-nazov{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.88rem}
.fo-n-pocet{flex:none;font-size:.76rem;color:var(--muted)}
.fo-n-kedy{flex:none;font-size:.74rem;color:var(--faint);min-width:90px;text-align:right}
@media(max-width:640px){.fo-n-pocet{display:none}}

/* ---------- fórum: vlákno s časovou osou ---------- */
.fo-detail-hlava{background:var(--sheet);border:1px solid var(--line);border-radius:16px;
  padding:16px 18px;margin-bottom:16px}
.fo-prispevky{display:flex;flex-direction:column;gap:0}
.fop{display:flex;gap:12px;position:relative;padding:9px 0}
.fop::before{content:"";position:absolute;left:22px;top:0;bottom:0;width:2px;
  background:var(--line);opacity:.55}
.fop:first-child::before{top:16px}
.fop:last-child::before{height:16px;bottom:auto}
.fop:only-child::before{display:none}
.fop-os{flex:none;width:46px;position:relative;z-index:1}
.fop-os .profile-avatar-big{width:46px;height:46px;border:2px solid var(--line2)}
.fop-karta{flex:1;min-width:0;background:var(--sheet);border:1px solid var(--line);
  border-radius:14px;padding:12px 14px}
.fop.prvy .fop-karta{background:rgba(var(--acc-rgb),.07);border-color:rgba(var(--acc-rgb),.35)}
.fop.najlepsia .fop-karta{border-color:rgba(74,222,128,.45)}
.fop-hlava{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;margin-bottom:6px;
  font-size:.78rem;color:var(--muted)}
.fop-hlava .profil-odkaz{font-weight:800;font-size:.86rem;color:rgba(var(--acc-rgb),1)}
.fop-sub{color:var(--faint)}
.fop-kedy{margin-left:auto;color:var(--faint);white-space:nowrap}
.fop-pata{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;margin-top:9px}

/* ---------- zloženie portfólia: jednotné riadky ---------- */
.rozpad-info{display:flex;flex-direction:column;gap:3px;justify-content:center;min-height:48px}
.rozpad-meta{min-height:20px}
.rozpad-meta .zdroj{order:0}
.rozpad-cisla{min-width:96px}
.rozpad-zmena.jemne{opacity:.5}

/* ---------- fórum: palce na príspevkoch ---------- */
.fop-hlasy{display:inline-flex;gap:6px;margin-right:auto}
.fop-hlas{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;
  background:none;border:1px solid var(--line);border-radius:999px;
  color:var(--muted);font:inherit;font-size:.8rem;cursor:pointer;transition:.15s}
.fop-hlas b{font-variant-numeric:tabular-nums}
.fop-hlas[disabled]{opacity:.35;cursor:default}
.fop-hlas.hore:hover:not([disabled]),.fop-hlas.hore.on{
  border-color:rgba(74,222,128,.6);color:#4ade80;background:rgba(74,222,128,.1)}
.fop-hlas.dole:hover:not([disabled]),.fop-hlas.dole.on{
  border-color:rgba(251,113,133,.6);color:#fb7185;background:rgba(251,113,133,.1)}

/* riadok konverzácie je div (button v buttone je neplatné HTML a ✕
   z neho vypadávalo pod riadok) — správanie tlačidla mu dodáme sami */
div.chat-vlakno{cursor:pointer;font:inherit}

/* ---------- potiahni-a-obnov na mobile ---------- */
.ptr-kruh{position:fixed;top:-8px;left:50%;transform:translateX(-50%);z-index:2000;
  width:40px;height:40px;border-radius:50%;opacity:0;
  background:rgba(24,20,36,.95);border:1px solid var(--line2);
  box-shadow:0 6px 20px rgba(0,0,0,.5);
  display:flex;align-items:center;justify-content:center;pointer-events:none}
.ptr-spinner{width:20px;height:20px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.25);border-top-color:rgba(var(--acc-rgb),1)}
.ptr-kruh.pripraveny .ptr-spinner{border-top-color:var(--up)}
.ptr-kruh.toci{transition:transform .25s}
.ptr-kruh.toci .ptr-spinner{animation:ptrTocenie .7s linear infinite}
@keyframes ptrTocenie{to{transform:rotate(360deg)}}

/* ---------- akčný sheet ukotvený pod tlačidlom (počítač) ---------- */
.sheet-overlay.sheet-rozbal{background:rgba(0,0,0,.25);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  align-items:flex-start;justify-content:flex-start}
.sheet-overlay.sheet-rozbal .sheet{position:fixed;margin:0;border-radius:16px;
  transform:translateY(-6px) scale(.98);opacity:0;transition:.18s ease}
.sheet-overlay.sheet-rozbal.on .sheet{transform:none;opacity:1}
.sheet-overlay.sheet-rozbal .sheet-uchyt{display:none}

/* ---------- Správa: každá časť je zbalený blok ----------
   Sekcia správcu narástla na dlhý stĺpec formulárov (prémium, podpora,
   magazín, registrácie, SMS brána, Restock, používatelia). Každá je
   teraz vlastný <details class="nast-zbal"> — otvorí sa len to, čo
   treba, zvyšok je jeden riadok s nadpisom. Obsah pod nadpisom dostane
   rovnaký odstup, aký majú ostatné zbalené bloky nastavené inline. */
[data-nast="sprava"] .nast-zbal > summary + *{margin-top:8px}
/* Udelenie roly redaktora je vec správcu — redaktor v bloku Magazín
   vidí len tlačidlo redakcie. Ostatné bloky mu skrýva pravidlo
   body.je-redaktor vyššie. */
body.je-redaktor:not(.je-admin) .len-spravca{display:none}


/* ---------- Restock v2: nezaradené ponuky, udalosti, karanténa ----------
   Ponuka bez istého priradenia nesie odznak — zobrazuje sa so svojou
   cenou a fotkou, nikdy s cudzou. Udalosti (restock, zmena ceny) majú
   vlastný riadok s prechodom stará → nová hodnota. */
.rest-nezaradeny{display:inline-flex;align-items:center;gap:5px;font-size:.66rem;font-weight:700;letter-spacing:.3px;
  color:var(--muted);border:1px dashed var(--line2);border-radius:999px;padding:2px 8px;margin:4px 0 2px}
.rest-kanon{display:block;font-size:.7rem;color:var(--faint);margin-top:2px}
.rest-cena-povodna{font-size:.72rem;color:var(--faint);text-decoration:line-through;margin-left:6px;font-weight:400}
.rest-cakajuci{font-size:.66rem;color:var(--gold);margin-left:6px}
.rest-udalost{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.8rem;margin:4px 0 2px}
.rest-udalost .rest-znacka{margin:0}
.rest-udalost .prechod{color:var(--muted)}
.rest-udalost .prechod b{color:var(--txt)}
.rest-udalost .prechod .sipka{margin:0 5px;color:var(--faint)}
.rest-udalost .prechod .stara{text-decoration:line-through;color:var(--faint)}
.rest-znacka.zlava{background:rgba(23,184,162,.14);color:var(--up)}
.rest-znacka.stav{background:var(--panel2);color:var(--muted)}
.rest-kontrola-prehlad{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:8px 0 12px}
.rest-kontrola-prehlad .rest-udaj{padding:10px 12px}
.rest-kontrola-riadok{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line)}
.rest-kontrola-riadok:last-child{border-bottom:0}
.rest-kontrola-riadok .hodnoty{font-size:.78rem;color:var(--muted);margin-top:2px;word-break:break-word}
.rest-kontrola-riadok .hodnoty b{color:var(--txt)}
.rest-kontrola-riadok .akcie{display:flex;gap:6px;flex-shrink:0}
/* Políčka hromadného výberu: všeobecné pravidlo pre input dáva width:100%,
   políčko by tak zabralo celý riadok a text zatlačilo do úzkeho stĺpca. */
.rest-kontrola-riadok > div:first-child{flex:1;min-width:0}
.rest-kontrola-riadok > div:first-child > div{flex:1;min-width:0}
input.rest-kar-vyber,input[data-rest-kar-vsetko]{width:16px !important;height:16px;min-width:0;flex:none;padding:0;margin:3px 0 0;accent-color:var(--acc);cursor:pointer}
.rest-kar-hromadne label{flex:none}
.rest-obchod-zdravie{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
.rest-obchod-zdravie.ok{background:var(--up)}
.rest-obchod-zdravie.varovanie{background:var(--gold)}
.rest-obchod-zdravie.chyba{background:var(--down)}

/* ================================================================
   VÝKON — sklo (backdrop-filter) len na veľkých plochách
   Rozmazanie pozadia počíta prehliadač pre každý prvok zvlášť a pri
   scrolle v každom snímku. Na markete ho malo 668 prvkov (každý vstup,
   tlačidlo, štítok, karta); aj Mac šiel na 37 fps a obsah sa pri scrolle
   domaľovával o sekundu-dve neskôr. Sklo ostáva na hlavičke, lištách,
   paneloch a oknách. Drobné a opakované prvky majú priesvitné pozadie
   bez rozmazania — nad už rozmazanou aurorou to nie je vidieť.
   ================================================================ */
input,select,textarea,button.btn,.icon-btn,.badge,.item,.stat,.ach.unlocked,
.inz-karta,.inz-pocet-fotiek,.inz-srdce,.auk-karta,.auk-cas,.fo-kategoria,.dom-dlazdica{
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important}

/* Prepočet do druhej meny pri cene inzerátu — pomôcka, nie cena. */
.cena .prepocet,.inz-spolu .prepocet{font-size:.72em;font-weight:500;color:var(--muted);margin-left:4px;white-space:nowrap}

/* ---------- prihlásenie cez Google, Apple, Facebook, Discord (js/ucet/socialne.js) ---------- */
.oauth-blok{margin-top:14px}
.oauth-tlacidla{display:grid;gap:8px}
.oauth-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  padding:11px 14px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);
  color:var(--txt);font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease}
.oauth-btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.oauth-btn:active{transform:translateY(0)}
.oauth-btn:disabled{opacity:.6;cursor:wait}
.oauth-btn svg{flex:none}
/* Od troch sietí dve stĺpce a len názov — „Pokračovať cez" by sa lámalo. */
.oauth-tlacidla:has(.oauth-btn:nth-child(3)){grid-template-columns:1fr 1fr}
.oauth-tlacidla:has(.oauth-btn:nth-child(3)) .oauth-pred{display:none}
/* Keď sú tlačidlá sietí, druhý oddeľovač „alebo" pri passkeyi netreba. */
.oauth-blok:not([style*="none"]) + .pk-prihlasenie .pk-alebo{display:none}
.oauth-blok:not([style*="none"]) + .pk-prihlasenie{margin-top:8px}
#authGate:not([data-rezim="prihlasenie"]):not([data-rezim="registracia"]) .oauth-blok,
#authCard:has(#formDvojfaktor:not([style*="none"])) .oauth-blok{display:none!important}
.oauth-info{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:10px 12px;
  border-radius:12px;background:var(--bg2);font-size:.85rem}
.oauth-riadok{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.oauth-riadok:last-child{border-bottom:0}
.oauth-riadok-ik{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--bg2)}
.oauth-riadok-text{flex:1;display:flex;flex-direction:column;min-width:0}
.oauth-riadok-text small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oauth-cb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0 12px;font-size:.82rem}
.oauth-cb code{padding:3px 7px;border-radius:6px;background:var(--bg2);user-select:all;word-break:break-all}
.oauth-adm{border:1px solid var(--line);border-radius:12px;padding:10px 12px 4px;margin:0 0 12px}
.oauth-adm legend{display:flex;align-items:center;gap:6px;padding:0 6px;font-weight:700}
.oauth-adm .field{margin-bottom:8px}
.oauth-adm textarea{width:100%;font-family:ui-monospace,monospace;font-size:.75rem}
.oauth-navod{font-size:.75rem;margin:2px 0 8px}