/* fill.css — public form page */
body { background: radial-gradient(900px 500px at 85% -10%, rgba(113,55,220,.22), transparent 60%), radial-gradient(700px 420px at -10% 15%, rgba(21,94,239,.18), transparent 55%), var(--bg); min-height: 100dvh; }
.wrap { max-width: 720px; margin: 0 auto; padding: 22px 16px calc(40px + env(safe-area-inset-bottom)); position: relative; z-index: 1; }
.loading { display: grid; place-items: center; min-height: 60vh; }
.fhead { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.fhead .logo { width: 44px; height: 44px; display: grid; place-items: center; flex: none; filter: drop-shadow(0 0 14px rgba(113,55,220,.55)); }
.fhead .logo img { width: 44px; height: 44px; }
.fhead .brand { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink3); font-weight: 700; }
.fhead .share { margin-left: auto; }
.fcard { padding: 22px 20px; }
@media (min-width: 600px) { .fcard { padding: 28px 30px; } }
.fcard h1 { font-size: 26px; font-weight: 800; line-height: 1.15; margin-bottom: 6px; }
.fcard .desc { color: var(--ink2); margin: 0 0 18px; white-space: pre-line; }
.stepbar { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: 13px; color: var(--ink3); font-weight: 700; }
.stepbar .progress { flex: 1; }
.fnav { display: flex; gap: 10px; margin-top: 26px; align-items: center; }
.fnav .primary { min-width: 140px; height: 48px; font-size: 16px; }
.fnav .back { height: 48px; }
.formerr { color: var(--red); font-weight: 600; margin-top: 12px; text-align: center; }
.done { text-align: center; padding: 30px 10px; animation: pop .25s ease; }
.done .tick { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 18px; background: var(--neon); display: grid; place-items: center; font-size: 42px; color: #fff; box-shadow: 0 0 40px rgba(113,55,220,.6); }
.done h1 { font-size: 26px; margin-bottom: 8px; }
.done .ref { display: inline-block; margin: 10px 0 18px; font-family: var(--mono); font-size: 18px; letter-spacing: .08em; background: var(--panel2); border: 1px solid var(--line); padding: 8px 14px; border-radius: 10px; }
.closed { text-align: center; padding: 40px 10px; }
.closed h1 { font-size: 22px; margin-bottom: 8px; }
.pinbox { max-width: 320px; margin: 0 auto; text-align: center; }
.pinbox input { text-align: center; font-size: 24px; letter-spacing: .3em; font-family: var(--mono); }
.namebox { margin-bottom: 18px; }
.foot { text-align: center; color: var(--ink3); font-size: 12px; margin-top: 22px; }
.foot a { color: var(--ink3); }
.offline { position: fixed; top: 0; left: 0; right: 0; background: var(--warn-bg); color: var(--warn-c); text-align: center; font-size: 13px; font-weight: 700; padding: 6px; z-index: 100; }
.qrmodal img, .qrmodal svg { width: 240px; height: 240px; margin: 10px auto; display: block; border-radius: 14px; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }