:root { --barva: #1f4e79; --text: #1d1d1f; --tlumene: #6b6b70; --okraj: #dcdce0; --pozadi: #f4f5f7; --chyba: #b3261e; --ok: #1b7f3a; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.5 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--text); background: var(--pozadi); }
.obal { max-width: 760px; margin: 0 auto; padding: 0 16px; }
header { background: var(--barva); color: #fff; }
header .obal { display: flex; align-items: center; gap: 12px; min-height: 56px; }
#logo img { max-height: 34px; max-width: 120px; display: block; background: #fff; border-radius: 4px; padding: 2px; }
#nazev { font-weight: 700; font-size: 17px; flex: 1; }
#vpravo { font-size: 13px; opacity: .9; }
#vpravo a { color: #fff; }
main { padding-top: 18px; padding-bottom: 80px; }
h1 { font-size: 22px; margin: 6px 0 14px; }
h2 { font-size: 18px; margin: 22px 0 10px; }
.karta { background: #fff; border-radius: 12px; padding: 18px; margin: 0 0 16px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.tlumene { color: var(--tlumene); }
.male { font-size: 13px; }
label { display: block; font-weight: 600; font-size: 14px; margin: 12px 0 4px; }
input[type=text], input[type=email], input[type=tel], input[type=number], textarea, select {
  width: 100%; font: inherit; padding: 11px 12px; border: 1px solid var(--okraj); border-radius: 8px; background: #fff; }
textarea { min-height: 110px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--barva); outline-offset: -1px; border-color: transparent; }
.radek { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 560px) { .radek { grid-template-columns: 1fr; } }
button, .tlacitko { font: inherit; font-weight: 600; border: 0; border-radius: 10px; padding: 13px 18px; cursor: pointer; background: var(--barva); color: #fff; text-decoration: none; display: inline-block; text-align: center; }
button.vedlejsi, .tlacitko.vedlejsi { background: #fff; color: var(--barva); border: 1px solid var(--barva); }
button.nebezpecne { background: #fff; color: var(--chyba); border: 1px solid var(--chyba); }
button:disabled { opacity: .5; cursor: default; }
button.plne { width: 100%; }
.tlacitka { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.prepinac { display: flex; flex-wrap: wrap; gap: 8px; }
.prepinac button { background: #fff; color: var(--text); border: 1px solid var(--okraj); padding: 9px 14px; }
.prepinac button.vybrano { background: var(--barva); color: #fff; border-color: var(--barva); }
.zaskrt { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin: 14px 0; }
.zaskrt input { width: 22px; height: 22px; margin-top: 1px; flex: none; }
.chyba { color: var(--chyba); font-weight: 600; }
.upozorneni { background: #fff6e0; border: 1px solid #f0d48a; border-radius: 8px; padding: 10px 12px; margin: 10px 0; font-size: 14px; }
.ok { color: var(--ok); font-weight: 600; }
.klient { border-top: 1px solid var(--okraj); padding-top: 8px; margin-top: 14px; }
.klient h3 { margin: 6px 0 0; font-size: 15px; }
.smlouva { background: #fff; border-radius: 12px; padding: 20px 18px; font-size: 15px; line-height: 1.55; }
.smlouva h1 { font-size: 18px; text-align: center; color: var(--barva); margin: 0; }
.smlouva .sub { text-align: center; margin: 0 0 8px; }
.smlouva .meta { text-align: center; color: var(--tlumene); font-size: 13px; margin: 2px 0; }
.smlouva h2 { font-size: 16px; color: var(--barva); margin: 20px 0 6px; }
.smlouva h3 { font-size: 15px; margin: 14px 0 4px; }
.smlouva p { margin: 0 0 8px; white-space: pre-line; }
.smlouva ul { margin: 0 0 8px; padding-left: 20px; }
.smlouva .novastrana { border-top: 1px dashed var(--okraj); margin: 22px 0 12px; }
.smlouva .podpisy { border: 1px dashed var(--okraj); border-radius: 8px; padding: 10px; color: var(--tlumene); font-size: 14px; margin: 10px 0; }
.kroky { display: flex; gap: 6px; margin: 0 0 14px; font-size: 13px; }
.kroky span { flex: 1; text-align: center; padding: 6px 4px; border-radius: 8px; background: #e7e8ec; color: var(--tlumene); }
.kroky span.aktivni { background: var(--barva); color: #fff; font-weight: 600; }
.kroky span.hotovo { background: #d6eedd; color: var(--ok); }
.kod { font-size: 26px; letter-spacing: 8px; text-align: center; font-variant-numeric: tabular-nums; }
.platno { width: 100%; height: 190px; border: 1px solid var(--okraj); border-radius: 10px; background: #fff; touch-action: none; display: block; }
.pisma { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.pisma button { background: #fff; color: #102a6b; border: 1px solid var(--okraj); font-weight: 400; font-size: 26px; padding: 8px 6px; min-height: 64px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pisma button.vybrano { border: 2px solid var(--barva); background: #f3f6fb; }
.lepivy { position: sticky; bottom: 0; background: linear-gradient(transparent, var(--pozadi) 30%); padding: 18px 0 12px; }
table.seznam { width: 100%; border-collapse: collapse; font-size: 14px; }
table.seznam td, table.seznam th { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--okraj); vertical-align: top; }
table.seznam tr.klik { cursor: pointer; }
table.seznam tr.klik:hover { background: #f7f8fa; }
.stitek { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 99px; background: #e7e8ec; white-space: nowrap; }
.stitek.uzavreno { background: #d6eedd; color: var(--ok); }
.stitek.odeslano, .stitek.podepsano_castecne { background: #fff1c9; color: #7a5600; }
.stitek.zruseno, .stitek.vyprselo { background: #f6d9d7; color: var(--chyba); }
.hash { font-family: ui-monospace, Menlo, monospace; font-size: 11px; word-break: break-all; color: var(--tlumene); }
#toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: #222; color: #fff; padding: 10px 16px; border-radius: 10px; max-width: 92vw; z-index: 9; font-size: 14px; }
.soubory { font-size: 14px; color: var(--tlumene); margin-top: 6px; }
.zkouska { background: #7a1fa2; color: #fff; text-align: center; font-size: 13px; padding: 4px; }
.navrhy { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.navrhy button { background: #fff; color: var(--text); border: 1px solid var(--okraj); font-weight: 400; text-align: left; padding: 8px 12px; }
.navrhy button:hover { background: #f3f6fb; }