/* ─────────────────────────────────────────────
   login.css — tela de login pública (proto-login)
   Usa default.css (tokens) + landing.js (tema).
   ───────────────────────────────────────────── */
.login-page { min-height:100vh; display:grid; place-items:center; padding:24px; position:relative; overflow:hidden; background:var(--bg); }
.login-mesh { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.login-mesh .orb { position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; }
.login-mesh .o1 { width:460px; height:460px; background:var(--primary); top:-150px; left:-110px; }
.login-mesh .o2 { width:420px; height:420px; background:var(--accent); bottom:-170px; right:-90px; opacity:.4; }
@media (prefers-color-scheme: dark){ .login-mesh .orb{opacity:.3;} }
:root[data-theme="dark"] .login-mesh .orb{opacity:.3;}
:root[data-theme="light"] .login-mesh .orb{opacity:.5;}

.login-top { position:absolute; top:0; left:0; right:0; z-index:2; display:flex; align-items:center; justify-content:space-between; padding:18px 22px; }
.lg-back { display:inline-flex; align-items:center; gap:6px; font-size:.85rem; font-weight:600; color:var(--ink-soft); padding:8px 14px; border-radius:99px; border:1px solid var(--border); background:color-mix(in srgb,var(--surface) 70%,transparent); }
.lg-back:hover { border-color:var(--border-strong); color:var(--ink); }
.lg-back svg { width:16px; height:16px; }
.login-top .theme-toggle { width:38px; height:38px; border-radius:11px; border:1px solid var(--border); background:color-mix(in srgb,var(--surface) 70%,transparent); cursor:pointer; display:grid; place-items:center; color:var(--ink-soft); padding:0; }
.login-top .theme-toggle svg { width:18px; height:18px; }
.login-top .theme-toggle:hover { border-color:var(--border-strong); color:var(--ink); }

.login-card { position:relative; z-index:1; width:min(860px,100%); display:grid; grid-template-columns:1fr 1fr; background:var(--surface); border:1px solid var(--border); border-radius:22px; overflow:hidden; box-shadow:var(--shadow-lg); }

.login-brand { background:linear-gradient(150deg, color-mix(in srgb,var(--primary) 85%,#1a0a2e), color-mix(in srgb,var(--secondary) 80%,#1a0a2e) 55%, color-mix(in srgb,var(--accent) 84%,#1a0a2e)); color:#fff; padding:46px 40px; display:flex; flex-direction:column; justify-content:center; gap:18px; }
/* no tema escuro, escurece o painel de marca (os tokens ficam mais vivos no dark) */
@media (prefers-color-scheme: dark){
  .login-brand { background:linear-gradient(150deg, color-mix(in srgb,var(--primary) 74%,#140a22), color-mix(in srgb,var(--secondary) 70%,#140a22) 58%, color-mix(in srgb,var(--accent) 66%,#140a22)); }
}
:root[data-theme="dark"] .login-brand { background:linear-gradient(150deg, color-mix(in srgb,var(--primary) 74%,#140a22), color-mix(in srgb,var(--secondary) 70%,#140a22) 58%, color-mix(in srgb,var(--accent) 66%,#140a22)); }
:root[data-theme="light"] .login-brand { background:linear-gradient(150deg, color-mix(in srgb,var(--primary) 85%,#1a0a2e), color-mix(in srgb,var(--secondary) 80%,#1a0a2e) 55%, color-mix(in srgb,var(--accent) 84%,#1a0a2e)); }
.login-brand img { height:30px; width:auto; align-self:flex-start; filter:brightness(0) invert(1); }
.lb-title { font-size:1.45rem; font-weight:800; letter-spacing:-.02em; line-height:1.15; }
.lb-sub { font-size:.9rem; opacity:.9; line-height:1.55; max-width:34ch; }
.lb-feats { display:flex; flex-direction:column; gap:11px; margin-top:8px; }
.lb-feat { display:flex; align-items:center; gap:10px; font-size:.86rem; font-weight:500; }
.lb-feat svg { width:17px; height:17px; flex-shrink:0; opacity:.95; }

.login-form { padding:46px 42px; display:flex; flex-direction:column; justify-content:center; }
.login-form h2 { font-size:1.5rem; font-weight:800; letter-spacing:-.02em; }
.login-form .greeting { color:var(--muted); font-size:.9rem; margin:6px 0 26px; }
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:.78rem; font-weight:700; color:var(--ink-soft); margin-bottom:7px; }
.form-group input { width:100%; padding:11px 14px; border:1px solid var(--border-strong); border-radius:10px; background:var(--surface-2); color:var(--ink); font:inherit; font-size:.9rem; }
.form-group input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-wash); background:var(--surface); }
.login-btn { margin-top:8px; width:100%; padding:12px; border:none; border-radius:10px; background:linear-gradient(120deg,var(--primary),var(--secondary)); color:#fff; font:inherit; font-weight:700; font-size:.95rem; cursor:pointer; box-shadow:0 6px 18px color-mix(in srgb,var(--primary) 38%,transparent); text-align:center; display:block; }
.login-btn:hover { filter:brightness(1.05); }
.login-foot { margin-top:22px; font-size:.78rem; color:var(--muted); text-align:center; }

@media (max-width:680px){ .login-card { grid-template-columns:1fr; } .login-brand { display:none; } }

/* mensagem de erro do login */
.login-error { background: var(--crit-wash); color: var(--crit); border: 1px solid color-mix(in srgb, var(--crit) 30%, transparent); border-radius: 10px; padding: 10px 12px; font-size: .85rem; margin-bottom: 4px; }