/* ============================================================
   BASE - reset, variables, typography, header, footer
   Sdíleno všemi stránkami
   ============================================================ */

/* ============================================================
   BAREVNÉ TOKENY - PRASENÍ.shop
   ============================================================
   Barvy i fonty vycházejí z praseni.com, značková barva --accent #d53053.

   ⚠️ Motiv je TMAVÝ, ale názvy proměnných jsou z původního světlého:
   --bg2/--bg3 jsou SVĚTLEJŠÍ než --bg (ne tmavší), --accent-lt je tmavý
   podsvit. Význam ("odlišený podklad") sedí, jen je směr obrácený.
   A NIKDY nepoužívej --text jako pozadí - je to barva textu, na tmavém
   motivu tedy skoro bílá (patička na to už jednou doplatila bílým pruhem).
   ============================================================ */
:root {
  /* Podklady - od nejtmavšího po nejsvětlejší */
  --bg:#0a0a0d;--bg2:#17171f;--bg3:#1e1e26;
  /* Text - hlavní, druhotný, potlačený */
  --text:#f4f4f7;--text2:#93939f;--text3:#73737f;
  /* Značková barva. --accent-lt je TMAVÝ podsvit - focus prstence
     a podbarvení aktivních prvků. */
  --accent:#d53053;--accent-lt:#3a0f18;--accent-dk:#b02543;
  /* Text na accent podkladu - plná bílá na růžové drhne, tohle je čitelnější */
  --accent-fg:#ffb9cc;
  /* Hlavička a patička. --ftr-bg je ČERNÁ (ne --hdr-bg), aby se patička
     odrazila od obsahu. POZOR: jako pozadí patičky nikdy nedávej --text -
     v tmavém motivu je skoro bílý a udělá to bílý pruh. */
  --hdr-bg:#0e0e12;--hdr-bg-dk:#08080b;--ftr-bg:#000;
  /* Stavové barvy. *-lt jsou tmavé podsvity pro odznaky a hlášky. */
  --green:#6acf39;--green-lt:#16240f;
  --blue:#4b9fd5;--blue-lt:#0f1d28;
  --gold:#ffc24b;--gold-lt:#2a2010;
  --yellow:#ffc24b;--yellow-lt:#2a2010; /* role SuperAdmin - viz .au-role-super v shop.css */
  --danger:#ff5c5c;--danger-lt:#3a1414; /* tmavý podsvit - viz .au-role-test v shop.css */
  /* Karty a rámečky. --card MUSÍ zůstat PLNÁ (neprůhledná) barva - jakmile
     byla rgba, modály ležící na poloprůhledném overlay měly dvě průhledné
     vrstvy nad sebou a byly "zamlžené" a nečitelné.
     Pole (input/select/textarea) používají světlejší --bg2, aby na kartě
     vynikla. */
  --card:#0f0f13;--border:#2a2a33;
  /* Stíny jsou v tmavém motivu skoro neviditelné, proto jsou výraznější než
     ve světlém - jinak by karty splývaly s pozadím. */
  --shadow:0 1px 3px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.4);
  --shadow-lg:0 10px 30px rgba(0,0,0,.6),0 4px 12px rgba(0,0,0,.45);
  /* JEDNA barva podkladu za VŠEMI overlay appky (modály, lightbox, mobilní
     menu - viz sdílená třída .overlay níž). Nezakládej overlayům vlastní
     barvy, jinak se rozejdou.
     Hodnota je ručně přepsané --bg (#0a0a0d) do rgb + průhlednost - drž ji
     v souladu, kdyby se --bg někdy měnilo. */
  --overlay-bg:rgba(10,10,13,.85);
  /* Fonty - Unbounded na nadpisy a logo, Manrope na text (viz partials/head.php) */
  --font-display:'Unbounded',sans-serif;
  --font-body:'Manrope',sans-serif;
  --r:8px; /* jednotný radius napříč webem i adminem - karty, pole, tlačítka, sekce */
  --r-dot:100%; /* kulaté prvky - ikony v kolečku, avatary, tečky */
  --r-pill:50px; /* podlouhlé štítky/pilulky - odznaky, tagy, filtr-tlačítka */
}
html{color-scheme:dark} /* prohlížeč pak kreslí scrollbary a vnitřky polí tmavě */

*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:clip}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);line-height:1.5;overflow-x:clip}
a{color:inherit;text-decoration:none;transition:all .3s ease}
.app{min-height:100vh;display:flex;flex-direction:column}
/* .ic (ikony) se definuje v css/shop.css - ten se načítá na všech stránkách
   za base.css, takže by pravidlo tady bylo stejně vždy přebité. */
/* Utilita "schovej to" pro JS. !important je tu ZÁMĚRNĚ: shop.css se načítá
   až za base.css, takže pozdější pravidlo se stejnou specificitou (např.
   .search-info{display:flex}) by tuhle třídu přebilo a prvek by zůstal
   viditelný. */
.js-hidden{display:none!important}

/* ===== ZÁKLADNÍ VZHLED POLÍ (input / select / textarea) =====
   Jednotný vzhled pro všechna pole, selecty a textarey napříč webem
   i adminem - i tam, kde nejsou obalená v .fg. Specifické třídy (.fg,
   .sbar, .phone-input, .qv...) nad tímhle jen doladí šířku a odsazení.
   Selektor je schválně v :where(), aby měl NULOVOU specificitu - jakákoli
   jednodušší třída ho tak přebije bez ohledu na pořadí v souboru.
   Šířka rámečku (1px) se mezi klidem a focusem NEMĚNÍ, jen se zbarví -
   jinak by pole při kliknutí poskočilo. */
:where(
  input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=submit]):not([type=button]),
  select,
  textarea
){
  width:100%;
  padding:0 17px;
  border:1px solid var(--border);
  border-radius:var(--r);
  font-family:inherit;
  font-size:15px;
  color:var(--text);
  background:var(--bg2);
  line-height:1.4;
  transition:all .2s;
  outline:0;
  box-sizing:border-box;
}
/* Jednořádková pole mají pevných 40px jako ostatní ovládací prvky -
   textarea zůstává mimo (viz min-height níž). */
:where(
  input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=submit]):not([type=button]),
  select
){height:40px;line-height:1}
/* Textarea potřebuje horní/dolní padding navíc (hlavní pravidlo dává jen
   levo/pravo), jinak text lepí na horní okraj. */
:where(textarea){min-height:80px;padding-top:12px;padding-bottom:12px;resize:vertical}
/* Focus - rámeček se jen zbarví do značkové červené, pozadí se nemění. */
:where(
  input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=submit]):not([type=button]):focus,
  select:focus,
  textarea:focus
){border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-lt)}
/* Chybový stav - jen jemný červený nádech, plná --accent-lt by na tmavém
   podkladu byla příliš silná. */
:where(input.err,select.err,textarea.err){border-color:var(--accent);background:rgba(213,48,83,.07)}
:where(input.err:focus,select.err:focus,textarea.err:focus){box-shadow:0 0 0 3px var(--accent-lt)}
/* Vlastní šipka místo výchozí od prohlížeče. Barva %238A8A85 je natvrdo
   zapsaná --text3 - SVG v data-URI neumí CSS proměnnou. */
:where(select){
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8A85' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:15px;
}
:where(select:disabled){cursor:not-allowed;opacity:.6;background-color:var(--bg2)}

/* Placeholdery jsou poloprůhledné, ať nesplývají s vyplněnou hodnotou. */
input::placeholder,textarea::placeholder{color:var(--text3);opacity:.5}

/* ===== HEADER ===== */
.hdr{background:var(--hdr-bg);color:#fff;padding:0 24px;position:sticky;top:0;z-index:100;box-shadow:0 2px 20px rgba(0,0,0,.15)}
.hdr-in{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
/* LOGO - prasečí čumák + text v Unbounded. */
.logo{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-.02em;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:0;color:var(--accent);background:0 0;padding:0;line-height:1;transition:opacity .3s ease}
.logo:hover{opacity:.85}
/* Platí pro <img> i vestavěné <svg>. SVG potřebuje pevnou šířku, protože
   width:auto u něj prohlížeče počítají různě. */
.logo-mark{height:30px;width:30px;display:block;flex:0 0 auto}
/* Text „PRASENÍ.shop" vedle ikony se nezobrazuje - v logu je jen čumák.
   V HTML ale zůstat MUSÍ (čtečky a vyhledávače potřebují vědět, kam odkaz
   vede). Pro návrat textu stačí smazat tohle jedno pravidlo. */
.logo-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.logo:hover{opacity:.9}
.logo b{font-weight:800;letter-spacing:-.02em}
.logo .tld{font-weight:500;opacity:.7}

/* Hamburger - viditelný jen na mobilu */
.hamburger{display:none;background:0 0;border:0;color:#fff;cursor:pointer;width:40px;height:40px;padding:0;border-radius:var(--r);align-items:center;justify-content:center;transition:all .3s ease}
.hamburger:hover{background:rgba(255,255,255,.15)}

/* Top menu kategorií */
.topmenu{display:flex;gap:2px;align-items:center;flex:1;justify-content:center}
.topmenu-right{justify-content:flex-end;flex-wrap:wrap}
.topmenu a{display:inline-flex;color:rgba(255,255,255,.85);font-size:15px;font-weight:600;height:40px;padding:0 17px;line-height:1;border-radius:var(--r);transition:all .3s ease;align-items:center;gap:8px;white-space:nowrap}
.topmenu a:hover{background:rgba(255,255,255,.12);color:#fff}
.topmenu a.on{background:rgba(255,255,255,.18);color:#fff}/* Bublinka s počtem položek v košíku - růžová, když v košíku něco je,
   šedá u prázdného (viz .badge-zero, přepíná cartUpdateBadge()). */
.badge{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;min-width:0;padding:0;border-radius:var(--r-dot);background:var(--accent);border:none;color:#fff;font-size:11px;font-weight:600;line-height:20px;flex-shrink:0;box-sizing:border-box;transition:background-color .2s}
.badge-zero{background:var(--text3)}

/* ===== SDÍLENÝ OVERLAY (podklad za VŠEMI modaly/panely) =====
   position+background dává tahle třída, konkrétní třída (např.
   <div class="overlay amd-overlay">) si drží jen odlišnosti: z-index
   (mobil 200, admin modal 500, potvrzovací modal 600, toast 700,
   lightbox 900 - pořadí vrstvení je závazné), zarovnání a způsob
   otvírání (display u modalů, opacity+pointer-events u mobilního panelu,
   ten totiž zůstává furt v DOM). */
.overlay{position:fixed;inset:0;background:var(--overlay-bg)}

/* ===== MOBILE SIDE PANEL (vysouvá se ZPRAVA) ===== */
.mobile-overlay{z-index:200;opacity:0;pointer-events:none;transition:opacity .25s ease}
.mobile-overlay.open{opacity:1;pointer-events:auto}
.mobile-panel{position:fixed;top:0;right:0;bottom:0;width:300px;max-width:85vw;background:var(--bg2);z-index:201;transform:translateX(100%);transition:transform .3s ease;display:flex;flex-direction:column;box-shadow:-2px 0 20px rgba(0,0,0,.2)}
.mobile-panel.open{transform:translateX(0)}
.mobile-panel-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1.5px solid var(--border);background:var(--hdr-bg);color:#fff;min-height:64px}
/* V hlavičce panelu je logo místo nápisu "Menu". */
.mobile-panel-head .logo{background:0 0}
.mobile-panel-close{background:0 0;border:0;color:#fff;cursor:pointer;width:40px;height:40px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:var(--r);transition:all .3s ease}
.mobile-panel-close:hover{background:rgba(255,255,255,.18)}

/* Menu se má celé scrollovat, ne zmenšovat jednotlivé bloky. flex-shrink:0
   na potomcích je nutný: .mobile-item-group má overflow:hidden (zaoblené
   rohy), takže by se karty na nízkém okně tiše smrskly a ořezaly obsah. */
.mobile-nav{display:flex;flex-direction:column;padding:12px;overflow-y:auto;flex:1;gap:2px}
.mobile-nav>*{flex-shrink:0}

/* Hlavní položka menu (Produkty, Kontakt, Košík, Přihlášení, Administrace) */
.mobile-item{display:flex;align-items:center;gap:12px;padding:14px 16px;color:var(--text);font-size:16px;font-weight:600;border-radius:var(--r);transition:all .3s ease}
.mobile-item:hover{background:var(--bg2)}
/* Aktivní položka musí vypadat stejně jako v desktopovém menu
   (.topmenu a.on výš) - šedivé podbarvení, bílý text. */
.mobile-item.on{background:rgba(255,255,255,.18);color:#fff}
/* Administrace nemá vlastní odkaz, jen otevírá skupinu níže - bez hover efektu */
.mobile-item-static{cursor:default}
.mobile-item-static:hover{background:0 0}
/* na mobilu je badge zarovnaný úplně napravo v řádku, ne hned za nápisem Košík */
.mobile-item .badge{margin-left:auto}

/* Skupina s podpoložkami (Produkty, Účet, Administrace) - stejný princip
   jako strom kategorií v adminu (.ptree v shop.css): orámovaná karta,
   potomci odsazení se spojovacími čarami. */
.mobile-item-group{border:1.5px solid var(--border);border-radius:var(--r);overflow:hidden;margin-bottom:4px}
.mobile-item-group > .mobile-item{border-radius:0}
.mobile-item-group:has(.mobile-subs) > .mobile-item{position:relative}
/* Svislá čára stromu musí být přesně pod STŘEDEM ikonky: ikonka je 1em
   (16px) od padding-left 16px, střed tedy 24px, čára 2px → left:23px.
   Stejnou souřadnici musí mít i větve podpoložek níž (padding-left 40px
   - 17px = 23px), jinak je na přechodu vidět zub. */
.mobile-item-group:has(.mobile-subs) > .mobile-item::before{content:'';position:absolute;left:23px;top:40px;bottom:0;width:2px;background:var(--border)}

/* Podpoložky (Merch, Vstupenky, Nastavení účtu...) - každá má vlastní
   svislý a vodorovný spojovací segment větve stromu. */
.mobile-subs{display:flex;flex-direction:column;gap:2px;padding:0 8px 8px 40px}
.mobile-sub{position:relative;display:flex;align-items:center;padding:10px 12px;color:var(--text2);font-size:15px;font-weight:500;border-radius:var(--r);transition:all .3s ease}
.mobile-sub:hover{background:var(--bg2);color:var(--text)}
/* bottom:-2px překlene 2px mezeru mezi řádky (.mobile-subs má gap:2px),
   jinak je svislá čára přerušovaná. Vodorovná odbočka i konec poslední
   čáry jsou na 50 % výšky řádku, ne na pevných px - drží to i při
   zalomení popisku na dva řádky. */
.mobile-sub::before{content:'';position:absolute;left:-17px;top:0;bottom:-2px;width:2px;background:var(--border)}
.mobile-sub:last-child::before{bottom:auto;height:calc(50% + 1px)}
.mobile-sub::after{content:'';position:absolute;left:-17px;top:50%;margin-top:-1px;width:15px;height:2px;background:var(--border)}
.mobile-logout-form{margin:0}
/* Barvu textu schválně nepřepisujeme - "Odhlásit se" má mít stejnou barvu
   jako ostatní položky (var(--text) z .mobile-item). */
.mobile-logout{width:100%;background:0 0;border:0;font-family:inherit;cursor:pointer;text-align:left}

/* Samostatné položky bez podsekce mají stejný rámeček jako skupiny -
   celé menu je z jednotných orámovaných karet. */
.mobile-nav > .mobile-item,
.mobile-nav > .mobile-logout-form{border:1.5px solid var(--border);border-radius:var(--r);overflow:hidden;margin-bottom:4px}
.mobile-nav > .mobile-logout-form > .mobile-item{border-radius:0}

body.no-scroll{overflow:hidden}

/* ===== IMPERSONACE ("Přihlásit se jako") =====
   Fixní lišta dole přes celou šířku. */
.impersonate-bar{position:fixed;left:0;right:0;bottom:0;z-index:300;background:var(--gold);color:#3A2A00;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;padding:12px 20px;box-shadow:0 -2px 12px rgba(0,0,0,.15)}
.impersonate-bar-text{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.impersonate-bar-btn{width:auto;background:#3A2A00;color:#fff;transition:all .3s ease}
.impersonate-bar-btn:hover{background:#241a00}
@media (max-width:640px){
  .impersonate-bar{flex-direction:column;gap:8px;padding:10px 16px;text-align:center}
}

/* ===== CONTAINER ===== */
.wrap{max-width:1000px;margin:0 auto;padding:24px;flex:1;width:100%;min-width:0}

/* ===== BUTTONS ===== */
.btn1{background:var(--accent);color:#fff;border:0;font-family:inherit;font-size:15px;font-weight:600;height:40px;padding:0 17px;line-height:1;border-radius:var(--r);cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:8px;justify-content:center;width:100%}
.btn1:hover{background:var(--accent-dk)}
.btn1:disabled{opacity:.5;cursor:not-allowed}
.btn2{background:0 0;color:var(--text);border:1.5px solid var(--border);font-family:inherit;font-size:15px;font-weight:500;height:40px;padding:0 17px;line-height:1;border-radius:var(--r);cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:8px}
.btn2:hover{border-color:var(--text)}
.btn2-sm{margin-left:auto}

/* ===== FOOTER ===== */
.ftr{background:var(--ftr-bg);color:rgba(255,255,255,.55);margin-top:auto;font-size:14px;line-height:1.6}
.ftr a{color:rgba(255,255,255,.7);transition:all .3s ease}
.ftr a:hover{color:#fff}
/* Patička je jeden nízký vycentrovaný řádek (logo + popis + sociální sítě)
   nad čárou a řada odkazů + copyright pod ní (.ftr-bottom/.ftr-legal níž). */
.ftr-main{max-width:1200px;margin:0 auto;padding:10px 24px;display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap}
/* Logo + popisek jsou schválně vlastní vnitřní řádek s flex-wrap:nowrap -
   i když se .ftr-main na mobilu zalomí, tyhle dva zůstanou vedle sebe. */
.ftr-brand-row{display:flex;align-items:center;gap:20px;flex-wrap:nowrap;min-width:0}
/* Logo v patičce je stejné jako v hlavičce (sdílená třída .logo). .ftr-logo
   doplňuje jen flex-shrink (ať se logo v řádku nezmáčkne) a musí přebít
   obecná .ftr a / .ftr a:hover výš - ta by mu jinak přebarvila text na
   průhlednou bílou. Zápis ".ftr .ftr-logo" má schválně vyšší specificitu,
   aby barva držela bez ohledu na pořadí pravidel. */
.ftr-logo{flex-shrink:0}
.ftr .ftr-logo{color:var(--accent);background:0 0;transition:opacity .3s ease}
.ftr .ftr-logo:hover{color:var(--accent);opacity:.85}
/* Popisek schválně neroste přes celý řádek - blok logo + popisek + ikony
   má zůstat vycentrovaný jako celek. */
.ftr-about{font-size:13px;color:rgba(255,255,255,.5);line-height:1.7;margin:0;min-width:0}
.ftr-about a{color:rgba(255,255,255,.8);text-decoration:underline;text-underline-offset:2px}
.ftr-about a:hover{color:#fff}
.ftr-social{display:flex;gap:10px;flex-shrink:0}
.ftr-social a{width:40px;height:40px;border-radius:var(--r);background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;transition:all .3s ease}
.ftr-social a:hover{background:var(--accent)}
.ftr-bottom{border-top:1px solid rgba(255,255,255,.08);max-width:1200px;margin:0 auto;padding:18px 24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.ftr-copy{font-size:12px;color:rgba(255,255,255,.4)}
.ftr-legal{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.ftr-legal a,.ftr-legal .ftr-soon{font-size:12px;color:rgba(255,255,255,.5)}
.ftr-soon{cursor:default}
.ftr-soon small{opacity:.6;font-size:11px}
@media(max-width:640px){
  .ftr-main{padding:16px 20px;gap:16px}
  .ftr-bottom{flex-direction:column;align-items:flex-start;gap:10px;padding:18px 20px}
}

/* ===== TOAST =====
   Všechny hlášky appky jdou přes showToast() (js/cart.js) a končí tady na
   středu pod headerem. Vždy jen jeden najednou, nový překryje předchozí.
   z-index MUSÍ být nad všemi modaly (.amd-overlay 500, .acm-overlay 600) -
   jinak by se chybová hláška schovala za otevřený modal a vypadalo by to,
   že se nic nestalo.
   Podle typu se liší jen levý okraj a kroužek s ikonou, zbytek je stejný. */
.toast{position:fixed;top:80px;left:50%;right:auto;bottom:auto;transform:translate(-50%,0);background:var(--bg3);color:var(--text);padding:14px 14px 14px 18px;border-radius:var(--r);font-size:15px;font-weight:600;box-shadow:0 16px 40px rgba(0,0,0,.24),0 3px 10px rgba(0,0,0,.1);z-index:700;display:flex;align-items:center;gap:12px;border:1px solid var(--border);border-left:4px solid var(--text3);min-width:500px;max-width:calc(100vw - 32px);animation:tIn .35s cubic-bezier(.16,1,.3,1)}
/* Pod 640px pevných 500px nedává smysl - toast má fixně 90 % šířky. */
@media(max-width:640px){
  .toast{width:90vw;min-width:0;max-width:90vw}
}
.toast-icon{flex-shrink:0;width:18px;height:18px;padding:6px;border-radius:var(--r-dot);box-sizing:content-box}
.toast-text{flex:1}
.toast-success{border-left-color:var(--green)}
.toast-success .toast-icon{background:var(--green-lt);color:var(--green)}
.toast-warn{border-left-color:var(--yellow)}
.toast-warn .toast-icon{background:var(--yellow-lt);color:var(--yellow)}
.toast-error{border-left-color:var(--accent)}
.toast-error .toast-icon{background:var(--accent-lt);color:var(--accent-dk)}
/* Zavírací křížek - vždy vpravo, barva neutrální (nekopíruje barvu typu) */
.toast-close{flex-shrink:0;width:40px;height:40px;padding:0;border:0;background:0 0;color:var(--text3);cursor:pointer;border-radius:var(--r-dot);display:flex;align-items:center;justify-content:center;transition:all .3s ease}
.toast-close:hover{background:var(--bg2);color:var(--text)}
.toast-close svg{width:14px;height:14px}
/* Hláška se zvýrazněním jen na části textu - tučně jen to podstatné. */
.toast-msg{font-weight:400}
.toast-msg strong{font-weight:700}
/* Odkaz uvnitř hlášky musí mít color:inherit - jinak zdědí výchozí modrou
   prohlížeče, která na tmavém toastu nesedí. */
.toast-text a{color:inherit;text-decoration:underline;font-weight:700}
.toast-text a:hover{opacity:.8}
@keyframes tIn{from{transform:translate(-50%,-16px);opacity:0}to{transform:translate(-50%,0);opacity:1}}

/* ===== PAGE TITLE ===== */
.ptitle{font-family:var(--font-display);font-size:28px;font-weight:700;margin-bottom:24px;display:flex;align-items:center;gap:12px;letter-spacing:-1px}

/* ===== EMPTY STATE ===== */
.empty{padding:60px 24px;text-align:center;color:var(--text3)}
.empty p{font-size:15px;margin-top:12px;margin-bottom:20px}
.empty h2{font-family:var(--font-display);font-size:28px;margin-bottom:12px}
.empty-card{background:var(--card);border:1.5px solid var(--border);border-radius:var(--r);margin-top:40px}

/* ===== RESPONSIVE ===== */
@media(max-width:840px){
  .topmenu{display:none}
  .hamburger{display:flex}
}
@media(max-width:640px){
  .hdr{padding:0 12px}
  .hdr-in{height:56px;gap:8px}
  .logo{font-size:15px;padding:7px 12px 13px}
  .wrap{padding:16px}}