/* Telas de acesso e perfil — mesma linguagem do Hethux Finanças:
   fundo preto com brilho azul, cartão de vidro, botão em pílula.
   Sem data-theme (login, cadastro, esqueci a senha) fica no escuro da marca;
   o perfil segue o tema escolhido pelo usuário. */
:root{
  --bg:#080808; --surface:#101010; --surface-2:#161616; --surface-3:#1c1c1c;
  --glass:linear-gradient(160deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.02) 55%,rgba(255,255,255,.035) 100%);
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.08);
  --line:rgba(255,255,255,.07); --line-strong:rgba(255,255,255,.12);
  --ink:#ffffff; --ink-2:rgba(255,255,255,.62); --ink-3:rgba(255,255,255,.42);
  --blue:#0043fc; --blue-hi:#1a59ff; --blue-text:#a9c1ff; --blue-dim:rgba(0,67,252,.16);
  --glow:rgba(0,67,252,.18);
  --green:#3bff8a; --green-dim:rgba(59,255,138,.1); --red:#ff4f4f; --red-dim:rgba(255,79,79,.12);
  --sans:"Neue Montreal","PP Neue Montreal",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --t:.2s cubic-bezier(.4,0,.2,1);
  /* apelidos usados em estilos inline das páginas */
  --accent:var(--blue); --accent-hover:var(--blue-hi);
  --text:var(--ink); --text-dim:var(--ink-2); --text-faint:var(--ink-3);
  --border:var(--line-strong); --radius:24px; --danger:var(--red); --ok:var(--green);
  color-scheme:dark;
}
[data-theme="light"]{
  --bg:#f5f5f5; --surface:#ffffff; --surface-2:#fafafa; --surface-3:#f0f0f0;
  --glass:linear-gradient(160deg,#ffffff 0%,#ffffff 100%); --glass-edge:inset 0 0 0 rgba(0,0,0,0);
  --line:rgba(15,16,17,.09); --line-strong:rgba(15,16,17,.16);
  --ink:#0f1011; --ink-2:#55585c; --ink-3:#808387;
  --blue-text:#0043fc; --blue-dim:rgba(0,67,252,.07); --glow:rgba(0,67,252,.10);
  --green:#0a8f4a; --green-dim:rgba(10,143,74,.08); --red:#c62828; --red-dim:rgba(198,40,40,.09);
  color-scheme:light;
}
*{ box-sizing:border-box; }
body{
  margin:0; min-height:100vh; position:relative;
  font-family:var(--sans);
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  padding:32px 16px; color:var(--text); font-size:15px; line-height:1.5;
  letter-spacing:.012em; word-spacing:.05em;
  -webkit-font-smoothing:antialiased;
}
[data-theme="light"] body{ -webkit-font-smoothing:auto; }
button, input, select, textarea{ letter-spacing:inherit; word-spacing:inherit; }
body::before{
  content:""; position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(900px,120%); height:400px; pointer-events:none;
  background:radial-gradient(ellipse,var(--glow) 0%,rgba(0,67,252,0) 68%);
}
button{ font-family:inherit; cursor:pointer; }
a{ color:var(--blue-text); }
:focus-visible{ outline:2px solid var(--blue-text); outline-offset:2px; }

.auth-card{
  width:100%; max-width:460px; position:relative;
  background:var(--glass); border:1px solid var(--line-strong); box-shadow:var(--glass-edge);
  border-radius:24px; padding:clamp(24px,4vw,44px);
}
.auth-card-wide{ max-width:560px; }

.topnav-back{
  display:inline-block; position:static; margin-bottom:22px; font-size:13px; font-weight:400;
  color:var(--text-dim); text-decoration:underline; text-underline-offset:3px;
}
.topnav-back:hover{ color:var(--ink); }

/* logo: "Hethux" + etiqueta mono, igual à barra lateral */
.auth-brand{ margin-bottom:26px; }
.auth-brand .auth-mark{ display:none; }
.auth-brand > div{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.auth-brand b{ font-size:1.6rem; font-weight:500; letter-spacing:-.025em; line-height:1; }
.auth-brand span{
  font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--blue-text); border:1px solid currentColor; border-radius:4px; padding:4px 5px; line-height:1;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.auth-title{ font-size:clamp(30px,4vw,44px); font-weight:500; margin:0 0 8px; letter-spacing:-.025em; line-height:1.05; }
.auth-sub{ font-size:15px; color:var(--text-dim); margin:0 0 24px; }

.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13px; font-weight:500; color:var(--text); margin-bottom:7px; }
.field label span{ color:var(--text-dim); }
.field input[type=text], .field input[type=email], .field input[type=password], .field select{
  width:100% !important; border:1px solid var(--line) !important; border-radius:8px !important; padding:15px 16px !important;
  font-size:16px !important; font-family:inherit; outline:none; color:var(--text) !important; background:var(--surface-3) !important;
  transition:border-color var(--t);
}
.field input:focus, .field select:focus{ border-color:var(--blue) !important; }
.field-hint{ font-size:13px; color:var(--text-dim); margin-top:6px; }

.btn-primary{
  width:100%; display:inline-flex; align-items:center; justify-content:center;
  background:var(--blue); color:#fff; border:none; border-radius:100px;
  padding:16px 28px; font-size:15px; font-weight:500; margin-top:8px; transition:var(--t);
}
.btn-primary:hover{ background:var(--blue-hi); box-shadow:0 8px 28px rgba(0,67,252,.35); transform:translateY(-1px); }

.btn-secondary{
  display:inline-flex !important; align-items:center; background:transparent; color:var(--text);
  border:1px solid var(--line-strong); border-radius:100px !important; padding:9px 18px !important;
  font-size:13.5px; font-weight:500 !important; cursor:pointer; transition:var(--t);
}
.btn-secondary:hover{ background:var(--surface-3); }

.btn-text-danger{
  background:none; border:none; color:var(--danger); font-size:13px; font-weight:400;
  padding:8px 4px; text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}

.auth-alt{ text-align:left; font-size:14px; color:var(--text-dim); margin-top:18px; }
.auth-alt + .auth-alt{ margin-top:8px; }
.auth-alt a{ color:var(--text-dim); font-weight:400; text-decoration:underline; text-underline-offset:3px; }
.auth-alt a:hover{ color:var(--ink); }

.msg-error{
  background:var(--red-dim); color:var(--red); border:1px solid var(--red);
  border-radius:8px; padding:12px 14px; font-size:14px; font-weight:400; margin-bottom:18px;
}
.msg-ok{
  background:var(--green-dim); color:var(--green); border:1px solid var(--green);
  border-radius:8px; padding:12px 14px; font-size:14px; font-weight:400; margin-bottom:18px;
}

.swatches-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; }
.swatch{
  width:28px; height:28px; border-radius:50%; cursor:pointer; border:2px solid transparent;
  transition:transform .12s;
}
.swatch:hover{ transform:scale(1.12); }
.swatch.sel{ border-color:var(--ink); box-shadow:0 0 0 2px var(--bg) inset; }

.avatar-upload-row{ display:flex; align-items:center; gap:18px; }
.avatar-preview{ flex-shrink:0; }
.avatar-upload-actions{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; }

.avatar-img, .avatar-fallback{ border-radius:50%; object-fit:cover; }
.avatar-fallback{
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:500;
}
.avatar-xl{ width:76px; height:76px; font-size:26px; }
/* no perfil a etiqueta mostra o e-mail: sem caixa-alta */
.auth-card-wide .auth-brand span{ text-transform:none; letter-spacing:.02em; font-size:11px; }

/* logo real (assets/img/logo.svg), herdando a cor do texto */
.auth-brand .brand-logo{ height:34px; width:auto; flex:none; color:var(--ink); }

/* botão "ver senha" dentro do campo */
.senha-wrap{ position:relative; }
.senha-wrap input{ padding-right:54px !important; }
.senha-ver{
  position:absolute; top:50%; right:8px; transform:translateY(-50%);
  width:38px; height:38px; padding:0; border:0; border-radius:50%; background:transparent;
  color:var(--text-dim); display:flex; align-items:center; justify-content:center; transition:var(--t);
}
.senha-ver:hover{ background:var(--surface-2); color:var(--ink); }
.senha-ver svg{ width:19px; height:19px; }
/* some o olho nativo do Edge pra não ficar em dobro */
.senha-wrap input::-ms-reveal{ display:none; }