:root {
  --pozadi: #f6f2ec;
  --karta: #ffffff;
  --text: #2a231d;
  --tlumeny: #76695d;
  --linka: #e2d9cd;
  --hlavni: #3b2f25;
  --akcent: #9a5b2c;
  --ok: #2f7d4f;
  --ok-bg: #e4f2e9;
  --stredni: #a4690b;
  --stredni-bg: #fbefd6;
  --nizka: #b03a2e;
  --nizka-bg: #f9e2df;
  --r: 12px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--pozadi); color: var(--text);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }

.lista {
  position: sticky; top: 0; z-index: 5; background: var(--hlavni); color: #fff;
  display: flex; align-items: center; gap: 8px;
  padding: calc(env(safe-area-inset-top) + 10px) 12px 10px;
}
.lista h1 { font-size: 18px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista button { background: none; border: 0; color: #fff; padding: 8px 10px; border-radius: 8px; min-height: 44px; }
.lista button:active { background: rgba(255,255,255,.15); }
.lista small { opacity: .75; font-size: 13px; }

main { padding: 12px 12px 110px; max-width: 720px; margin: 0 auto; }
section { margin-bottom: 18px; }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--tlumeny); margin: 0 4px 8px; }

.karta { background: var(--karta); border: 1px solid var(--linka); border-radius: var(--r); padding: 12px; }
.karta + .karta { margin-top: 8px; }

.tl {
  border: 1px solid var(--linka); background: #fff; border-radius: 10px;
  padding: 10px 14px; min-height: 46px; font-weight: 600;
}
.tl:active { transform: translateY(1px); }
.tl.hlavni { background: var(--hlavni); color: #fff; border-color: var(--hlavni); }
.tl.ok { background: var(--ok); color: #fff; border-color: var(--ok); }
.tl.siroke { width: 100%; }
.tl:disabled { opacity: .5; }
.rada { display: flex; gap: 8px; flex-wrap: wrap; }
.rada > .tl { flex: 1; }

/* přihlášení */
.login { max-width: 360px; margin: 12vh auto 0; padding: 0 16px; }
.login h1 { font-size: 24px; margin-bottom: 18px; }
label { display: block; font-size: 14px; color: var(--tlumeny); margin: 10px 0 4px; }
input[type=text], input[type=password], input[type=number], select, textarea {
  width: 100%; padding: 11px 12px; border: 1px solid var(--linka); border-radius: 10px; background: #fff;
  min-height: 46px;
}
textarea { min-height: 84px; resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--akcent); outline-offset: 1px; }

/* seznam */
.polozka { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; }
.polozka img, .polozka .bezfotky {
  width: 62px; height: 62px; border-radius: 8px; object-fit: cover; background: var(--linka); flex: none;
}
.polozka .t { flex: 1; min-width: 0; }
.polozka .n { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.polozka .m { font-size: 13px; color: var(--tlumeny); }
.stitek { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 99px; }
.stitek.vysoka, .stitek.hotovo { background: var(--ok-bg); color: var(--ok); }
.stitek.stredni, .stitek.rozprac { background: var(--stredni-bg); color: var(--stredni); }
.stitek.nizka { background: var(--nizka-bg); color: var(--nizka); }
.prazdno { text-align: center; color: var(--tlumeny); padding: 40px 10px; }

/* fotky */
.fotky { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.fotky figure { margin: 0; flex: none; width: 96px; }
.fotky img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; display: block; background: var(--linka); }
.fotky figcaption { font-size: 11px; color: var(--tlumeny); text-align: center; margin-top: 2px; }
.zabery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.zaber {
  position: relative; border: 1px dashed #c9bba9; border-radius: 10px; background: #fff;
  min-height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; text-align: center; padding: 6px;
}
.zaber.ma { border-style: solid; border-color: var(--ok); background: var(--ok-bg); }
.zaber .pocet { font-size: 11px; font-weight: 500; color: var(--tlumeny); }
.zaber input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; }
.galerie { display: block; margin-top: 8px; font-size: 14px; color: var(--akcent); position: relative; text-align: center; padding: 8px; }
.galerie input { position: absolute; inset: 0; opacity: 0; width: 100%; }

/* AI */
.ai-box { border-left: 4px solid var(--akcent); }
.ai-box.chyba { border-left-color: var(--nizka); }
.ai-box ul { margin: 6px 0 0; padding-left: 20px; }
.ai-box li { margin: 3px 0; }
.bezi { display: flex; align-items: center; gap: 10px; }
.tocka { width: 20px; height: 20px; border: 3px solid var(--linka); border-top-color: var(--akcent); border-radius: 50%; animation: t 1s linear infinite; flex: none; }
@keyframes t { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tocka { animation-duration: 4s; } }
.varovani { background: var(--stredni-bg); border-radius: 8px; padding: 8px 10px; margin-top: 8px; font-size: 14px; }

/* pole */
.pole .hlav { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.pole .nazevpole { font-size: 13px; color: var(--tlumeny); flex: 1; }
.pole .hodnota { font-size: 17px; font-weight: 600; white-space: pre-wrap; overflow-wrap: anywhere; }
.pole .hodnota.neni { font-weight: 400; color: var(--tlumeny); font-style: italic; }
.pole details { font-size: 14px; color: var(--tlumeny); margin-top: 6px; }
.pole summary { padding: 4px 0; }
.pole .alt { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.pole .alt button { border: 1px solid var(--linka); background: var(--pozadi); border-radius: 99px; padding: 7px 12px; font-size: 14px; min-height: 38px; }
.pole .akce { display: flex; gap: 8px; margin-top: 10px; }
.pole .akce .tl { flex: 1; padding: 8px 6px; }
.pole.vyrizeno { padding: 10px 12px; background: #fbfaf7; }
.pole.vyrizeno .radek { display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left; background: none; border: 0; padding: 0; }
.pole.vyrizeno .znak { color: var(--ok); font-weight: 700; flex: none; }
.pole.vyrizeno .znak.nevim { color: var(--tlumeny); }
.pole.vyrizeno .h { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pole.vyrizeno .zmenit { font-size: 13px; color: var(--akcent); flex: none; }

.rucni { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.rucni .cele { grid-column: 1 / -1; }
.rucni label { margin: 0 0 3px; }

.pata {
  position: fixed; left: 0; right: 0; bottom: 0; background: rgba(246,242,236,.96);
  border-top: 1px solid var(--linka); padding: 10px 12px calc(env(safe-area-inset-bottom) + 10px);
}
.pata > div { max-width: 720px; margin: 0 auto; }
.pata .info { font-size: 13px; color: var(--tlumeny); text-align: center; margin-bottom: 6px; }

#hlaska {
  position: fixed; left: 12px; right: 12px; bottom: 120px; margin: 0 auto; max-width: 480px;
  background: #2a231d; color: #fff; padding: 12px 14px; border-radius: 10px; text-align: center;
  opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 20;
}
#hlaska.ukaz { opacity: 1; }
#hlaska.chyba { background: var(--nizka); }

.nahled-velky { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 30; display: flex; align-items: center; justify-content: center; }
.nahled-velky img { max-width: 100%; max-height: 100%; }