:root{
 /* tokeny převzaté z LOGOPADu */
 --primary:#09B3BF; --primary-bright:#23C8E6; --secondary:#0CA5B0;
 --navy:#0F2750; --ink:#4D4D4D; --muted:#6C81A5; --label:#636F83;
 --paper:#F6F8FA; --surface:#FFFFFF; --line:#D1E9E9; --line-soft:#DEE5E7;
 --hover:#EFF7F8;
 --info-bg:#E7F6FD; --info-border:#C6E4F2; --info-text:#2E6C88;
 --warn-bg:#FFF3D4; --warn-text:#A07E25;
 --r-card:0.625rem;
 --shadow-panel:0px 0px 10px 0px rgba(55,103,226,.1);
 --shadow-lift:0px 2px 4px 0px rgba(15,39,80,.1);
 /* vlastní barva návodu – schválně mimo paletu aplikace */
 --signal:#EA5147;
 --paper-alpha:rgba(246,248,250,.95);
 --gutter:40px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
 background:var(--paper); color:var(--ink);
 font:400 18px/1.62 'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
 -webkit-font-smoothing:antialiased;
}
h1,h2,.eyebrow,.brandline,.nav button,.need .k,.see>span,.do>span,.note>span,.warn>span,.detail figcaption{
 font-family:'Be Vietnam Pro','Inter',system-ui,sans-serif;
}
.wrap{max-width:1500px;margin:0 auto;padding:0 var(--gutter) 140px}

/* ---------- horní lišta ---------- */
.top{
 position:sticky;top:0;z-index:20;background:var(--paper-alpha);
 backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
}
.top-in{
 max-width:1500px;margin:0 auto;padding:13px var(--gutter) 11px;
 display:flex;align-items:center;gap:22px;
}
.iconbtn{
 width:38px;height:38px;flex:0 0 38px;border-radius:99px;cursor:pointer;
 border:1px solid var(--line);background:var(--surface);color:var(--muted);
 display:grid;place-items:center;padding:0;font-size:17px;line-height:1;
}
.iconbtn:hover{border-color:var(--primary);color:var(--primary)}
.iconbtn::before{content:'\263D'}
:root[data-theme='dark'] .iconbtn::before{content:'\2600'}
.brand{display:flex;align-items:center;gap:13px;white-space:nowrap}
.brand .brandmark{height:26px;width:auto;display:block}
.brandline{
 font-size:13px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
 color:var(--muted);border-left:1px solid var(--line);padding-left:13px;
}
.dots{display:flex;gap:5px;flex:1;flex-wrap:wrap}
.dot{
 width:26px;height:7px;border:0;padding:0;border-radius:99px;
 background:var(--line);cursor:pointer;transition:background .18s,transform .18s;
}
.dot:hover{transform:scaleY(1.6)}
.dot.on{background:var(--primary)}
.dot.now{background:var(--signal);transform:scaleY(1.7)}
.dot:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
.printbtn{
 border:1px solid var(--line);background:var(--surface);color:var(--muted);
 font:inherit;font-size:15px;padding:7px 16px;border-radius:99px;cursor:pointer;white-space:nowrap;
}
.printbtn:hover{border-color:var(--primary);color:var(--primary)}

/* ---------- krok ---------- */
.step{display:none;grid-template-columns:minmax(340px,1fr) 1.35fr;gap:52px;padding:44px 0 0;align-items:start}
.step.live{display:grid;animation:in .34s ease both}
@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.eyebrow{
 margin:0 0 10px;font-size:13px;font-weight:600;letter-spacing:.15em;
 text-transform:uppercase;color:var(--signal);
}
.step h2{margin:0 0 22px;font-size:38px;line-height:1.14;font-weight:600;letter-spacing:-.02em;color:var(--navy)}
.h-intro{margin:0 0 22px;font-size:52px;line-height:1.06;font-weight:600;letter-spacing:-.025em;color:var(--navy)}
.h-intro span{color:var(--primary)}
.lead{margin:0 0 30px;font-size:19px;color:var(--muted);max-width:52ch}

.see,.do{margin:0 0 16px;padding-left:18px;border-left:3px solid var(--line);max-width:56ch}
.do{border-left-color:var(--signal)}
.see>span,.do>span{
 display:block;font-size:12px;font-weight:600;letter-spacing:.14em;
 text-transform:uppercase;color:var(--label);margin-bottom:3px;
}
.do>span{color:var(--signal)}
.see{color:var(--muted)}
.note{
 margin:20px 0 0;padding:14px 18px;background:var(--info-bg);
 border:1px solid var(--info-border);border-radius:var(--r-card);
 font-size:16px;line-height:1.55;max-width:56ch;color:var(--info-text);
}
.warn{
 margin:20px 0 0;padding:14px 18px;background:var(--warn-bg);
 border-radius:var(--r-card);font-size:16px;line-height:1.55;max-width:56ch;color:var(--warn-text);
}
.note>span,.warn>span{
 display:block;font-size:12px;font-weight:600;letter-spacing:.14em;
 text-transform:uppercase;margin-bottom:3px;
}
code{font:600 .93em ui-monospace,'Cascadia Mono',Consolas,monospace;background:var(--hover);color:var(--secondary);padding:2px 7px;border-radius:5px}

/* ---------- obrázky ---------- */
figure{margin:0}
.shot img,.detail img{display:block;width:100%;height:auto}
.shot{
 border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
 background:var(--surface);box-shadow:var(--shadow-panel);
}
.detail{
 margin-top:30px;border-radius:var(--r-card);overflow:hidden;background:var(--surface);
 border:1px solid var(--line);position:relative;box-shadow:var(--shadow-lift);
}
.detail figcaption{
 position:absolute;top:0;left:0;background:var(--signal);color:#fff;
 font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
 padding:4px 12px;border-bottom-right-radius:var(--r-card);
}

/* ---------- úvod / závěr ---------- */
.card-step{align-items:center}
.sub{margin:34px 0 12px;font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--label)}
.need{list-style:none;margin:0;padding:0;max-width:56ch}
.need li{display:grid;grid-template-columns:190px 1fr;gap:20px;padding:14px 0;border-top:1px solid var(--line-soft)}
.need .k{font-weight:600;color:var(--navy)}
.need .v{color:var(--muted);font-size:16px}
.keymark{
 aspect-ratio:1;display:grid;place-items:center;position:relative;
 background:var(--surface);border-radius:var(--r-card);border:1px solid var(--line);
 box-shadow:var(--shadow-panel);
}
.keymark p{position:relative;z-index:2;text-align:center;color:var(--muted);font-size:16px;margin:0}
.keymark-ring{
 position:absolute;width:56%;height:26%;border:9px solid var(--signal);border-radius:20px;
 box-shadow:0 0 0 9px #fff,0 0 34px rgba(234,81,71,.3);
}
.keymark.done .keymark-ring{border-color:var(--primary);box-shadow:0 0 0 9px #fff,0 0 34px rgba(9,179,191,.3)}

/* ---------- spodní navigace ---------- */
.nav{
 position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--paper-alpha);
 backdrop-filter:blur(9px);border-top:1px solid var(--line);
}
.nav-in{max-width:1500px;margin:0 auto;padding:13px var(--gutter);display:flex;align-items:center;gap:16px}
.nav button{
 font:inherit;font-weight:600;font-size:17px;border-radius:99px;cursor:pointer;
 padding:13px 30px;border:1px solid var(--line);background:var(--surface);color:var(--navy);
}
.nav button:hover:not(:disabled){border-color:var(--primary);color:var(--primary)}
.nav button:disabled{opacity:.36;cursor:default}
.nav .next{background:var(--primary);border-color:var(--primary);color:#fff}
.nav .next{margin-left:auto}
.nav .next:hover:not(:disabled){background:var(--secondary);border-color:var(--secondary);color:#fff}
.nav .count{color:var(--muted);font-size:15px;font-variant-numeric:tabular-nums}
button:focus-visible{outline:3px solid var(--signal);outline-offset:3px}

/* ---------- tmavý motiv (tokeny z LOGOPADu) ---------- */
@media (prefers-color-scheme:dark){
 :root:not([data-theme='light']){color-scheme:dark;
  --navy:#F3F4F6; --ink:#E5E7EB; --muted:#9CA3AF; --label:#6B7280;
  --paper:#111827; --paper-alpha:rgba(17,24,39,.95); --surface:#18212F;
  --line:#2D3A4A; --line-soft:#252F3E; --hover:#1E2D3D;
  --info-bg:#0C2A3A; --info-border:#154C63; --info-text:#67B8D8;
  --warn-bg:#1C1305; --warn-text:#F59E0B;
  --shadow-panel:0px 0px 10px 0px rgba(0,0,0,.4);
  --shadow-lift:0px 2px 4px 0px rgba(0,0,0,.25);
 }
}
:root[data-theme='dark']{color-scheme:dark;
 --navy:#F3F4F6; --ink:#E5E7EB; --muted:#9CA3AF; --label:#6B7280;
 --paper:#111827; --paper-alpha:rgba(17,24,39,.95); --surface:#18212F;
 --line:#2D3A4A; --line-soft:#252F3E; --hover:#1E2D3D;
 --info-bg:#0C2A3A; --info-border:#154C63; --info-text:#67B8D8;
 --warn-bg:#1C1305; --warn-text:#F59E0B;
 --shadow-panel:0px 0px 10px 0px rgba(0,0,0,.4);
 --shadow-lift:0px 2px 4px 0px rgba(0,0,0,.25);
}
:root[data-theme='dark'] code{color:var(--primary-bright)}
@media (prefers-color-scheme:dark){
 :root:not([data-theme='light']) code{color:var(--primary-bright)}
}

@media (max-width:1080px){
 .step{grid-template-columns:1fr;gap:26px;padding-top:26px}
 .pane-shot{order:2}
 .step h2{font-size:30px}
 .h-intro{font-size:36px}
 body{font-size:17px}
 .need li{grid-template-columns:1fr;gap:2px}
 .pane-mark{display:none}
 .nav button{padding:12px 22px;font-size:16px}
 .nav .count{display:none}
 .brandline{display:none}
}
@media (prefers-reduced-motion:reduce){.step.live{animation:none}.dot{transition:none}}

@media print{
 :root{color-scheme:light;--paper:#fff;--surface:#fff;--ink:#4D4D4D;--navy:#0F2750;--line:#D1E9E9}
 .top,.nav{display:none}
 body{background:#fff;font-size:11pt}
 .wrap{max-width:none;padding:0}
 .step{display:grid!important;grid-template-columns:1fr;gap:12px;page-break-after:always;padding:0 0 18px}
 .step h2{font-size:19pt}.h-intro{font-size:23pt}
 .shot,.detail{box-shadow:none}
 .detail{max-width:70%}
 .pane-mark{display:none}
}

/* ---------- snímek podle motivu ----------
   Každý krok nese dvě verze téhož snímku: světlou a tmavou. Zobrazí se ta,
   která odpovídá motivu návodu, aby snímek nesvítil na tmavé stránce a naopak.
   Kroky bez tmavé varianty (třeba veřejný web) mají jen jeden obrázek bez
   těchto tříd — ten je vidět vždy. Tisk je vždy světlý. */
img.only-dark{display:none}
@media (prefers-color-scheme:dark){
 :root:not([data-theme='light']) img.only-light{display:none}
 :root:not([data-theme='light']) img.only-dark{display:block}
}
:root[data-theme='dark'] img.only-light{display:none}
:root[data-theme='dark'] img.only-dark{display:block}
:root[data-theme='light'] img.only-light{display:block}
:root[data-theme='light'] img.only-dark{display:none}
@media print{
 img.only-light{display:block!important}
 img.only-dark{display:none!important}
}

.step{display:grid}
html[data-mode="slides"] .step{display:none}
html[data-mode="slides"] .step.live{display:grid}
html[data-mode="slides"] .toc{display:none}
html:not([data-mode="slides"]) .nav,
html:not([data-mode="slides"]) .dots{display:none}
.toc{max-width:var(--w,1180px);margin:56px auto 90px;padding:0 32px}
.toc h2{font-size:24px;margin:0 0 14px;color:var(--navy)}
.toc ol{margin:0;padding-left:22px;color:var(--ink);line-height:1.9}
.toc a{color:inherit}
.brandlink{display:inline-flex;align-items:center;line-height:0}
@media print{.toc{display:none}}
html:not(.js) .step{display:grid}html:not(.js) .dots,html:not(.js) .nav{display:none}html:not(.js) .step+.step{border-top:1px solid var(--line);margin-top:34px}:root.embed .top{display:none}:root.embed .wrap{padding-top:10px}:root.embed body{background:transparent}