/* Volt v2 /login: layout de design/volt-v2/Login.dc.html, tokens em tokens.css. */
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);
-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:var(--muted);text-decoration:none}a:hover{color:var(--text)}
button,input{font-family:inherit}
@keyframes vpop{
0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-40deg)}
60%{opacity:1;transform:translate(-50%,-50%) scale(1.12) rotate(6deg)}
100%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}}
@keyframes vfloat{
0%,100%{transform:translateY(0) rotate(var(--r))}
50%{transform:translateY(-12px) rotate(calc(var(--r) + 4deg))}}
@keyframes vfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.v2-login{margin:0;min-height:100vh;min-height:100dvh}
.login-shell{position:relative;width:100%;min-height:100vh;min-height:100dvh;
background:var(--bg);overflow:hidden;display:flex;flex-direction:column}
.login-top{position:relative;z-index:3;display:flex;align-items:center;
justify-content:space-between;padding:18px 24px;gap:12px}
.login-brand{font-size:15px;color:var(--muted)}
.login-brand strong{color:var(--text);font-weight:700}
.theme-switch{display:flex;gap:2px;padding:3px;background:var(--field);
border:1px solid var(--line);border-radius:9px;flex:none}
.theme-switch button{padding:4px 9px;border:0;border-radius:6px;font-size:12px;
cursor:pointer;background:transparent;color:var(--muted)}
.theme-switch button.active{background:var(--active);color:var(--text)}

.login-raios{position:absolute;inset:0;z-index:1;pointer-events:none}
.login-raio{position:absolute;transform:translate(-50%,-50%);
display:flex;flex-direction:column;align-items:center;gap:4px;
animation:vpop .8s both cubic-bezier(.2,1.3,.4,1)}
.login-raio-art{background-size:contain;background-repeat:no-repeat;
background-position:center;animation:vfloat ease-in-out infinite;
filter:drop-shadow(0 10px 14px rgba(0,0,0,.12))}
.login-raio strong{font-size:14px;font-weight:600;color:var(--text)}
.login-raio span{font-size:12.5px;color:var(--muted);margin-top:-4px}

.login-main{position:relative;z-index:2;flex:1;display:flex;align-items:center;
justify-content:center;padding:24px}
.login-card{width:380px;max-width:100%;padding:32px 30px 26px;background:var(--card);
border:1px solid var(--line);border-radius:22px;box-shadow:0 24px 60px var(--shadow);
display:flex;flex-direction:column;gap:20px;animation:vfade .6s .2s both ease-out}
.login-mark{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.login-logo{width:72px;height:72px;background-size:contain;background-repeat:no-repeat;
background-position:center}
.login-mark strong{font-size:34px;font-weight:700;letter-spacing:-.035em;line-height:1.1}
.login-mark .sub{font-size:15px;color:var(--muted)}
.login-form{display:flex;flex-direction:column;gap:20px}
.login-fields{display:flex;flex-direction:column;gap:12px}
.login-fields label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:600}
.login-fields input{padding:11px 13px;border-radius:11px;border:1px solid var(--line2);
background:var(--field);color:var(--text);font-size:14px;font-weight:400;outline:none}
.login-fields input:focus{border-color:var(--text)}
.login-err{font-size:12.5px;color:var(--bad)}
.login-submit{padding:13px 18px;border:0;border-radius:999px;background:var(--text);
color:var(--bg);font-size:15px;font-weight:600;cursor:pointer}
.login-submit:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.login-note{text-align:center;font-size:12px;color:var(--faint)}
/* Entrada pelo Clerk (#49): o componente do Clerk ocupa a largura do card. */
.login-clerk{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.login-clerk #clerk-mount{display:flex;justify-content:center;width:100%}
.login-form[hidden]{display:none}