/* === UpWolf — design language „Den" (krém + oranžový signal akcent).
   Názvy tokenů zůstávají --sj-* kvůli zpětné kompatibilitě komponent. === */
:root{
  --sj-blue:#FF6A2B; --sj-blue-ink:#D8541F; --sj-black:#1B1814; --sj-white:#fff;
  --sj-paper:#F4EEE2; --sj-ink:#1B1814; --sj-ink-muted:#6B6253; --sj-line:#E0D6C2;
  --sj-green:#0F6E45; --sj-red:#A3382C; --sj-pink:#D4537E; --sj-gold:#C9912F;
  --sj-blue-soft:#FBE4D7;
  --sj-signal-ink:#2A1102; --sj-surface:#fff; --sj-link:#C24A12; --sj-moon:#C9912F; --sj-paper-2:#EFE7D6;
  --sj-radius:16px; --sj-radius-btn:999px;
  --sj-shadow:0 14px 34px rgba(74,46,12,.10);
  --sj-head:'Space Grotesk',-apple-system,system-ui,sans-serif;
  --sj-serif:'Fraunces',Georgia,serif;
  --sj-body:'Inter',-apple-system,system-ui,sans-serif;
  --maxw:1200px; /* 1 080 → 1 200 (23. 10. 2026): výpis nabídek se štítky feedů se nevešel */
}
*{box-sizing:border-box;margin:0;padding:0}

/* --- Patička dole, když je stránky málo ------------------------------------
   Krátká stránka (typicky přehled s jednou kartou) končila patičkou v polovině
   okna a pod ní zbývalo prázdné pozadí — vypadalo to jako nedoručený obsah.
   Sloupcový flex a `flex:1` na hlavní části patičku odtlačí na spodní hranu; jak
   obsah přeroste okno, `flex-grow` už nic nepřidává a chování je jako dřív.

   `100dvh` bere v úvahu vysouvací lišty mobilních prohlížečů (u `100vh` patička
   po jejich schování vykoukne). `100vh` je před ním jako fallback pro prohlížeče,
   které `dvh` neznají — nová hodnota tu starou přepíše. */
body{font-family:var(--sj-body);color:var(--sj-ink);background:var(--sj-paper);line-height:1.5;
  min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}

/* Roste jen hlavní část. Patička ani blok se zpětnou vazbou se natahovat nesmí —
   měly by uvnitř vycentrovaný obsah a bílé pozadí patičky by zabralo půl okna. */
main.shell{flex:1 0 auto}
h1,h2,h3,.sj-head{font-family:var(--sj-head);font-weight:700;letter-spacing:-.02em;line-height:1.1}
a{color:var(--sj-link);text-decoration:none}
a:hover{text-decoration:underline}
.sj-up{color:var(--sj-blue);font-family:var(--sj-serif);font-style:italic;font-weight:600}

/* Header / lockup */
header{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--sj-line)}
.nav{max-width:var(--maxw);margin:0 auto;padding:0 22px;height:60px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:20px;letter-spacing:-.02em;font-family:var(--sj-head);color:var(--sj-ink)}
.logo:hover{text-decoration:none}
/* Co-brand lockup: produktové logo + StartupJobs Labs logo (jako na upjobs) */
.lockup{display:flex;align-items:center;gap:13px}
.lockup .sjlabs{display:flex;align-items:center;padding-left:13px;border-left:1px solid var(--sj-line)}
.logo-sjlabs{height:16px;width:auto;display:block;opacity:.85;transition:opacity .15s}
.lockup .sjlabs:hover .logo-sjlabs{opacity:1}
.powered{font-size:11px;color:var(--sj-ink-muted);font-weight:500;border-left:1px solid var(--sj-line);padding-left:9px;margin-left:3px;line-height:1.15}
.nav-links{display:flex;align-items:center;gap:18px;font-size:14px}
.nav-links a{color:var(--sj-ink);font-weight:500}
.nav-links form{display:inline}
.linkbtn{background:none;border:0;font:inherit;color:var(--sj-ink-muted);cursor:pointer}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--sj-ink);color:var(--sj-paper);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.nav-me{display:flex;align-items:center;gap:10px}
.nav-me-mail{display:none}

/* --- Přepínač účtů + pruh „jsi v cizím účtu" -------------------------------
   Jeden e-mail může mít víc týmů (migrace 050), takže kolečko s iniciálami už není
   ozdoba, ale místo, kde se pozná a mění aktuální účet. Rozbaluje se přes <details>
   ze stejného důvodu jako mobilní menu: CSP nepouští inline handlery.

   Pruh při vstupu do cizího účtu je červený a lepí se nahoře nad hlavičkou (ta se
   o jeho výšku posune) — zásah v cizím účtu „omylem" je ta nejdražší chyba, kterou
   tahle funkce umožňuje, tak ať to není přehlédnutelné ani po odscrollování. */
.acct{position:relative}
.acct>summary{display:flex;align-items:center;gap:9px;cursor:pointer;list-style:none;padding:4px 8px;border-radius:999px}
.acct>summary::-webkit-details-marker{display:none}
.acct>summary:hover,.acct[open]>summary{background:var(--sj-paper-2)}
.acct-current{font-size:14px;font-weight:600;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:40;min-width:250px;background:#fff;
  border:1px solid var(--sj-line);border-radius:12px;box-shadow:var(--sj-shadow);padding:6px;
  display:flex;flex-direction:column}
.acct-mail{font-size:12px;color:var(--sj-ink-muted);padding:8px 10px;overflow-wrap:anywhere;
  border-bottom:1px solid var(--sj-line);margin-bottom:4px}
.acct .acct-menu form{display:block;padding:0}
.acct-item{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  background:none;border:0;font:inherit;text-align:left;color:var(--sj-ink);padding:9px 10px;
  border-radius:8px;cursor:pointer}
.acct-item:hover{background:var(--sj-paper-2);text-decoration:none}
.acct-item-active{cursor:default;font-weight:600}
.acct-role{font-size:12px;color:var(--sj-ink-muted)}
.acct-admin{margin-top:4px;border-top:1px solid var(--sj-line);border-radius:0;color:var(--sj-link);font-weight:600}
.acting-bar{position:sticky;top:0;z-index:31;display:flex;align-items:center;justify-content:center;
  gap:14px;flex-wrap:wrap;min-height:36px;padding:5px 16px;background:var(--sj-red);color:#fff;
  font-size:13px;font-weight:600;text-align:center}
.acting-bar .btn{background:#fff;color:var(--sj-red);padding:5px 14px;font-size:13px;box-shadow:none}
.acting-bar .btn:hover{transform:none;box-shadow:none}
.is-acting header{top:36px}
.is-acting .acct-current{color:var(--sj-red)}

/* --- Menu na mobilu --------------------------------------------------------
   Šest odkazů se do řádku na telefonu nevejde. Panel se vysouvá zprava, stav drží
   skrytý checkbox — CSP nepouští inline handlery a kvůli jednomu přepínači nemá
   smysl přidávat skript. Checkbox zůstává zaostřitelný (mezerník menu otevře),
   jen se nekreslí. */
.nav-toggle{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.nav-burger,.nav-scrim{display:none}
.nav-burger{width:42px;height:42px;background:#fff;border:1px solid var(--sj-line);
  border-radius:10px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav-burger span{display:block;width:18px;height:2px;border-radius:2px;background:var(--sj-ink);transition:.18s}
.nav-toggle:focus-visible + .nav-burger{outline:2px solid var(--sj-blue);outline-offset:2px}

@media (max-width:860px){
  .nav{padding:0 16px}
  .nav-burger{display:flex}
  .nav-scrim{display:block;position:fixed;inset:60px 0 0;z-index:38;background:rgba(20,18,16,.35);
    opacity:0;pointer-events:none;transition:opacity .18s}
  .nav-links{position:fixed;top:60px;right:0;bottom:0;z-index:39;width:min(320px,86vw);
    flex-direction:column;align-items:stretch;gap:0;padding:0 0 20px;font-size:16px;overflow:auto;
    background:#fff;border-left:1px solid var(--sj-line);box-shadow:-18px 0 44px rgba(20,18,16,.14);
    transform:translateX(100%);transition:transform .2s ease;overscroll-behavior:contain}
  .nav-links a{padding:14px 20px;border-bottom:1px solid var(--sj-line)}
  .nav-links form{padding:16px 20px}
  .nav-links .linkbtn{font-size:16px}
  .nav-me{padding:16px 20px;border-bottom:1px solid var(--sj-line);background:var(--sj-paper-2)}
  .nav-me-mail{display:block;font-size:13px;color:var(--sj-ink-muted);overflow-wrap:anywhere}
  /* V panelu není kam vysouvat plovoucí nabídku — účty se prostě rozbalí v seznamu. */
  .acct{border-bottom:1px solid var(--sj-line);background:var(--sj-paper-2)}
  .acct>summary{padding:16px 20px;border-radius:0}
  .acct-menu{position:static;background:none;border:0;border-radius:0;box-shadow:none;padding:0 10px 10px}
  .acting-bar{position:static}
  .is-acting header{top:0}
  .nav-toggle:checked ~ .nav-links{transform:none}
  .nav-toggle:checked ~ .nav-scrim{opacity:1;pointer-events:auto}
  /**
   * Holá hlavička (účet čeká, až mu otevřeme) nemá burger, kterým by se panel otevřel —
   * musí proto zůstat v řádku, jinak by se na mobilu odsunula mimo obrazovku i s
   * odhlášením. Je v ní jen e-mail a „Odhlásit", takže se vejde.
   */
  .nav-links-bare{position:static;transform:none;width:auto;flex-direction:row;align-items:center;
    gap:10px;padding:0;font-size:14px;background:none;border-left:0;box-shadow:none;overflow:visible}
  .nav-links-bare form{padding:0}
  .nav-links-bare .linkbtn{font-size:14px}
  .nav-links-bare .nav-me{padding:0;border:0;background:none}
  .nav-links-bare .nav-me-mail{display:none}
  /* Otevřené menu má na tlačítku křížek — jinak není poznat, že se zavírá tamtéž. */
  .nav-toggle:checked + .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle:checked + .nav-burger span:nth-child(2){opacity:0}
  .nav-toggle:checked + .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* Shell */
.shell{max-width:var(--maxw);margin:0 auto;padding:30px 22px 60px}
.shell.narrow{max-width:460px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;padding:12px 20px;border-radius:var(--sj-radius-btn);border:0;cursor:pointer;transition:.15s;font-family:var(--sj-body)}
.btn-primary{background:var(--sj-blue);color:var(--sj-signal-ink);box-shadow:0 6px 0 #C44A12}
.btn-primary:hover{background:var(--sj-blue);transform:translateY(-2px);box-shadow:0 8px 0 #C44A12;text-decoration:none}
.btn-primary:active{transform:translateY(3px);box-shadow:0 3px 0 #C44A12}
.btn-ghost{background:var(--sj-surface);color:var(--sj-ink);border:1.5px solid var(--sj-line)}
.btn-ghost:hover{border-color:var(--sj-blue);color:var(--sj-blue-ink);text-decoration:none}
.btn-sm{padding:8px 14px;font-size:13px}

/* Cards */
.sj-card{background:#fff;border:1px solid var(--sj-line);border-radius:var(--sj-radius);box-shadow:var(--sj-shadow);padding:1.6em}
.sj-card + .sj-card{margin-top:18px}

/* Forms */
.field{display:block;width:100%;border:1.5px solid var(--sj-line);border-radius:10px;padding:12px 14px;font-size:15px;color:var(--sj-ink);outline:none;font-family:var(--sj-body)}
.field:focus{border-color:var(--sj-blue)}
textarea.field{min-height:90px;resize:vertical}
label{display:block;font-size:13px;font-weight:600;color:var(--sj-ink-muted);margin:14px 0 6px}
.hint{font-size:13px;color:var(--sj-ink-muted);margin-top:8px}

/* Eyebrow / headings */
.eyebrow{font-family:var(--sj-head);letter-spacing:.16em;text-transform:uppercase;font-size:.75rem;color:var(--sj-link);margin-bottom:8px}
h1.page{font-size:28px;margin-bottom:4px}
.sub{color:var(--sj-ink-muted);font-size:15px;margin-bottom:22px}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:24px}
.ds{background:#fff;border:1px solid var(--sj-line);border-radius:12px;padding:18px}
.ds .n{font-size:26px;font-weight:800;letter-spacing:-.02em;font-family:var(--sj-head)}
.ds .l{font-size:12.5px;color:var(--sj-ink-muted);margin-top:3px}

/* Table */
.table{width:100%;border-collapse:collapse;font-size:14px;background:#fff;border:1px solid var(--sj-line);border-radius:12px;overflow:hidden}
.table th{text-align:left;padding:12px 14px;background:var(--sj-paper);color:var(--sj-ink-muted);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.03em}
.table td{padding:12px 14px;border-top:1px solid var(--sj-line)}

/* Badges / status */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;border-radius:999px;padding:4px 11px;background:var(--sj-blue-soft);color:var(--sj-blue-ink)}
.st{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:13px}
.st::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sj-ink-muted)}
.st-live::before{background:var(--sj-green)}
.st-generating::before,.st-queued::before{background:var(--sj-gold)}
.st-review::before{background:var(--sj-gold)}
.st-failed::before{background:var(--sj-red)}
.st-paused::before,.st-expired::before,.st-canceled::before{background:var(--sj-ink-muted)}

/* Flash */
.flash{border-radius:10px;padding:12px 14px;font-size:14px;margin-bottom:16px}
.flash-success{background:#e6f7ef;color:#0a7d44;border:1px solid #b8ecd2}
.flash-error{background:#ffe9ec;color:#b3243a;border:1px solid #ffc7cf}

/* Creative preview (kampaň detail) — předloha dle prototypu */
.ad-card{border:1px solid var(--sj-line);border-radius:14px;overflow:hidden;background:#fff;max-width:420px}
.ad-visual{aspect-ratio:1.91/1;background:linear-gradient(135deg,#0d1b2a,#15314d);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:20px}
.ad-visual h4{font-size:20px;line-height:1.15;max-width:18ch}
.ad-body{padding:13px 14px}
.ad-cta-row{display:flex;align-items:center;justify-content:space-between;margin-top:12px;background:var(--sj-paper);border-radius:8px;padding:9px 12px}
.ad-cta-row .ab{font-size:13px;font-weight:700;background:#fff;border:1px solid var(--sj-line);padding:6px 12px;border-radius:7px}

.kv{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px dashed var(--sj-line);font-size:14px}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--sj-ink-muted)}
.kv .v{font-weight:600;text-align:right}
.muted{color:var(--sj-ink-muted)}
.proto-note{background:var(--sj-blue-soft);border:1px solid #F0C9B5;border-radius:10px;padding:12px 14px;font-size:13.5px;color:var(--sj-ink-muted);margin-top:18px}
/* minmax(0,1fr) místo 1fr: sloupec s dlouhým nezalomitelným obsahem (JSON, dlouhá URL)
   by se jinak odmítl zúžit a stlačil ten druhý na pár znaků. */
.grid-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
@media(max-width:760px){.grid-2{grid-template-columns:1fr}}

/* Patička: /assets/footer.css */
/**
 * `hidden` musí schovat i prvek, který má z třídy vlastní `display`.
 * Pravidlo prohlížeče (`[hidden]{display:none}`) je slabší než jakákoli třída, takže
 * `el.hidden = true` na tlačítku s `.btn` neudělá nic — a to vypadá jako rozbitý skript.
 */
[hidden]{display:none !important}

/* Cookie banner */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--sj-black);color:#fff}
.cookie-inner{max-width:var(--maxw);margin:0 auto;padding:14px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px}
.cookie-actions{display:flex;gap:10px}
.cookie-banner .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}

/* Landing */
.lp-wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.lp-hero{padding:64px 22px 40px;text-align:center;max-width:840px;margin:0 auto}
.lp-hero h1{font-size:46px;line-height:1.04}
@media(max-width:760px){.lp-hero h1{font-size:34px}}
.lp-hero p.lead{font-size:19px;color:var(--sj-ink-muted);margin:16px auto 26px;max-width:620px}
.lp-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.lp-section{padding:48px 0}
.lp-section.alt{background:var(--sj-paper);border-top:1px solid var(--sj-line);border-bottom:1px solid var(--sj-line)}
.lp-section h2{font-size:30px;text-align:center;margin-bottom:8px}
.lp-section .sec-sub{text-align:center;color:var(--sj-ink-muted);max-width:560px;margin:0 auto 30px}
.vcards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:760px){.vcards{grid-template-columns:1fr}}
.vcard{display:block;background:#fff;border:1px solid var(--sj-line);border-radius:var(--sj-radius);padding:24px;box-shadow:var(--sj-shadow);transition:.15s}
.vcard:hover{transform:translateY(-3px);text-decoration:none;border-color:var(--sj-blue)}
.vcard .em{font-size:34px}
.vcard h3{font-size:20px;margin:10px 0 6px}
.vcard p{font-size:14px;color:var(--sj-ink-muted)}
.vcard .go{color:var(--sj-blue);font-weight:600;font-size:14px;margin-top:12px;display:inline-block}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:s}
@media(max-width:760px){.steps{grid-template-columns:1fr 1fr}}
.step{background:#fff;border:1px solid var(--sj-line);border-radius:14px;padding:18px}
.step .num{width:30px;height:30px;border-radius:50%;background:var(--sj-blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--sj-head);margin-bottom:10px}
.step h4{font-size:15px;margin-bottom:4px}
.step p{font-size:13px;color:var(--sj-ink-muted)}
.ex-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:760px){.ex-grid{grid-template-columns:1fr}}
.pl-badge{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:4px 9px;border-radius:6px;background:var(--sj-blue-soft);color:var(--sj-blue-ink)}

/* Legal pages */
.legal{max-width:760px}
.legal h2{font-size:18px;margin:22px 0 8px}
.legal h3{font-size:15px;margin:16px 0 6px}
.legal p,.legal li{font-size:14px;color:#4A4034;margin-bottom:8px}

/* Náhled kreativy ve výpisu nabídek — malý, na hover zvětšený.
   `position:relative` + z-index na hoveru: bez toho ho překryje následující řádek tabulky. */
.mc-preview{display:inline-block;position:relative;line-height:0}
.mc-preview img{width:44px;height:44px;object-fit:cover;border-radius:8px;border:1px solid var(--sj-line);
  transition:transform .12s ease, box-shadow .12s ease;transform-origin:left center}
.mc-preview:hover{z-index:20}
.mc-preview:hover img{transform:scale(5);box-shadow:0 14px 40px rgba(0,0,0,.28);border-radius:4px}

/* Kampaně nabídky ve výpisu: jeden tvar pro každý kanál (Meta, Sklik). Vlevo náhled,
   vpravo nahoře kanál + stav + doplňky, pod tím čísla. Prázdné místo po náhledu drží
   zarovnání, i když kampaň náhled nemá (30. 10. 2026, „docela bordel"). */
.camprow{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:start;margin-bottom:10px}
.camprow:last-child{margin-bottom:0}
.camprow__thumb{width:44px;min-height:1px}
.camprow__head{display:flex;gap:6px;align-items:center;flex-wrap:wrap;min-height:22px}
.camprow__channel{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--sj-ink-muted);min-width:38px}
.camprow__stats{font-size:12px;color:var(--sj-ink-muted);margin-top:3px}

/* --- Vlastní tooltip (data-tip) ---------------------------------------------
   Nativní `title` se objeví až po vteřině, zmizí sám, nejde v něm formátovat text
   a na dotykových zařízeních se neukáže vůbec. Delší vysvětlení („proč tahle kampaň
   ještě čeká") se tak k člověku nedostane. */
.tip-anchor{border-bottom:1px dotted var(--sj-line);cursor:help}
.tip{position:fixed;z-index:80;max-width:320px;padding:8px 10px;border-radius:10px;
  background:var(--sj-ink);color:#fff;font-size:12.5px;line-height:1.45;
  box-shadow:0 10px 30px rgba(0,0,0,.22);pointer-events:none;opacity:0;
  transition:opacity .12s ease}
.tip.is-visible{opacity:1}
.tip strong{color:#fff}

/* --- Zpětná vazba v patičce -------------------------------------------------
   Rozbalovací, ne trvale otevřený formulář: nabídne se na každé stránce, ale
   nekonkuruje obsahu, kvůli kterému tam člověk je. */
.feedback-box{max-width:1180px;margin:24px auto 0;padding:0 24px}
.feedback-box>summary{cursor:pointer;color:var(--sj-ink-muted);font-size:13px;
  list-style:none;display:inline-flex;align-items:center;gap:6px}
.feedback-box>summary::before{content:"✍";font-size:14px}
.feedback-box>summary::-webkit-details-marker{display:none}
.feedback-box>summary:hover{color:var(--sj-ink)}
.feedback-box form{margin-top:8px;max-width:640px}
.feedback-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:6px}

/* --- Stránkování -----------------------------------------------------------
   Holá čísla vedle sebe vypadala jako překlep, ne jako ovládání. */
.pager{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:14px}
.pager-page,.pager-arrow{display:inline-flex;align-items:center;justify-content:center;
  min-width:32px;height:32px;padding:0 8px;border-radius:8px;border:1px solid var(--sj-line);
  color:var(--sj-ink);text-decoration:none;font-size:13px;line-height:1;background:#fff}
.pager-page:hover,.pager-arrow:hover{border-color:var(--sj-ink);}
.pager-page.is-current{background:var(--sj-ink);border-color:var(--sj-ink);color:#fff;font-weight:600}
.pager-arrow{font-size:16px}
.pager-arrow.is-off{color:var(--sj-line);border-color:var(--sj-line);background:transparent}
.pager-gap{padding:0 2px;color:var(--sj-ink-muted)}
.pager-info{margin-left:8px;font-size:12px;color:var(--sj-ink-muted)}

/* --- Dialogy ---------------------------------------------------------------
   Výchozí `dialog` je bílý obdélník bez rámu a bez stropu: když je obsah vyšší
   než okno, prohlížeč ho nevycentruje a text vyteče přes patičku ven. Proto má
   dialog vlastní výšku a uvnitř se scrolluje — ne celá stránka. */
dialog.modal{width:min(94vw,var(--modal-w,640px));max-height:88vh;padding:0;
  border:1px solid var(--sj-line);border-radius:var(--sj-radius);background:var(--sj-surface);
  color:var(--sj-ink);
  /* Vytažený nad stránku: vlastní stín plus tmavé sklo za ním. */
  box-shadow:0 24px 60px rgba(27,24,20,.28), 0 6px 18px rgba(27,24,20,.16)}
/* `display` **jen když je dialog otevřený**. Nastavit ho natvrdo na `dialog.modal`
   znamená přebít výchozí `dialog:not([open]){display:none}` — a zavřený dialog pak
   zůstane viset ve stránce jako obyčejný blok. */
/* `margin:auto` je to, čím prohlížeč vycentruje modální dialog v horní vrstvě —
   jenže globální reset `*{margin:0}` výš v souboru ho přebije a okno se přilepí
   do levého horního rohu. Musí se proto vrátit ručně. */
dialog.modal[open]{display:flex;flex-direction:column;margin:auto}
dialog.modal::backdrop{background:rgba(27,24,20,.5);backdrop-filter:blur(2px)}
/* Formulář uvnitř dialogu je jen obal — výšku musí předat dál, jinak se
   `min-height:0` níž nemá o co opřít a scrollování se rozbije. */
dialog.modal>form{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--sj-line);
  font-family:var(--sj-head);font-weight:700;font-size:16px;letter-spacing:-.01em}
.modal-body{padding:18px 20px;overflow:auto;min-height:0;flex:1 1 auto}
.modal-foot{padding:14px 20px;border-top:1px solid var(--sj-line);background:var(--sj-paper-2);
  display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
/* Dva sloupce, každý se svým vlastním scrollem: text nabídky se čte a formulář
   přitom zůstává na místě.
   `flex-wrap:nowrap` je tu podstatné. Ve zalomeném flexu určuje výšku řádku
   **obsah**, ne kontejner — sloupce by tedy vyrostly podle nejdelšího textu,
   uvnitř by nic nepřetékalo (takže by nebylo co scrollovat) a dlouhá nabídka by
   se jen uřízla. Na úzkou obrazovku je vlastní media query níž. */
.modal-split{display:flex;flex-wrap:nowrap;min-height:0;flex:1 1 auto;overflow:hidden}
.modal-col{flex:1 1 340px;min-width:0;min-height:0;overflow:auto;padding:18px 20px;
  overscroll-behavior:contain}
.modal-col.is-source{flex:1 1 320px;background:var(--sj-paper-2);border-right:1px solid var(--sj-line)}
@media (max-width:760px){
  .modal-split{display:block;overflow:auto}
  .modal-col{overflow:visible;min-width:0}
  .modal-col.is-source{border-right:0;border-bottom:1px solid var(--sj-line)}
}

/* --- Text nabídky ----------------------------------------------------------
   Podklad, podle kterého se píšou texty reklamy. V jednom slepenci se v úzkém
   sloupci nedá najít, kde končí jedna povinnost a začíná druhá — odstavce
   a odrážky proto zůstávají odstavci a odrážkami. */
.offer-text{font-size:14px;line-height:1.62;max-width:62ch}
.offer-field + .offer-field{margin-top:16px}
.offer-label{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--sj-ink-muted);margin-bottom:3px}
.offer-value{overflow-wrap:anywhere}
.offer-value p{margin:0 0 9px}
.offer-value p:last-child{margin-bottom:0}
.offer-value ul{margin:0 0 10px;padding-left:18px}
.offer-value li{margin:0 0 4px}
.offer-value li::marker{color:var(--sj-blue)}
.offer-title{font-family:var(--sj-head);font-weight:700;font-size:16px;letter-spacing:-.01em}

/* --- Výběr ikony k odrážce -------------------------------------------------
   Ikona se vybírala ze seznamu názvů (`dopad_prace`, `uceni_se`), jenže do
   kreativy jde obrázek — a ten si podle slova nikdo nevybaví. Beze skriptu:
   radio je průhledné přes celou dlaždici, vybranou pozná `:checked`. */
.iconpick{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 8px}
.iconpick label{position:relative;display:inline-flex;cursor:pointer}
.iconpick input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.iconpick img,.iconpick-name{width:42px;height:42px;object-fit:contain;padding:7px;
  border:1.5px solid var(--sj-line);border-radius:10px;background:#fff;transition:.12s}
.iconpick-name{width:auto;height:auto;display:inline-flex;align-items:center;font-size:12px;
  color:var(--sj-ink-muted);padding:8px 10px}
.iconpick label:hover img,.iconpick label:hover .iconpick-name{border-color:var(--sj-ink-muted)}
.iconpick input:checked + img,.iconpick input:checked + .iconpick-name{
  border-color:var(--sj-blue);background:var(--sj-blue-soft);box-shadow:0 0 0 2px rgba(255,106,43,.22)}
.iconpick input:focus-visible + img,.iconpick input:focus-visible + .iconpick-name{
  outline:2px solid var(--sj-blue);outline-offset:2px}

/* --- Řádek s výběrem (zájmy v editoru cílení) -------------------------------
   Checkbox a text na jednom řádku s dělicí linkou: seznam se čte shora dolů a
   odebrání je odškrtnutí, ne hledání křížku. */
.pick-row{display:flex;gap:10px;align-items:center;padding:7px 0;
  border-bottom:1px solid var(--sj-line);font-size:14px}
.pick-row input{margin:0;flex:0 0 auto}
.legal ol,.legal ul{padding-left:22px;margin-bottom:10px}
.legal ol ul{margin-top:6px}
.legal table{width:100%;border-collapse:collapse;margin:8px 0 14px;font-size:13px}
.legal th,.legal td{border:1px solid #E8E0D4;padding:7px 9px;text-align:left;vertical-align:top;color:#4A4034}
.legal th{background:#F7F2EA;font-weight:600}
@media (max-width:640px){.legal table{display:block;overflow-x:auto}}

/* Feedy u nabídek (23. 10. 2026): štítek = jeden feed. Plný = nabídka ve feedu je,
   obrys = není, ruka = rozhodl člověk, ne pravidlo feedu. */
.fpill{display:inline-flex;align-items:center;gap:4px;font:inherit;font-size:12px;line-height:1;padding:5px 10px;border-radius:999px;border:1px solid var(--sj-line);background:#fff;color:var(--sj-ink-muted);cursor:pointer;white-space:nowrap}
.fpill:hover{border-color:var(--sj-ink-muted)}
.fpill.in{background:#E7F4EC;border-color:#9FD3B3;color:#1F6B3F}
.fpill .hand{font-size:11px}
.fpills{display:flex;flex-wrap:wrap;gap:4px}
.fpills form{display:inline}
.feedq{position:relative;display:inline-block}
.feedq>summary{list-style:none;cursor:pointer}
.feedq>summary::-webkit-details-marker{display:none}
.feedq__panel{position:absolute;right:0;top:calc(100% + 6px);z-index:30;width:380px;max-width:90vw;background:#fff;border:1px solid var(--sj-line);border-radius:14px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.10)}
.feedq__label{font-size:13px;font-weight:600;margin-bottom:6px}
.feedq__chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.fchip input{position:absolute;opacity:0;pointer-events:none}
.fchip span{display:inline-block;font-size:13px;padding:6px 12px;border-radius:999px;border:1px solid var(--sj-line);cursor:pointer}
.fchip input:checked+span{background:#E7F4EC;border-color:#9FD3B3;color:#1F6B3F}
.fchip input:focus-visible+span{outline:2px solid #1F6B3F;outline-offset:2px}
.feedq__foot{display:flex;justify-content:space-between;align-items:center;gap:8px}
.bulkbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px;margin-bottom:10px;border:1px solid var(--sj-line);border-radius:12px;background:#FAFAF8;font-size:13px}
.frow{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--sj-line)}
.frow:first-of-type{border-top:0}
.fdot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--sj-line)}
.fdot.in{background:#2E9B5A}
/* Výpis nabídek: lišta hromadné akce jen při výběru; puntík stavu ↔ zaškrtávátko
   (zaškrtávátko po najetí na řádek, nebo když už je něco vybrané). */
.bulkbar{display:none}
.sj-card:has(input[form="bulk-feeds"]:checked) .bulkbar{display:flex}
.osel{position:relative;display:flex;align-items:center;justify-content:center;width:18px;height:1.45em;font-size:15px}
.osel__dot{width:9px;height:9px;border-radius:50%}
.osel input{position:absolute;inset:0;margin:auto;width:15px;height:15px;opacity:0;cursor:pointer}
tr:hover .osel input,.osel input:checked,.osel input:focus-visible,
.sj-card:has(input[form="bulk-feeds"]:checked) .osel input{opacity:1}
tr:hover .osel:has(input) .osel__dot,.osel:has(input:checked) .osel__dot,.osel:has(input:focus-visible) .osel__dot,
.sj-card:has(input[form="bulk-feeds"]:checked) .osel:has(input) .osel__dot{opacity:0}