:root {
  --fon: #f6f7f7;
  --karta: #ffffff;
  --tekst: #1c2424;
  --tikho: #5b6666;
  --akcent: #115e59;
  --akcent-tekst: #ffffff;
  --rama: #e3e7e7;
  --oshibka: #b42318;
  --oshibka-fon: #fdecea;
  --ok: #157f3b;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fon: #111616;
    --karta: #1a2121;
    --tekst: #e8eded;
    --tikho: #9aa6a6;
    --akcent: #2dd4bf;
    --akcent-tekst: #062a27;
    --rama: #2a3434;
    --oshibka: #ff8a80;
    --oshibka-fon: #3a1d1b;
    --ok: #5ee08a;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fon);
  color: var(--tekst);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: env(safe-area-inset-bottom);
}

.shapka {
  display: flex; align-items: center; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  font-weight: 600;
  border-bottom: 1px solid var(--rama);
  background: var(--karta);
}
.shapka img { border-radius: 7px; }

main { max-width: 640px; margin: 0 auto; padding: 16px; }
.ekran { display: flex; flex-direction: column; gap: 14px; }
.ekran[hidden] { display: none; }
h1 { font-size: 22px; margin: 4px 0 0; }
.tikho { color: var(--tikho); margin: 0; }

.knopka {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 18px;
  border: 1px solid var(--rama); border-radius: 12px;
  background: var(--karta); color: var(--tekst);
  font: inherit; font-weight: 600; cursor: pointer;
  user-select: none;
}
.knopka.glavnaya { background: var(--akcent); color: var(--akcent-tekst); border-color: var(--akcent); }
.knopka.bolshaya { min-height: 64px; font-size: 18px; }
.knopka:disabled { opacity: .5; cursor: default; }
.knopka.zapis { background: var(--oshibka); color: #fff; border-color: var(--oshibka); }
.ryad { display: flex; gap: 10px; }
.ryad .knopka { flex: 1; }

.zagruzka .polosa { height: 8px; border-radius: 4px; background: var(--rama); overflow: hidden; }
#polosa-hod { height: 100%; width: 0; background: var(--akcent); transition: width .2s; }

.otkaz {
  margin: 0; padding: 12px 14px; border-radius: 12px;
  background: var(--oshibka-fon); color: var(--oshibka);
}

.shagi { display: flex; gap: 6px; }
.shagi span {
  flex: 1; text-align: center; font-size: 13px; padding: 6px 0;
  border-radius: 8px; background: var(--rama); color: var(--tikho);
}
.shagi span.tekushchiy { background: var(--akcent); color: var(--akcent-tekst); font-weight: 600; }
.shagi span.gotov { color: var(--tekst); }

.holst {
  position: relative; overflow: hidden; border-radius: 12px;
  background: #000; touch-action: none; user-select: none;
}
.holst img { display: block; }
.ramka {
  position: absolute; border: 2px solid #fff;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55);
  cursor: move; touch-action: none;
}
.ramka::before, .ramka::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
/* Сетка третей — помогает поставить горизонт и объект. */
.ramka::before {
  border-left: 1px solid rgba(255,255,255,.35); border-right: 1px solid rgba(255,255,255,.35);
  left: 33.33%; right: 33.33%;
}
.ramka::after {
  border-top: 1px solid rgba(255,255,255,.35); border-bottom: 1px solid rgba(255,255,255,.35);
  top: 33.33%; bottom: 33.33%;
}

.polzunok { display: flex; align-items: center; gap: 12px; color: var(--tikho); }
.polzunok input { flex: 1; accent-color: var(--akcent); height: 32px; }
#godnost.ok { color: var(--ok); }
#godnost.ploho { color: var(--oshibka); }

.pole { display: flex; flex-direction: column; gap: 6px; }
.pole span { font-size: 14px; color: var(--tikho); }
.pole input, .pole textarea {
  font: inherit; color: var(--tekst); background: var(--karta);
  border: 1px solid var(--rama); border-radius: 12px; padding: 12px 14px;
}
.pole input:focus, .pole textarea:focus { outline: 2px solid var(--akcent); outline-offset: -1px; }

.galka {
  width: 72px; height: 72px; border-radius: 50%;
  display: grid; place-items: center; font-size: 40px;
  background: var(--akcent); color: var(--akcent-tekst); margin-top: 24px;
}