:root{
  color-scheme: light;
  --surface-0:#f7f5fa; --surface-1:#ffffff; --surface-2:#f0ecf5;
  --line:#e2dcea; --line-soft:#ece7f2;
  --text-primary:#160b1f; --text-secondary:#544c5c; --text-muted:#6b6273;
  --marca:#660099; --marca-forte:#4d0073; --marca-suave:#f2e8fa; --marca-ink:#ffffff;
  --critical:#b72d2d; --good:#087b08;
  --sombra:0 2px 8px rgba(22,11,31,.06), 0 24px 60px -20px rgba(102,0,153,.22);
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme: dark;
    --surface-0:#100b15; --surface-1:#1a1320; --surface-2:#251b2e;
    --line:#3a2f45; --line-soft:#2b2233;
    --text-primary:#ffffff; --text-secondary:#c8c0d0; --text-muted:#948b9e;
    --marca:#a15ce0; --marca-forte:#c9a3ef; --marca-suave:#2a1b38; --marca-ink:#1a1320;
    --critical:#e05555; --good:#0ca30c;
    --sombra:0 2px 8px rgba(0,0,0,.5), 0 24px 60px -20px rgba(0,0,0,.7);
  }
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{margin:0;min-height:100dvh;display:grid;place-items:center;padding:24px;
  background:var(--surface-0);color:var(--text-primary);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;position:relative;overflow-x:hidden;overflow-y:auto}
/* brilho roxo de fundo — dá profundidade sem poluir */
body::before{content:"";position:absolute;width:900px;height:900px;border-radius:50%;
  top:-380px;left:50%;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb, var(--marca) 20%, transparent) 0%, transparent 68%)}
.box{width:100%;max-width:406px;background:var(--surface-1);border:1px solid var(--line-soft);
  border-radius:22px;padding:34px 32px 28px;box-shadow:var(--sombra);position:relative;
  animation:sobe .4s cubic-bezier(.2,.7,.3,1) both}
@keyframes sobe{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}
.selo{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--marca),#9b3fd4);color:#fff;font-weight:800;
  font-size:16px;letter-spacing:.02em;margin-bottom:16px;
  box-shadow:0 8px 20px -6px color-mix(in srgb, var(--marca) 60%, transparent)}
h1{font-size:21px;margin:0 0 3px;letter-spacing:-.025em;font-weight:740}
.sub{color:var(--text-muted);font-size:13.5px;margin:0 0 24px}
label{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-muted);font-weight:700;margin-bottom:7px}
input{width:100%;background:var(--surface-0);color:var(--text-primary);
  border:1px solid var(--line);border-radius:11px;padding:12px 14px;font-size:15px;
  font-family:inherit;margin-bottom:17px;transition:border-color .16s, box-shadow .16s}
input:focus{outline:none;border-color:var(--marca);
  box-shadow:0 0 0 3.5px color-mix(in srgb, var(--marca) 16%, transparent)}
button{width:100%;background:var(--marca);color:var(--marca-ink);border:0;border-radius:11px;
  padding:13px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;
  transition:all .16s;box-shadow:0 4px 14px -4px color-mix(in srgb, var(--marca) 65%, transparent)}
button:hover{background:var(--marca-forte);transform:translateY(-1px);
  box-shadow:0 7px 20px -5px color-mix(in srgb, var(--marca) 70%, transparent)}
button:active{transform:none}
button:disabled{opacity:.55;cursor:default;transform:none}
button[aria-busy="true"]{cursor:wait}
.msg{font-size:13.5px;border-radius:11px;padding:11px 13px;margin-bottom:17px;display:none}
.msg.erro{display:block;background:color-mix(in srgb, var(--critical) 12%, transparent);
  color:var(--critical);border:1px solid color-mix(in srgb, var(--critical) 34%, transparent)}
.msg.ok{display:block;background:color-mix(in srgb, var(--good) 12%, transparent);
  color:var(--good);border:1px solid color-mix(in srgb, var(--good) 34%, transparent)}
.rodape{margin-top:22px;font-size:12px;color:var(--text-muted);text-align:center;line-height:1.6}
.hint{font-size:12.5px;color:var(--text-muted);margin:-11px 0 17px}
@media(max-width:480px){
  body{padding:14px;place-items:start center}
  .box{padding:28px 22px 24px;border-radius:18px;margin:auto 0}
}
@media(max-height:620px){
  body{place-items:start center}
  .box{margin:12px 0}
}