.v4-login-wrapper {
  min-height: calc(100vh - 200px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #f8f9fa;
}
@media screen and (max-width: 767px) {
  .v4-login-wrapper { padding: 0; background: #fff; min-height: calc(100vh - 160px); }
}

.v4-login-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  max-width: 1200px;
}

.v4-login-logo { text-align: center; flex: 1; }
.v4-login-logo img { width: 180px; height: auto; }
.v4-login-logo a { display: inline-block; text-decoration: none; }

.v4-back-button {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 20px; background: transparent; border: 1px solid #ddd;
  border-radius: 8px; color: #333; font-size: 14px; font-weight: 500;
  text-decoration: none; cursor: pointer; transition: all 0.3s;
}
.v4-back-button:hover { background: #f8f9fa; border-color: #ccc; color: #000; }
.v4-back-button i { font-size: 16px; }

.v4-phone-info {
  display: flex; align-items: center; gap: 8px; color: #333; font-size: 14px; font-weight: 600;
  text-decoration: none; padding: 10px 20px; border: 1px solid #ddd; border-radius: 8px;
  transition: all 0.3s; white-space: nowrap;
}
.v4-phone-info:hover { background: #f8f9fa; border-color: #2da44e; color: #2da44e; }
.v4-phone-info i { font-size: 16px; color: #2da44e; }

@media screen and (max-width: 767px) {
  .v4-login-header { padding: 15px 20px; justify-content: center; background: #fff; position: relative; }
  .v4-login-logo { flex: 1; text-align: center; }
  .v4-login-logo img { width: 140px; }
  .v4-back-button span { display: none; }
  .v4-back-button i { font-size: 20px; color: #333; }
  .v4-back-button:hover { background: #e8e8e8; }
  .v4-phone-info { display: none; }
}

.v4-login-container {
  width: 100%; max-width: 480px; background: #fff;
  border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); overflow: hidden;
}
@media screen and (max-width: 767px) {
  .v4-login-container { box-shadow: none; border-radius: 0; max-width: 100%; }
}

.v4-login-content { padding: 30px 40px 40px; }
@media screen and (max-width: 767px) { .v4-login-content { padding: 25px 20px 30px; } }

.v4-form-group { margin-bottom: 20px; position: relative; }
.v4-form-group label { display: block; font-size: 14px; font-weight: 500; color: #333; margin-bottom: 8px; }
.v4-form-input-wrapper { position: relative; }
.v4-form-input-wrapper.error .v4-form-input { border-color: #dc3545; background: #fff5f5; }
.v4-form-input-icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  font-size: 18px; color: #999; pointer-events: none;
}
.v4-form-input {
  width: 100%; padding: 14px 16px 14px 48px; font-size: 15px;
  border: 1px solid #ddd; border-radius: 10px; outline: none; transition: all 0.3s; background: #f8f9fa;
}
.v4-form-input:focus { border-color: #2da44e; background: #fff; box-shadow: 0 0 0 3px rgba(45,164,78,0.1); }
.v4-form-input:disabled { background: #e9ecef; cursor: not-allowed; }
.v4-form-input::placeholder { color: #aaa; }
@media screen and (max-width: 767px) { .v4-form-input { font-size: 16px; } }

.v4-submit-btn {
  width: 100%; padding: 16px; font-size: 16px; font-weight: 600; color: #fff;
  background: #2da44e; border: none; border-radius: 10px; cursor: pointer;
  transition: all 0.3s; box-shadow: 0 4px 12px rgba(45,164,78,0.2);
}
.v4-submit-btn:hover { background: #248a3d; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(45,164,78,0.3); }
.v4-submit-btn:active { transform: translateY(0); }
.v4-submit-btn:disabled { background: #ccc; cursor: not-allowed; transform: none; box-shadow: none; }
.v4-submit-btn.loading { position: relative; color: transparent; pointer-events: none; }
.v4-submit-btn.loading::after {
  content: ''; position: absolute; width: 20px; height: 20px;
  top: 50%; left: 50%; margin-left: -10px; margin-top: -10px;
  border: 3px solid #fff; border-radius: 50%; border-top-color: transparent;
  animation: spinner 0.6s linear infinite;
}
@keyframes spinner { to { transform: rotate(360deg); } }

.v4-security-badge {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 24px; padding: 12px; background: #f8f9fa; border-radius: 8px; font-size: 13px; color: #666;
}
.v4-security-badge i { font-size: 18px; color: #2da44e; }
@media screen and (max-width: 767px) { .v4-security-badge { display: none; } }

.v4-otp-input-section { margin-top: 24px; }
.v4-otp-label-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.v4-otp-label-row label { font-size: 15px; font-weight: 600; color: #2d3436; margin: 0; }
.v4-otp-timer { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: #2da44e; }
.v4-otp-timer i { font-size: 16px; }
.v4-otp-resend-btn {
  background: none; border: none; color: #666; font-size: 14px;
  cursor: pointer; text-decoration: underline; padding: 8px; transition: color 0.3s;
}
.v4-otp-resend-btn:hover:not(:disabled) { color: #2da44e; }
.v4-otp-resend-btn:disabled { color: #ccc; cursor: not-allowed; text-decoration: none; }
.v4-otp-phone-masked { font-size: 16px; font-weight: 600; color: #2d3436; margin: 0 0 4px 0; }
.v4-otp-phone-icon { color: #2da44e; font-size: 24px; }
.v4-otp-phone-text { margin-left: 12px; }
.v4-otp-resend-wrapper { margin-top: 16px; text-align: center; }

.v4-hidden { display: none; }
.v4-phone-hint { display: block; margin-top: 8px; color: #999; font-size: 13px; }