:root {
  --glass: rgba(64, 64, 64, 0.15); --glass-edge: rgba(255, 255, 255, 0.3); --field: rgba(255, 255, 255, 0.12);
  --ink: #fff; --ink-soft: rgba(255, 255, 255, 0.82); --shade: rgba(0, 0, 0, 0.15);
  --btn: #7c3aed; --btn-hover: #6d28d9; --bad: #ffb4b4; --ok: #86efac;
  --art: radial-gradient(70% 60% at 20% 15%, #5b2bd6 0%, transparent 65%), radial-gradient(60% 60% at 85% 85%, #2a1b7a 0%, transparent 70%), #120b2b;
  color-scheme: dark;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; min-height: 100dvh; display: flex; justify-content: center; align-items: flex-start; color: var(--ink); background: var(--art); background-attachment: fixed; overflow-x: clip; -webkit-tap-highlight-color: transparent; }
.wrap { width: 100%; padding: max(1.5rem, env(safe-area-inset-top)) 1rem max(2rem, env(safe-area-inset-bottom)); display: grid; place-items: start center; }
.card { width: min(100%, 30rem); margin-top: 3vh; padding: 1.9rem 1.7rem 1.6rem; background: var(--glass); border: 3px solid var(--glass-edge); border-radius: 16px; -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px); box-shadow: 0 0 20px 10px var(--shade); animation: in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
h1 { font-size: 2rem; line-height: 1.15; text-align: center; }
.intro { margin: 0.4rem 0 1.5rem; text-align: center; color: var(--ink-soft); font-size: 0.95rem; }
.f { display: grid; gap: 0.35rem; margin-bottom: 1rem; }
.f > span { font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); padding-left: 0.3rem; }
.f > span i { color: var(--bad); font-style: normal; }
input, select, textarea { width: 100%; font: inherit; font-size: max(1rem, 16px); font-weight: 600; color: var(--ink); background: var(--field); border: 0; border-radius: 14px; padding: 0.8rem 1rem; outline: 3px solid transparent; transition: outline-color 0.25s; }
select option { color: #111; }
textarea { resize: vertical; min-height: 7rem; line-height: 1.4; }
input:focus, select:focus, textarea:focus { outline-color: var(--glass-edge); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.count { justify-self: end; font-size: 0.75rem; color: var(--ink-soft); }
.go { width: 100%; min-height: 3rem; margin-top: 0.4rem; font: 700 1.05rem/1 inherit; font-family: inherit; color: #fff; background: var(--btn); border: 0; border-radius: 99px; cursor: pointer; transition: background 0.25s; }
.go:hover { background: var(--btn-hover); }
.go:disabled { opacity: 0.6; cursor: wait; }
.go:focus-visible { outline: 3px solid var(--glass-edge); outline-offset: 3px; }
.msg { min-height: 1.4em; margin: 0.2rem 0 0.4rem; font-size: 0.92rem; font-weight: 600; color: var(--bad); text-align: center; }
.state { text-align: center; padding: 1rem 0 0.5rem; }
.state p { color: var(--ink-soft); margin-top: 0.7rem; }
.state .tick { width: 3.4rem; height: 3.4rem; margin: 0 auto 0.8rem; border-radius: 50%; display: grid; place-items: center; background: var(--btn); }
.state .tick svg { width: 1.7rem; height: 1.7rem; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 380px) { .card { padding: 1.5rem 1.15rem; } h1 { font-size: 1.7rem; } }
@media (prefers-reduced-motion: reduce) { .card { animation: none; } }

.go--link { display: flex; align-items: center; justify-content: center; margin-top: 1.4rem; text-decoration: none; }