/* ══════════════════════════════════════════════════════════════
   login.css
   Sign-in screen.
   ══════════════════════════════════════════════════════════════ */

  /* ══════════════════════════════
     LOGIN SCREEN
  ══════════════════════════════ */
  .login-screen {
    position: fixed; inset: 0; z-index: 9999;
    background: var(--primary);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
  }
  .login-screen.hidden { display: none; }
  .login-box {
    background: #fff; border-radius: 16px;
    padding: 40px 36px; width: 100%; max-width: 380px;
    box-shadow: 0 32px 80px rgba(0,0,0,.4);
    animation: slideUp .25s ease;
  }
  .login-logo { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; margin-bottom: 28px; }
  .login-logo i { font-size: 40px; color: var(--primary); }
  .login-logo-img { height: 64px; width: auto; display: block; border-radius: 8px; }
  .login-logo-text { font-size: 18px; font-weight: 700; color: var(--primary); letter-spacing: -.01em; }
  .login-logo-sub { font-size: 11px; color: var(--text-muted); font-weight: 400; display: block; }
  .login-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 18px; }
  .login-field { margin-bottom: 14px; }
  .login-field label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); margin-bottom: 6px; }
  .login-field input {
    width: 100%; padding: 10px 12px; border: 1.5px solid var(--border);
    border-radius: var(--radius); font-family: inherit; font-size: 14px;
    color: var(--text); outline: none; transition: border-color .15s, box-shadow .15s;
  }
  .login-field input:focus { border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(24,95,165,.12); }
  .login-field input.error { border-color: var(--accent-red); box-shadow: 0 0 0 3px rgba(163,45,45,.1); }
  .login-error { font-size: 12px; color: var(--accent-red); margin-bottom: 12px; display: none; }
  .login-error.show { display: block; }
  .login-btn {
    width: 100%; padding: 11px; background: var(--primary); color: #fff;
    border: none; border-radius: var(--radius); font-family: inherit;
    font-size: 14px; font-weight: 600; cursor: pointer;
    transition: background .15s; letter-spacing: .01em;
  }
  .login-btn:hover { background: var(--primary-hover); }
  .login-btn:active { transform: translateY(1px); }
  .login-footer { margin-top: 20px; font-size: 11px; color: var(--text-muted); text-align: center; }