* { box-sizing:border-box; }
body { margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:28px; background:var(--bg); color:var(--text); font-family:var(--font-body, "Segoe UI", Arial, sans-serif); }
.login-shell { width:min(980px, 96vw); min-height:560px; display:grid; grid-template-columns:1.05fr .95fr; background:var(--card); border:1px solid var(--border); border-radius:var(--radius, 8px); overflow:hidden; box-shadow:var(--shadow); }
.login-brand { position:relative; padding:42px; color:var(--header-text); background:linear-gradient(145deg, var(--header-bg), color-mix(in srgb, var(--header-bg) 68%, var(--accent))); display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; }
.login-brand::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px), linear-gradient(180deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size:42px 42px; opacity:.30; }
.login-brand::after { content:""; position:absolute; left:42px; right:42px; bottom:24px; height:3px; background:var(--accent2); opacity:.52; }
.brand-content { position:relative; z-index:1; }
.brand-kicker { font-size:12px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:color-mix(in srgb, var(--header-text) 64%, var(--accent2)); margin-bottom:16px; }
.brand-title { font-family:var(--font-display, var(--font-body)); font-size:38px; line-height:1.02; font-weight:950; margin:0 0 18px; letter-spacing:0; }
.brand-copy { color:color-mix(in srgb, var(--header-text) 82%, var(--accent2)); font-size:15px; line-height:1.55; max-width:420px; margin:0; }
.brand-status { position:relative; z-index:1; display:flex; gap:10px; flex-wrap:wrap; font-size:12px; color:var(--header-text); }
.brand-pill { border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:7px 10px; background:rgba(255,255,255,.08); backdrop-filter:blur(8px); }
.login-panel { padding:48px 44px; display:flex; flex-direction:column; justify-content:center; background:var(--card); }
.login-panel h2 { margin:0; font-family:var(--font-display, var(--font-body)); font-size:28px; color:var(--text); }
.login-panel .hint { margin:8px 0 24px; color:var(--muted); font-size:14px; }
.field { margin-bottom:14px; }
.field label { display:block; margin-bottom:7px; font-size:13px; font-weight:900; color:var(--muted); }
.input-wrap { position:relative; }
input { width:100%; padding:13px 44px 13px 13px; border:1px solid var(--border); border-radius:var(--radius-small, 6px); outline:none; font:inherit; font-size:15px; background:var(--soft); color:var(--text); transition:border-color var(--motion), box-shadow var(--motion), background var(--motion); }
input:focus { border-color:var(--accent); background:var(--card); box-shadow:0 0 0 4px var(--focus); }
.toggle-pass { position:absolute; right:8px; top:50%; transform:translateY(-50%); width:34px; height:34px; border:0; border-radius:var(--radius-small, 6px); display:grid; place-items:center; cursor:pointer; background:transparent !important; color:var(--muted) !important; padding:0; font-size:17px; }
.toggle-pass:hover { background:var(--soft) !important; color:var(--text) !important; }
.submit-btn { width:100%; margin-top:8px; padding:13px 15px; border:1px solid var(--border); border-radius:var(--radius-small, 6px); background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--accent2))) !important; color:var(--button-text, white) !important; font-size:15px; font-weight:900; cursor:pointer; box-shadow:0 14px 28px var(--glow); transition:transform var(--motion), box-shadow var(--motion), filter var(--motion); }
.submit-btn:hover { transform:translateY(-1px); box-shadow:0 18px 34px var(--glow); filter:brightness(1.05); }
.submit-btn:disabled { cursor:wait; opacity:.76; transform:none; filter:none; }
.error { background:color-mix(in srgb, #ef4444 16%, var(--card)); color:color-mix(in srgb, #ef4444 72%, var(--text)); border:1px solid color-mix(in srgb, #ef4444 42%, var(--border)); padding:10px 12px; border-radius:var(--radius-small, 6px); margin:0 0 14px; font-size:14px; font-weight:800; }
.login-footer { margin-top:18px; color:var(--muted); font-size:12px; text-align:center; }
body.theme-neon .login-shell, body.theme-circuitos .login-shell, body.theme-radar .login-shell { box-shadow:0 0 34px var(--glow); }
body.theme-carbono .login-panel { background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 2px, transparent 2px 9px); }
@media (max-width: 780px) { .login-shell { grid-template-columns:1fr; min-height:auto; } .login-brand { min-height:230px; padding:30px; } .brand-title { font-size:30px; } .login-panel { padding:34px 26px; } }