body { min-height: 100vh; min-height: 100dvh; }

.wrap {
  max-width: 480px;
  margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 6px 0 20px;
  text-align: center;
}
.brand .logo-chip { height: 40px; }
.brand-title {
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--brand);
}
:root[data-theme="dark"] .brand-title { color: var(--brand-light); }

.card { padding: 24px 18px; }
.card.center { text-align: center; padding: 40px 20px; }
.card h1 { font-size: 25px; line-height: 1.2; letter-spacing: -.03em; font-weight: 800; margin: 10px 0 10px; }
.card p { font-size: 17px; line-height: 1.45; margin: 6px 0; }
.muted { color: var(--text-dim); }

/* troca de tela: entra com desfoque */
.view:not(.hidden) { animation: view-in .7s var(--ease-out); }
@keyframes view-in {
  from { opacity: 0; filter: blur(10px); transform: translate3d(0, 14px, 0) scale(.98); }
  to { opacity: 1; filter: none; transform: none; }
}

.label {
  display: block;
  font-size: 19px;
  font-weight: 750;
  letter-spacing: -.02em;
  line-height: 1.3;
  margin: 4px 0 10px;
}

/* campo com borda em gradiente que gira ao focar */
.field {
  position: relative;
  border-radius: 13px;
  padding: 1px;
  background: var(--line);
  isolation: isolate;
}
.field::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from var(--angle, 0deg), #19a5df, #0075b6, #00517b, #19a5df);
  opacity: 0;
  transition: opacity .35s var(--ease-out);
}
.field::after {
  content: "";
  position: absolute;
  inset: -6px;
  z-index: -2;
  border-radius: 18px;
  background: conic-gradient(from var(--angle, 0deg), rgba(25, 165, 223, .35), rgba(0, 117, 182, .3), rgba(0, 81, 123, .25), rgba(25, 165, 223, .35));
  filter: blur(12px);
  opacity: 0;
  transition: opacity .35s var(--ease-out);
}
.field:focus-within::before, .field:focus-within::after { opacity: 1; animation: spin-angle 4s linear infinite; }
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes spin-angle { to { --angle: 360deg; } }
.field.select { margin-bottom: 20px; }

/* 16px+ evita o zoom automático do iOS ao focar. */
input, select {
  display: block;
  width: 100%;
  font-size: 18px;
  padding: 15px 14px;
  border-radius: 12px;
  border: 0;
  background: var(--bg-input);
  color: var(--text);
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}
input:focus-visible, select:focus-visible { outline: none; }
input::placeholder { color: var(--text-dim); opacity: .7; }
select {
  background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
select:invalid { color: var(--text-dim); }
option { color: var(--text); background: var(--bg-elev); }

.help {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  margin: 8px 2px 22px;
}
.help .muted { text-align: right; }
#word-count { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text-dim); white-space: nowrap; }
/* dois pontinhos = as duas palavras permitidas */
.dots { display: inline-flex; gap: 4px; }
.dots i {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--line-strong);
  transition: background .3s var(--ease-out), transform .4s var(--ease-out), box-shadow .3s;
}
.dots i.on { background: var(--accent); box-shadow: 0 0 10px rgb(var(--glow-rgb) / .7); transform: scale(1.15); }
#word-count.over { color: var(--danger); }
#word-count.over .dots i { background: var(--danger); box-shadow: 0 0 10px color-mix(in srgb, var(--danger) 70%, transparent); }
#word-count.over .dots { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

.error {
  background: color-mix(in srgb, var(--danger) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  color: var(--danger);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 16px;
  margin: 0 0 16px;
  animation: view-in .45s var(--ease-out), shake .35s .1s;
}

.btn-block { width: 100%; font-size: 18px; padding: 17px; letter-spacing: .1em; font-weight: 800; }
/* enviando: barra correndo por baixo do texto */
.btn.is-busy { cursor: progress; }
.btn.is-busy::before {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 3px; width: 40%;
  background: rgba(255, 255, 255, .85);
  border-radius: 3px;
  animation: busy 1s ease-in-out infinite;
}
@keyframes busy { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

/* ---------- sucesso: check que se desenha + estouro de partículas ---------- */
.success { position: relative; width: 84px; height: 84px; margin: 0 auto 10px; }
.success svg { width: 100%; height: 100%; overflow: visible; }
.success circle {
  fill: var(--brand);
  stroke: var(--brand-light);
  stroke-width: 2.5;
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  transform-origin: center;
  animation: draw .8s var(--ease-out) forwards, pop .6s var(--ease-out) .55s;
}
.success path {
  fill: none;
  stroke: #fff;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: draw .45s var(--ease-out) .5s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { 40% { transform: scale(1.12); } }
.burst i {
  position: absolute;
  left: 50%; top: 50%;
  width: 7px; height: 7px;
  margin: -3.5px;
  border-radius: 2px;
  opacity: 0;
  animation: burst .9s var(--ease-out) .55s forwards;
}
@keyframes burst {
  0% { opacity: 1; transform: rotate(var(--a)) translateX(10px) scale(1); }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(78px) scale(.4); }
}
.burst i:nth-child(1) { --a: 0deg; background: #19a5df; }
.burst i:nth-child(2) { --a: 30deg; background: #0075b6; }
.burst i:nth-child(3) { --a: 60deg; background: #00517b; }
.burst i:nth-child(4) { --a: 90deg; background: #465051; }
.burst i:nth-child(5) { --a: 120deg; background: #19a5df; }
.burst i:nth-child(6) { --a: 150deg; background: #0075b6; }
.burst i:nth-child(7) { --a: 180deg; background: #00517b; }
.burst i:nth-child(8) { --a: 210deg; background: #8fd5f5; }
.burst i:nth-child(9) { --a: 240deg; background: #19a5df; }
.burst i:nth-child(10) { --a: 270deg; background: #0075b6; }
.burst i:nth-child(11) { --a: 300deg; background: #465051; }
.burst i:nth-child(12) { --a: 330deg; background: #00517b; }

/* ---------- espera: órbita (lembra a abertura do site de referência) ---------- */
.orbit {
  position: relative;
  width: 110px; height: 110px;
  margin: 0 auto 18px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: radial-gradient(circle, rgb(var(--glow-rgb) / .3), rgb(var(--glow-rgb) / .05) 55%, transparent 70%);
}
.orbit::before {
  content: "";
  position: absolute;
  inset: 34%;
  border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 0 30px rgb(var(--glow-rgb) / .6);
  animation: core 2.4s ease-in-out infinite;
}
@keyframes core { 50% { transform: scale(.78); opacity: .75; } }
.orbit i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: orbit 3.2s linear infinite;
}
.orbit i::after {
  content: "";
  position: absolute;
  left: 50%; top: -4px;
  width: 8px; height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: #19a5df;
  box-shadow: 0 0 12px #19a5df;
}
.orbit i:nth-child(2) { inset: 14%; animation-duration: 2.2s; animation-direction: reverse; }
.orbit i:nth-child(2)::after { background: #0075b6; box-shadow: 0 0 12px #0075b6; }
.orbit i:nth-child(3) { inset: -12%; animation-duration: 5s; border: 1px dashed var(--line-strong); }
.orbit i:nth-child(3)::after { background: #00517b; box-shadow: 0 0 12px #00517b; width: 6px; height: 6px; }
@keyframes orbit { to { transform: rotate(360deg); } }
.orbit.small { width: 54px; height: 54px; margin-bottom: 10px; }