body { padding: 16px; overflow-x: hidden; display: flex; align-items: center; justify-content: center; min-height: 100vh; }

@media (max-width: 640px) {
  .card { 
    padding: 28px 22px 26px; 
    margin: 0 auto; 
    width: 100%; 
    max-width: 100%; 
    border-radius: 14px; 
    box-shadow: 0 4px 16px rgba(21,101,192,0.12); 
  }
  .logo { 
    margin-bottom: 24px; 
    gap: 10px; 
    justify-content: center; 
  }
  .logo-icon { 
    width: 40px; 
    height: 40px; 
    font-size: 1.18rem; 
    border-radius: 9px; 
  }
  .logo-text { 
    font-size: 1.12rem; 
    font-weight: 800; 
    letter-spacing: 0.02em; 
  }
  h1 { 
    font-size: 1.18rem; 
    font-weight: 700; 
    margin-bottom: 6px; 
    letter-spacing: -0.01em; 
  }
  .sub { 
    font-size: 0.82rem; 
    margin-bottom: 26px; 
    line-height: 1.4; 
  }
  .field { 
    margin-bottom: 16px; 
  }
  label { 
    font-size: 0.76rem; 
    font-weight: 700; 
    margin-bottom: 7px; 
    letter-spacing: 0.05em; 
  }
  input { 
    height: 44px; 
    padding: 0 14px; 
    font-size: 0.92rem; 
    border-radius: 8px; 
    letter-spacing: -0.01em; 
  }
  .btn { 
    height: 46px; 
    font-size: 0.95rem; 
    font-weight: 700; 
    border-radius: 8px; 
    letter-spacing: 0.01em; 
  }
  .error-box { 
    font-size: 0.84rem; 
    padding: 11px 14px; 
    margin-bottom: 20px; 
    border-radius: 7px; 
  }
  .footer { 
    margin-top: 14px; 
    font-size: 0.76rem; 
  }
}