/* Klikací ukázka pro sciteg.ai. Tokeny přebrané z interního design systému
   (accent #0f766e, karty 14 px, stín, Inter). Váha 500 nahrazena 600. */
/* Inter hostujeme sami (fonts/, SIL OFL), žádný požadavek na Google Fonts.
   Variabilní řez 400–900, podmnožiny latin a Latin Extended-A (čeština, slovenština, polština…). */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 900;font-display:swap;src:url(/fonts/inter-latin-ext-a.woff2) format('woff2');unicode-range:U+0100-017F}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 900;font-display:swap;src:url(/fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --accent:#0f766e;--accent-ink:#0d5f59;--accent-soft:rgba(15,118,110,.08);--accent-border:rgba(15,118,110,.25);
  --radius-card:14px;--radius-control:10px;--shadow-card:0 1px 3px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.08);
  --success:#15803d;--success-mild:#65a30d;--success-bg:#dcfce7;--success-border:#bbf7d0;
  --warning:#b45309;--warning-bg:#fef3c7;--warning-border:#fde68a;
  --danger:#b91c1c;--danger-bg:#fee2e2;--danger-border:#fecaca;--neutral:#6b7280;
  --surface:#fff;--surface-2:#f9fafb;--border:#e5e7eb;--border-subtle:#f3f4f6;
  --text:#0a0a0a;--text-strong:#374151;--text-2:#4b5563;--text-muted:#565d68;--text-faint:#6b7280;
  --font:"Inter",system-ui,-apple-system,sans-serif;--mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--surface-2);color:var(--text);font:400 15px/1.4 var(--font);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
a[href="#"]:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.main:focus{outline:none}   /* fokus sem vrací JS po překreslení, obrys by rámoval celou stránku */
.banner{background:#fef3c7;color:#92400e;font:600 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:11px 24px;border-bottom:1px solid #fde68a}

/* ---- rozvržení ---- */
.app{display:grid;grid-template-columns:232px 1fr;min-height:calc(100vh - 34px)}
.side{background:var(--surface);border-right:1px solid var(--border);padding:22px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:calc(100vh - 34px)}
.logo{font-weight:800;font-size:18px;letter-spacing:-.02em;padding:0 12px 22px}
.logo span{display:block;font:600 10px/1 var(--mono);letter-spacing:.14em;color:var(--text-faint);margin-top:4px;text-transform:uppercase}
.nav a{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-radius:var(--radius-control);color:var(--text-strong);font-size:14.5px;margin-bottom:2px;border-left:3px solid transparent;cursor:pointer;transition:background .15s}
.nav a:hover{background:var(--surface-2)}
.nav a.active{background:var(--accent-soft);color:var(--accent-ink);font-weight:600;border-left-color:var(--accent)}
.cnt{font:600 11px/1 var(--mono);background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:3px 7px;color:var(--text-2)}
.nav a.active .cnt{background:#fff;border-color:var(--accent-border);color:var(--accent-ink)}
.nav .sep{height:1px;background:var(--border-subtle);margin:12px 6px}
.user{margin-top:auto;display:flex;align-items:center;gap:10px;padding:8px 10px;font-size:13.5px;color:var(--text-2)}
.avatar{width:26px;height:26px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);display:inline-grid;place-items:center;font:600 10px/1 var(--mono);flex:none}
.main{padding:30px 40px 90px;max-width:1120px;width:100%}
.mtop,.mnav,.sheet,.sheet-bg,.sheet-restart{display:none}

/* ---- typografie a drobnosti ---- */
h1{font-size:25px;font-weight:700;letter-spacing:-.02em;margin:0 0 4px}
.meta{color:var(--text-faint);font-size:13px;margin:0 0 20px}
.muted{color:var(--text-faint)}.small{font-size:13px}.xs{font-size:11.5px;margin-top:8px}
.back{display:inline-block;color:var(--accent-ink);font-weight:600;font-size:13.5px;margin-bottom:12px;cursor:pointer}
.back:hover{text-decoration:underline}
.link{color:var(--accent-ink);font-weight:600;font-size:13.5px;cursor:pointer}
.link:hover{text-decoration:underline}
.mt{margin-top:16px!important}
.strong-ok{color:var(--success);font-weight:600}

/* ---- karty, řádky, seznamy ---- */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:16px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.stack{display:grid;gap:12px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:16px 20px;margin-bottom:14px}
.two .card,.grid .card{margin-bottom:0}
.card h3{margin:0 0 10px;font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint)}
.card-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.card-top h3{margin:0}
.card .big{font-size:30px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--border-subtle);font-size:14px}
.card h3+.row,.card .big+.row,.row:first-child{border-top:0}
.row.end{justify-content:flex-end}
.link-row{cursor:pointer;border-radius:8px;margin:0 -8px;padding:8px}
.link-row:hover{background:var(--surface-2)}
.row .t,.t{color:var(--text-faint);font-family:var(--mono);font-size:12px;white-space:nowrap}
.chip{display:inline-flex;align-items:center;border-radius:999px;padding:4px 10px;font:600 11px/1 var(--mono);border:1px solid var(--border);background:var(--surface-2);color:var(--text-2);white-space:nowrap}
.chip.ok{background:var(--success-bg);border-color:var(--success-border);color:var(--success)}
.chip.warn{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning)}
.chip.danger{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger)}
.chip.acc{background:var(--accent-soft);border-color:var(--accent-border);color:var(--accent-ink)}
.chip.dot::before{content:"";display:inline-block;width:6px;height:6px;border-radius:999px;background:currentColor;margin-right:6px}
.list{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow-card);overflow:hidden}
.item{display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:center;padding:14px 20px;border-top:1px solid var(--border-subtle);cursor:pointer;transition:background .15s}
.item:first-child{border-top:0}
.item:hover{background:var(--surface-2)}
.item.static{cursor:default}.item.static:hover{background:transparent}
.item .name{font-weight:600}
.item .sub,.sub{color:var(--text-faint);font-size:13px;margin-top:2px}
.sec{margin:0 0 16px}
.sec h2{font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);margin:0 0 10px}
.tr{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:14px 18px;font-size:14px;line-height:1.55}
.tr p{margin:0 0 6px}.tr b{color:var(--accent-ink);font-weight:600;margin-right:6px}
ul.facts{margin:0;padding-left:18px;font-size:14px;line-height:1.6}
.kv{display:grid;grid-template-columns:70px 1fr;gap:6px 12px;font-size:14px;margin:0}
.kv dt{color:var(--text-faint)}.kv dd{margin:0;overflow-wrap:anywhere}
.who{display:flex;gap:8px;flex-wrap:wrap}
.who .p{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:4px 12px 4px 4px;font-size:13.5px}
.empty{text-align:center;color:var(--success);font-weight:600;padding:34px}

/* ---- tlačítka ---- */
.btn-pri,.btn-ghost{border-radius:999px;padding:8px 16px;font-weight:600;font-size:13.5px;cursor:pointer;transition:background .15s,transform .1s}
.btn-pri{background:var(--accent);color:#fff;border:1px solid var(--accent)}
.btn-pri:hover{background:var(--accent-ink)}
.btn-ghost{background:#fff;color:var(--text-2);border:1px solid var(--border)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-pri:active,.btn-ghost:active{transform:scale(.97)}
.actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:12px;flex-wrap:wrap}
.actions .muted{margin-right:auto}

/* ---- Fronta ---- */
.fr-title{font-weight:600;font-size:15.5px;margin:6px 0 4px}
.fr-body{margin:0;color:var(--text-2);font-size:14px}

/* ---- Mail ---- */
.mail-row{grid-template-columns:1fr auto;align-items:start}
.mail-row .subj{font-size:14px;margin-top:2px}
.mail-row .sub{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.mail-row.unread .name::before{content:"";display:inline-block;width:7px;height:7px;border-radius:999px;background:var(--accent);margin-right:8px;vertical-align:1px}
.mail-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.draft{border-color:var(--accent-border)}
.draft-text{white-space:pre-wrap;font:14px/1.6 var(--font);margin:10px 0 0;background:var(--surface-2);border-radius:10px;padding:12px 14px}

/* ---- Úkoly ---- */
.seg{display:inline-flex;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:3px;margin-bottom:14px}
.seg button{border:0;background:transparent;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;color:var(--text-2);cursor:pointer}
.seg button.on{background:var(--accent-soft);color:var(--accent-ink)}
.task{grid-template-columns:auto 1fr auto auto}
.cb{width:18px;height:18px;border:1.5px solid #cbd0d8;border-radius:5px;flex:none;display:inline-block;background:#fff;padding:0;cursor:pointer;transition:all .15s}
button.cb:hover{border-color:var(--accent)}
.cb.on{background:var(--accent);border-color:var(--accent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.task.done .name{text-decoration:line-through;color:var(--text-faint)}
.tasks .tt{display:flex;align-items:center;gap:10px}
.tasks .who2,.who2{display:flex;align-items:center;gap:8px;color:var(--text-2);font-size:13px}

/* ---- Hodnocení ---- */
.eval{display:grid;grid-template-columns:260px 1fr;gap:16px;align-items:start}
.eval-list{display:grid;gap:10px}
.eval-pick{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0;cursor:pointer;border-left:3px solid transparent;transition:border-color .15s}
.eval-pick.on{border-left-color:var(--accent);background:var(--accent-soft)}
.eval-pick .name{font-weight:600;font-size:14px}
.score{font:700 15px/1 var(--mono);padding:6px 8px;border-radius:8px}
.score.ok{color:var(--success);background:var(--success-bg)}.score.warn{color:var(--warning);background:var(--warning-bg)}.score.danger{color:var(--danger);background:var(--danger-bg)}
.eval-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.eval-name{font-size:21px;font-weight:700;letter-spacing:-.01em}
.eval-tags{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.ring{width:84px;height:84px;flex:none}
.ring-num{font:700 22px var(--font);fill:var(--text)}
.cat{display:grid;grid-template-columns:170px 1fr auto 70px;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--neutral);border-radius:10px;padding:10px 14px;margin-bottom:6px;font-size:14px}
.cat .note{color:var(--text-2)}.cat .cs{font:700 13px var(--mono)}.cat .t{text-align:right}
.cat.ok{border-left-color:var(--success)}.cat.ok .cs{color:var(--success)}
.cat.okm{border-left-color:var(--success-mild)}.cat.okm .cs{color:var(--success-mild)}
.cat.warn{border-left-color:var(--warning)}.cat.warn .cs{color:var(--warning)}
.cat.danger{border-left-color:var(--danger)}.cat.danger .cs{color:var(--danger)}
.risk{border-top:4px solid var(--danger-border)}.risk h3{color:var(--danger)}
.nextc{border-top:4px solid var(--accent-border)}.nextc h3{color:var(--accent-ink)}
.risk p,.nextc p{margin:0 0 6px;font-size:14px}

/* ---- Asistent ---- */
.chat{display:flex;flex-direction:column;padding:0;min-height:520px}
.chat-log{flex:1;padding:20px;overflow:auto;max-height:560px}
.msg{display:flex;gap:10px;margin-bottom:14px;align-items:flex-start}
.msg.me{justify-content:flex-end}
.bubble{max-width:78%;padding:11px 15px;border-radius:14px;font-size:14.5px;line-height:1.55}
.msg.me .bubble{background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.msg.bot .bubble{background:var(--surface-2);border:1px solid var(--border);border-bottom-left-radius:4px}
.bot-av{background:var(--text);color:#fff;font-weight:800;font-size:9px}
.caret{display:inline-block;width:7px;height:15px;background:var(--accent);margin-left:2px;vertical-align:-2px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.had{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:10px 0 8px}
.msg.bot .btn-pri{margin-top:4px}
.sugg{display:flex;flex-wrap:wrap;gap:8px;padding:0 20px 14px}
.card .sugg{padding:12px 0 0}
.sugg-q{background:#fff;border:1px solid var(--accent-border);color:var(--accent-ink);border-radius:999px;padding:8px 14px;font-size:13.5px;font-weight:600;cursor:pointer;text-align:left;transition:background .15s}
.sugg-q:hover,.sugg-q.on{background:var(--accent-soft)}
.chat-in{display:flex;gap:8px;border-top:1px solid var(--border);padding:12px 14px}
.chat-in input{flex:1;border:1px solid var(--border);border-radius:999px;padding:9px 16px;font:14px var(--font);min-width:0}
.chat-in input:focus{outline:2px solid var(--accent-border);border-color:var(--accent)}

/* ---- Znalosti ---- */
.search{border:1px solid var(--border);border-radius:999px;padding:10px 16px;font-size:14.5px;color:var(--text-faint)}
.search span:not(.muted){color:var(--text);font-weight:600}
.fact{padding:10px 0;border-top:1px solid var(--border-subtle);font-size:14.5px}
.fact:first-child{border-top:0}
.fact .src{font:12px var(--mono);color:var(--text-faint);margin-top:4px}

/* ---- Systém ---- */
.th,.trow{grid-template-columns:130px 160px 1fr;font-size:14px}
.th span{font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint)}

/* ---- nápověda, restart ---- */
.hint{position:fixed;left:calc(50% + 116px);bottom:20px;transform:translateX(-50%);background:rgba(10,10,10,.88);color:#fff;font-size:13px;padding:8px 14px;border-radius:999px;box-shadow:var(--shadow-card);pointer-events:none;z-index:30;white-space:nowrap;max-width:calc(100vw - 280px);overflow:hidden;text-overflow:ellipsis}
.hint{transition:opacity .6s}.hint.fade{opacity:0}
.restart{position:fixed;right:20px;bottom:20px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:8px 14px;font:600 13px var(--font);color:var(--text-2);cursor:pointer;box-shadow:var(--shadow-card);z-index:30}

/* ---- natáčení ---- */
.cursor{position:fixed;left:0;top:0;width:22px;height:22px;z-index:50;pointer-events:none;transition:transform .6s cubic-bezier(.2,.7,.2,1);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 8-6 1.5L10 20z' fill='%230a0a0a' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat}
.cursor.click{animation:click .25s}
@keyframes click{50%{transform:var(--pos) scale(.8)}}
.caption{position:fixed;left:calc(50% + 116px);bottom:40px;transform:translateX(-50%);z-index:40;background:rgba(10,10,10,.92);color:#fff;font-size:22px;font-weight:600;letter-spacing:-.01em;padding:15px 26px;border-radius:14px;opacity:0;transition:opacity .35s;white-space:nowrap}
.caption.show{opacity:1}
.cover{display:none}
body.rec .cover{display:block;position:fixed;inset:0;background:#000;z-index:100}
body.rec .cover[hidden]{display:none}
.outro{position:fixed;inset:0;z-index:60;background:#050E37;color:#fff;display:grid;place-content:center;text-align:center;opacity:0;transition:opacity .6s;pointer-events:none}
.outro.show{opacity:1}
.outro-logo{font-size:64px;font-weight:900;letter-spacing:-.04em}
.outro-text{font-size:24px;margin-top:10px;color:#5BC9EA}
body.rec .hint,body.rec .restart{display:none}
body.rec .chat-log{max-height:none}

/* ---- střední šířky ---- */
@media (max-width:1100px){
  .eval{grid-template-columns:1fr}.eval-list{grid-template-columns:repeat(3,1fr)}
  .cat{grid-template-columns:140px 1fr auto}.cat .t{display:none}
  .row{flex-wrap:wrap}   /* úzké karty vedle menu: datum skočí pod text, nepřeteče */
}

/* ---- mobil a tablet: spodní lišta do 820 px (iPad na výšku i menší notebooky v okně) ---- */
@media (max-width:820px){
  body{font-size:14.5px}
  .banner{padding:8px 14px;font-size:10px}
  .app{display:block;min-height:0}
  .side{display:none}
  .mtop{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);padding:10px 16px}
  .mlogo{font-weight:800;letter-spacing:-.02em}
  .mtitle{flex:1;color:var(--text-2);font-weight:600;font-size:14px}
  .main{padding:18px 12px 96px;overflow-x:hidden}
  .card-top{flex-wrap:wrap;row-gap:4px}
  .card-top .t{white-space:normal}
  .actions{justify-content:stretch}
  .actions .muted{width:100%;margin:0 0 2px}
  .actions .btn-pri,.actions .btn-ghost{flex:1;padding:10px 12px}
  .chip{white-space:normal;line-height:1.25}
  .row{flex-wrap:wrap}
  .mail-row .subj{font-weight:600}
  .eval-name{font-size:18px}
  .draft-text{font-size:13.5px}
  .who .p{flex-wrap:wrap}
  .seg{margin-bottom:10px}
  h1{font-size:21px}
  .grid,.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .grid>.card:last-child:nth-child(odd){grid-column:1/-1}   /* lichá poslední karta přes celou šířku */
  .grid{margin-bottom:10px}
  .card{padding:14px 16px}
  .item{padding:12px 14px;gap:10px}
  .hide-m{display:none!important}
  .item{grid-template-columns:1fr auto}
  .task{grid-template-columns:auto 1fr auto}
  .mail-side .chip:first-of-type{display:none}
  .eval-list{grid-template-columns:1fr}
  .eval-head{align-items:flex-start}
  .ring{width:68px;height:68px}
  .cat{grid-template-columns:1fr auto;gap:4px 10px}
  .cat .note{grid-column:1/-1;grid-row:2;font-size:13px}
  .bubble{max-width:88%}
  .chat{min-height:0}.chat-log{max-height:none}
  .th,.trow{grid-template-columns:90px 1fr;}.th span:last-child,.trow span:last-child{grid-column:1/-1}
  .th{display:none}
  .kv{grid-template-columns:62px 1fr}
  .mnav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:25;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--border);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .mnav a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;font-weight:600;color:var(--text-faint);padding:4px 0;position:relative;cursor:pointer}
  .mnav a.active{color:var(--accent-ink)}
  .mnav .cnt{position:absolute;top:0;left:calc(50% + 6px);padding:2px 5px;font-size:9.5px;background:var(--accent);color:#fff;border-color:var(--accent)}
  .mi{width:22px;height:22px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
  .mi-dnes{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E")}
  .mi-fronta{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13h4l2 3h4l2-3h4'/%3E%3Cpath d='M5 5h14l1 8v6H4v-6z'/%3E%3C/svg%3E")}
  .mi-schuzky{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E")}
  .mi-asistent{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z'/%3E%3C/svg%3E")}
  .mi-vice{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3C/svg%3E")}
  .sheet-bg{display:block;position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:26}
  .sheet{display:block;position:fixed;left:10px;right:10px;bottom:calc(70px + env(safe-area-inset-bottom));z-index:27;background:#fff;border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.2);padding:8px}
  .sheet[hidden],.sheet-bg[hidden]{display:none}
  .sheet a{display:flex;justify-content:space-between;align-items:center;padding:13px 14px;border-radius:10px;font-weight:600;cursor:pointer}
  .sheet a.active{background:var(--accent-soft);color:var(--accent-ink)}
  .hint{left:50%;bottom:calc(74px + env(safe-area-inset-bottom));max-width:calc(100vw - 24px);font-size:12px}
  .restart{display:none}
  .sheet-restart{display:block;width:100%;text-align:left;border:0;border-top:1px solid var(--border-subtle);background:none;padding:13px 14px;margin-top:4px;color:var(--text-2);font-weight:600;cursor:pointer}
}
/* telefon: karty pod sebou */
@media (max-width:560px){.grid,.two{grid-template-columns:1fr}}

/* ---- průvodce po krocích ---- */
.tour{position:fixed;left:272px;bottom:18px;z-index:31;display:flex;align-items:center;gap:12px;background:rgba(10,10,10,.92);color:#fff;font-size:13.5px;padding:9px 10px 9px 16px;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:calc(100vw - 272px - 150px);white-space:nowrap}
.tour[hidden]{display:none}
.tour-step{font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#5eead4;flex:none}
.tour-dots{display:inline-flex;gap:4px;flex:none}
.tour-dots i{width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,.28)}
.tour-dots i.on{background:#5eead4}.tour-dots i.now{background:#fff}
.tour-text{overflow:hidden;text-overflow:ellipsis}
.tour-skip,.tour-x{border:0;background:transparent;color:rgba(255,255,255,.6);font:600 12px var(--font);cursor:pointer;padding:5px 8px;border-radius:999px;flex:none}
.tour-skip:hover,.tour-x:hover{color:#fff;background:rgba(255,255,255,.12)}
.tour-x{font-size:18px;line-height:1;padding:2px 8px}
.tour-cta{background:var(--accent);color:#fff;font-weight:700;padding:8px 14px;border-radius:999px;font-size:13px;flex:none}
.tour-cta:hover{background:var(--accent-ink)}
.tour-target{position:relative;z-index:1;border-radius:10px;box-shadow:0 0 0 3px var(--accent),0 0 0 6px rgba(15,118,110,.3);animation:tourPulse 1.6s ease-out infinite}
.item.tour-target{box-shadow:inset 0 0 0 3px var(--accent);background:var(--accent-soft);animation:tourPulseIn 1.6s ease-out infinite;border-radius:0}
a.link.tour-target,a.back.tour-target{display:inline-block;padding:2px 8px;margin:-2px -8px;border-radius:8px}
@keyframes tourPulse{0%{box-shadow:0 0 0 3px var(--accent),0 0 0 4px rgba(15,118,110,.45)}70%,100%{box-shadow:0 0 0 3px var(--accent),0 0 0 14px rgba(15,118,110,0)}}
@keyframes tourPulseIn{0%{box-shadow:inset 0 0 0 3px var(--accent)}50%{box-shadow:inset 0 0 0 5px var(--accent)}100%{box-shadow:inset 0 0 0 3px var(--accent)}}
@media (prefers-reduced-motion:reduce){.tour-target,.item.tour-target{animation:none}}
body.rec .tour{display:none}
/* cíl kroku nesmí zůstat pod panelem: když ani posun okna nestačí, panel jde nahoru (.tour-up) */
.tour.tour-up{top:18px;bottom:auto}
@media (max-width:1100px){
  .tour{white-space:normal;border-radius:14px;flex-wrap:wrap;gap:6px 12px}
  .tour-text{flex:1 1 100%;order:3}.tour-skip{margin-left:auto}   /* text na vlastním řádku, ať se neláme po písmenech */
}
@media (max-width:820px){
  .tour{left:8px;right:8px;margin:0 auto;transform:none;max-width:640px;white-space:normal;bottom:calc(74px + env(safe-area-inset-bottom));flex-wrap:wrap;gap:8px 12px;border-radius:14px;padding:10px 12px 10px 14px}
  .tour.tour-up{top:calc(54px + env(safe-area-inset-top));bottom:auto}   /* pod horní lištou */
  /* dokud průvodce běží, má hlavní část dole místo na celý panel nad lištou (výšku dosadí
     pruvodce.js do --tour-h), ať jde k cíli vždy doskrolovat; na desktopu stačí běžný okraj */
  body.touring .main{padding-bottom:calc(var(--tour-h,60px) + 120px)}
}