:root{--bg:#f4f6fb;--card:#fff;--text:#182033;--muted:#667085;--line:#dfe4ee;--brand:#5b52e8;--brand2:#8b5cf6;--ok:#087f5b;--warn:#b45309;--danger:#b42318;--shadow:0 18px 55px rgba(20,29,55,.10)}
@media(prefers-color-scheme:dark){:root{--bg:#090d18;--card:#121827;--text:#f5f7ff;--muted:#a8b2c7;--line:#293249;--shadow:0 18px 55px #0007}}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.55 Inter,system-ui,-apple-system,Segoe UI,sans-serif}button,input,select,textarea{font:inherit}a{color:inherit}.px-shell{min-height:100vh}.px-top{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px clamp(16px,4vw,48px);border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(16px)}.px-brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-weight:950}.px-logo{width:39px;height:39px;display:grid;place-items:center;border-radius:12px;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:0 10px 28px #6d5df655}.px-top-actions{display:flex;gap:9px;align-items:center}.px-btn{min-height:42px;padding:9px 15px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--text);font-weight:850;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px}.px-btn.primary{border-color:transparent;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff}.px-btn.danger{color:var(--danger);border-color:#f1b8b3}.px-main{width:min(1240px,calc(100% - 28px));margin:26px auto 70px}.px-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:22px}.px-hero h1{margin:0;font-size:clamp(27px,4vw,44px);line-height:1.1}.px-hero p{margin:8px 0 0;color:var(--muted);max-width:760px}.px-layout{display:grid;grid-template-columns:245px minmax(0,1fr);gap:20px}.px-nav{position:sticky;top:82px;align-self:start;padding:10px;border:1px solid var(--line);border-radius:18px;background:var(--card);box-shadow:var(--shadow)}.px-nav a,.px-nav button{width:100%;display:flex;align-items:center;gap:10px;padding:11px 12px;margin:2px 0;border:0;border-radius:11px;background:transparent;color:var(--muted);text-decoration:none;text-align:left;font-weight:780;cursor:pointer}.px-nav a.active,.px-nav a:hover{background:color-mix(in srgb,var(--brand) 12%,var(--card));color:var(--brand)}.px-content{min-width:0}.px-section{display:none}.px-section.active{display:block}.px-card{padding:clamp(17px,3vw,27px);margin-bottom:16px;border:1px solid var(--line);border-radius:20px;background:var(--card);box-shadow:var(--shadow)}.px-card h2,.px-card h3{margin:0 0 6px}.px-card>p,.px-help{color:var(--muted);margin:0 0 18px}.px-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.px-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.px-field{display:grid;gap:6px}.px-field.full{grid-column:1/-1}.px-field label{font-size:12px;font-weight:850}.px-field input,.px-field select,.px-field textarea{width:100%;min-width:0;padding:11px 12px;border:1px solid var(--line);border-radius:11px;background:var(--bg);color:var(--text)}.px-field textarea{min-height:95px;resize:vertical}.px-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}.px-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.px-stat{padding:15px;border:1px solid var(--line);border-radius:15px;background:var(--card)}.px-stat small{display:block;color:var(--muted);font-weight:800}.px-stat b{display:block;margin-top:5px;font-size:18px}.px-alert{padding:13px 15px;border-radius:13px;margin:12px 0;background:#fff8e7;color:#744a00;border:1px solid #f1d58e}.px-alert.ok{background:#eafaf3;color:#075f45;border-color:#9ce0c7}.px-alert.error{background:#fff0f0;color:#9b1c1c;border-color:#f0b4b4}.px-switch{display:flex;gap:11px;align-items:flex-start;padding:13px;border:1px solid var(--line);border-radius:13px}.px-switch input{margin-top:4px;transform:scale(1.15)}.px-switch span{color:var(--muted);font-size:13px}.px-plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.px-plan{position:relative;padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--card)}.px-plan.selected{border-color:var(--brand);box-shadow:0 0 0 3px #6558e81c}.px-plan h3{font-size:20px}.px-price{font-size:25px;font-weight:950;margin:8px 0}.px-price small{font-size:12px;color:var(--muted)}
.px-price-was{margin-right:6px;color:var(--muted);font-size:16px;font-weight:800;text-decoration-thickness:2px;opacity:.75}
.px-price-now{color:#5548e8}
.px-price-off{display:inline-block;margin-left:6px;padding:3px 8px;border-radius:999px;background:#dcfce7;color:#15803d;font-size:11px;font-weight:900;vertical-align:middle}
html[data-plevix-theme="dark"] .px-price-now{color:#c4b5fd}
/* Upozornenie v tme. Farby ostavaju vyznamove (jantar = pozor, cervena =
   chyba), len su tmave. Kontrast textu: jantar 11,1 a cervena 9,1 — obe
   vysoko nad normou 4,5. */
html[data-plevix-theme="dark"] .px-alert{background:#2a2008;color:#fcd34d;
  border-color:#78571a}
html[data-plevix-theme="dark"] .px-alert.error{background:#2c1416;color:#fca5a5;
  border-color:#7f2a2a}
/* Karta balika ma vo svetlom rezime polopriehladnu bielu (.55). V tme z nej
   bol sivy blok a text sa v nom stracal. Tu staci nepatrne presvetlenie —
   karta ma vyzerat vyvysena, nie vysvietena. */
html[data-plevix-theme="dark"] .px-plan-public{background:rgba(255,255,255,.04);
  border-color:rgba(148,163,184,.22)}
html[data-plevix-theme="dark"] .px-plan-public.featured{border-color:#7c6ff2;
  background:rgba(124,111,242,.10);box-shadow:0 10px 30px rgba(109,94,252,.22)}
/* Vyplna aktivnej dlazdice kroku. --brand je v tme zosvetlena kvoli textu,
   pod bielym pismom by ale mala kontrast 3,15 (norma ziada 4,5). Tato
   sytejsia dava 5,5 rovnako ako svetly rezim. */
html[data-plevix-theme="dark"] .px-step.active{background:#4f46e5;border-color:#4f46e5;color:#fff}
html[data-plevix-theme="dark"] .px-price-off{background:rgba(34,197,94,.2);color:#86efac}
.px-plan ul{padding-left:18px;color:var(--muted);min-height:120px}.px-steps{display:flex;gap:8px;overflow:auto;margin-bottom:18px;padding-bottom:3px}.px-step{white-space:nowrap;padding:8px 11px;border-radius:99px;background:var(--card);border:1px solid var(--line);color:var(--muted);font-size:12px;font-weight:850}.px-step.active{background:var(--brand);border-color:var(--brand);color:#fff}.px-checklist{display:grid;gap:9px}.px-check{display:flex;justify-content:space-between;gap:15px;padding:12px;border:1px solid var(--line);border-radius:12px}.px-check.ok b{color:var(--ok)}.px-check.missing b{color:var(--danger)}.px-promo{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}.px-summary{display:grid;gap:8px}.px-summary div{display:flex;justify-content:space-between;gap:20px;padding:9px 0;border-bottom:1px solid var(--line)}.px-summary div:last-child{border:0;font-size:17px;font-weight:900}.px-hidden{display:none!important}.px-code{padding:14px;border-radius:12px;background:#090d18;color:#e9edff;font:800 14px/1.6 ui-monospace,monospace;word-break:break-all}.px-recovery{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.px-recovery code{padding:9px;border:1px solid var(--line);border-radius:9px;background:var(--bg);text-align:center}.px-danger-zone{border-color:#efc3c0}.px-mobile-menu{display:none}
@media(max-width:900px){.px-layout{grid-template-columns:1fr}.px-nav{position:static;display:flex;overflow:auto}.px-nav a{min-width:max-content}.px-stat-grid{grid-template-columns:repeat(2,1fr)}.px-plan-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.px-main{width:min(100% - 18px,1240px);margin-top:14px}.px-top{padding:10px 12px}.px-brand span:last-child{display:none}.px-top-actions .optional{display:none}.px-hero{display:block}.px-layout{gap:12px}.px-nav{padding:7px;border-radius:14px}.px-card{border-radius:16px}.px-grid,.px-grid.three,.px-stat-grid,.px-plan-grid{grid-template-columns:1fr}.px-field.full{grid-column:auto}.px-plan ul{min-height:0}.px-promo{grid-template-columns:1fr}.px-actions{display:grid}.px-actions .px-btn{width:100%}.px-check{align-items:flex-start}.px-recovery{grid-template-columns:1fr}.px-summary div{align-items:flex-start}.px-hero h1{font-size:30px}}


/* PLEVIX v67 – bezpečné zalamovanie profilu a mobilné centrum predplatného */
.px-stat,.px-stat b,.px-stat small,.px-card,.px-check,.px-switch,.px-switch>div{min-width:0}
.px-stat b,.px-stat small,[data-user-name],[data-company],[data-plan]{max-width:100%;overflow-wrap:anywhere;word-break:break-word;white-space:normal}
.px-switch>div{flex:1}.px-switch b,.px-switch span{display:block;overflow-wrap:anywhere}
.px-plan,.px-plan h3,.px-plan p,.px-plan li{min-width:0;overflow-wrap:anywhere}
@media(max-width:620px){
  .px-top{align-items:flex-start}.px-top-actions{flex-wrap:wrap;justify-content:flex-end}
  .px-steps{scroll-snap-type:x proximity}.px-step{scroll-snap-align:start}
  .px-switch{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;padding:14px}
  .px-switch input{margin:3px 0 0;width:18px;height:18px}
  .px-summary div{display:grid;grid-template-columns:1fr;gap:3px}.px-summary b{text-align:left;overflow-wrap:anywhere}
  .px-card{padding:16px}.px-plan{padding:16px}.px-plan-grid{gap:10px}
}

/* v67: profilová navigácia bez skrytých položiek na mobile */
@media(max-width:620px){.px-nav{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;overflow:visible!important;gap:5px}.px-nav a,.px-nav button{min-width:0!important;white-space:normal!important;overflow-wrap:anywhere!important;margin:0!important}}
@media(max-width:350px){.px-nav{grid-template-columns:1fr!important}}

@media(max-width:900px) and (min-width:621px){.px-nav{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;overflow:visible!important;gap:5px}.px-nav a,.px-nav button{min-width:0!important;white-space:normal!important;overflow-wrap:anywhere!important;margin:0!important}}

.px-internal-admin{margin:0 0 18px;padding:13px 16px;border:1px solid #8b5cf6;border-radius:14px;background:color-mix(in srgb,#8b5cf6 10%,var(--card));color:var(--text);font-weight:750}.px-internal-admin[hidden]{display:none!important}.px-internal-admin b{display:block;margin-bottom:2px}.px-internal-admin span{color:var(--muted);font-weight:600}

/* Verejný cenník pre neprihlásených (v71) */
.px-public-pricing #planGrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-items:stretch}
.px-plan-public{display:flex;flex-direction:column;gap:10px;padding:20px;border:1px solid rgba(148,163,184,.32);border-radius:16px;background:rgba(255,255,255,.55)}
.px-plan-public.featured{border-color:#6d5efc;box-shadow:0 10px 30px rgba(109,94,252,.16)}
.px-plan-public h3{margin:0;font-size:18px}
.px-plan-public-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.px-plan-public-price del{color:#94a3b8;font-size:14px}
.px-plan-public-price strong{font-size:26px;line-height:1.1}
.px-plan-public-price small{color:#64748b;font-size:12px}
.px-plan-public p{margin:0;flex:1;font-size:13px;line-height:1.55;color:#475569}
.px-plan-public .px-btn{display:inline-block;text-align:center;padding:10px 14px;border-radius:10px;background:#6d5efc;color:#fff;text-decoration:none;font-weight:600}
.px-plan-public .px-btn:hover{filter:brightness(1.06)}
.px-plan-public-note{grid-column:1/-1;margin:6px 0 0;font-size:12px;line-height:1.6;color:#64748b}
@media (prefers-color-scheme:dark){
  .px-plan-public{background:rgba(15,23,42,.5);border-color:rgba(148,163,184,.22)}
  .px-plan-public p{color:#cbd5e1}
  .px-plan-public-note{color:#94a3b8}
}

/* Zoskupená navigácia profilu (v71) – 9 plochých položiek bolo neprehľadných */
.px-nav-grouped{display:flex;flex-direction:column;gap:2px}
.px-nav-group{margin:14px 0 4px;padding:0 12px;font:900 10px/1.2 inherit;letter-spacing:.09em;text-transform:uppercase;color:#94a3b8}
.px-nav-group:first-child{margin-top:0}
.px-nav-grouped a{padding:9px 12px;border-radius:10px;text-decoration:none;color:inherit;font-size:14px}
.px-nav-grouped a:hover{background:rgba(109,94,252,.1)}
.px-nav-grouped a.active{background:#6d5efc;color:#fff;font-weight:700}
.px-nav-danger{color:#b91c1c!important}
.px-nav-danger.active{background:#b91c1c!important;color:#fff!important}
/* V tme je #b91c1c na tmavom podklade necitatelna (2,69). Svetlejsia
   cervena dava 6,29 a pouziva sa na tejto stranke aj inde, takze sa nelisi.
   Aktivny stav sa NEMENI - biela na #b91c1c ma 6,47 a vyhovuje. */
html[data-plevix-theme="dark"] .px-nav-danger{color:#f87171!important}
/* Aktivna polozka menu: biela na #6d5efc dava 4,51 — norma je 4,5, cize
   rezerva jedna stotina. Sytejsia vyplna dava 6,29 a je to ta ista, aku
   pouziva aktivna dlazdica kroku v nastavovaci. */
html[data-plevix-theme="dark"] .px-nav-grouped a.active{background:#4f46e5}
/* Tlacidlo Odhlasit: #ef4444 na ploche menu dava 4,62. Svetlejsia cervena
   je ta ista, aku uz pouziva odkaz Zrusenie uctu. */
html[data-plevix-theme="dark"] .px-nav button.px-nav-signout,
html[data-plevix-theme="dark"] .px-nav-signout{border-color:#f87171;color:#f87171}
html[data-plevix-theme="dark"] .px-nav button.px-nav-signout:hover,
html[data-plevix-theme="dark"] .px-nav-signout:hover{background:#f87171;color:#0b101b}
.px-nav button.px-nav-signout,.px-nav-signout{margin-top:6px;padding:10px 12px;border:1px solid #ef4444;border-radius:10px;background:transparent;
  color:#ef4444;font:800 13px inherit;cursor:pointer;text-align:left;transition:background .15s,color .15s}
.px-nav button.px-nav-signout:hover,.px-nav-signout:hover{background:#ef4444;color:#fff}
.px-nav button.px-nav-signout:focus-visible,.px-nav-signout:focus-visible{outline:2px solid #ef4444;outline-offset:2px}
.px-nav button.px-nav-signout[disabled],.px-nav-signout[disabled]{opacity:.6;cursor:default}
@media(max-width:820px){
  .px-nav-grouped{flex-direction:row;flex-wrap:wrap;gap:6px}
  .px-nav-group{flex-basis:100%;margin:8px 0 0;padding:0}
  .px-nav button.px-nav-signout,.px-nav-signout{flex-basis:100%;text-align:center}
}
/* Poistka: navigačné pravidlo .px-nav button prebíja triedu, preto explicitne. */
.px-nav button.px-nav-signout{border-color:#ef4444;color:#ef4444;background:transparent;justify-content:center}
.px-nav button.px-nav-signout:hover{background:#ef4444;color:#fff;border-color:#ef4444}

/* Portál (Predplatné, Profil) stojí na premenných — v tmavom režime stačí
   prepnúť ich, netreba prepisovať jednotlivé pravidlá. Bez toho ostávali
   karty, štítky krokov, tlačidlá a bočné menu biele. */
html[data-plevix-theme="dark"]{
  --bg:#0b101b;
  --card:#141a27;
  --text:#e8edf7;
  --muted:#9aa6ba;
  --line:#303a50;
  --brand:#8b83f5;
  --brand2:#a78bfa;
  --ok:#34d399;
  --warn:#fbbf24;
  --danger:#f87171;
  --shadow:0 18px 55px rgba(0,0,0,.45);
}

/* Objednávka bez výberu: jedna karta s odkazom do nastavovača. */
.px-plan-prazdny{grid-column:1/-1;text-align:center}
.px-plan-prazdny .btn{margin-top:10px;display:inline-block}

/* Verejný cenník bez balíkov: jedna karta cez celú šírku mriežky. */
.px-plan-public-vyber{grid-column:1/-1;max-width:520px;margin:0 auto;text-align:center}

/* Oznam o pozastavenom predaji — nad kartami, cez celú šírku. */
.px-plan-pozastavene{grid-column:1/-1;border-color:#f59e0b;background:#fffbeb}
.px-plan-pozastavene h3{color:#92400e}
html[data-plevix-theme="dark"] .px-plan-pozastavene{background:#2a1f05;border-color:#a16207}
html[data-plevix-theme="dark"] .px-plan-pozastavene h3{color:#fcd34d}

/* Oznam o pozastavení aj vo verejnom cenníku. */
.px-plan-public.px-plan-pozastavene{grid-column:1/-1;border-color:#f59e0b;background:#fffbeb}
.px-plan-public.px-plan-pozastavene h3{color:#92400e}
html[data-plevix-theme="dark"] .px-plan-public.px-plan-pozastavene{background:#2a1f05;border-color:#a16207}
html[data-plevix-theme="dark"] .px-plan-public.px-plan-pozastavene h3{color:#fcd34d}

/* ── Vernostná úroveň ───────────────────────────────────────────────────────
   Program, o ktorom zákazník nevie, nedrží nikoho. Celý jeho zmysel je v tom,
   že vidí, koľko už nasporil a čo by stratil.

   Tmavý režim sa píše hneď TU, nie neskôr. Na tomto projekte sa naň
   opakovane zabudlo a prišlo sa na to až meraním kontrastu — text mal na
   tmavom podklade kontrast pod dva. */
.vernost-karta{
  margin-top:14px;padding:16px 18px;border-radius:16px;
  border:1px solid var(--line,#e3e7f0);background:var(--tichy,#f8f9fd)
}
.vernost-hlava{display:flex;align-items:center;justify-content:space-between;gap:12px}
.vernost-hlava b{font-size:15px;letter-spacing:-.02em}
.vernost-zlava{
  flex:0 0 auto;padding:4px 10px;border-radius:999px;
  background:#5548e8;color:#fff;font-size:12.5px;font-weight:800;
  font-variant-numeric:tabular-nums
}
/* Pruh: číslo bez neho nikto neprečíta ako „ešte tri mesiace". */
.vernost-pruh{
  margin-top:10px;height:8px;border-radius:999px;overflow:hidden;
  background:var(--line,#e3e7f0)
}
.vernost-pruh i{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,#5548e8,#8b5cf6);
  transition:width .35s ease
}
@media (prefers-reduced-motion:reduce){.vernost-pruh i{transition:none}}
.vernost-dalej{margin:10px 0 0;font-size:12.5px;line-height:1.6;color:var(--muted,#5b6779)}
.vernost-pozor{
  margin:8px 0 0;font-size:11.5px;line-height:1.6;color:var(--muted,#5b6779);
  opacity:.9
}
.vernost-pozor b{color:var(--text,#16203a)}

html[data-plevix-theme="dark"] .vernost-karta{
  background:#131a2b;border-color:#28304a
}
html[data-plevix-theme="dark"] .vernost-pruh{background:#28304a}
/* Priehladnost na tmavom podklade zrazila kontrast pod tri — preto tu nie je. */
html[data-plevix-theme="dark"] .vernost-pozor{color:#a9b4cc;opacity:1}
html[data-plevix-theme="dark"] .vernost-dalej{color:#a9b4cc}
html[data-plevix-theme="dark"] .vernost-pozor b{color:#e8ecf6}