:root { --brand:#206a5d; --muted:#777; --bg:#f9f9f9; }
* { box-sizing: border-box; }
body { margin:0; font-family: Inter, system-ui, Arial, sans-serif; background: var(--bg); color:#333; }
.wrap { max-width: 720px; margin: 48px auto; padding: 0 20px; }
h1 { text-align:center; color: var(--brand); margin: 0 0 24px; }
form { background:#fff; padding:24px; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.08); }
.field { margin-bottom:16px; }
label { display:block; font-weight:600; margin-bottom:6px; }
input, textarea {
  width:100%; border:1px solid #ccc; border-radius:8px; padding:12px; font-size:16px; outline:none;
}
input:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(32,106,93,.12); }
button {
  background: var(--brand); color:#fff; padding:12px 20px; border:0; border-radius:10px;
  font-size:16px; cursor:pointer; transition: filter .2s ease;
}
button:disabled { filter: grayscale(0.5) brightness(0.9); cursor: not-allowed; }
.err { display:block; color:#b00020; min-height: 1em; margin-top:6px; font-size:.9rem; }
.status { text-align:center; margin-top:16px; color: var(--brand); font-weight:600; min-height: 1.4em; }
.hp { position:absolute; left:-5000px; top:auto; width:1px; height:1px; overflow:hidden; }