/* ===========================================================================
   Wevo — samostatné obrazovky, návrh B „Čistá plocha"
   Navazuje na app-b.css (tokeny, reset, tlačítka, okna). Sám přidává
   dvě lišty a stavební kameny stránek: karty, seznamy, formuláře.

   Dvě lišty schválně:
   • .webtop — jsme uvnitř jednoho webu (hotovo, nastavení, poptávky, doména)
   • .apptop — jsme nad účtem, ne nad webem (moje weby, účet)
   Je to jediná věc, podle které člověk pozná, v jaké úrovni zrovna stojí.
   =========================================================================== */

body{background:var(--page)}

/* --- lišta uvnitř webu ----------------------------------------------------- */
.webtop{border-bottom:1px solid var(--line);background:var(--page)}
.webtop__in{height:72px;display:flex;align-items:center;gap:16px}
.webtop__zpet{
  display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  padding:7px 12px 7px 9px;border-radius:999px;
  font-size:13px;font-weight:600;color:var(--ink2);
}
.webtop__zpet:hover{background:var(--panel);color:var(--ink)}
.webtop__zpet svg{width:16px;height:16px}
.webtop__web{display:inline-flex;align-items:center;gap:9px;min-width:0;font-size:13.5px}
.webtop__web b{font-family:Archivo,sans-serif;font-weight:700;font-size:14.5px;white-space:nowrap}
.webtop__vpravo{display:flex;align-items:center;gap:10px;margin-left:auto}

.tecka{width:7px;height:7px;border-radius:999px;background:var(--acc);flex:0 0 auto}
.tecka--zive{background:#3E9B63}

.stitek{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 16px;border-radius:999px;background:var(--panel);
  font-size:13px;font-weight:600;color:var(--ink2);
}
.stitek svg{width:15px;height:15px}

.ikonka{
  width:36px;height:36px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  border:0;border-radius:999px;background:none;cursor:pointer;color:var(--ink2);
}
.ikonka:hover{background:var(--panel);color:var(--ink)}
.ikonka svg{width:17px;height:17px}

/* --- lišta nad účtem -------------------------------------------------------- */
.apptop{border-bottom:1px solid var(--line);background:var(--page)}
.apptop__in{height:72px;display:flex;align-items:center;gap:16px}
.apptop__logo{display:block;height:25px;width:auto}
.apptop__vpravo{display:flex;align-items:center;gap:14px;margin-left:auto}

.ucet{
  display:inline-flex;align-items:center;gap:9px;
  padding:6px 13px 6px 6px;border:1px solid var(--line);border-radius:999px;background:#fff;
  font-size:13px;font-weight:600;
}
.ucet:hover{border-color:#C9CCBE}
.ucet svg{width:13px;height:13px;color:var(--ink2)}
.inicialy{
  width:28px;height:28px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  border-radius:999px;background:var(--acc);font-size:11.5px;font-weight:700;
}

/* --- nabídka účtu ------------------------------------------------------------
   Účet a tarif, podpora i odhlášení visí pod e-mailem. V liště tak zůstane
   jedna věc místo čtyř a přibývat můžou dovnitř, ne vedle. */
.ucet-menu{position:relative}
.ucet--prepinac{color:var(--ink);font-family:inherit;cursor:pointer}
.ucet--prepinac:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ucet__sipka{transition:transform .15s ease}
.ucet--prepinac[aria-expanded="true"] .ucet__sipka{transform:rotate(180deg)}
.ucet-nabidka{
  position:absolute;z-index:8;top:calc(100% + 9px);right:0;width:258px;
  padding:7px;border:1px solid var(--line);border-radius:16px;background:#fff;
  box-shadow:0 18px 44px #14160F1F;
}
.ucet-nabidka[hidden]{display:none}
/* Na široké obrazovce stojí adresa v pilulce nad nabídkou, tady by se jen
   zopakovala. Ukáže se, až se pilulka zkrátí na iniciálu. */
.ucet-nabidka__mail{
  display:none;margin:0 0 5px;padding:7px 10px 11px;border-bottom:1px solid var(--line);
  color:var(--ink2);font-size:12px;overflow-wrap:anywhere;
}
.ucet-nabidka__polozka{
  display:flex;width:100%;align-items:center;gap:10px;
  padding:9px 10px;border:0;border-radius:11px;background:none;
  color:var(--ink);font-family:inherit;font-size:13px;font-weight:600;text-align:left;cursor:pointer;
}
.ucet-nabidka__polozka:hover{background:var(--panel)}
.ucet-nabidka__polozka:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.ucet-nabidka__polozka svg{width:16px;height:16px;flex:0 0 auto;color:var(--ink2)}
.ucet-nabidka__polozka[aria-current="page"]{background:var(--acc-soft)}
.ucet-nabidka__odhlaseni{margin-top:5px;padding-top:5px;border-top:1px solid var(--line)}
.ucet-nabidka__polozka--odhlasit{color:var(--ink2)}
.ucet-nabidka__polozka--odhlasit:hover{color:var(--ink)}
/* Podpora není odkaz, je to adresa k přečtení — proto jiný tvar než položky. */
.ucet-nabidka__podpora{
  display:flex;align-items:flex-start;gap:10px;
  margin:5px 0 0;padding:9px 10px;border-top:1px solid var(--line);
  color:var(--ink2);font-size:12px;
}
.ucet-nabidka__podpora svg{width:16px;height:16px;flex:0 0 auto;margin-top:1px}
.ucet-nabidka__podpora b{display:block;color:var(--ink);font-size:13px;overflow-wrap:anywhere}
.ucet-nabidka__kopie{
  margin-left:auto;align-self:center;padding:5px 10px;border:1px solid var(--line);border-radius:999px;
  background:#fff;color:var(--ink2);font-family:inherit;font-size:11.5px;font-weight:600;cursor:pointer;
}
.ucet-nabidka__kopie:hover{border-color:#C9CCBE;color:var(--ink)}

/* --- stránka ---------------------------------------------------------------- */
/* Vždy visí na .wrap, a ten si nese boční odsazení 24 px. Zkratka
   `padding: 44px 0 72px` by ho přepsala na nulu a obsah by se rozjel
   o 24 px doleva proti hlavičce — proto jen padding-block. Totéž platí
   pro .schranka níž a pro .obsah v app-b.css. */
.stranka{padding-block:44px 72px}
.stranka--stred{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.stranka__uzka{width:100%;max-width:680px;display:flex;flex-direction:column;gap:22px}

.stranka h1{
  margin:0;font-family:Archivo,sans-serif;font-weight:800;
  font-size:clamp(26px,3.4vw,34px);line-height:1.15;letter-spacing:-1px;
}
.stranka__lead{margin:0;max-width:560px;font-size:14.5px;line-height:1.6;color:var(--ink2)}

.velka-ikona{
  width:64px;height:64px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  border-radius:20px;background:var(--acc-soft);
}
.velka-ikona svg{width:30px;height:30px}

/* --- adresa webu ------------------------------------------------------------ */
.url{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:10px 10px 10px 18px;border:1px solid var(--line);border-radius:999px;background:#fff;
  box-shadow:0 14px 34px rgba(15,20,10,.07);
}
.url > svg{width:15px;height:15px;flex:0 0 auto;color:var(--ink2)}
.url b{flex:1;min-width:0;text-align:left;font-size:14.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.url__akce{
  display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  padding:9px 15px;border:1px solid var(--line);border-radius:999px;background:#fff;
  cursor:pointer;font-size:12.5px;font-weight:600;
}
.url__akce:hover{border-color:#C9CCBE}
.url__akce svg{width:13px;height:13px}
.url__akce--hlavni{border:0;background:var(--btn);box-shadow:var(--btn-glow)}
.url__akce--hlavni:hover{border:0}

/* --- sdílení ---------------------------------------------------------------- */
.sdilet{display:flex;flex-wrap:wrap;justify-content:center;gap:9px}
.sdilet a{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border:1px solid var(--line);border-radius:999px;background:#fff;
  font-size:12.5px;font-weight:600;
}
.sdilet a:hover{border-color:#C9CCBE}
.sdilet svg{width:15px;height:15px;color:var(--ink2)}

/* --- karta s nabídkou ------------------------------------------------------- */
.nabidka{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:16px;border:1px solid var(--line);border-radius:16px;background:#fff;
  transition:border-color .15s ease;
}
.nabidka:hover{border-color:#C9CCBE}
.nabidka__ikona{
  width:42px;height:42px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  border-radius:13px;background:var(--panel);
}
.nabidka__ikona svg{width:19px;height:19px;color:var(--ink2)}
.nabidka__w{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.nabidka__w b{font-family:Archivo,sans-serif;font-weight:700;font-size:14.5px}
.nabidka__w small{font-size:12.5px;line-height:1.45;color:var(--ink2)}

/* Když sem člověk přijde z okna zveřejnění tlačítkem „a připojit vlastní
   doménu", je to jeho další krok — ne nabídka mezi ostatními. */
.nabidka.je-ted{border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc);background:#F6FCE6}
.nabidka.je-ted .nabidka__ikona{background:#fff}

.qr{display:block;width:88px;height:88px;flex:0 0 auto;padding:9px;border:1px solid var(--line);border-radius:14px;background:#fff}
.qr svg{width:100%;height:100%;display:block}

@media (max-width:620px){
  .stranka{padding-block:28px 48px}
  .url{flex-wrap:wrap;border-radius:18px;padding:14px}
  .url b{flex:1 0 100%}
  .url__akce{flex:1}
  .webtop__web b{font-size:13.5px}
  /* Pilulka se zkrátí na iniciálu, adresa je celá v nabídce. */
  .ucet__mail{display:none}
  .ucet--prepinac{padding-right:9px}
  .ucet-nabidka{width:min(258px,calc(100vw - 48px))}
  .ucet-nabidka__mail{display:block}
}

/* --- hlavička stránky se šířkou na míru ------------------------------------- */
.stranka__siroka{width:100%;max-width:1120px;display:flex;flex-direction:column;gap:26px}
.stranka__hlava{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.stranka__hlava p{margin:6px 0 0;font-size:14px;color:var(--ink2)}

/* --- MOJE WEBY --------------------------------------------------------------
   Mřížka karet, ne tabulka: web se pozná podle toho, jak vypadá, ne podle
   názvu v řádku. Náhled je proto největší část karty. */
.weby{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.web{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden;transition:border-color .15s ease,transform .15s ease}
.web:hover{border-color:#C9CCBE;transform:translateY(-2px)}
.web__nahled{height:150px;background-size:cover;background-position:center;border-bottom:1px solid var(--line)}
/* Náhled je skutečný web zmenšený rámem, ne obrázek. Rám se sází na šířku
   počítače a teprve pak se scvrkne na šířku karty — jinak by se web uvnitř
   zalomil do mobilní verze a karta by lhala. Výška se nechává s rezervou,
   přebytek karta ořízne, takže je vidět vršek stránky. */
.web__nahled--zivy{position:relative;overflow:hidden;background:#fff}
.web__nahled--zivy iframe{position:absolute;top:0;left:0;width:1280px;height:900px;border:0;transform:scale(var(--mer,.26));transform-origin:top left;pointer-events:none}
.web__telo{display:flex;flex-direction:column;gap:7px;padding:14px 16px 16px}
.web__vrch{display:flex;align-items:center;gap:10px}
.web__vrch b{flex:1;min-width:0;font-family:Archivo,sans-serif;font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Preview adresa je dlouhý hex, který se do karty nevejde — ať se uřízne
   tečkami a ne v půlce písmene na okraji karty. */
.web__url{display:flex;align-items:center;gap:7px;margin:0;font-size:12.5px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.web__url svg{width:13px;height:13px;flex:0 0 auto}
.web__spod{display:flex;align-items:center;gap:10px;margin-top:4px;padding-top:11px;border-top:1px solid var(--line);font-size:12px;color:var(--ink2)}
.web__spod a{margin-left:auto;font-weight:600;color:var(--ink)}
.web__spod a:hover{text-decoration:underline;text-underline-offset:3px}

.odznak{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding:4px 10px;border-radius:999px;background:var(--panel);font-size:11px;font-weight:600;color:var(--ink2)}
.odznak i{width:6px;height:6px;border-radius:999px;background:#3E9B63}
.odznak--rozdelano i{background:#C9A227}

.web--novy{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  min-height:240px;padding:24px;text-align:center;
  border:1px dashed #C9CCBE;border-radius:18px;background:none;
  transition:border-color .15s ease,background .15s ease;
}
.web--novy:hover{border-color:var(--ink2)}
.web--novy b{font-family:Archivo,sans-serif;font-weight:700;font-size:15px}
.web--novy small{font-size:12.5px;color:var(--ink2)}
.web--novy .velka-ikona{width:46px;height:46px;border-radius:14px;margin-bottom:6px;transition:background .15s ease}
.web--novy .velka-ikona svg{width:20px;height:20px}
/* Sbalená karta se chová jako jedno velké tlačítko — stejně jako plocha pro
   obrázky v chatu. Tlačítko leží přes celou kartu, aby klik a tabulátor
   mířily na totéž místo; rozbalením zmizí, ať nestíní poli. */
.web--novy__spust{position:absolute;inset:0;width:100%;border:0;border-radius:18px;background:none;cursor:pointer}
.web--novy__spust:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.web--novy.je-sbalene{cursor:pointer}
.web--novy.je-sbalene .web--novy__pole,.web--novy.je-sbalene .web--novy__odeslat{display:none}
.web--novy.je-sbalene:hover{border-color:#8EAF3A;background:#FAFAF8}
.web--novy.je-sbalene:hover .velka-ikona{background:var(--acc)}

/* --- KROKOVÉ KARTY (doména) --------------------------------------------------
   Číslo kroku je tu k něčemu: člověk odchází k registrátorovi domény
   a po návratu potřebuje poznat, kde skončil. */
.krok{display:flex;flex-direction:column;gap:16px;padding:22px;border:1px solid var(--line);border-radius:18px;background:#fff}
.krok__hlava{display:flex;gap:13px;align-items:flex-start}
.krok__cislo{
  width:28px;height:28px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  border-radius:999px;background:var(--acc);font-family:Archivo,sans-serif;font-weight:800;font-size:13px;
}
.krok__hlava b{display:block;font-family:Archivo,sans-serif;font-weight:700;font-size:15.5px}
.krok__hlava small{display:block;margin-top:3px;font-size:13px;line-height:1.5;color:var(--ink2)}

.formradek{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
/* ⚠️ NE .pole — ta je v app-b.css (pole s větou na zadání) a přidala by
   sem bílé pozadí a druhý rámeček. Jméno se muselo lišit. */
.formpole{display:flex;flex-direction:column;gap:6px;flex:1;min-width:220px}
/* .pole JE <label>, popisek uvnitř je první <span> — ne vnořený <label>. */
.formpole > span:first-child{font-size:11.5px;font-weight:600;letter-spacing:.4px;color:var(--ink2)}
.formpole__vstup{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff}
.formpole__vstup:focus-within{border-color:#B9D97A}
.formpole__vstup svg{width:16px;height:16px;flex:0 0 auto;color:var(--ink2)}
.formpole__vstup input,.formpole__vstup select{flex:1;min-width:0;border:0;background:none;outline:none;font-size:14px}

.overeno{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;padding:12px 15px;border-radius:12px;background:var(--acc-soft);font-size:12.5px;font-weight:600}
.overeno svg{width:15px;height:15px}

/* --- DNS tabulka -------------------------------------------------------------
   Vodorovné posouvání schválně: hodnoty se nesmí zalamovat, přepisují se
   do cizího formuláře a zlom uprostřed IP adresy je past. */
.dns{border:1px solid var(--line);border-radius:13px;overflow:hidden}
.dns__posuv{overflow-x:auto}
.dns__r{display:flex;align-items:center;gap:14px;padding:11px 14px;border-bottom:1px solid var(--line);font-size:13px;min-width:540px}
.dns__r:last-child{border-bottom:0}
.dns__r--hlava{background:var(--panel);font-size:10.5px;font-weight:700;letter-spacing:.6px;color:var(--ink2)}
.dns__typ{width:72px;flex:0 0 auto;font-weight:600}
.dns__nazev{width:72px;flex:0 0 auto}
.dns__hodnota{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;white-space:nowrap}
.dns__kopie{
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;
  cursor:pointer;font-size:11.5px;font-weight:600;
}
.dns__kopie:hover{border-color:#C9CCBE}
.dns__kopie svg{width:12px;height:12px}

/* --- poznámkové pruhy --------------------------------------------------------- */
.pruh{display:flex;align-items:center;gap:13px;padding:14px 16px;border-radius:14px;background:var(--panel)}
.pruh > svg{width:18px;height:18px;flex:0 0 auto;color:var(--ink2)}
.pruh b{display:block;font-size:13.5px;font-weight:600}
.pruh small{display:block;margin-top:2px;font-size:12.5px;line-height:1.45;color:var(--ink2)}
.pruh__w{flex:1;min-width:0}
.pruh--limetka{background:var(--acc-soft)}
.pruh .btn{flex:0 0 auto}

@media (max-width:980px){
  .weby{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .weby{grid-template-columns:1fr}
  .stranka__hlava{align-items:stretch}
  .stranka__hlava .btn{width:100%;justify-content:center}
  .pruh{flex-wrap:wrap}
  .pruh .btn{width:100%;justify-content:center}
}

/* --- POPTÁVKY ----------------------------------------------------------------
   Dva sloupce: vlevo seznam, vpravo celá zpráva. Poptávky se čtou jedna
   po druhé a proklikávat se do detailu a zpátky je u toho jen zdržování. */
.schranka{display:flex;gap:24px;align-items:flex-start;padding-block:36px 64px}
.schranka__seznam{flex:0 0 340px;display:flex;flex-direction:column;gap:3px;min-width:0}
.schranka__hlava{display:flex;align-items:center;gap:11px}
.schranka__hlava h1{margin:0;font-family:Archivo,sans-serif;font-weight:800;font-size:28px;letter-spacing:-.9px}
.schranka__lead{margin:0 0 12px;font-size:12.5px;color:var(--ink2)}

.pocet{padding:5px 11px;border-radius:999px;background:var(--acc);font-size:11.5px;font-weight:700}
.pocet--nova{flex:0 0 auto}

.zprava{display:flex;align-items:center;gap:11px;padding:12px;border-radius:13px;transition:background .15s ease}
.zprava:hover{background:var(--panel)}
.zprava.je-otevrena{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.zprava__av{
  width:36px;height:36px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  border-radius:999px;background:var(--acc);font-size:12px;font-weight:700;
}
.zprava__av--ctena{background:var(--panel);color:var(--ink2)}
.zprava__w{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.zprava__vrch{display:flex;align-items:baseline;gap:10px}
.zprava__vrch b{flex:1;min-width:0;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zprava__vrch span{flex:0 0 auto;font-size:11px;color:var(--ink2)}
.zprava__uryvek{font-size:12.5px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zprava__nova{width:7px;height:7px;flex:0 0 auto;border-radius:999px;background:var(--acc)}

.schranka__detail{flex:1;min-width:0;display:flex;flex-direction:column;gap:20px;padding:24px;border:1px solid var(--line);border-radius:20px;background:#fff}
.detail__hlava{display:flex;align-items:flex-start;gap:16px}
.detail__hlava h2{margin:0;font-family:Archivo,sans-serif;font-weight:800;font-size:21px;letter-spacing:-.5px}
.kontakty{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:8px}
.kontakty span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink2)}
.kontakty svg{width:14px;height:14px;flex:0 0 auto}

.dopis{display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:14px;background:var(--page)}
.dopis p{margin:0;font-size:14px;line-height:1.65}
.dopis__souhlas{display:flex;align-items:center;gap:8px;margin-top:4px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;color:var(--ink2)}
.dopis__souhlas svg{width:14px;height:14px;flex:0 0 auto}

.detail__akce{display:flex;flex-wrap:wrap;gap:10px}
.detail__akce .btn{padding:11px 20px;font-size:13.5px}

@media (max-width:900px){
  .schranka{flex-direction:column}
  .schranka__seznam{flex:0 0 auto;width:100%}
  .schranka__detail{width:100%}
}

/* --- KARTA NASTAVENÍ ---------------------------------------------------------- */
.karta{display:flex;flex-direction:column;gap:16px;padding:22px;border:1px solid var(--line);border-radius:18px;background:#fff}
.karta h2{margin:0;font-family:Archivo,sans-serif;font-weight:700;font-size:15.5px}
.karta__hlava{display:flex;gap:13px;align-items:flex-start}
.karta__ikona{
  width:38px;height:38px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  border-radius:12px;background:var(--panel);
}
.karta__ikona svg{width:17px;height:17px;color:var(--ink2)}
.karta__hlava b{display:block;font-family:Archivo,sans-serif;font-weight:700;font-size:15.5px}
.karta__hlava small{display:block;margin-top:3px;font-size:12.5px;line-height:1.5;color:var(--ink2)}
.karta__cara{display:flex;align-items:center;justify-content:space-between;gap:12px}
.karta__cara b{font-family:Archivo,sans-serif;font-weight:700;font-size:15.5px}

.formpole__vstup textarea{flex:1;min-width:0;border:0;background:none;outline:none;resize:vertical;font:inherit;font-size:14px;line-height:1.5}

.volba{display:flex;align-items:center;gap:16px;padding-top:16px;border-top:1px solid var(--line)}
.volba > div{flex:1;min-width:0}
.volba b{display:block;font-size:13.5px;font-weight:600}
.volba small{display:block;margin-top:2px;font-size:12.5px;line-height:1.45;color:var(--ink2)}

/* Vypínač — jediná limetka na stránce nastavení. Stav „zapnuto" se tím
   pozná bez čtení. */
.prepinac{
  width:44px;height:26px;flex:0 0 auto;position:relative;
  border:0;border-radius:999px;background:#D7DACD;cursor:pointer;
  transition:background .18s ease;
}
.prepinac::after{
  content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;
  border-radius:999px;background:#fff;transition:transform .18s ease;
  box-shadow:0 1px 2px rgba(15,20,10,.2);
}
.prepinac[aria-checked="true"]{background:var(--acc)}
.prepinac[aria-checked="true"]::after{transform:translateX(18px)}

/* --- ukázka výsledku na Googlu ------------------------------------------------
   Ukázka místo popisu pravidel: „do 160 znaků" nikomu nic neřekne, tohle ano. */
.google{display:flex;flex-direction:column;gap:3px;padding:16px;border-radius:14px;background:var(--page);border:1px solid var(--line)}
.google small{margin-bottom:5px;font-size:10px;font-weight:700;letter-spacing:.7px;color:var(--ink2)}
.google__url{font-size:12px;color:var(--ink2)}
.google__nadpis{font-size:16px;font-weight:600;color:#1A3FA0}
.google__popis{font-size:12.5px;line-height:1.5;color:var(--ink2)}

/* --- doplňky ------------------------------------------------------------------- */
.doplnky{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.doplnek{display:flex;align-items:flex-start;gap:12px;padding:13px;border:1px solid var(--line);border-radius:14px}
.doplnek.je-vypnuty{opacity:.55}
.doplnek__ikona{
  width:34px;height:34px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  border-radius:11px;background:var(--panel);
}
.doplnek__ikona svg{width:16px;height:16px;color:var(--ink2)}
.doplnek__text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.doplnek__text b{font-size:13.5px;font-weight:600}
.doplnek__text small{font-size:12px;line-height:1.45;color:var(--ink2)}
.doplnek__akce{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.doplnek__x{
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border:0;border-radius:999px;background:none;cursor:pointer;color:var(--ink2);
}
.doplnek__x:hover{background:var(--panel);color:var(--ink)}
.doplnek__x svg{width:14px;height:14px}

.znacka{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:3px;padding:3px 9px;border-radius:999px;background:var(--panel);font-size:11px;color:var(--ink2)}
.znacka svg{width:12px;height:12px;flex:0 0 auto}
.znacka--pozor{background:#FBF3D8;color:#7A5A12}

.doplnky__pata{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:4px}
.doplnky__pata p{margin:0;flex:1;min-width:200px;font-size:12px;line-height:1.5;color:var(--ink2)}
.doplnky__pata .btn{padding:10px 16px;font-size:13px}

/* --- nebezpečná zóna ------------------------------------------------------------
   Vlastní karta úplně dole a bez červené plochy: výstraha má být vidět,
   ne strašit pokaždé, co člověk otevře nastavení. */
.nebezpeci{display:flex;align-items:center;gap:16px;padding:18px 22px;border:1px solid #E7CFCB;border-radius:18px;background:#FDF6F5}
.nebezpeci > div{flex:1;min-width:0}
.nebezpeci b{display:block;font-size:13.5px;font-weight:600}
.nebezpeci small{display:block;margin-top:2px;font-size:12.5px;color:var(--ink2)}
.nebezpeci button{
  flex:0 0 auto;padding:10px 18px;border:1px solid #D99A91;border-radius:999px;background:#fff;
  cursor:pointer;font-size:13px;font-weight:600;color:#9A3B2E;
}
.nebezpeci button:hover{background:#9A3B2E;border-color:#9A3B2E;color:#fff}

/* --- ÚČET ------------------------------------------------------------------------ */
.radka{display:flex;align-items:center;gap:13px}
.radka__w{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.radka__w b{font-size:14.5px;font-weight:700}
.radka__w small{font-size:12.5px;color:var(--ink2)}
.radka__odkaz{flex:0 0 auto;font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.inicialy--velke{width:44px;height:44px;font-size:14px}

/* Nezaplacený tarif je nabídka, tak svítí; zaplacený je stav, a ten se hlásí
   jen obrysem a odznakem. Limetková plocha přes celou kartu dávala každému
   otevření stránky poplach, i když nebylo co řešit. */
/* Karta je bílá v obou stavech. Limetková plocha pod limetkovým tlačítkem ho
   spolkla a karta vypadala jako jeden zelený obdélník; teď nese barvu jen
   tlačítko, odznak a odškrtnutí — a na bílé je konečně vidět. */
.karta--tarif{background:#fff;border-color:#CFE59B;box-shadow:0 12px 34px #14160F0A}
/* Cena, zbytek měsíce a datum drží pohromadě ve vlastní vaničce. Volně na
   kartě z toho byly tři drobné odstavce pod sebou a karta neměla těžiště. */
.tarif__stav{display:flex;flex-direction:column;gap:12px;padding:16px 18px;border:1px solid var(--line);border-radius:15px;background:var(--page)}
.tarif__vyhody{display:grid;gap:9px;margin:0;padding:0;list-style:none;font-size:13.5px}
.tarif__vyhody li{display:flex;align-items:center;gap:10px}
.tarif__vyhody svg{width:19px;height:19px;flex:0 0 auto;padding:3px;border-radius:50%;background:var(--acc-soft);color:#3F5410}
.tarif__pruh{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.tarif__castka{display:flex;align-items:baseline;gap:6px;margin:0;font-family:Archivo,sans-serif;font-weight:800;font-size:30px;letter-spacing:-1px}
.tarif__castka span{font-family:Inter,sans-serif;font-weight:500;font-size:13px;letter-spacing:0;color:var(--ink2)}
.tarif__zbyva{margin:0;font-family:Archivo,sans-serif;font-weight:700;font-size:14.5px}
.tarif__pas{height:7px;overflow:hidden;border-radius:99px;background:#E1E3D8}
.tarif__pas span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#9FE01E,#C7F24C)}
.tarif__plati{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;color:var(--ink2)}
.tarif__plati svg{width:16px;height:16px;flex:0 0 auto}
.tarif__plati b{font-weight:600;color:var(--ink)}
.tarif__pozn{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:12px;line-height:1.5;color:var(--ink2)}
.tarif__pozn svg{width:14px;height:14px;flex:0 0 auto;margin-top:2px}
.karta__hlava .znacka{margin-left:auto}
.znacka--aktivni{padding:4px 11px;background:var(--acc);color:var(--ink);font-size:11.5px;font-weight:700}
.znacka--zbytek{padding:4px 11px;font-size:11.5px;font-weight:600}
.znacka--zbytek.je-dosly{background:#FBF3D8;color:#7A5A12}
.karta--tarif .btn--ghost{background:#fff}
.zrusit{border:0;background:none;padding:0;cursor:pointer;font-size:13px;font-weight:600;color:var(--ink2);text-decoration:underline;text-underline-offset:3px}
.zrusit:hover{color:var(--ink)}

/* Datum a částka drží svůj sloupec, popis období se vejde pod datum. Dřív
   stálo všechno v jedné větě, lámalo se přes dva řádky a částka se vedle
   toho posouvala u každé platby jinam. */
.karta__prazdno{margin:0;font-size:13px;color:var(--ink2)}
.faktury{list-style:none;display:flex;flex-direction:column;margin:0;padding:0}
.faktura{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line);font-size:13.5px}
.faktura__kdy{display:flex;min-width:0;flex:1;flex-direction:column;gap:2px}
.faktura__kdy b{font-weight:600}
.faktura__kdy small{font-size:12px;color:var(--ink2)}
.faktura__castka{flex:0 0 auto;min-width:72px;text-align:right;font-weight:700}
.faktura .znacka{align-self:center;margin-top:0}

@media (max-width:620px){
  .karta{padding:18px}
  .volba{flex-wrap:wrap;gap:10px}
  .doplnek{flex-wrap:wrap}
  .nebezpeci{flex-wrap:wrap}
  .nebezpeci button{width:100%}
  /* Na telefon se odznak vedle názvu nevejde — zmáčkl by titulek do sloupce
     o třech písmenech. Jde tedy pod ikonu i text, na vlastní řádku. */
  .karta--tarif .karta__hlava{display:grid;grid-template-columns:auto 1fr;align-items:start}
  .karta--tarif .karta__hlava .znacka{grid-column:1/-1;justify-self:start;margin:0}
  .tarif__pruh form{flex:1 0 100%}
  .tarif__pruh .btn{width:100%;justify-content:center}
  /* Na tři sloupce tu není šířka: datum si vezme řádku, částka se stavem jdou
     pod něj. Vedle sebe se mačkaly a částka skákala doprostřed. */
  .faktura{flex-wrap:wrap;gap:7px 10px}
  .faktura__kdy{flex:1 0 100%}
  .faktura__castka{min-width:0;text-align:left}
}

/* --- PŘIHLÁŠENÍ A 404 ----------------------------------------------------------
   Obě stránky jsou jedna karta na střed. Není tu lišta: v jednom případě
   ještě nejsme přihlášení, ve druhém nevíme, kde jsme — navigace, která
   odnikud nikam nevede, by jen mátla. */
.vstup-stranka{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px 24px}
.vstup-karta{
  width:100%;max-width:440px;display:flex;flex-direction:column;gap:22px;
  padding:34px;border:1px solid var(--line);border-radius:22px;background:#fff;
  box-shadow:0 24px 60px rgba(15,20,10,.08);
}
.vstup-karta--stred{align-items:center;text-align:center;max-width:480px}
.vstup-karta__logo{display:block;height:30px;width:auto}
.vstup-karta__text{display:flex;flex-direction:column;gap:8px}
.vstup-karta__text h1{margin:0;font-family:Archivo,sans-serif;font-weight:800;font-size:27px;line-height:1.15;letter-spacing:-.9px}
.vstup-karta__text p{margin:0;font-size:14px;line-height:1.6;color:var(--ink2)}
.vstup-karta__form{display:flex;flex-direction:column;gap:14px}
.vstup-karta__form .btn{width:100%;justify-content:center}
.vstup-karta__pozn{display:flex;align-items:center;gap:8px;margin:0;font-size:12.5px;color:var(--ink2)}
.vstup-karta__pozn svg{width:14px;height:14px;flex:0 0 auto}
.vstup-karta__pata{margin:0;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--ink2)}
.vstup-karta__pata a{font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.vstup-karta__akce{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

@media (max-width:480px){
  .vstup-karta{padding:26px}
  .vstup-karta__akce .btn{width:100%;justify-content:center}
}