/* JOBSON 3 — Registrace (CRM #325, maketa design/registrace-v2, schválil
   Jakub 2. 10. 2026).

   Veřejná zóna: načítá ji jen layout/registration.html.twig, a to ZA
   marketing.css, na jehož tokenech staví (--c-stage-*, --control-h-mk,
   --control-h-cta). Prefix tříd zůstává `auth-`, aby bylo na první pohled
   jasné, že do interní části nepatří.

   Pořadí: tokens.css → components.css → marketing.css → registration.css

   - .auth-reg      rozvržení se třemi oblastmi (pruh s logem, příběh, formulář),
                    aby na telefonu šel formulář PŘED výhody bez duplicit v HTML
   - .auth-x        průzkumník modulů (záložky + živý náhled + autoplay)
   - .auth-sc       mini scény v náhledu (stylizované, ne screenshoty)
   - .auth-tile     tři dlaždice: zkušební doba, průvodce, cena
   - .auth-next     „Jak to půjde dál“ — průběh navázaný na vyplnění formuláře
   - .auth-assure   ujištění pod tlačítkem
   - .auth-sent     obrazovka „Zkontrolujte e-mail“
   - .auth-sticky   lepicí CTA na telefonu, když formulář zmizí z obrazovky
   Všechny animace mají koncový stav jako výchozí styl, takže při
   prefers-reduced-motion se nic nehýbe a obsah je vidět celý. */
   prefers-reduced-motion se nic nehýbe a obsah je vidět celý. */

:root {
  --c-mk-yellow: oklch(0.86 0.15 88);           /* žluté zvýraznění z kampaně */
  --c-stage-glass: oklch(0.97 0.008 172 / .06);  /* výplň dlaždic na tmavém */
  --c-stage-glass-2: oklch(0.97 0.008 172 / .11);
  --focus-dark: 2px solid var(--c-stage-accent);
  --x-dur: 7s;                                    /* jak dlouho svítí jeden modul */
}

/* ======================================================================
   Rozvržení
   ====================================================================== */
.auth-reg {
  position: relative; min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(460px, 540px);
  grid-template-rows: auto 1fr;
  grid-template-areas: "bar panel" "story panel";
  background: var(--c-stage); color: var(--c-stage-ink);
}
.auth-reg__deco { grid-area: 1 / 1 / 3 / 2; position: relative; overflow: hidden; pointer-events: none; }
.auth-reg__deco::before, .auth-reg__deco::after { content: ""; position: absolute; border-radius: 50%; }
.auth-reg__deco::before { top: -200px; right: -180px; width: 560px; height: 560px; background: oklch(0.32 0.06 172); opacity: .45; }
.auth-reg__deco::after { bottom: -240px; left: -140px; width: 460px; height: 460px; background: var(--c-stage-2); opacity: .6; }

.auth-reg__bar { grid-area: bar; position: relative; z-index: 1; padding: 26px 48px 0; }
.auth-reg__story { grid-area: story; position: relative; z-index: 1; padding: 0 48px 26px; display: flex; flex-direction: column; min-width: 0; }
.auth-reg__panel {
  grid-area: panel; position: relative; z-index: 1;
  background: var(--c-surface); color: var(--c-ink);
  padding: 28px 48px 32px; display: flex; flex-direction: column; justify-content: center;
}
.auth-reg__box { width: 100%; max-width: 440px; margin: 0 auto; }

.auth-reg :focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.auth-reg__bar :focus-visible, .auth-reg__story :focus-visible { outline: var(--focus-dark); outline-offset: 2px; }

/* ---- Hero ------------------------------------------------------------- */
.auth-hero { padding: 22px 0 0; max-width: 700px; }
.auth-hero .auth__eyebrow { margin-bottom: 14px; }
.auth-hero__title {
  margin: 0; font-size: clamp(32px, 2.75vw, 42px); line-height: 1.08; font-weight: 700;
  letter-spacing: -.028em; text-wrap: balance;
}
.auth-hero__title em { font-style: normal; color: var(--c-stage-accent); }
.auth-hero__mark { position: relative; white-space: nowrap; }
.auth-hero__mark svg { position: absolute; left: -2%; bottom: -.16em; width: 104%; height: .32em; overflow: visible; }
.auth-hero__mark path { fill: none; stroke: var(--c-mk-yellow); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 260; animation: auth-draw .9s .5s cubic-bezier(.6,.1,.3,1) backwards; }
.auth-hero__lead { margin: 12px 0 0; font-size: 15.5px; line-height: 1.55; color: oklch(0.84 0.025 172); max-width: 60ch; text-wrap: pretty; }

/* ======================================================================
   Průzkumník modulů
   ====================================================================== */
.auth-x { margin-top: 22px; }
.auth-x__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.auth-x__label { margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: oklch(0.78 0.05 172); }
.auth-x__pause {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  border: 1px solid var(--c-stage-line); border-radius: 100px; background: transparent;
  color: var(--c-stage-mute); font: inherit; font-size: 12px; cursor: pointer;
}
.auth-x__pause:hover { color: var(--c-stage-ink); border-color: oklch(0.5 0.06 172); }
.auth-x__pause svg { width: 10px; height: 10px; }
.auth-x__pause [data-when] { display: none; }
.auth-x__pause[aria-pressed="false"] [data-when="playing"], .auth-x__pause[aria-pressed="true"] [data-when="paused"] { display: inline-flex; align-items: center; gap: 6px; }

.auth-x__body { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 18px; align-items: start; }
.auth-x__tabs { display: grid; gap: 2px; }
.auth-x__tab {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 31px; padding: 6px 10px 6px 12px; border: 0; border-radius: 7px; overflow: hidden;
  background: transparent; color: var(--c-stage-mute); font: inherit; font-size: 13.5px; font-weight: 500;
  text-align: left; cursor: pointer; transition: background var(--dur-base), color var(--dur-base);
}
.auth-x__tab:hover { background: var(--c-stage-glass); color: var(--c-stage-ink); }
.auth-x__tab svg { width: 16px; height: 16px; flex: none; opacity: .85; }
.auth-x__tab[aria-selected="true"] { background: var(--c-stage-glass-2); color: var(--c-stage-ink); font-weight: 600; }
.auth-x__tab[aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 3px; background: var(--c-stage-accent); }
.auth-x__tab--ai { margin-top: 6px; border: 1px dashed oklch(0.5 0.08 172); }
.auth-x__tab--ai[aria-selected="true"] { border-style: solid; border-color: var(--c-stage-accent); }
.auth-x__tab-ai { margin-left: auto; padding: 1px 6px; border-radius: 4px; background: var(--c-stage-accent); color: var(--c-stage); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; }
/* Proužek odpočtu pod aktivním modulem. Konec animace přepne na další
   modul (animationend), takže pauza = pozastavená animace, žádný časovač. */
.auth-x__bar { position: absolute; left: 12px; right: 10px; bottom: 3px; height: 2px; border-radius: 2px; background: transparent; }
.auth-x.is-running .auth-x__tab[aria-selected="true"] .auth-x__bar {
  background: linear-gradient(90deg, var(--c-stage-accent) 0 50%, oklch(0.97 0.008 172 / .12) 50%) right / 200% 100% no-repeat;
  animation: auth-countdown var(--x-dur) linear forwards;
}
.auth-x.is-held .auth-x__bar { animation-play-state: paused !important; }
@keyframes auth-countdown { to { background-position: left; } }

.auth-x__panel { min-width: 0; }
.auth-x__panel[hidden] { display: none; }
.auth-win { border-radius: 10px; overflow: hidden; background: var(--c-surface); color: var(--c-ink); box-shadow: 0 22px 50px oklch(0.1 0.03 172 / .45), 0 0 0 1px oklch(0.97 0.008 172 / .08); }
.auth-win__chrome { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: var(--c-sunken); border-bottom: 1px solid var(--c-border); font-size: 11.5px; color: var(--c-ink-mute); }
.auth-win__chrome i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-border); }
.auth-win__chrome b { margin-left: 8px; font-weight: 600; color: var(--c-ink); }
.auth-win__chrome span { margin-left: auto; }
.auth-x__cap { margin: 10px 2px 0; display: grid; gap: 3px; }
.auth-x__cap-title { font-size: 15px; font-weight: 600; color: var(--c-stage-ink); }
.auth-x__cap-text { font-size: 13.5px; line-height: 1.5; color: var(--c-stage-mute); text-wrap: pretty; max-width: 62ch; }
.auth-x__cap-text small { color: oklch(0.72 0.03 172); font-size: 12px; }

/* ======================================================================
   Mini scény — společné
   ====================================================================== */
.auth-sc { position: relative; height: 204px; padding: 14px; overflow: hidden; font-size: 12.5px; line-height: 1.35; }
.auth-sc * { box-sizing: border-box; }
.sc-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 100px; font-size: 11px; font-weight: 600; white-space: nowrap; border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-ink-mute); }
.sc-chip--ok { background: var(--c-ok-soft); border-color: var(--c-ok-line); color: var(--c-ok-ink); }
.sc-chip--soon { background: var(--c-soon-soft); border-color: var(--c-soon-line); color: var(--c-soon-ink); }
.sc-chip--bad { background: var(--c-expired-soft); border-color: var(--c-expired-line); color: var(--c-expired-ink); }
.sc-chip--ai { background: var(--c-brand-soft); border-color: var(--c-brand-line); color: var(--c-brand-ink); }
.sc-chip svg { width: 11px; height: 11px; }
.sc-btn { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 4px; background: var(--c-brand); color: var(--c-on-brand); font-weight: 600; font-size: 12px; white-space: nowrap; }
.sc-btn--ghost { background: var(--c-surface); color: var(--c-ink); border: 1px solid var(--c-border); font-weight: 500; }
.sc-mute { color: var(--c-ink-mute); }
.sc-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sc-foot { position: absolute; left: 14px; right: 14px; bottom: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sc-foot .sc-btn { margin-left: auto; }

/* Animační primitiva. Výchozí styl = koncový stav. */
.a-in   { animation: auth-in .45s var(--d, 0s) cubic-bezier(.2,.7,.2,1) backwards; }
.a-pop  { animation: auth-pop .4s var(--d, 0s) cubic-bezier(.3,1.5,.5,1) backwards; }
.a-type { animation: auth-type var(--t, .9s) var(--d, 0s) steps(var(--s, 14)) backwards; }
.a-fade { animation: auth-fade .5s var(--d, 0s) ease backwards; }
@keyframes auth-in   { from { opacity: 0; transform: translateY(8px); } }
@keyframes auth-pop  { from { opacity: 0; transform: scale(.6); } }
@keyframes auth-type { from { clip-path: inset(0 100% 0 0); } }
@keyframes auth-fade { from { opacity: 0; } }
@keyframes auth-draw { from { stroke-dashoffset: 260; } }
@keyframes auth-blink { 50% { opacity: 0; } }

/* ---- Nábor (ATS) ------------------------------------------------------ */
.sc-kanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; height: 100%; }
.sc-col { display: grid; align-content: start; gap: 6px; padding: 8px; border-radius: 6px; background: var(--c-sunken); }
.sc-col h4 { margin: 0 0 2px; display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 600; color: var(--c-ink-mute); text-transform: uppercase; letter-spacing: .04em; }
.sc-card { display: grid; gap: 3px; padding: 7px 8px; border-radius: 5px; background: var(--c-surface); border: 1px solid var(--c-border); box-shadow: var(--shadow-1); }
.sc-card b { font-size: 12.5px; }
.sc-card span { font-size: 11.5px; color: var(--c-ink-mute); }
.sc-card--new { border-color: var(--c-brand); box-shadow: 0 0 0 3px var(--c-brand-soft); }
.sc-card--move { animation: auth-move .7s 2.4s cubic-bezier(.5,0,.2,1) backwards; }
@keyframes auth-move { 0% { transform: translateX(calc(-100% - 26px)); } 100% { transform: none; } }
.sc-cv { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 5px; border: 1px dashed var(--c-brand-line); background: var(--c-surface); font-size: 11.5px; opacity: 0; animation: auth-cv 2.4s .2s ease backwards; }
.sc-cv i { font-style: normal; font-size: 10px; font-weight: 700; padding: 1px 4px; border-radius: 3px; background: var(--c-expired-soft); color: var(--c-expired-ink); }
@keyframes auth-cv { 0% { opacity: 0; transform: translateY(-6px); } 15%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.96); } }
.sc-cv-shim { position: relative; overflow: hidden; }
.sc-col .sc-slot { position: relative; min-height: 32px; }
.sc-drop { display: grid; place-items: center; height: 32px; border: 1px dashed var(--c-border); border-radius: 5px; font-size: 11px; color: var(--c-ink-faint); }
.sc-col .sc-slot .sc-cv { position: absolute; inset: 0 0 auto 0; height: 32px; }

/* ---- Kartotéka -------------------------------------------------------- */
.sc-search { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border: 1px solid var(--c-brand); border-radius: 5px; box-shadow: 0 0 0 3px var(--c-brand-soft); }
.sc-search svg { width: 14px; height: 14px; color: var(--c-ink-mute); }
.sc-search__q { font-family: var(--font-mono); }
.sc-caret { width: 1px; height: 15px; background: var(--c-ink); animation: auth-blink 1s steps(1) infinite; }
.sc-search__n { margin-left: auto; font-size: 11.5px; color: var(--c-ink-mute); }
.sc-person { margin-top: 10px; display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 4px 10px; padding: 10px; border: 1px solid var(--c-border); border-radius: 6px; }
.sc-ava { grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--c-pending-soft); color: var(--c-pending-ink); font-weight: 700; font-size: 13px; }
.sc-person__name { font-size: 14px; font-weight: 600; }
.sc-person__meta { font-size: 12px; color: var(--c-ink-mute); }
.sc-docs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.sc-rows { margin-top: 8px; display: grid; gap: 4px; }
.sc-row { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 5px; background: var(--c-sunken); font-size: 12px; color: var(--c-ink-mute); }

/* ---- Smlouvy a e-podpis ---------------------------------------------- */
.sc-contract { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; height: 100%; }
.sc-paper { position: relative; padding: 12px 14px; border: 1px solid var(--c-border); border-radius: 4px; background: var(--c-surface); box-shadow: var(--shadow-1); }
.sc-paper h5 { margin: 0 0 8px; font-size: 12.5px; }
.sc-line { height: 5px; border-radius: 3px; background: var(--c-border-hair); margin: 5px 0; }
.sc-fieldv { display: flex; gap: 6px; align-items: baseline; margin: 5px 0; font-size: 11.5px; }
.sc-fieldv span { color: var(--c-ink-mute); min-width: 52px; }
.sc-fieldv b { padding: 0 4px; border-radius: 3px; background: var(--c-brand-soft); color: var(--c-brand-ink); font-weight: 600; }
.sc-sign { position: relative; margin-top: 8px; height: 40px; border-bottom: 1px solid var(--c-ink-faint); }
.sc-sign svg { position: absolute; left: 6px; bottom: 2px; width: 120px; height: 38px; }
.sc-sign path { fill: none; stroke: oklch(0.42 0.12 252); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 260; animation: auth-draw 1.2s 2.6s ease-in-out backwards; }
.sc-sign small { position: absolute; right: 0; bottom: -16px; font-size: 10.5px; color: var(--c-ink-faint); }
.sc-side { display: grid; align-content: start; gap: 8px; }
.sc-src { padding: 8px 10px; border-radius: 6px; background: var(--c-sunken); font-size: 11.5px; }
.sc-src b { display: block; font-size: 12px; margin-bottom: 2px; }
.sc-steps { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.sc-steps li { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.sc-steps i { width: 16px; height: 16px; flex: none; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 700; background: var(--c-ok-soft); color: var(--c-ok-ink); border: 1px solid var(--c-ok-line); }
.sc-stamp svg { width: 15px; height: 15px; flex: none; }
.sc-stamp { justify-self: start; display: inline-flex; gap: 6px; align-items: center; padding: 6px 10px; border-radius: 6px; border: 1.5px solid var(--c-ok-ink); color: var(--c-ok-ink); font-weight: 700; font-size: 12px; transform: rotate(-2deg); background: var(--c-ok-soft); }

/* ---- Docházka a mzdy ------------------------------------------------- */
.sc-ts { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; height: 100%; }
.sc-scan { position: relative; padding: 10px; border-radius: 3px; background: oklch(0.985 0.01 85); border: 1px solid oklch(0.9 0.02 85); transform: rotate(-1.6deg); box-shadow: var(--shadow-1); overflow: hidden; }
.sc-scan b { display: block; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: oklch(0.45 0.03 60); margin-bottom: 6px; }
.sc-hand { display: flex; justify-content: space-between; margin: 7px 0; font-family: 'Comic Sans MS', 'Bradley Hand', cursive; font-size: 11px; color: oklch(0.38 0.08 260); }
.sc-scan__beam { position: absolute; left: 0; right: 0; top: 0; height: 26px; opacity: 0;
  background: linear-gradient(180deg, transparent, oklch(0.72 0.14 172 / .35) 70%, oklch(0.62 0.12 172 / .9));
  animation: auth-beam 2.2s .3s ease-in-out 1 backwards; }
@keyframes auth-beam { 0% { top: -26px; opacity: 1; } 90% { top: 100%; opacity: 1; } 100% { top: 100%; opacity: 0; } }
.sc-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.sc-table th { text-align: left; font-size: 11px; font-weight: 600; color: var(--c-ink-mute); padding: 0 6px 5px; border-bottom: 1px solid var(--c-border); }
.sc-table td { padding: 6px; border-bottom: 1px solid var(--c-border-hair); white-space: nowrap; }
.sc-table td:last-child, .sc-table th:last-child { text-align: right; }
.sc-table tr.is-warn td { background: var(--c-soon-soft); }
.sc-table .sc-num { text-align: right; }

/* ---- Ubytování ------------------------------------------------------- */
.sc-hostel__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.sc-hostel__head b { font-size: 13px; }
.sc-rooms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sc-room { padding: 7px; border: 1px solid var(--c-border); border-radius: 6px; }
.sc-room small { display: block; font-size: 10.5px; color: var(--c-ink-mute); margin-bottom: 5px; font-weight: 600; }
.sc-beds { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.sc-bed { height: 30px; border-radius: 4px; border: 1px dashed var(--c-border); display: grid; place-items: center; font-size: 10px; color: var(--c-ink-faint); }
.sc-bed--on { border: 1px solid var(--c-brand-line); background: var(--c-brand-soft); color: var(--c-brand-ink); font-weight: 700; animation: auth-pop .35s var(--d, 0s) cubic-bezier(.3,1.5,.5,1) backwards; }
.sc-bed--due { border-color: var(--c-soon-line); background: var(--c-soon-soft); color: var(--c-soon-ink); }

/* ---- Fakturace a ekonomika ------------------------------------------- */
.sc-inv { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; height: 100%; }
.sc-inv__src h5, .sc-inv__out h5 { margin: 0 0 6px; font-size: 11.5px; color: var(--c-ink-mute); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.sc-sum { display: flex; justify-content: space-between; padding: 7px 6px 0; font-weight: 700; }
.sc-invoice { padding: 10px 12px; border-radius: 6px; border: 1px solid var(--c-brand-line); background: linear-gradient(180deg, var(--c-brand-soft), var(--c-surface)); display: grid; gap: 4px; }
.sc-invoice__no { font-size: 11.5px; color: var(--c-ink-mute); }
.sc-invoice__total { font-family: var(--font-mono); font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.sc-spark { margin-top: 10px; }
.sc-spark svg { width: 100%; height: 46px; display: block; }
.sc-spark path { fill: none; stroke: var(--c-brand); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 260; animation: auth-draw 1.4s 2.2s ease backwards; }
.sc-spark small { font-size: 11px; color: var(--c-ink-mute); }

/* ---- Hlídání termínů ------------------------------------------------- */
.sc-dl { display: grid; gap: 6px; }
.sc-dl__row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 10px; border: 1px solid var(--c-border); border-radius: 6px; }
.sc-dl__row svg { width: 16px; height: 16px; color: var(--c-ink-mute); }
.sc-dl__row b { display: block; font-size: 12.5px; }
.sc-dl__row span { font-size: 11.5px; color: var(--c-ink-mute); }
.sc-dl__row.is-hot { border-color: var(--c-expired-line); background: var(--c-expired-soft); }
.sc-dl__row.is-hot svg { color: var(--c-expired-ink); }
.sc-dlw { display: grid; grid-template-columns: minmax(0, 1fr) 196px; gap: 12px; }
.sc-notes { display: grid; gap: 8px; align-content: start; }
.sc-toast { display: flex; gap: 9px; align-items: flex-start; padding: 9px 11px; border-radius: 8px; background: var(--c-ink); color: oklch(0.97 0 0); box-shadow: var(--shadow-2); font-size: 11.5px; line-height: 1.4; }
.sc-toast b { display: block; font-size: 12px; }
.sc-toast svg { width: 15px; height: 15px; flex: none; color: var(--c-stage-accent); margin-top: 1px; }
.sc-toast--light { background: var(--c-surface); color: var(--c-ink); border: 1px solid var(--c-border); box-shadow: var(--shadow-1); }
.sc-toast--light svg { color: var(--c-brand); }

/* ---- AI asistent ----------------------------------------------------- */
.sc-chat { display: grid; gap: 8px; align-content: start; }
.sc-msg { max-width: 86%; padding: 8px 11px; border-radius: 10px; font-size: 12.5px; line-height: 1.45; }
.sc-msg--me { justify-self: end; background: var(--c-ink); color: oklch(0.97 0 0); border-bottom-right-radius: 3px; }
.sc-msg--ai { justify-self: start; background: var(--c-brand-soft); color: var(--c-ink); border: 1px solid var(--c-brand-line); border-bottom-left-radius: 3px; }
.sc-msg--ai ul { margin: 4px 0; padding-left: 16px; }
.sc-msg__who { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--c-brand-ink); margin-bottom: 2px; }
.sc-msg__who svg { width: 12px; height: 12px; }
.sc-acts { display: flex; gap: 6px; margin-top: 6px; }
.sc-dots { justify-self: start; display: inline-flex; gap: 4px; padding: 9px 12px; border-radius: 10px; background: var(--c-sunken); opacity: 0; animation: auth-dots 1.4s 1.3s ease backwards; }
.sc-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--c-ink-faint); }
@keyframes auth-dots { 0%, 100% { opacity: 0; } 15%, 85% { opacity: 1; } }
.sc-dots-slot { position: relative; height: 0; }
.sc-dots-slot .sc-dots { position: absolute; left: 0; top: 0; }

/* ======================================================================
   Dlaždice: zkušební doba · průvodce · cena
   ====================================================================== */
.auth-tiles { margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.auth-tile { border: 1px solid var(--c-stage-line); border-radius: 10px; background: var(--c-stage-glass); padding: 12px 14px; min-width: 0; }
.auth-tile[open] > summary ~ * { animation: none; }
.auth-tile__head { display: flex; align-items: center; gap: 10px; list-style: none; cursor: default; }
.auth-tile__head::-webkit-details-marker { display: none; }
.auth-tile__icon { width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-items: center; background: oklch(0.72 0.14 172 / .16); color: var(--c-stage-accent); }
.auth-tile__icon svg { width: 16px; height: 16px; }
.auth-tile__title { font-size: 14.5px; font-weight: 600; line-height: 1.25; }
.auth-tile__chev { display: none; margin-left: auto; width: 14px; height: 14px; color: var(--c-stage-mute); transition: transform var(--dur-base); }
.auth-tile__body { margin-top: 10px; display: grid; gap: 9px; }
.auth-tile__text { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--c-stage-mute); text-wrap: pretty; }
.auth-tile__text b { color: var(--c-stage-ink); font-weight: 600; }

/* Přepínač na tmavém (zkušební doba, počet uživatelů). */
.auth-seg { display: inline-flex; padding: 2px; border-radius: 8px; background: oklch(0.15 0.03 172 / .6); border: 1px solid var(--c-stage-line); }
.auth-seg button { height: 26px; padding: 0 9px; border: 0; border-radius: 6px; background: transparent; color: var(--c-stage-mute); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.auth-seg button:hover { color: var(--c-stage-ink); }
.auth-seg button[aria-pressed="true"] { background: var(--c-stage-ink); color: var(--c-stage); font-weight: 600; }

/* Hodiny zkušební doby — 30 dílků, stojí, dokud nejsou data. */
.auth-clock { display: flex; align-items: center; gap: 12px; }
.auth-tile--trial .auth-seg { justify-self: start; }
.auth-clock__ring { position: relative; width: 58px; height: 58px; flex: none; }
.auth-clock__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.auth-clock__ring circle { fill: none; stroke-width: 5; }
.auth-clock__track { stroke: oklch(0.97 0.008 172 / .14); stroke-dasharray: 3.4 1.8; }
.auth-clock__fill { stroke: var(--c-stage-accent); stroke-dasharray: 157 157; stroke-dashoffset: 157; transition: stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1); }
.auth-tile[data-run="true"] .auth-clock__fill { stroke-dashoffset: 0; }
.auth-clock__mid { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--c-stage-ink); text-align: center; line-height: 1.05; }
.auth-clock__mid svg { width: 14px; height: 14px; transform: none; color: var(--c-stage-mute); }
.auth-clock__state { display: grid; gap: 1px; font-size: 12.5px; }
.auth-clock__state b { font-size: 13px; }
.auth-clock__state span { color: var(--c-stage-mute); font-size: 12px; }
.auth-tile [data-run-show] { display: none; }
.auth-tile[data-run="false"] [data-run-show="false"], .auth-tile[data-run="true"] [data-run-show="true"] { display: grid; place-items: center start; }
.auth-clock__mid [data-run-show] { place-items: center !important; }

/* Mini průvodce — body kroků jako v onboarding.css (.wiz-dots). */
.auth-wdots { display: flex; gap: 5px; margin: 2px 0 0; padding: 0; list-style: none; }
.auth-wdots li { width: 9px; height: 9px; border-radius: 9px; background: oklch(0.97 0.008 172 / .18); }
.auth-wdots li.is-done { background: var(--c-stage-accent); }
.auth-wdots li.is-now { width: 26px; background: var(--c-stage-accent); box-shadow: 0 0 0 3px oklch(0.72 0.14 172 / .25); }
.auth-wsteps { position: relative; height: 18px; overflow: hidden; font-size: 12px; color: var(--c-stage-ink); }
.auth-wsteps span { position: absolute; inset: 0; }
.auth-wsteps b { font-family: var(--font-mono); font-weight: 600; color: var(--c-stage-accent); margin-right: 6px; }
.auth-demo { display: inline-flex; align-items: center; gap: 6px; align-self: start; justify-self: start; padding: 3px 8px; border-radius: 6px; border: 1px dashed oklch(0.6 0.1 172); font-size: 11.5px; color: var(--c-stage-ink); }
.auth-demo b { font-size: 10px; letter-spacing: .06em; padding: 0 4px; border-radius: 3px; background: var(--c-mk-yellow); color: oklch(0.25 0.04 80); }

/* Cena — mění se se státem registrace ve formuláři. */
.auth-price { display: grid; gap: 0; }
.auth-price__for { font-size: 11.5px; color: var(--c-stage-mute); }
.auth-price__row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.auth-price__amount { font-variant-numeric: tabular-nums; font-size: 28px; font-weight: 700; font-weight: 600; letter-spacing: -.03em; color: var(--c-stage-ink); }
.auth-price__per { font-size: 12px; color: var(--c-stage-mute); }
.auth-price__extra { font-size: 11.5px; color: var(--c-stage-accent); min-height: 1em; }
.auth-price.is-flash .auth-price__amount { animation: auth-flash .6s ease; }
@keyframes auth-flash { 0% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 1; transform: none; } }
.auth-tile.is-lit { border-color: var(--c-stage-accent); box-shadow: 0 0 0 3px oklch(0.72 0.14 172 / .2); transition: box-shadow .3s, border-color .3s; }
.auth-incl { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; font-size: 12px; color: var(--c-stage-mute); }
.auth-incl li { display: flex; gap: 6px; }
.auth-incl li::before { content: "✓"; color: var(--c-stage-accent); font-weight: 700; }
.auth-tile__link { font-size: 12px; color: var(--c-stage-ink); }

/* Patička příběhu + místo pro referenci */
.auth-reg__foot { margin-top: auto; padding-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: oklch(0.72 0.03 172); }
.auth-reg__foot a { color: inherit; }
.auth-ph { margin-top: 12px; padding: 7px 12px; border: 1.5px dashed var(--c-mk-yellow); border-radius: 8px; font-size: 12px; color: var(--c-mk-yellow); }
.auth-ph b { letter-spacing: .04em; }

/* ======================================================================
   Formulářový panel
   ====================================================================== */
/* „Jak to půjde dál“ — čtyři body; první se plní s vyplněnými údaji (--p 0–1). */
.auth-next { --p: 0; margin: 0 0 22px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.auth-next__step { position: relative; display: grid; justify-items: center; gap: 5px; text-align: center; font-size: 11.5px; line-height: 1.3; color: var(--c-ink-mute); }
.auth-next__step + .auth-next__step::before { content: ""; position: absolute; top: 12px; right: calc(50% + 15px); left: calc(-50% + 15px); height: 2px; border-radius: 2px; background: var(--c-border); }
.auth-next__step + .auth-next__step::after { content: ""; position: absolute; top: 12px; left: calc(-50% + 15px); height: 2px; border-radius: 2px; width: calc((100% - 30px) * var(--fill, 0)); background: var(--c-brand); transition: width .45s cubic-bezier(.4,0,.2,1); }
.auth-next__step:nth-child(2) { --fill: var(--p); }
.auth-next__dot {
  position: relative; z-index: 1; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c-surface); border: 1.5px solid var(--c-border); font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; color: var(--c-ink-mute);
  transition: background var(--dur-base), border-color var(--dur-base), color var(--dur-base), box-shadow .3s;
}
.auth-next__name { font-weight: 600; color: var(--c-ink); font-size: 12px; }
.auth-next__sub { font-size: 11px; }
.auth-next__sub b { color: var(--c-brand-ink); }
/* Krok 1: prstenec průběhu (conic) kolem čísla podle vyplněných údajů. */
.auth-next__step--now .auth-next__dot { border: 0; color: var(--c-brand-ink);
  background: radial-gradient(closest-side, var(--c-surface) 78%, transparent 80%), conic-gradient(var(--c-brand) calc(var(--p) * 360deg), var(--c-border) 0); }
/* Všechno vyplněno: krok 1 hotový, krok 2 „na řadě“. */
.auth-next.is-ready .auth-next__step--now .auth-next__dot,
.auth-next__step--done .auth-next__dot { background: var(--c-brand); border: 1.5px solid var(--c-brand); color: var(--c-on-brand); }
.auth-next.is-ready .auth-next__step:nth-child(2) .auth-next__dot,
.auth-next__step--current .auth-next__dot { border-color: var(--c-brand); background: var(--c-brand-soft); color: var(--c-brand-ink); box-shadow: 0 0 0 4px var(--c-brand-soft); }
.auth-next.is-ready .auth-next__step:nth-child(2) .auth-next__name,
.auth-next__step--current .auth-next__name { color: var(--c-brand-ink); }

.auth-reg .auth__heading { font-size: 28px; }
.auth-reg .auth__sub { font-size: 14px; }
.auth-reg .auth__form { margin-top: 20px; gap: 14px; }
.auth-reg .auth__form .select { height: var(--control-h-mk); font-size: 14px; border-radius: 5px; padding: 0 var(--space-3); }
.auth-reg .auth__form .btn { height: var(--control-h-mk); }
.auth-reg .field__label { font-size: 12.5px; }
.auth-reg .field.is-done .field__label::after { content: "✓"; margin-left: 6px; color: var(--c-ok-ink); font-weight: 700; }
.auth-reg .input.is-flash { animation: auth-field 1s ease; }
@keyframes auth-field { 0% { background: var(--c-brand-soft); border-color: var(--c-brand); } 100% { background: var(--c-surface); } }
.auth-reg .field__hint.is-found { color: var(--c-ok-ink); }
.auth-reg .auth__consent { font-size: 12.5px; padding: 10px 12px; }
.auth-reg .auth__submit { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.auth-reg .auth__submit svg { width: 16px; height: 16px; }
.auth-reg .auth__submit:not([disabled]):hover svg { transform: translateX(2px); transition: transform var(--dur-base); }
.auth-submit-why { margin: -6px 0 0; font-size: 12px; color: var(--c-ink-mute); text-align: center; }

.auth-assure { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--c-ink-mute); }
.auth-assure li { display: inline-flex; align-items: center; gap: 5px; }
.auth-assure svg { width: 14px; height: 14px; color: var(--c-brand); }
.auth-reg__login { margin: 18px 0 0; font-size: 13px; color: var(--c-ink-mute); text-align: center; }
.auth-reg__help { margin: 6px 0 0; font-size: 12px; color: var(--c-ink-faint); text-align: center; }
.auth-reg__help a { color: inherit; }

/* ---- Odesláno: Zkontrolujte e-mail ---------------------------------- */
.auth-sent { display: grid; gap: 16px; }
.auth-sent[hidden] { display: none; }
.auth-sent__icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--c-brand-soft); color: var(--c-brand); }
.auth-sent__icon svg { width: 28px; height: 28px; }
.auth-sent__icon .a-pop { transform-origin: 70% 70%; }
.auth-sent .auth__heading { margin-top: 2px; }
.auth-sent__mail { font-weight: 600; color: var(--c-ink); word-break: break-all; }
.auth-sent__open { display: flex; gap: 8px; flex-wrap: wrap; }
.auth-sent__open .btn { height: 38px; padding: 0 14px; font-size: 13px; }
.auth-sent__fine { margin: 0; font-size: 12.5px; color: var(--c-ink-mute); line-height: 1.5; }
.auth-sent__fine a { color: var(--c-brand-ink); }
.auth-after { border: 1px solid var(--c-border); border-radius: 10px; overflow: hidden; }
.auth-after__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 11px 14px; background: linear-gradient(180deg, var(--c-brand-soft), var(--c-surface)); border-bottom: 1px solid var(--c-border-hair); }
.auth-after__head b { font-size: 14px; }
.auth-after__head span { font-size: 12px; color: var(--c-brand-ink); font-weight: 600; white-space: nowrap; }
.auth-after__list { margin: 0; padding: 8px 14px 10px; list-style: none; display: grid; gap: 2px; counter-reset: s; }
.auth-after__list li { counter-increment: s; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 0; font-size: 13px; }
.auth-after__list li::before { content: counter(s); width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; background: var(--c-sunken); color: var(--c-ink-mute); }
.auth-after__list li.is-key::before { background: var(--c-brand); color: var(--c-on-brand); }
.auth-after__list small { font-size: 11.5px; color: var(--c-ink-faint); font-family: var(--font-mono); }
.auth-after__list li span i { font-style: normal; font-size: 11.5px; color: var(--c-ink-mute); display: block; }
.auth-after__demo { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 14px; border-top: 1px dashed var(--c-border); background: var(--c-sunken); font-size: 12.5px; line-height: 1.45; color: var(--c-ink-mute); }
.auth-after__demo b.tag-demo { flex: none; font-size: 10px; letter-spacing: .06em; padding: 2px 5px; border-radius: 3px; background: var(--c-mk-yellow); color: oklch(0.25 0.04 80); }
.auth-after__demo strong { color: var(--c-ink); }
.auth-after__trial { display: flex; gap: 8px; align-items: center; margin: 0; padding: 9px 14px; border-top: 1px solid var(--c-border-hair); font-size: 12.5px; color: var(--c-ink-mute); }
.auth-after__trial svg { width: 15px; height: 15px; color: var(--c-brand); flex: none; }

/* ---- Lepicí CTA na telefonu ------------------------------------------ */
.auth-sticky { display: none; }

/* ======================================================================
   Responzivita — jako v marketing.css až na konci souboru.
   ====================================================================== */
@media (max-width: 1360px) {
  .auth-reg { grid-template-columns: minmax(0, 1fr) minmax(420px, 470px); }
  .auth-reg__bar { padding: 22px 36px 0; }
  .auth-reg__story { padding: 0 36px 24px; }
  .auth-reg__panel { padding: 26px 36px 30px; }
  .auth-x__body { grid-template-columns: 186px minmax(0, 1fr); gap: 14px; }
  .sc-ts .sc-table td:nth-child(2), .sc-ts .sc-table th:nth-child(2) { display: none; }
  .auth-tiles { grid-template-columns: 1fr 1fr; }
  .auth-tile--price { grid-column: 1 / -1; }
  .auth-tile--price .auth-tile__body { grid-template-columns: auto 1fr; align-items: start; column-gap: 24px; }
}

/* Pod 1080 px záložky modulů přejdou do vodorovného pruhu nad náhled. */
@media (max-width: 1080px) {
  .auth-x__body { grid-template-columns: 1fr; }
  .auth-x__tabs { display: flex; gap: 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; }
  .auth-x__tabs::-webkit-scrollbar { display: none; }
  .auth-x__tab { width: auto; flex: none; scroll-snap-align: start; border: 1px solid var(--c-stage-line); border-radius: 100px; min-height: 34px; padding: 0 12px; }
  .auth-x__tab--ai { margin-top: 0; }
  .auth-x__tab[aria-selected="true"]::before { display: none; }
  .auth-x__tab[aria-selected="true"] { border-color: var(--c-stage-accent); }
  .auth-x__bar { left: 14px; right: 14px; bottom: 2px; }
}

@media (max-width: 900px) {
  /* Telefon: pruh s logem → FORMULÁŘ → výhody. Pořadí v HTML je stejné,
     jen se oblasti mřížky postaví pod sebe. */
  .auth-reg { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; grid-template-areas: "bar" "panel" "story"; }
  .auth-reg__deco { display: none; }
  .auth-reg__bar { padding: 10px 16px; }
  .auth-reg__bar .auth__logo { height: 24px; }
  .auth-reg__panel { padding: 20px 16px 28px; justify-content: flex-start; }
  .auth-reg__box { max-width: none; }
  .auth-reg .auth__heading { font-size: 24px; }
  .auth-reg .auth__sub { font-size: 13.5px; }
  .auth-next { margin-bottom: 16px; }
  .auth-next__sub { display: none; }
  .auth-next__name { font-size: 11px; }
  .auth-next__long { display: none; }

  .auth-reg__story { padding: 28px 16px 96px; border-top: 1px solid var(--c-stage-line); }
  .auth-hero { padding-top: 0; }
  .auth-hero__title { font-size: 27px; }
  .auth-hero__lead { font-size: 14.5px; }
  .auth-x { margin-top: 20px; }
  .auth-x__tabs { margin: 0 -16px; padding: 0 16px 2px; scroll-padding: 0 16px; }
  .auth-sc { height: 214px; padding: 12px; font-size: 12px; }
  .sc-ts { grid-template-columns: 1fr; }
  .sc-scan { display: none; }
  .sc-contract, .sc-inv { grid-template-columns: 1fr; }
  .sc-side .sc-src, .sc-inv__out .sc-spark { display: none; }
  .sc-inv__out { position: absolute; left: 12px; right: 12px; bottom: 12px; }
  .sc-rooms { grid-template-columns: 1fr 1fr; }
  .sc-room:nth-child(n+3) { display: none; }
  .sc-kanban { grid-template-columns: 1fr 1fr; }
  .sc-kanban .sc-col:last-child { display: none; }
  .sc-dlw { grid-template-columns: 1fr; }
  .sc-dl__row:nth-child(3), .sc-notes > .sc-mute, .sc-toast--light { display: none; }

  /* Dlaždice → akordeon. */
  .auth-tiles { grid-template-columns: 1fr; gap: 8px; margin-top: 22px; }
  .auth-tile { padding: 0; }
  .auth-tile__head { cursor: pointer; padding: 12px 14px; min-height: 48px; }
  .auth-tile__chev { display: block; }
  .auth-tile[open] .auth-tile__chev { transform: rotate(90deg); }
  .auth-tile__body { margin: 0; padding: 0 14px 14px; }
  .auth-tile--price .auth-tile__body { grid-template-columns: 1fr; }

  .auth-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; gap: 10px; align-items: center;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--c-surface); border-top: 1px solid var(--c-border);
    box-shadow: 0 -8px 24px oklch(0.1 0.03 172 / .18); transform: translateY(110%); transition: transform .25s ease;
  }
  .auth-sticky.is-on { transform: none; }
  .auth-sticky span { font-size: 12px; color: var(--c-ink-mute); line-height: 1.3; }
  .auth-sticky span b { display: block; color: var(--c-ink); font-size: 13px; }
  .auth-sticky a { margin-left: auto; display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border-radius: 6px; background: var(--c-brand); color: var(--c-on-brand); font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-reg *, .auth-reg *::before, .auth-reg *::after { animation: none !important; transition: none !important; }
  .sc-caret { display: none; }
}