:root{
  --ink:#1b2a41;
  --paper:#fbfaf7;
  --field:#f1efe9;
  --line:#d8d4c8;
  --stamp:#b3312d;
  --muted:#6b7280;
  --doc-serif:"Zilla Slab", Georgia, serif;
  --ui:"Inter", system-ui, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--ui);background:var(--paper);color:var(--ink);line-height:1.55}
a{color:inherit}

/* ---------- hlavička ---------- */
header{border-bottom:2px solid var(--ink);background:var(--paper);position:sticky;top:0;z-index:20}
.head-in{max-width:1180px;margin:0 auto;padding:14px 20px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.logo{font-family:var(--doc-serif);font-weight:700;font-size:1.45rem;letter-spacing:.01em;text-decoration:none}
.logo .dot{color:var(--stamp)}
.tagline{font-size:.82rem;color:var(--muted)}

/* ---------- intro ---------- */
.intro{max-width:1180px;margin:0 auto;padding:34px 20px 8px}
.intro h1{font-family:var(--doc-serif);font-weight:700;font-size:clamp(1.55rem,4vw,2.3rem);max-width:30ch}
.intro p{max-width:64ch;color:var(--muted);margin-top:8px;font-size:.95rem}

/* ---------- výběr dokumentu (odkazy) ---------- */
.picker{max-width:1180px;margin:18px auto 0;padding:0 20px;display:flex;gap:8px;flex-wrap:wrap}
.picker a{
  font-size:.85rem;font-weight:500;text-decoration:none;
  border:1.5px solid var(--ink);color:var(--ink);
  padding:8px 15px;border-radius:999px;transition:background .15s,color .15s;
}
.picker a:hover{background:var(--field)}
.picker a.active{background:var(--ink);color:var(--paper)}
.picker a:focus-visible{outline:3px solid var(--stamp);outline-offset:2px}

/* ---------- karty na homepage ---------- */
.cards{max-width:1180px;margin:26px auto 10px;padding:0 20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.card{
  display:block;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:18px;transition:box-shadow .15s,transform .15s;
}
.card:hover{box-shadow:0 8px 22px -12px rgba(27,42,65,.35);transform:translateY(-2px)}
.card:focus-visible{outline:3px solid var(--stamp);outline-offset:2px}
.card h2{font-family:var(--doc-serif);font-size:1.08rem;font-weight:600;margin-bottom:5px}
.card p{font-size:.83rem;color:var(--muted)}
.card .go{display:inline-block;margin-top:10px;font-size:.8rem;font-weight:600;color:var(--stamp)}

/* ---------- pracovní plocha ---------- */
.work{max-width:1180px;margin:26px auto 60px;padding:0 20px;display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:28px;align-items:start}
@media (max-width:900px){.work{grid-template-columns:1fr}}

.panel h2{font-family:var(--doc-serif);font-size:1.15rem;font-weight:600;margin-bottom:4px}
.panel .hint{font-size:.8rem;color:var(--muted);margin-bottom:16px}
.grp{margin-bottom:18px}
.grp-label{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--stamp);margin-bottom:8px;border-bottom:1px solid var(--line);padding-bottom:4px}
.fld{margin-bottom:10px}
.fld label{display:block;font-size:.8rem;font-weight:500;margin-bottom:3px}
.fld input,.fld textarea{
  width:100%;font-family:var(--ui);font-size:.92rem;color:var(--ink);
  background:var(--field);border:1px solid var(--line);border-radius:6px;padding:9px 11px;
}
.fld textarea{min-height:76px;resize:vertical}
.fld input:focus,.fld textarea:focus{outline:2px solid var(--ink);outline-offset:1px;background:#fff}

.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.btn{font-family:var(--ui);font-size:.9rem;font-weight:600;padding:11px 20px;border-radius:8px;cursor:pointer;border:1.5px solid var(--ink)}
.btn:focus-visible{outline:3px solid var(--stamp);outline-offset:2px}
.btn-primary{background:var(--stamp);border-color:var(--stamp);color:#fff}
.btn-primary:hover{background:#992a26}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--field)}
.copied{font-size:.82rem;color:var(--stamp);align-self:center;font-weight:500;opacity:0;transition:opacity .2s}
.copied.show{opacity:1}

/* ---------- náhled jako list papíru ---------- */
.sheet-wrap{position:relative}
.sheet{
  background:#fff;border:1px solid var(--line);border-radius:2px;
  box-shadow:0 1px 2px rgba(27,42,65,.08),0 14px 34px -18px rgba(27,42,65,.35);
  padding:clamp(26px,5vw,58px);min-height:560px;position:relative;overflow:hidden;
}
.sheet::after{
  content:"VZOROVNÍK";
  position:absolute;top:26px;right:-34px;transform:rotate(24deg);
  font-size:.6rem;font-weight:600;letter-spacing:.22em;
  color:var(--stamp);border:1.5px solid var(--stamp);border-radius:4px;
  padding:4px 40px;opacity:.5;
}
.doc{font-family:var(--doc-serif);font-size:.98rem;color:#111;line-height:1.7}
.doc h3{font-size:1.3rem;font-weight:700;text-align:center;letter-spacing:.04em;margin-bottom:26px;text-transform:uppercase}
.doc h4{font-size:1rem;font-weight:600;margin:18px 0 8px}
.doc p{margin-bottom:14px}
.doc .parties{margin-bottom:18px}
.doc .party{margin-bottom:10px}
.doc .party b{font-weight:600}
.doc table{width:100%;border-collapse:collapse;margin-bottom:16px;font-size:.92rem}
.doc td{border:1px solid #bbb;padding:6px 9px}
.doc td:first-child{width:40%;font-weight:600}
.doc .place-date{margin-top:34px}
.doc .sig-row{display:flex;justify-content:space-between;gap:30px;margin-top:60px;flex-wrap:wrap}
.doc .sig{width:220px;max-width:100%;text-align:center;font-size:.85rem}
.doc .sig .line{border-top:1px solid #111;padding-top:5px}
.blank{background:#fdf3d7;border-radius:2px;padding:0 3px}

/* ---------- SEO texty ---------- */
.seo{max-width:760px;margin:0 auto 30px;padding:0 20px}
.seo h2{font-family:var(--doc-serif);font-size:1.3rem;font-weight:700;margin:34px 0 8px}
.seo p{font-size:.92rem;color:#3c4657;margin-bottom:10px}
.seo ul{margin:0 0 10px 22px;font-size:.92rem;color:#3c4657}
.seo li{margin-bottom:4px}
.faq{max-width:760px;margin:0 auto 70px;padding:0 20px}
.faq h2{font-family:var(--doc-serif);font-size:1.3rem;font-weight:700;margin:24px 0 12px}
.faq details{border:1px solid var(--line);border-radius:8px;background:#fff;margin-bottom:8px;padding:12px 16px}
.faq summary{font-weight:600;font-size:.92rem;cursor:pointer}
.faq details p{font-size:.9rem;color:#3c4657;margin-top:8px}

footer{border-top:2px solid var(--ink);padding:26px 20px;font-size:.78rem;color:var(--muted)}
.foot-in{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between}
.foot-in nav{display:flex;flex-wrap:wrap;gap:6px 14px}
.foot-in a{color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .card,.card:hover{transition:none;transform:none}
}

/* ---------- tisk: jen dokument ---------- */
@media print{
  header,.intro,.picker,.cards,.panel,.seo,.faq,footer{display:none !important}
  body{background:#fff}
  .work{display:block;margin:0;padding:0;max-width:none}
  .sheet-wrap{margin:0}
  .sheet{border:none;box-shadow:none;border-radius:0;padding:0;min-height:0;overflow:visible}
  .sheet::after{display:none}
  .blank{background:transparent}
  .doc{font-size:11pt;line-height:1.6}
  .doc table,.doc .sig-row,.doc .parties{break-inside:avoid;page-break-inside:avoid}
  .doc h3,.doc h4{break-after:avoid;page-break-after:avoid}
}