:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", sans-serif;
  background: #000;
  color: #f5f5f7;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; background: #000; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #0a84ff; outline-offset: 3px; }

.page {
  width: min(100%, 520px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom));
  background: #000;
}

h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 10px; font-size: clamp(2.15rem, 9vw, 2.8rem); line-height: 1.1; letter-spacing: -.055em; }
h2 { margin: 0 0 12px; font-size: clamp(1.8rem, 8vw, 2.2rem); line-height: 1.14; letter-spacing: -.045em; }
.muted { color: #aeaeb2; line-height: 1.52; }
.small { font-size: .88rem; line-height: 1.5; }
.eyebrow, .step { margin: 0; color: #8e8e93; font-size: .82rem; font-weight: 750; letter-spacing: .025em; }

.topbar {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  min-height: 56px;
  margin: 0 -4px 30px;
  text-align: center;
}
.topbar strong { font-size: 1rem; letter-spacing: -.025em; }
.topbar-side { display: block; width: 48px; height: 48px; }
.icon-button {
  width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0 0 2px;
  border: 1px solid #3a3a3c;
  border-radius: 50%;
  background: #1c1c1e;
  color: #f5f5f7;
  font-size: 1.65rem;
  font-weight: 400;
  line-height: 1;
}

.login-page { display: grid; align-content: center; gap: 0; padding-bottom: 12vh; }
.brand-mark { margin-bottom: 46px; color: #f5f5f7; font-size: .95rem; font-weight: 800; letter-spacing: -.03em; }
.login-copy { margin-bottom: 28px; }
.login-copy .muted { max-width: 260px; margin-bottom: 0; }
.stack { display: grid; gap: 16px; margin-top: 0; }
label { display: grid; gap: 9px; color: #f5f5f7; font-size: .98rem; font-weight: 760; }
input, select, textarea {
  width: 100%;
  min-height: 56px;
  padding: 14px 16px;
  border: 1px solid #3a3a3c;
  border-radius: 16px;
  appearance: none;
  background: #1c1c1e;
  color: #f5f5f7;
  font-size: 1rem;
}
select { appearance: auto; }
textarea { min-height: 142px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #8e8e93; }

button, .buttonlike {
  display: inline-grid;
  place-items: center;
  min-height: 56px;
  padding: 13px 18px;
  border: 1px solid transparent;
  border-radius: 18px;
  background: #1c1c1e;
  color: #f5f5f7;
  font-weight: 760;
  line-height: 1.2;
  text-align: center;
}
button:disabled { opacity: .35; cursor: not-allowed; }
.primary { background: #f5f5f7; color: #151515; }
.secondary { border-color: #3a3a3c; background: #1c1c1e; color: #f5f5f7; }
.plain { min-height: 40px; padding: 6px; border-color: transparent; background: transparent; color: #aeaeb2; }

.message { margin: 0 0 18px; padding: 14px 16px; border-radius: 17px; line-height: 1.45; }
.error { background: #3a1618; color: #ffb4ab; }
.notice { background: #173524; color: #bbf7c9; }

.home-intro { margin: 46px 0 38px; }
.home-intro h1 { margin: 5px 0 9px; }
.home-intro .muted { margin-bottom: 0; }
.home-actions { display: grid; gap: 12px; }
.large { min-height: 78px; border-radius: 24px; font-size: 1.12rem; }
.logout { display: grid; margin: 35px auto 0; }

.outbox-status { display: grid; gap: 8px; margin-top: 20px; padding: 18px; border: 1px solid #4b3921; border-radius: 22px; background: #211b12; }
.outbox-status strong { color: #ffd8a8; }
.outbox-status p { margin: 0; }
.outbox-status button { justify-self: start; min-height: 42px; padding: 9px 14px; border-radius: 14px; }

.screen-intro { margin: 0 0 26px; }
.screen-intro h1 { margin: 7px 0 0; font-size: 2rem; }
.history-list { overflow: hidden; border: 1px solid #3a3a3c; border-radius: 23px; background: #1c1c1e; }
.history-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 12px;
  width: 100%;
  min-height: 96px;
  padding: 17px;
  border: 0;
  border-bottom: 1px solid #3a3a3c;
  border-radius: 0;
  background: transparent;
  text-align: left;
}
.history-card:last-child { border-bottom: 0; }
.history-card strong { align-self: center; font-size: 1.02rem; }
.history-card span:not(.pill) { color: #aeaeb2; font-size: .82rem; }
.pill { width: fit-content; padding: 4px 8px; border-radius: 999px; background: #2c2c2e; color: #d1d1d6; font-size: .73rem; font-weight: 750; }
.pill.high { background: #442027; color: #ffb4ab; }
.empty { padding: 54px 10px; color: #8e8e93; text-align: center; }

.form-page { display: flex; flex-direction: column; }
.progress-wrap { display: grid; gap: 9px; margin: -10px 0 23px; }
.progress-track { display: block; height: 4px; overflow: hidden; border-radius: 99px; background: #2c2c2e; }
.progress-track i { display: block; height: 100%; border-radius: inherit; background: #f5f5f7; transition: width .2s ease; }
.form-page .stack { flex: 1; align-content: start; }
.step-copy { margin: 4px 0 8px; }
.step-copy .muted { margin-bottom: 0; }
.form-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: auto; padding-top: 28px; }
.form-nav button { min-height: 60px; border-radius: 20px; }
.form-nav > span { display: none; }
.form-nav:has(> span) { grid-template-columns: 1fr; }

.photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.photo { position: relative; aspect-ratio: 1; overflow: hidden; border: 1px solid #3a3a3c; border-radius: 21px; background: #1c1c1e; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo-remove { position: absolute; top: 9px; right: 9px; min-height: 36px; padding: 7px 10px; border: 0; border-radius: 12px; background: rgba(0,0,0,.72); color: #f5f5f7; font-size: .78rem; }
.photo-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.buttonlike { min-height: 58px; border-color: #3a3a3c; border-radius: 18px; background: #1c1c1e; }

.location-readout { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; padding: 18px; border: 1px solid #315a3f; border-radius: 22px; background: #13251a; }
.location-readout strong { align-self: center; }
.location-readout small { grid-column: 2; color: #98e6a9; }
.location-ok { grid-row: span 2; color: #30d158; font-size: 1.25rem; }
.location-editor { display: grid; gap: 12px; margin-top: 4px; }
.location-map { height: 260px; overflow: hidden; border: 1px solid #3a3a3c; border-radius: 22px; }
.coordinate-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.summary { overflow: hidden; border: 1px solid #3a3a3c; border-radius: 22px; background: #1c1c1e; }
.summary p { margin: 0; padding: 15px 17px; border-bottom: 1px solid #3a3a3c; color: #d1d1d6; }
.summary p:last-child { border-bottom: 0; }

@media (min-width: 521px) {
  body { padding: 20px 0; background: #111; }
  .page { min-height: calc(100dvh - 40px); border: 1px solid #2c2c2e; border-radius: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}