:root{
  --ink:#2B2F36;
  --muted:#6B7280;
  --bg:#F6F2EC;
  --surface:#FFFFFF;
  --line:#E4DED5;
  --primary:#5A7D6E;
  --primary-dark:#1E2A44;
  --primary-mid:#78998B;
  --primary-soft:#E8F0EC;
  --online:#4CAF88;
  --online-soft:#E7F3ED;
  --accent:#C97862;
  --danger:#B85C5C;
  --danger-soft:#F8EAEA;
  --shadow:0 24px 70px rgba(30,42,68,.12);
  --shadow-soft:0 12px 34px rgba(30,42,68,.08);
}
*{box-sizing:border-box}
html{min-height:100%}
body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:
    radial-gradient(circle at 12% 8%,rgba(120,153,139,.10),transparent 27%),
    radial-gradient(circle at 88% 92%,rgba(201,120,98,.07),transparent 28%),
    linear-gradient(180deg,#FBFAF7 0%,var(--bg) 100%);
}
a{color:var(--primary-dark)}
button,input,select{font:inherit}
.auth-page{
  width:min(760px,calc(100% - 28px));
  margin:0 auto;
  padding:26px 0 58px;
}
.auth-page.wide{width:min(920px,calc(100% - 28px))}
.auth-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:24px;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--primary-dark);
  text-decoration:none;
  font-weight:860;
  letter-spacing:-.025em;
}
.brand img{width:40px;height:40px;display:block}
.back{
  color:#695B6D;
  text-decoration:none;
  font-size:.82rem;
  font-weight:760;
}
.back:hover{color:var(--primary)}
.card{
  padding:34px;
  border:1px solid rgba(90,125,110,.12);
  border-radius:25px;
  background:rgba(255,255,255,.94);
  box-shadow:var(--shadow);
}
.card.compact{max-width:640px;margin:0 auto}
.eyebrow-auth{
  margin:0 0 9px;
  color:var(--primary);
  font-size:.72rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.12em;
}
h1{
  margin:0;
  font-size:clamp(2rem,4vw,3.2rem);
  line-height:1.03;
  letter-spacing:-.05em;
}
.lead{
  margin:14px 0 24px;
  color:var(--muted);
  font-size:.92rem;
  line-height:1.65;
}
.lead strong{color:var(--primary-dark)}
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:17px;
}
.full{grid-column:1/-1}
label{
  display:grid;
  gap:7px;
  color:#514255;
  font-size:.8rem;
  font-weight:800;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="file"],
select{
  width:100%;
  min-height:46px;
  padding:11px 13px;
  border:1px solid #DCCFDF;
  border-radius:13px;
  outline:0;
  background:#fff;
  color:var(--ink);
  font-weight:500;
  transition:.18s ease;
}
input:focus,select:focus{
  border-color:#A98AB4;
  box-shadow:0 0 0 3px rgba(90,125,110,.07);
}
input[type="file"]{padding:9px}
.small{
  color:#8A7D8E;
  font-size:.7rem;
  font-weight:550;
  line-height:1.5;
}
.actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:11px;
  margin-top:24px;
}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:11px 17px;
  border:0;
  border-radius:999px;
  background:var(--primary-dark);
  color:#fff;
  text-decoration:none;
  font-weight:850;
  cursor:pointer;
  box-shadow:0 10px 25px rgba(30,42,68,.14);
  transition:.18s ease;
}
.button:hover{transform:translateY(-1px);background:#462652}
.button.secondary{
  background:#F0E8F2;
  color:var(--primary-dark);
  box-shadow:none;
}
.button.secondary:hover{background:#E7DDEB}
.alert{
  padding:12px 14px;
  margin:0 0 18px;
  border-radius:13px;
  font-size:.82rem;
  line-height:1.5;
}
.alert-error{
  border:1px solid #EAC5C5;
  background:var(--danger-soft);
  color:#8D4040;
}
.alert-ok{
  border:1px solid #CFE6D8;
  background:#F0F8F3;
  color:#356A4D;
}
.alert-info{
  border:1px solid #DFD1E3;
  background:#F5EFF7;
  color:#654D6D;
}
.checks{
  display:grid;
  gap:10px;
  margin-top:20px;
}
.check{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:start;
  gap:9px;
  font-size:.76rem;
  font-weight:570;
  line-height:1.5;
}
.check input{margin-top:2px}
.mascots{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:9px;
  margin-top:7px;
}
.mascot{position:relative}
.mascot input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.mascot span{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:48px;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#fff;
  cursor:pointer;
  font-size:.76rem;
  font-weight:700;
}
.mascot input:checked+span{
  border-color:#A587B0;
  background:var(--primary-soft);
  box-shadow:0 0 0 2px rgba(90,125,110,.06);
}
.mascot b{font-size:1.12rem}
.identity-note{
  display:flex;
  gap:11px;
  align-items:flex-start;
  padding:14px;
  margin:18px 0 0;
  border:1px solid #DDD0E1;
  border-radius:14px;
  background:#FAF7FB;
  color:#665869;
  font-size:.75rem;
  line-height:1.55;
}
.identity-note img{width:34px;height:34px;flex:0 0 34px}
.profile-heading{
  display:flex;
  align-items:center;
  gap:17px;
  margin-bottom:23px;
}
.profile-heading h1,.profile-heading .lead{margin-bottom:0}
.profile-visual{
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:50%;
  background:var(--primary-soft);
  box-shadow:0 0 0 1px var(--line),0 10px 26px rgba(30,42,68,.09);
}
.profile-visual.large{
  width:76px;height:76px;flex:0 0 76px;
  font-size:2rem;
}
.profile-visual img{width:100%;height:100%;object-fit:cover}
.visual-choice{
  padding:18px;
  border:1px solid var(--line);
  border-radius:17px;
  background:#FBFAF7;
}
.visual-choice h2{
  margin:0 0 4px;
  font-size:1rem;
}
.mode-option{
  display:flex;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:8px;
  margin:15px 0 9px;
}
.mode-option input{margin:0}
.upload-box{margin-top:12px}
.profile-box{
  display:grid;
  gap:7px;
  padding:17px;
  border-radius:15px;
  background:#F8F4F9;
}
.profile-box strong{font-size:.96rem}
.private{color:var(--muted);font-size:.8rem}
.divider{
  height:1px;
  margin:26px 0;
  background:var(--line);
}
.code{
  letter-spacing:.24em;
  text-align:center;
  font-size:1.35rem;
  font-weight:800;
}
.legal h1{margin-bottom:8px}
.legal h2{
  margin:28px 0 8px;
  color:#413347;
  font-size:1.15rem;
  letter-spacing:-.02em;
}
.legal p,.legal li{
  color:#57495C;
  line-height:1.72;
  font-size:.88rem;
}
.legal ul{padding-left:20px}
.legal-note{
  padding:16px;
  border:1px solid #E1D5E4;
  border-radius:14px;
  background:#F6F0F8;
  color:#66536E!important;
}
.mt20{margin-top:20px}
.mt22{margin-top:22px}

@media(max-width:650px){
  .auth-page{padding-top:17px}
  .auth-top{align-items:center}
  .brand img{width:36px;height:36px}
  .brand span{font-size:.86rem}
  .back{font-size:.73rem}
  .card{padding:23px 18px;border-radius:21px}
  .form-grid{grid-template-columns:1fr}
  .full{grid-column:auto}
  .mascots{grid-template-columns:1fr 1fr}
  .actions .button{width:100%}
  .profile-heading{align-items:flex-start}
  .profile-visual.large{width:60px;height:60px;flex-basis:60px}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important}
}

.pseudonym-suggestions{
  margin:14px 0 18px;
  padding:14px 16px;
  border:1px solid #E4DED5;
  border-radius:16px;
  background:#FBFAF7;
}
.pseudonym-suggestions>strong{
  display:block;
  margin-bottom:9px;
  color:#1E2A44;
  font-size:.78rem;
}
.pseudonym-suggestions>div{display:flex;flex-wrap:wrap;gap:8px}
.pseudonym-suggestions button{
  border:1px solid #DCCBE1;
  border-radius:999px;
  background:#fff;
  color:#1E2A44;
  padding:7px 10px;
  font:inherit;
  font-size:.72rem;
  font-weight:750;
  cursor:pointer;
}
.pseudonym-suggestions button:hover{background:#E8F0EC}


/* ===== Identidade final — Serenidade / Conta e Legal ===== */
:root{
  --ink:#2B2F36;--muted:#6B7280;--bg:#F6F2EC;--surface:#FFFFFF;--line:#E4DED5;
  --primary:#5A7D6E;--primary-dark:#1E2A44;--primary-mid:#78998B;--primary-soft:#E8F0EC;
  --online:#4CAF88;--online-soft:#E7F3ED;--accent:#C97862;--danger:#B85C5C;--danger-soft:#F8EAEA;
}
body{background:radial-gradient(circle at 12% 8%,rgba(90,125,110,.10),transparent 27%),radial-gradient(circle at 88% 92%,rgba(201,120,98,.06),transparent 28%),linear-gradient(180deg,#FBFAF7 0%,#F6F2EC 100%)}
.card{border-color:rgba(90,125,110,.15);box-shadow:0 24px 70px rgba(30,42,68,.10)}
input:focus,select:focus{border-color:#78998B;box-shadow:0 0 0 3px rgba(90,125,110,.10)}
.button{background:#1E2A44;box-shadow:0 10px 25px rgba(30,42,68,.13)}
.button:hover{background:#263A59}
.button.secondary{background:#E8F0EC;color:#1E2A44}
.button.secondary:hover{background:#DCE8E2}