:root{
  --bg:#06060c;
  --panel-bg:rgba(13,13,25,.62);
  --text-main:#f4f4f7;
  --text-muted:#94a3b8;
  --cyan:#06b6d4;
  --rose:#f43f5e;
  --sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-7:28px;--sp-8:32px;
  --r-sm:12px;--r-md:16px;--r-lg:22px;
  --fs-xs:10px;--fs-sm:12px;--fs-base:14px;--fs-lg:20px;--fs-xl:26px;
}
[data-theme="forja"]{--primary:#f97316;--primary-glow:rgba(249,115,22,.4);--panel-border:rgba(249,115,22,.18);}
[data-theme="orion"]{--primary:#a855f7;--primary-glow:rgba(168,85,247,.4);--panel-border:rgba(147,51,234,.18);}
[data-theme="cyber"]{--primary:#06b6d4;--primary-glow:rgba(6,182,212,.4);--panel-border:rgba(6,182,212,.18);}
[data-theme="matrix"]{--primary:#10b981;--primary-glow:rgba(16,185,129,.4);--panel-border:rgba(16,185,129,.18);}
[data-theme="blood"]{--primary:#f43f5e;--primary-glow:rgba(244,63,94,.4);--panel-border:rgba(244,63,94,.18);}
[data-theme="sung"]{
  --bg:#03020a;
  --panel-bg:rgba(13,8,31,.72);
  --text-main:#f8f5ff;
  --text-muted:#a99bc7;
  --primary:#8b5cf6;
  --primary-glow:rgba(139,92,246,.42);
  --panel-border:rgba(168,85,247,.22);
  --cyan:#38bdf8;
  --rose:#fb2f68;
}
[data-theme="ember"]{--bg:#05080d;--panel-bg:rgba(9,15,24,.72);--text-main:#fff8ef;--text-muted:#a8b2bd;--primary:#ff9f0a;--primary-glow:rgba(255,159,10,.36);--panel-border:rgba(255,159,10,.2);--cyan:#38bdf8;--rose:#fb4d00;}
[data-theme="arounda"]{--bg:#161316;--panel-bg:rgba(40,40,40,.7);--text-main:#fff;--text-muted:#d1c7b8;--primary:#ffd556;--primary-glow:rgba(255,213,86,.34);--panel-border:rgba(255,213,86,.22);--cyan:#eaff00;--rose:#ff4b00;}
[data-theme="crimson"]{--bg:#050505;--panel-bg:rgba(11,11,11,.78);--text-main:#f5f2ed;--text-muted:#b9aaa4;--primary:#8b0d1a;--primary-glow:rgba(139,13,26,.36);--panel-border:rgba(139,13,26,.26);--cyan:#f5f2ed;--rose:#b11226;}
[data-theme="nova"]{--bg:#070b0f;--panel-bg:rgba(10,15,20,.74);--text-main:#f8f4e8;--text-muted:#a99f8e;--primary:#d6a84a;--primary-glow:rgba(214,168,74,.32);--panel-border:rgba(214,168,74,.2);--cyan:#93a4af;--rose:#b9842d;}
[data-theme="marple"]{--bg:#1f1f1f;--panel-bg:rgba(38,36,35,.72);--text-main:#fff4ef;--text-muted:#d7b9ad;--primary:#ca2851;--primary-glow:rgba(202,40,81,.36);--panel-border:rgba(255,103,102,.22);--cyan:#ffe3b3;--rose:#ff6766;}
[data-theme="aureum"]{--bg:#0d0c0f;--panel-bg:rgba(25,23,27,.74);--text-main:#fff4d7;--text-muted:#a89d8e;--primary:#d29f22;--primary-glow:rgba(210,159,34,.34);--panel-border:rgba(210,159,34,.22);--cyan:#252628;--rose:#5d0018;}
[data-theme="infected"]{--bg:#060a12;--panel-bg:rgba(10,14,22,.74);--text-main:#f6ead7;--text-muted:#a99f91;--primary:#caa66a;--primary-glow:rgba(202,166,106,.32);--panel-border:rgba(202,166,106,.2);--cyan:#4b5666;--rose:#e5b66a;}
[data-theme="sigma"]{--bg:#030704;--panel-bg:rgba(5,14,8,.72);--text-main:#efffe5;--text-muted:#9dbb8d;--primary:#8bdc3c;--primary-glow:rgba(139,220,60,.34);--panel-border:rgba(139,220,60,.22);--cyan:#b7ff55;--rose:#5fa51f;}
[data-theme="eclipse"]{--bg:#060814;--panel-bg:rgba(9,13,28,.72);--text-main:#f7f0ef;--text-muted:#9ca6b8;--primary:#ff4a3d;--primary-glow:rgba(255,74,61,.34);--panel-border:rgba(255,74,61,.2);--cyan:#677386;--rose:#c92734;}
[data-theme="sunset"]{--bg:#1f1511;--panel-bg:rgba(48,33,24,.72);--text-main:#fff6e7;--text-muted:#d0ad8a;--primary:#f88f22;--primary-glow:rgba(248,143,34,.34);--panel-border:rgba(248,143,34,.2);--cyan:#ffe3b3;--rose:#ea6113;}
[data-theme="claro"]{
  --bg:#f4f4f7;--panel-bg:rgba(255,255,255,.82);--text-main:#101018;--text-muted:#64748b;
  --primary:#f97316;--primary-glow:rgba(249,115,22,.22);--panel-border:rgba(15,23,42,.12);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    radial-gradient(circle at 18% 20%, rgba(6,182,212,.26), transparent 30%),
    radial-gradient(circle at 78% 78%, var(--primary-glow), transparent 34%),
    var(--bg);
  background-size:48px 48px,48px 48px,auto,auto,auto;
  color:var(--text-main);
  font-family:'Plus Jakarta Sans','Segoe UI',Arial,sans-serif;
}
[data-theme="sung"]{
  background:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px),
    radial-gradient(circle at 28% 20%, rgba(251,47,104,.34), transparent 32%),
    radial-gradient(circle at 72% 24%, rgba(139,92,246,.42), transparent 36%),
    radial-gradient(circle at 62% 82%, rgba(56,189,248,.26), transparent 34%),
    var(--bg);
  background-size:48px 48px,48px 48px,auto,auto,auto,auto;
}
[data-theme="sung"] .brand-mark,
[data-theme="sung"] .login-btn{
  background:linear-gradient(135deg,#fb2f68 0%, #8b5cf6 48%, #38bdf8 100%);
  box-shadow:0 16px 38px rgba(139,92,246,.34);
}
[data-theme="ember"],
[data-theme="arounda"],
[data-theme="crimson"],
[data-theme="nova"],
[data-theme="marple"],
[data-theme="aureum"],
[data-theme="infected"],
[data-theme="sigma"],
[data-theme="eclipse"],
[data-theme="sunset"]{
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--cyan) 28%, transparent), transparent 30%),
    radial-gradient(circle at 78% 20%, var(--primary-glow), transparent 34%),
    radial-gradient(circle at 74% 82%, color-mix(in srgb, var(--rose) 28%, transparent), transparent 34%),
    var(--bg);
  background-size:48px 48px,48px 48px,auto,auto,auto,auto;
}
[data-theme="ember"] .brand-mark,
[data-theme="ember"] .login-btn,
[data-theme="arounda"] .brand-mark,
[data-theme="arounda"] .login-btn,
[data-theme="crimson"] .brand-mark,
[data-theme="crimson"] .login-btn,
[data-theme="nova"] .brand-mark,
[data-theme="nova"] .login-btn,
[data-theme="marple"] .brand-mark,
[data-theme="marple"] .login-btn,
[data-theme="aureum"] .brand-mark,
[data-theme="aureum"] .login-btn,
[data-theme="infected"] .brand-mark,
[data-theme="infected"] .login-btn,
[data-theme="sigma"] .brand-mark,
[data-theme="sigma"] .login-btn,
[data-theme="eclipse"] .brand-mark,
[data-theme="eclipse"] .login-btn,
[data-theme="sunset"] .brand-mark,
[data-theme="sunset"] .login-btn{
  background:linear-gradient(135deg,var(--rose) 0%, var(--primary) 50%, var(--cyan) 100%);
  box-shadow:0 16px 38px var(--primary-glow);
}
/* Canvas do fundo animado (orion-background.js). O motor injeta o <canvas> como primeiro
   filho do <body>, entao ele e um elemento posicionado que pintaria por cima do conteudo
   em fluxo - dai o z-index na .login-shell. */
#orionBgEffect{position:fixed;inset:0;z-index:0;pointer-events:none;display:none;}
.login-shell{position:relative;z-index:1;width:min(420px,100%);}
.login-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.brand{display:flex;align-items:center;gap:12px;}
.brand-mark{
  width:46px;height:46px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--primary),#c2410c);box-shadow:0 14px 34px var(--primary-glow);color:#fff;
}
.brand h1{font-size:18px;letter-spacing:1.2px;}
.brand p{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1.4px;margin-top:2px;}
.theme-switcher{position:relative;}
.icon-btn{
  width:38px;height:38px;border-radius:12px;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);color:var(--text-muted);display:grid;place-items:center;cursor:pointer;
}
.theme-popover{
  position:absolute;right:0;top:46px;width:170px;padding:8px;border-radius:14px;background:rgba(13,13,25,.96);
  border:1px solid var(--panel-border);box-shadow:0 18px 40px rgba(0,0,0,.42);z-index:5;max-height:min(70vh,620px);overflow-y:auto;
}
[data-theme="claro"] .theme-popover{background:#fff;}
.theme-option{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;cursor:pointer;font-size:13px;color:var(--text-main);}
.theme-option:hover,.theme-option.active{background:rgba(255,255,255,.08);}
[data-theme="claro"] .theme-option:hover,[data-theme="claro"] .theme-option.active{background:rgba(15,23,42,.06);}
.theme-swatch{width:14px;height:14px;border-radius:50%;border:1px solid rgba(255,255,255,.22);}
.hidden{display:none !important;}
.card{
  padding:28px;border-radius:22px;background:var(--panel-bg);border:1px solid var(--panel-border);
  backdrop-filter:blur(24px) saturate(160%);box-shadow:inset 0 1px 1px rgba(255,255,255,.05),0 24px 70px rgba(0,0,0,.44);
}
.card-title{margin-bottom:22px;}
.card-title h2{font-size:24px;letter-spacing:.5px;}
.card-title p{color:var(--text-muted);font-size:13px;margin-top:6px;}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px;}
.field label{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);font-weight:700;}
.input{
  height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);
  color:var(--text-main);padding:0 13px;font-size:14px;outline:none;
}
[data-theme="claro"] .input{border-color:rgba(15,23,42,.12);background:rgba(15,23,42,.03);}
.input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow);}
.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus,
.input:-webkit-autofill:active{
  -webkit-box-shadow:0 0 0 1000px rgba(255,255,255,.03) inset !important;
  -webkit-text-fill-color:var(--text-main) !important;
  caret-color:var(--text-main);
  transition:background-color 9999s ease-in-out 0s;
}
.login-btn{
  width:100%;height:44px;border:0;border-radius:12px;margin-top:8px;cursor:pointer;color:#fff;font-weight:800;font-size:14px;
  background:linear-gradient(135deg,var(--primary),#c2410c);box-shadow:0 14px 34px var(--primary-glow);
  display:flex;align-items:center;justify-content:center;gap:9px;
}
.error{min-height:18px;color:var(--rose);font-size:12px;margin-top:12px;text-align:center;}
.note{margin-top:16px;color:var(--text-muted);font-size:11px;text-align:center;line-height:1.5;}

/* ------------------------------------------------------------- criar conta
   O caminho secundario do login. Precisa ser visivel sem competir com o
   Entrar: mesma largura e mesma altura (um par so le como par quando os dois
   tem a mesma caixa), mas CONTORNO em vez de preenchimento.

   So usa variaveis de tema, e e' por isso que nao precisa de uma regra por
   tema como o `.login-btn` — aquele tem gradiente proprio e por isso carrega
   um override para cada um dos 16. Aqui, trocar de tema ja troca a cor.

   `box-sizing:border-box` nao e detalhe: sem ele o 1px de borda soma na altura
   e o botao fica 2px mais alto que o Entrar, o suficiente para o par parecer
   desalinhado sem que se saiba por que. */
.login-sep{
  display:flex;align-items:center;gap:12px;margin:18px 0 12px;
  color:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
.login-sep::before,.login-sep::after{content:"";flex:1;height:1px;background:var(--panel-border);}
.ghost-btn{
  width:100%;height:44px;box-sizing:border-box;border-radius:12px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:9px;
  font-weight:700;font-size:13px;text-decoration:none;
  color:var(--text-main);background:rgba(255,255,255,.03);
  border:1px solid var(--panel-border);
  transition:border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.ghost-btn i{color:var(--primary);transition:color .18s ease;}
[data-theme="claro"] .ghost-btn{border-color:rgba(15,23,42,.14);background:rgba(15,23,42,.03);}
.ghost-btn:hover,
.ghost-btn:focus-visible{
  border-color:var(--primary);color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-glow);
  transform:translateY(-1px);outline:none;
}
.ghost-btn:hover i,
.ghost-btn:focus-visible i{color:var(--primary);}
/* Quem pediu menos movimento no sistema nao quer o botao pulando. */
@media (prefers-reduced-motion:reduce){
  .ghost-btn{transition:none;}
  .ghost-btn:hover,.ghost-btn:focus-visible{transform:none;}
}

/* `.login-btn` tambem como link. O estado de sucesso do cadastro precisa de um
   <a>, e sem isto o sublinhado padrao do navegador aparece por baixo. */
a.login-btn{text-decoration:none;}

/* TEXTO ESCURO onde o gradiente e' CLARO.
   `.login-btn` fixa `color:#fff`, o que serve para a maioria dos temas. Em
   arounda (#ffd556 -> #eaff00), sigma (#8bdc3c -> #b7ff55) e sunset
   (#f88f22 -> #ffe3b3) o fim do gradiente e quase branco: o rotulo sumia,
   principalmente na metade direita do botao. Sao os tres unicos em que a
   diferenca e visivel a olho — nos demais o gradiente termina escuro. */
[data-theme="arounda"] .login-btn,
[data-theme="sigma"] .login-btn,
[data-theme="sunset"] .login-btn{
  color:#14110a;
}

/* Link dentro da nota do rodape. Sem isto ele sai no azul padrao do navegador,
   que nao pertence a nenhum dos 16 temas. */
.note a{color:var(--primary);text-decoration:none;font-weight:700;}
.note a:hover,.note a:focus-visible{text-decoration:underline;}

/* Estado de sucesso do cadastro (o formulario e substituido por isto). */
.sucesso-msg{
  margin:0 0 18px;color:var(--text-main);font-size:14px;line-height:1.6;text-align:center;
}
.sucesso-msg i{color:var(--primary);margin-right:6px;}

/* "Esqueci minha senha" — o terceiro caminho da tela de login.
   MUTED de proposito. Sao tres acoes na mesma caixa (entrar, recuperar,
   cadastrar) e elas nao tem o mesmo peso: o Entrar e' preenchido, o cadastro e'
   contornado, e este e' so texto. Se os tres gritassem igual, a tela deixaria
   de ter uma acao obvia. So ganha cor no hover, quando ja e' a escolha. */
.login-ajuda{margin:10px 0 0;text-align:center;font-size:12px;}
.login-ajuda a{color:var(--text-muted);text-decoration:none;font-weight:600;}
.login-ajuda a:hover,.login-ajuda a:focus-visible{color:var(--primary);text-decoration:underline;}