/* Modern login: split layout, light + dark (body.dark-mode). */
.lg, .lg *, .lg *::before, .lg *::after { box-sizing:border-box; }
.lg { --bg:#f4f5f9; --surface:#fff; --border:#e3e6ee; --text:#1f2433; --muted:#7b8194; --accent:#6366f1; --accent-600:#4f46e5; }
body.dark-mode.lg-body { --bg:#11141f; --surface:#1b1f2e; --border:#2a3045; --text:#e8eaf2; --muted:#98a0b8; --accent:#818cf8; --accent-600:#6366f1; }
html, body.lg-body { margin:0; min-height:100%; }
body.lg-body { font-family:'Inter','Nunito',system-ui,-apple-system,'Segoe UI',sans-serif; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; }
.lg { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); min-height:100vh; }
.lg-hero { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px 56px; color:#fff; background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 55%,#db2777 130%); }
.lg-hero::before, .lg-hero::after { content:""; position:absolute; border-radius:50%; background:rgba(255,255,255,.08); }
.lg-hero::before { width:460px; height:460px; right:-140px; top:-120px; }
.lg-hero::after { width:320px; height:320px; left:-90px; bottom:-110px; }
.lg-hero > * { position:relative; z-index:1; }
.lg-brand { display:flex; align-items:center; gap:12px; font-weight:700; font-size:1.2rem; }
.lg-brand img { max-height:42px; max-width:160px; background:#fff; border-radius:12px; padding:6px 10px; }
.lg-hero h2 { font-size:2.4rem; line-height:1.15; font-weight:700; letter-spacing:-.02em; margin:0 0 14px; color:#fff; }
.lg-hero p { margin:0; max-width:420px; font-size:1.02rem; line-height:1.6; opacity:.85; }
.lg-points { list-style:none; margin:28px 0 0; padding:0; display:grid; gap:12px; font-size:.92rem; }
.lg-points li { display:flex; align-items:center; gap:10px; }
.lg-points li::before { content:"\2713"; width:22px; height:22px; border-radius:50%; flex:none; display:inline-flex; align-items:center; justify-content:center; font-size:.75rem; background:rgba(255,255,255,.2); }
.lg-hero small { opacity:.7; }
.lg-main { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 24px; position:relative; }
.lg-card { width:100%; max-width:400px; }
.lg-mobile-logo { display:none; margin-bottom:28px; }
.lg-mobile-logo img { max-height:44px; }
.lg-card h1 { font-size:1.65rem; font-weight:700; letter-spacing:-.02em; margin:0 0 6px; color:var(--text); }
.lg-card .lead { color:var(--muted); margin:0 0 28px; font-size:.95rem; }
.lg-alert { padding:12px 14px; border-radius:12px; font-size:.86rem; margin-bottom:18px; }
.lg-alert.err { background:rgba(244,63,94,.12); color:#e11d48; }
.lg-alert.ok { background:rgba(16,185,129,.12); color:#0e9f6e; }
.lg-field { margin-bottom:18px; }
.lg-field label { display:block; font-size:.8rem; font-weight:600; margin-bottom:6px; color:var(--text); }
.lg-input { position:relative; }
.lg-input input { width:100%; height:46px; padding:0 44px 0 42px; border-radius:12px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:.95rem; outline:0; transition:border-color .15s, box-shadow .15s; }
.lg-input input:focus { border-color:var(--accent); box-shadow:0 0 0 4px rgba(99,102,241,.14); }
.lg-input > i { position:absolute; left:14px; top:0; height:46px; display:flex; align-items:center; color:var(--muted); font-size:15px; pointer-events:none; }
.lg-input .toggle { position:absolute; right:6px; top:5px; width:36px; height:36px; border:0; border-radius:9px; background:transparent; color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.lg-input .toggle:hover { background:rgba(99,102,241,.1); color:var(--accent); }
.lg-btn { width:100%; height:46px; border:0; border-radius:12px; font-weight:600; font-size:.95rem; color:#fff; cursor:pointer; background:var(--accent); transition:background .15s, transform .05s, box-shadow .15s; box-shadow:0 6px 16px rgba(99,102,241,.3); }
.lg-btn:hover { background:var(--accent-600); }
.lg-btn:active { transform:translateY(1px); }
.lg-btn[disabled] { opacity:.7; cursor:wait; }
.lg-demo { display:flex; gap:8px; margin-top:14px; }
.lg-demo button { flex:1; height:38px; border-radius:10px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:.8rem; font-weight:600; cursor:pointer; }
.lg-demo button:hover { border-color:var(--accent); color:var(--accent); }
.lg-foot { position:absolute; bottom:20px; left:0; right:0; text-align:center; font-size:.75rem; color:var(--muted); }
@media (max-width:900px) {
  .lg { grid-template-columns:minmax(0,1fr); }
  .lg-main { min-width:0; }
  .lg-hero { display:none; }
  .lg-mobile-logo { display:block; }
  .lg-main { min-height:100vh; }
}
[dir="rtl"] .lg-input input { padding:0 42px 0 44px; }
[dir="rtl"] .lg-input > i { left:auto; right:14px; }
[dir="rtl"] .lg-input .toggle { right:auto; left:6px; }