/* ===== Login page (scoped with .lgn-*) ===== */
:root{
  --lgn-bg1:#f8fafc; --lgn-bg2:#eef2ff;
  --lgn-card:#ffffff; --lgn-line:#e5e7eb;
  --lgn-text:#0f172a; --lgn-muted:#64748b;
  --lgn-primary:#0d6efd;
}
@media (prefers-color-scheme: dark){
  :root{
    --lgn-bg1:#0a0f1a; --lgn-bg2:#0b1220;
    --lgn-card:#0b1220; --lgn-line:#1f2937;
    --lgn-text:#e5e7eb; --lgn-muted:#94a3b8;
  }
}

.lgn-body{
  min-height:100vh; margin:0; color:var(--lgn-text);
  background:linear-gradient(180deg,var(--lgn-bg1) 0,var(--lgn-bg2) 100%);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.lgn-wrap{
  min-height:calc(100vh - 40px);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.lgn-card{
  width:100%; max-width:460px;
  background:var(--lgn-card);
  border:1px solid var(--lgn-line);
  border-radius:16px; padding:22px;
  box-shadow:0 8px 24px rgba(2,8,23,.06);
}
.lgn-title{ margin:0 0 6px; font-size:24px; font-weight:800; letter-spacing:.2px }
.lgn-desc{ margin:0 0 14px; color:var(--lgn-muted); font-size:14px }

.lgn-label{ display:block; font-weight:600; margin:10px 0 6px }
.lgn-input{
  width:100%; padding:12px 12px;
  border:1px solid var(--lgn-line); border-radius:12px;
  background:#fff; font-size:14px; outline:none;
}
.lgn-input:focus{
  border-color:#93c5fd; box-shadow:0 0 0 3px rgba(59,130,246,.25);
}

.lgn-input-wrap{ position:relative }
.lgn-toggle{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  border:1px solid var(--lgn-line); background:#f8fafc; color:var(--lgn-muted);
  padding:6px 10px; border-radius:10px; cursor:pointer;
}
.lgn-toggle:hover{ filter:brightness(.96) }

.lgn-btn{
  width:100%; margin-top:14px;
  border:0; border-radius:12px; padding:12px 14px;
  background:var(--lgn-primary); color:#fff; font-weight:700; cursor:pointer;
}
.lgn-btn:hover{ filter:brightness(.96) }

.lgn-note{
  margin:8px 0 0; padding:10px 12px;
  border:1px dashed var(--lgn-line); border-radius:12px;
  background:rgba(148,163,184,.08); color:var(--lgn-text); font-size:14px
}

.lgn-footer{ margin-top:14px; text-align:center; color:var(--lgn-muted); font-size:13px }