/*
 * ARQUIVO: public/ativar/ativar.css
 * FINALIDADE: visual da página de ativação — paleta do tema Max do app e do site.
 */
@font-face { font-family: "Outfit"; src: url("../assets/Outfit.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #05072b; --panel: #0a0e3b; --line: #27339b; --field-bg: #05082b; --field-border: #303b9e;
  --primary: #7c2cff; --secondary: #1688ff; --brand: #974bff; --focus: #b58cff;
  --text: #f5f6ff; --muted: #aeb4d9; --faint: #7f89bd; --ok: #4ade80; --bad: #fca5a5;
  --btn: linear-gradient(90deg, #862cff, #187dff);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; font-family: "Outfit", system-ui, sans-serif; color: var(--text); line-height: 1.5;
  background: radial-gradient(ellipse at 80% -10%, #15116b 0%, transparent 55%), radial-gradient(ellipse at 0% 110%, #1a2fa8 0%, transparent 45%), var(--bg);
  background-attachment: fixed;
}
.wrap { width: min(520px, 100%); margin: 0 auto; padding: 28px 16px 40px; }
.brand { display: flex; align-items: center; gap: 10px; justify-content: center; font-size: 1.3rem; font-weight: 700; margin-bottom: 22px; }
.brand img { border-radius: 12px; box-shadow: 0 8px 24px -8px rgba(124, 44, 255, .9); }
.brand b { color: var(--brand); }

.card {
  background: linear-gradient(145deg, #10175b, #070a30); border: 1px solid #3947d0; border-radius: 20px;
  padding: 26px 22px; box-shadow: 0 0 50px rgba(92, 44, 255, .15);
}
h1 { margin: 0 0 6px; font-size: 1.7rem; line-height: 1.15; }
.lead { margin: 0 0 22px; color: var(--muted); }

.row { display: grid; grid-template-columns: 1fr 130px; gap: 12px; }
.field { margin-bottom: 16px; }
label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .95rem; }
input {
  width: 100%; height: 50px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--field-border);
  background: var(--field-bg); color: #fff; font: inherit; font-size: 16px; outline: 0; transition: border-color .2s, box-shadow .2s;
}
#code, #pin { font-family: ui-monospace, Consolas, monospace; letter-spacing: .04em; }
#pin { letter-spacing: .25em; text-align: center; }
input:focus { border-color: #8c3cff; box-shadow: 0 0 0 3px rgba(140, 60, 255, .25); }
input.invalid { border-color: #ef4444; }
small { display: block; color: var(--faint); margin-top: 6px; font-size: .85rem; }

.sep { display: flex; align-items: center; gap: 10px; margin: 8px 0 16px; color: var(--muted); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }
.sep::before, .sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.pw { position: relative; }
.pw input { padding-right: 92px; }
.pw button {
  position: absolute; right: 6px; top: 6px; height: 38px; padding: 0 12px; border-radius: 8px; border: 0;
  background: rgba(255, 255, 255, .07); color: var(--muted); font: inherit; font-size: .85rem; cursor: pointer;
}

.btn {
  position: relative; width: 100%; height: 54px; margin-top: 8px; border: 0; border-radius: 12px; overflow: hidden;
  background: var(--btn); color: #fff; font: inherit; font-weight: 600; font-size: 1.05rem; cursor: pointer;
  box-shadow: 0 12px 30px -12px rgba(124, 44, 255, .9); transition: transform .15s, opacity .2s;
}
.btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg);
  animation: sweep 4s ease-in-out infinite;
}
@keyframes sweep { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .6; cursor: wait; }
.btn span { position: relative; z-index: 1; }

.status { min-height: 1.5em; margin: 14px 0 0; text-align: center; color: var(--bad); }
.status.info { color: var(--muted); }

.done { text-align: center; }
.check {
  width: 74px; height: 74px; margin: 4px auto 16px; border-radius: 50%; display: grid; place-items: center;
  font-size: 2.2rem; font-weight: 700; background: var(--btn); box-shadow: 0 14px 40px -12px rgba(124, 44, 255, 1);
  animation: pop .6s cubic-bezier(.2, .8, .2, 1.4);
}
@keyframes pop { from { transform: scale(.3); opacity: 0; } }
.hint { color: var(--faint); font-size: .9rem; margin: 0; }

.privacy, .legal { color: var(--faint); font-size: .82rem; text-align: center; margin: 18px 6px 0; }
.legal { font-size: .76rem; opacity: .8; }

button:focus-visible, input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 380px) { .row { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .btn::after, .check { animation: none; } }