:root {
  --navy: #073b58;
  --navy-dark: #042b43;
  --turquoise: #12bdb7;
  --banana: #ffd84d;
  --cream: #fffdf2;
  --muted: #607680;
  --line: rgba(7,59,88,.13);
  --shadow: 0 14px 30px rgba(4,43,67,.10);
}
* { box-sizing: border-box; }
html { min-height: 100%; background: #f3fbf8; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--navy-dark);
  background: radial-gradient(circle at 10% 0%, rgba(255,216,77,.28), transparent 27%), linear-gradient(180deg,#eafbf7,#fffdf5 45%,#f4fbff);
}
button,input,select,textarea { font: inherit; }
.contribution-shell {
  width: min(100%, 700px);
  margin: 0 auto;
  padding: max(8px, env(safe-area-inset-top)) 10px max(20px, env(safe-area-inset-bottom));
}
.contribution-topbar {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  min-height: 54px;
}
.contribution-logo { justify-self: center; width: 126px; max-height: 44px; object-fit: contain; }
.back-button {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 14px;
  color: var(--navy);
  text-decoration: none;
  background: rgba(255,255,255,.94);
  box-shadow: 0 6px 16px rgba(7,59,88,.10);
  font-size: 21px;
  font-weight: 900;
}
.contribution-topbar > span { justify-self: end; font-size: 24px; }
.intro-card,.contribution-card,.thanks-card {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255,255,255,.96);
  box-shadow: var(--shadow);
}
.intro-card { padding: 16px 17px 15px; }
.contribution-card { padding: 15px; }
.thanks-card { padding: 20px; }
.eyebrow { color: #039c96; font-size: 11px; font-weight: 950; letter-spacing: .07em; }
.intro-card h1 { margin: 4px 0 7px; font-size: clamp(27px,6.6vw,34px); line-height: 1.03; letter-spacing: -.6px; }
.intro-card p { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.38; }
.intro-card strong { color: var(--navy); }
.moderation-note {
  margin-top: 10px !important;
  padding: 9px 11px;
  border-radius: 13px;
  background: #fff7d2;
  color: #6f5a00 !important;
  font-size: 12.5px !important;
}
.choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 13px; }
.choice-pill { cursor: pointer; }
.choice-pill input { position: absolute; opacity: 0; pointer-events: none; }
.choice-pill span {
  display: grid;
  min-height: 43px;
  place-items: center;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--navy);
  background: #f4faf9;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  line-height: 1.15;
}
.choice-pill.is-active span { border-color: rgba(18,189,183,.60); background: #ddf8f4; box-shadow: inset 0 0 0 1px rgba(18,189,183,.18); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field { display: grid; gap: 5px; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field > span { font-size: 11.5px; font-weight: 900; color: var(--navy); }
.field small { color: var(--muted); font-weight: 700; }
.field input,.field select,.field textarea,.gps-values input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid rgba(7,59,88,.17);
  border-radius: 13px;
  outline: none;
  color: var(--navy-dark);
  background: #fff;
  font-size: 14px;
}
.field textarea { resize: vertical; min-height: 92px; line-height: 1.35; }
.field input:focus,.field select:focus,.field textarea:focus,.gps-values input:focus { border-color: var(--turquoise); box-shadow: 0 0 0 3px rgba(18,189,183,.11); }
.gps-card,.photo-card { margin-top: 13px; padding: 12px; border-radius: 17px; background: #f1faf8; border: 1px solid rgba(18,189,183,.18); }
.gps-card h2,.photo-card h2 { margin: 0; font-size: 15.5px; }
.gps-card p,.photo-card p { margin: 4px 0 9px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.gps-button {
  min-height: 41px;
  padding: 0 13px;
  border: 0;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg,#12bdb7,#078bd9);
  box-shadow: 0 5px 12px rgba(7,139,217,.18);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}
.gps-button:disabled { opacity: .55; cursor: wait; }
.contribution-map { height: 205px; margin-top: 9px; overflow: hidden; border-radius: 15px; border: 1px solid rgba(7,59,88,.10); background: #d9eee9; }
.gps-values { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 8px; }
.gps-values label { display: grid; gap: 3px; color: var(--muted); font-size: 10.5px; font-weight: 800; }
.gps-values input { min-height: 38px; padding-block: 6px; font-size: 12px; }
.photo-card input[type="file"] { width: 100%; max-width: 100%; font-size: 12px; }
.photo-card input[type="file"]::file-selector-button { margin-right: 8px; padding: 8px 10px; border: 0; border-radius: 11px; color: var(--navy); background: #ffe36a; font-weight: 900; cursor: pointer; }
.photo-preview-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 8px; }
.photo-preview-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 11px; border: 1px solid rgba(7,59,88,.1); }
.form-message { min-height: 18px; margin: 10px 3px 6px; color: #b13b31; font-size: 12px; font-weight: 800; }
.form-message.is-success { color: #16814f; }
.send-button {
  width: 100%;
  min-height: 49px;
  border: 0;
  border-radius: 15px;
  color: var(--navy-dark);
  background: linear-gradient(135deg,#ffe767,#ffb52b);
  box-shadow: 0 9px 18px rgba(255,181,43,.22);
  font-size: 14px;
  font-weight: 950;
  cursor: pointer;
}
.send-button:disabled { opacity: .55; cursor: wait; }
.honeypot { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.thanks-card { text-align: center; }
.thanks-card > span { font-size: 42px; }
.thanks-card h2 { margin: 6px 0 3px; font-size: 26px; }
.thanks-card p { color: var(--muted); }
.thanks-card a { display: inline-grid; min-height: 44px; margin-top: 7px; padding: 0 17px; place-items: center; border-radius: 13px; color: #fff; text-decoration: none; background: var(--turquoise); font-weight: 900; }

@media (max-width: 560px) {
  .contribution-shell { padding-inline: 7px; }
  .intro-card,.contribution-card,.thanks-card { border-radius: 19px; }
  .intro-card { padding: 13px 14px 12px; }
  .contribution-card { padding: 12px; }
  .intro-card h1 { font-size: 27px; }
  .intro-card p { font-size: 12.6px; line-height: 1.34; }
  .moderation-note { padding: 8px 9px; font-size: 11.5px !important; }
  .choice-row { grid-template-columns: 1fr 1fr; margin-bottom: 11px; }
  .choice-pill span { min-height: 40px; padding-inline: 5px; font-size: 10.8px; }
  .form-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .field--wide { grid-column: 1 / -1; }
  .field:not(.field--mobile-half):not(.field--wide) { grid-column: 1 / -1; }
  .field > span { font-size: 10.7px; }
  .field input,.field select,.field textarea { min-height: 42px; padding: 8px 9px; font-size: 13px; }
  .field textarea { min-height: 82px; }
  .gps-card,.photo-card { margin-top: 11px; padding: 10px; border-radius: 15px; }
  .gps-card h2,.photo-card h2 { font-size: 14.5px; }
  .gps-card p,.photo-card p { margin-bottom: 7px; font-size: 11px; }
  .gps-button { width: 100%; min-height: 39px; }
  .contribution-map { height: 178px; margin-top: 8px; }
  .gps-values { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .photo-card input[type="file"] { font-size: 11px; }
  .form-message { margin-top: 8px; }
  .send-button { min-height: 47px; font-size: 13px; }
}
@media (max-width: 365px) {
  .contribution-shell { padding-inline: 5px; }
  .contribution-logo { width: 112px; }
  .choice-pill span { font-size: 10px; }
  .form-grid { grid-template-columns: 1fr; }
  .field,.field--mobile-half,.field--wide { grid-column: 1 / -1; }
  .contribution-map { height: 165px; }
}