@media (max-width: 768px) {
  body { background: linear-gradient(180deg, #effffb, #f8fbff); }
  .auth-shell, .create-shell, .login-shell { min-height: 100svh; padding: 16px; display: block; }
  .auth-card, .create-card, .form-card, .login-card { width: 100%; border-radius: 28px; padding: 20px; margin: 14px auto; box-shadow: 0 22px 55px rgba(13,51,82,.14); }
  .site-logo, .auth-logo, .create-logo { max-width: 210px; height: auto; }
  h1 { font-size: clamp(30px, 9vw, 42px); line-height: 1; }
  form { display: grid; gap: 14px; }
  .form-grid, .create-grid, .auth-grid { grid-template-columns: 1fr !important; gap: 14px; }
  label { font-size: 14px; font-weight: 900; }
  input, select, textarea { min-height: 52px; border-radius: 16px; font-size: 16px; width: 100%; }
  .password-wrap { position: relative; }
  .password-toggle { min-height: 42px; padding: 8px 12px; border-radius: 12px; }
  button, .button, .primary-btn { width: 100%; min-height: 54px; border-radius: 17px; font-size: 16px; font-weight: 900; }
  .plan-cards, .plan-grid { grid-template-columns: 1fr; gap: 12px; }
}