:root {
  --violet: #6C63D9;
  --violet-2: #7A4FA8;
  --label: #9B7FE0;
  --ink: #14121f;
  --muted: #5d5a70;
  --danger: #D13438;
  --ok: #1B8A4B;
  --shadow: 0 4px 18px rgba(80, 60, 160, .12);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(160deg, #6F7BEA 0%, #7A56B5 100%);
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
}

.app {
  max-width: 460px;
  min-height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top, 0);
}

.sheet {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 10px 8px 0;
  background: linear-gradient(180deg, #E7E2FB 0%, #F5F3FD 55%, #fff 100%);
  border-radius: 36px 36px 0 0;
  overflow: hidden;
}

.hero { padding: 24px 16px 0; text-align: center; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: #4b3fb8;
}

h1 {
  margin: 12px 0 0;
  font-size: clamp(28px, 8.2vw, 36px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.01em;
}

h1 span {
  background: linear-gradient(90deg, #6C7BE8, #8A4FB0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-img { display: block; width: 100%; max-width: 400px; height: auto; margin: 6px auto 0; }

.chips {
  display: flex;
  gap: 10px;
  padding: 6px 20px 20px;
  overflow-x: auto;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }

.chip {
  flex: none;
  padding: 12px 20px;
  background: #fff;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(80, 60, 160, .08);
}

.card {
  flex: 1;
  background: #fff;
  border-radius: 36px 36px 0 0;
  padding: 30px 20px calc(28px + env(safe-area-inset-bottom, 0));
  box-shadow: 0 -6px 24px rgba(80, 60, 160, .08);
}

h2 { margin: 0 0 22px; text-align: center; font-size: 26px; font-weight: 700; }

.field { margin-bottom: 12px; }

.pill {
  display: flex;
  align-items: center;
  min-height: 66px;
  padding: 6px 18px 6px 7px;
  background: #fff;
  border: 2px solid transparent;
  border-radius: 999px;
  box-shadow: var(--shadow);
  transition: border-color .15s;
}
.pill:focus-within { border-color: #8E86E8; }
.field.invalid .pill { border-color: var(--danger); }
.field.valid .pill { border-color: #7CCB9B; }

.ico {
  flex: none;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #4a4560;
  box-shadow: 0 2px 10px rgba(80, 60, 160, .14);
}

.body { flex: 1; min-width: 0; margin-left: 14px; }

label { display: block; font-size: 13px; font-weight: 500; color: var(--label); }

.body input {
  width: 100%;
  padding: 2px 0 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 17px;
  color: var(--ink);
}

.eye {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #5d5a70;
  cursor: pointer;
}
.eye:focus-visible { outline: 2px solid var(--violet); }
.eye .eye-off { display: none; }
.eye[aria-pressed="true"] .eye-on { display: none; }
.eye[aria-pressed="true"] .eye-off { display: block; }

.msg { min-height: 0; margin: 6px 0 0 22px; font-size: 13px; line-height: 1.35; color: var(--danger); }
.msg:empty { display: none; }
.msg.hint { color: var(--muted); }
.msg.ok { color: var(--ok); }
.field.invalid .msg.hint { color: var(--danger); }

.check {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 0 2px;
  font-size: 14px;
  font-weight: 500;
  color: #46435a;
  cursor: pointer;
}
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check .box {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 2px solid #C9C4EE;
  border-radius: 8px;
  background: #fff;
  transition: background .15s, border-color .15s;
}
.check .box svg { opacity: 0; transition: opacity .1s; }
.check input:checked + .box { background: #5F73E6; border-color: #5F73E6; }
.check input:checked + .box svg { opacity: 1; }
.check input:focus-visible + .box { outline: 2px solid var(--violet); outline-offset: 2px; }
.field.invalid .check .box { border-color: var(--danger); }
.check a, .alt a { color: #5F73E6; font-weight: 500; text-decoration: none; }
.check a:hover, .alt a:hover { text-decoration: underline; }

.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert {
  display: none;
  margin-bottom: 14px;
  padding: 12px 16px;
  border-radius: 16px;
  background: #FDECEC;
  color: #9C1C1F;
  font-size: 14px;
}
.alert.show { display: block; }

.btn {
  position: relative;
  width: 100%;
  height: 62px;
  margin-top: 16px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #6C7BE8, var(--violet-2));
  color: #fff;
  font: inherit;
  font-size: 19px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(108, 99, 217, .35);
  transition: transform .1s, opacity .15s;
}
.btn:active { transform: scale(.985); }
.btn:focus-visible { outline: 3px solid #BDB6F5; outline-offset: 3px; }
.btn:disabled { opacity: .75; cursor: progress; }

.spinner {
  display: none;
  width: 22px;
  height: 22px;
  margin: 0 auto;
  border: 3px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.btn.loading .btn-text { display: none; }
.btn.loading .spinner { display: block; }

.alt { margin: 18px 0 0; text-align: center; font-size: 15px; color: var(--muted); }

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation-duration: 1.5s !important; }
}

@media (min-width: 520px) {
  body { padding: 24px 0; }
  .app { min-height: 0; }
  .sheet { border-radius: 36px; }
  .card { border-radius: 36px 36px 36px 36px; margin: 0 10px 10px; }
}

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.85) translateY(6px)}to{opacity:1;transform:none}}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes slideUp{from{opacity:0;transform:translateY(70px)}to{opacity:1;transform:none}}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.brand{animation:rise .6s both}
h1{animation:rise .6s .08s both}
.hero-img{animation:popIn .8s .15s cubic-bezier(.2,1.1,.4,1) both,float 6s 1s ease-in-out infinite}
.chip{animation:popIn .5s both}.chip:nth-child(1){animation-delay:.25s}.chip:nth-child(2){animation-delay:.31s}.chip:nth-child(3){animation-delay:.37s}.chip:nth-child(4){animation-delay:.43s}
.card{animation:slideUp .75s .1s cubic-bezier(.22,1,.36,1) both}
.card h2{animation:rise .5s .45s both}
.field{animation:rise .5s both;animation-delay:.5s}.field:nth-child(3){animation-delay:.56s}.field:nth-child(4){animation-delay:.62s}.field:nth-child(5){animation-delay:.68s}
.btn{animation:rise .5s .74s both}.alt{animation:rise .5s .8s both}
.field.invalid .pill{animation:shake .4s}
.alert.show{animation:rise .3s both}
.btn{transition:transform .15s ease,opacity .15s}
.pill{transition:border-color .2s,box-shadow .2s,transform .2s}
.pill:focus-within{box-shadow:0 8px 26px rgba(108,99,217,.22);transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}}