:root{
  --brand:#16a85b;
  --brand-strong:#0c8043;
  --brand-soft:#e4f4ea;
  --brand-tint:#f0f8f2;
  --ink:#12241b;
  --muted:#5d7468;
  --line:#cadfce;
  --bg:#eef5ee;
  --white:#ffffff;
  --radius:14px;
  --shadow:0 18px 40px -18px rgba(12,128,67,.45);
  --display:"Bricolage Grotesque", serif;
  --body:"Hanken Grotesk", system-ui, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--body);color:var(--ink);background:var(--bg);overflow:hidden;-webkit-font-smoothing:antialiased;}
.bg-art{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 50% at 12% 0%, rgba(22,168,91,.16), transparent 60%),
    radial-gradient(55% 60% at 100% 100%, rgba(12,128,67,.14), transparent 55%);}
.bg-grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");}
header{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:18px 26px;}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;font-size:19px;color:var(--ink);letter-spacing:-.02em}
.brand .mark{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,var(--brand),var(--brand-strong));display:grid;place-items:center;box-shadow:0 6px 14px -5px rgba(12,128,67,.6)}
.brand .mark svg{width:15px;height:15px;display:block}
.nav-back{appearance:none;border:1px solid var(--line);background:rgba(255,255,255,.7);backdrop-filter:blur(6px);width:40px;height:40px;border-radius:11px;display:none;place-items:center;cursor:pointer;color:var(--ink);transition:.2s}
.nav-back:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-1px)}
.nav-back.show{display:grid}
.progress{position:fixed;bottom:0;left:0;right:0;height:8px;z-index:40;background:rgba(202,223,206,.3)}
.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--brand-strong));border-radius:0;transition:width .5s cubic-bezier(.22,.61,.36,1)}
.stage{position:relative;z-index:10;height:100dvh;width:100%}
.step{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:90px 26px 40px;overflow-y:auto;
  opacity:0;transform:translateY(52px);pointer-events:none;transition:transform .58s cubic-bezier(.22,.61,.36,1), opacity .42s ease;}
.step.active{opacity:1;transform:translateY(0);pointer-events:auto}
.inner{width:100%;max-width:680px;margin:auto}
.qnum{display:inline-flex;align-items:center;gap:7px;color:var(--brand-strong);font-weight:600;font-size:14px;margin-bottom:14px}
.qnum svg{width:13px;height:13px;transform:rotate(90deg)}
h1.q{font-family:var(--display);font-weight:600;letter-spacing:-.025em;line-height:1.12;font-size:clamp(1.5rem,4.2vw,2.35rem);color:var(--ink)}
.req{color:var(--brand);font-weight:700;margin-left:4px}
.hint{color:var(--muted);font-size:clamp(.95rem,2vw,1.05rem);line-height:1.55;margin-top:14px;max-width:60ch;white-space:pre-line}
.field{margin-top:30px}
input.t, textarea.t{width:100%;font-family:var(--body);font-size:clamp(1.15rem,2.6vw,1.5rem);color:var(--ink);background:transparent;border:none;border-bottom:2px solid var(--line);padding:10px 2px;outline:none;resize:none;transition:border-color .25s}
input.t::placeholder, textarea.t::placeholder{color:#a9c0b1}
input.t:focus, textarea.t:focus{border-color:var(--brand)}
textarea.t{min-height:54px;line-height:1.4}
.choices{margin-top:30px;display:flex;flex-direction:column;gap:12px}
.opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;background:var(--white);border:1.5px solid var(--line);border-radius:var(--radius);padding:15px 16px;font-size:clamp(1rem,2.3vw,1.12rem);font-weight:500;color:var(--ink);transition:transform .18s ease, border-color .18s, background .18s, box-shadow .18s}
.opt:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:0 10px 24px -16px rgba(12,128,67,.55)}
.opt .key{flex:none;width:30px;height:30px;border-radius:8px;border:1.5px solid var(--line);display:grid;place-items:center;font-weight:700;font-size:.85rem;color:var(--muted);background:var(--brand-tint);transition:.18s}
.opt .tick{margin-left:auto;opacity:0;color:var(--brand);transition:.18s;transform:scale(.6)}
.opt.sel{border-color:var(--brand);background:var(--brand-soft)}
.opt.sel .key{background:var(--brand);border-color:var(--brand);color:#fff}
.opt.sel .tick{opacity:1;transform:scale(1)}
.opt.disabled{opacity:.45;cursor:not-allowed}
.opt.disabled:hover{transform:none;border-color:var(--line);box-shadow:none}
.drop{margin-top:28px;border:2px dashed var(--line);border-radius:var(--radius);background:rgba(255,255,255,.6);padding:32px 22px;text-align:center;cursor:pointer;transition:.2s;color:var(--muted)}
.drop:hover,.drop.over{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-strong)}
.drop strong{color:var(--ink);font-weight:600}
.drop svg{width:30px;height:30px;margin-bottom:8px;color:var(--brand)}
.thumbs{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px}
.thumb{position:relative;width:78px;height:78px;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#fff}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb.up{display:grid;place-items:center;font-size:11px;color:var(--muted)}
.thumb .fname{position:absolute;inset:auto 0 0 0;font-size:9px;background:rgba(0,0,0,.55);color:#fff;padding:3px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thumb .rm{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:6px;border:none;background:rgba(18,36,27,.78);color:#fff;cursor:pointer;display:grid;place-items:center;font-size:12px;line-height:1}
.actions{margin-top:34px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.btn{appearance:none;border:none;cursor:pointer;font-family:var(--body);font-weight:700;background:linear-gradient(135deg,var(--brand),var(--brand-strong));color:#fff;padding:14px 26px;border-radius:12px;font-size:1.05rem;box-shadow:var(--shadow);transition:transform .18s, box-shadow .18s, filter .18s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.04);box-shadow:0 22px 44px -18px rgba(12,128,67,.6)}
.btn:active{transform:translateY(0)}
.btn[disabled]{opacity:.6;cursor:default;transform:none;filter:none}
.enter-hint{color:var(--muted);font-size:.86rem;display:flex;align-items:center;gap:6px}
.enter-hint kbd{font-family:var(--body);background:var(--white);border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:2px 7px;font-size:.78rem;font-weight:600;color:var(--ink)}
.err{color:#c0392b;font-weight:600;font-size:.92rem;margin-top:14px;display:none}
.err.show{display:block;animation:shake .35s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.center{text-align:center}
.center h1{font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1.08;font-size:clamp(1.9rem,5.5vw,3.1rem)}
.center .hint{margin-left:auto;margin-right:auto}
.center .actions{justify-content:center}
.badge{display:inline-flex;align-items:center;gap:8px;background:var(--brand-soft);color:var(--brand-strong);font-weight:600;font-size:.85rem;padding:7px 14px;border-radius:999px;margin-bottom:22px}
.big-check{width:84px;height:84px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-strong));display:grid;place-items:center;margin:0 auto 24px;box-shadow:var(--shadow);animation:pop .5s cubic-bezier(.18,1.4,.4,1)}
.big-check svg{width:40px;height:40px;color:#fff}
.spinner{width:42px;height:42px;border-radius:50%;border:4px solid var(--brand-soft);border-top-color:var(--brand);margin:0 auto 22px;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
.fatal{position:fixed;inset:0;display:grid;place-items:center;padding:30px;text-align:center;z-index:60}
.fatal div{max-width:520px;color:var(--muted)}
.fatal h1{font-family:var(--display);color:var(--ink);margin-bottom:10px}
.fatal code{background:#fff;border:1px solid var(--line);padding:2px 7px;border-radius:6px;color:var(--ink)}
@media (max-width:560px){header{padding:14px 16px}.step{padding:80px 18px 30px}.actions{gap:12px}}
@media (prefers-reduced-motion:reduce){.step{transition:opacity .25s;transform:none}}

/* ── Tlačítka v jedné řadě ─────────────────────────────────── */
.actions{margin-top:28px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.btn{appearance:none;border:none;cursor:pointer;font-family:var(--body);font-weight:700;
  background:linear-gradient(135deg,var(--brand),var(--brand-strong));color:#fff;
  padding:13px 22px;border-radius:12px;font-size:1rem;box-shadow:var(--shadow);
  display:inline-flex;align-items:center;gap:8px;
  transition:transform .18s, box-shadow .18s, filter .18s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.04);box-shadow:0 22px 44px -18px rgba(12,128,67,.6)}
.btn:active{transform:translateY(0)}
.btn[disabled]{opacity:.6;cursor:default;transform:none;filter:none}
.btn--back{background:rgba(255,255,255,.75);backdrop-filter:blur(6px);
  border:1.5px solid var(--line);color:var(--ink);box-shadow:none;
  padding:11px 13px;min-width:0}
.btn--back:hover{border-color:var(--brand);color:var(--brand);background:#fff;filter:none}

/* ── hint nepovinné pod otázkou ────────────────────────────── */
.hint--opt{color:var(--brand-strong);font-size:.88rem;font-weight:600;
  margin-top:10px;margin-bottom:0;opacity:.8}

/* ── Upload – animace ──────────────────────────────────────── */
.thumb--uploading{position:relative}
.thumb--uploading img{opacity:.45;filter:blur(1px)}
.thumb-overlay{position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(240,248,242,.65);border-radius:10px}
.thumb-spinner{width:24px;height:24px;border-radius:50%;
  border:3px solid var(--brand-soft);border-top-color:var(--brand);
  animation:spin .7s linear infinite}

/* ── Hlavička – reálné logo Naskladovna ────────────────────── */
header{padding:0;background:#fff;border-bottom:1px solid #e8f0e8;
  position:fixed;top:0;left:0;right:0;z-index:30;overflow:visible}
.header-inner{max-width:1240px;margin:0 auto;padding:0 40px;height:80px;
  display:flex;align-items:flex-start;justify-content:space-between;overflow:visible}
.brand-logo{display:flex;align-items:flex-start;text-decoration:none;flex-shrink:0;line-height:0}
.brand-logo img{height:96px;width:auto;display:block}
.nav-back{background:transparent;border:1.5px solid var(--line);color:var(--ink);
  width:40px;height:40px;border-radius:11px;display:none;place-items:center;
  cursor:pointer;transition:.2s;flex-shrink:0;margin-top:20px}
.nav-back:hover{border-color:var(--brand);color:var(--brand)}
.nav-back.show{display:grid}
.progress{bottom:0}
@media(max-width:600px){
  .header-inner{padding:0 20px;height:64px}
  .brand-logo img{height:78px}
  .nav-back{margin-top:12px}
  .progress{bottom:0}
}

/* odsazení stage pod pevnou hlavičkou */
.stage{padding-top:80px}
@media(max-width:600px){.stage{padding-top:64px}}

/* ── Mobil: skrýt klávesnicový hint, zmenšit placeholder ───── */
@media (max-width: 768px) {
  .enter-hint { display: none !important; }
  input.t, textarea.t { font-size: 1rem; }
  input.t::placeholder, textarea.t::placeholder { font-size: 1rem; }
}
/* header back btn v headeru nechceme – jen inline v akci */
header .nav-back { display: none !important; }

/* ── Start screen – rozložení textu ────────────────────────── */
.start-eyebrow{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand);margin-bottom:14px}
.start-h1{font-family:var(--display);font-weight:700;letter-spacing:-.025em;line-height:1.1;
  font-size:clamp(1.7rem,4vw,2.5rem);color:var(--ink);margin-bottom:16px}
.start-sub{font-size:1rem;color:var(--muted);max-width:420px;line-height:1.65;
  margin-left:auto;margin-right:auto;margin-bottom:32px}