/* Ultra-clean mobile UI with animated background and blue gradient CTA */
:root{
  --bg:#0b0b10;
  --card:#121216;
  --border:rgba(255,255,255,.10);
  --text:#ffffff;
  --muted:rgba(255,255,255,.70);
  --radius:16px;
  --shadow:0 8px 24px rgba(0,0,0,.30);
}

*{box-sizing:border-box;-webkit-tap-highlight-color: transparent;}
html,body{height:100%}
body{margin:0;color:var(--text);font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;background:var(--bg);overflow-x:hidden}

/* animated ambient gradient */
.bg-anim{
  position:fixed; inset:-20%; z-index:-1; pointer-events:none; opacity:.6;
  background: radial-gradient(40% 60% at 20% 10%, #6A7BFF33, transparent 60%),
              radial-gradient(50% 70% at 80% 20%, #7AD6FF22, transparent 70%),
              radial-gradient(50% 70% at 50% 90%, #B17DFF22, transparent 70%);
  animation: float 16s ease-in-out infinite alternate;
  filter: blur(40px);
}
@keyframes float {
  0% { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(-2%, 2%, 0) scale(1.05); }
}

.app{max-width:560px;margin:0 auto;padding:14px 14px 22px;display:flex;flex-direction:column;gap:14px}
.app__top{display:flex;align-items:center;justify-content:space-between;padding:6px 0 2px}
.brand{height:26px}
.id{padding:6px 10px;border-radius:999px;font-weight:700;font-size:12px;background:rgba(255,255,255,.06);border:1px solid var(--border)}

.h1{margin:4px 0 0;font-size:clamp(20px,5.5vw,28px);font-weight:800;letter-spacing:-.01em}
.lede{margin:2px 0 0;color:var(--muted);font-size:15px;line-height:1.5}

.form{display:grid;gap:12px;margin-top:6px}
.field{display:grid;gap:6px}
.field span{font-weight:600;font-size:14px}
.field input,.field textarea{width:100%;border-radius:12px;padding:14px 14px;color:#fff;background:var(--card);border:1px solid var(--border);outline:none}
.field textarea{min-height:88px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:#3a86ff33;box-shadow:0 0 0 6px #3a86ff22}

.toggles{display:grid;gap:10px;margin-top:2px}
.check{display:flex;align-items:flex-start;gap:10px}
.check input{margin-top:3px}
.check--consent{margin-top:2px}
.mt-compact{margin-top:2px}

.finder-card{margin-top:6px;padding:14px;border-radius:14px;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow)}
.kv{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px dashed var(--border)}
.kv:last-child{border-bottom:0}
.link-strong{color:#fff;font-weight:700;text-decoration:none}
.link-strong:hover{text-decoration:underline}
.note{margin:12px 0 0;padding:12px;border-left:3px solid #3a86ff;background:#3a86ff12;border-radius:8px}

/* Buttons */
.btn{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;width:100%;padding:12px 16px;border-radius:12px;font-weight:700;border:1px solid var(--border);background:var(--card);color:#fff;box-shadow:var(--shadow);cursor:pointer}
.btn--primary{
  background: linear-gradient(135deg, #6EA1FF 0%, #5B86FF 50%, #4E6BFF 100%);
  color:#fff;
  border-color: rgba(255,255,255,.18);
}
.btn--primary:hover{filter:saturate(110%)}
.btn--primary:active{transform:translateY(1px)}
.btn--ghost{background:transparent}

/* notices & footer */
.notice{margin:6px 0 0;padding:12px;border-radius:12px;font-weight:600;border:1px solid transparent}
.notice--ok{background:rgba(44,187,99,.14);border-color:rgba(44,187,99,.35)}
.notice--error{background:rgba(236,77,61,.14);border-color:rgba(236,77,61,.35)}

.reset{margin-top:12px}
.footer{margin-top:auto;text-align:center;color:var(--muted);font-size:13px}
.footer a{color:var(--muted)}
.footer a:hover{color:#fff}

@media (min-width:560px){
  .app{padding:20px 18px 28px}
  .brand{height:28px}
}