/* ── Login page ─────────────────────────────────────────────────────────── */
  #login-page { display:none; position:fixed; inset:0; background:var(--bg);
    z-index:99998; align-items:center; justify-content:center; flex-direction:column; }
  #login-page.active { display:flex; }
  .login-box { background:var(--surface); border:1px solid var(--border);
    border-radius:16px; padding:40px; width:360px; max-width:95vw; }
  .login-logo { text-align:center; margin-bottom:24px; }
  .login-logo-icon { font-size:40px; margin-bottom:8px; }
  .login-logo h1 { font-size:20px; font-weight:700; margin:0; }
  .login-logo p { font-size:12px; color:var(--muted); margin:4px 0 0; }
  .login-field { margin-bottom:16px; }
  .login-field label { display:block; font-size:11px; font-weight:600;
    color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; }
  .login-field input { width:100%; padding:10px 12px; background:var(--bg);
    border:1px solid var(--border); border-radius:8px; color:inherit;
    font-size:14px; font-family:inherit; box-sizing:border-box; }
  .login-field input:focus { outline:none; border-color:var(--accent); }
  .login-btn { width:100%; padding:11px; background:var(--accent-bg); border:none;
    border-radius:8px; color:var(--text-inverted); font-size:14px; font-weight:600;
    cursor:pointer; margin-top:8px; font-family:inherit; }
  .login-btn:hover { background:var(--accent-bg-hover); }
  .login-btn:disabled { opacity:0.6; cursor:not-allowed; }
  .login-error { background:var(--danger-bg-tint); color:var(--danger); border-radius:6px;
    padding:10px 12px; font-size:12px; margin-top:12px; display:none; }
  .login-error.visible { display:block; }