tyapi-frontend/src/assets/styles/auth.css

/* 认证页面全局样式 */

/* 输入框样式优化 */
.auth-input :deep(.el-input__wrapper) {
  border-radius: 10px !important;
  transition: all 0.3s ease !important;
  border: 1px solid #d5deef !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  min-height: 44px !important;
}

.auth-input :deep(.el-input__wrapper:hover) {
  border-color: #7aa9f8 !important;
}

.auth-input :deep(.el-input__wrapper.is-focus) {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.13) !important;
}

/* 按钮样式优化 */
.auth-button :deep(.el-button--primary) {
  border-radius: 10px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 55%, #1e40af 100%) !important;
  border: none !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.25) !important;
}

.auth-button :deep(.el-button--primary:hover) {
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.32) !important;
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
}

.auth-button :deep(.el-button--primary:active) {
  transform: translateY(0) !important;
}

/* Radio button 样式优化 */
.auth-method-tabs {
  border-radius: 12px;
  padding: 4px;
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  border: 1px solid #e2e8f0;
  display: flex !important;
  width: 100%;
}

.auth-method-tab {
  flex: 1;
}

.auth-method-tabs :deep(.el-radio-button) {
  flex: 1;
  display: block;
}

.auth-method-tabs :deep(.el-radio-button__inner) {
  width: 100%;
  border-left: none !important;
}

.auth-method-tabs :deep(.el-radio-button:first-child .el-radio-button__inner) {
  border-radius: 10px !important;
}

.auth-method-tabs :deep(.el-radio-button:last-child .el-radio-button__inner) {
  border-radius: 10px !important;
}

.auth-method-tabs :deep(.el-radio-button.is-active .el-radio-button__inner) {
  border-color: transparent !important;
}

.auth-radio :deep(.el-radio-button__inner) {
  width: 100% !important;
  border: none !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #475569 !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  padding: 10px 14px !important;
  box-shadow: none !important;
}

.auth-radio :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12) !important;
}

.auth-radio :deep(.el-radio-button__inner:hover) {
  color: #0f172a !important;
}

/* 表单标签样式 */
.auth-label {
  @apply block text-sm font-medium text-gray-700 mb-2;
}

/* 链接样式 */
.auth-link {
  @apply text-slate-500 hover:text-blue-700 transition-colors mx-2;
}

/* 卡片样式 */
.auth-card {
  @apply bg-white/96 shadow-2xl rounded-2xl border border-white/40;
}

/* 标题样式 */
.auth-title {
  @apply text-2xl font-bold text-slate-900 mb-2;
}

.auth-subtitle {
  @apply text-slate-500 text-sm;
}

/* 响应式优化 */
@media (max-width: 640px) {
  .auth-input :deep(.el-input__wrapper) {
    border-radius: 6px !important;
  }

  .auth-button :deep(.el-button--primary) {
    border-radius: 6px !important;
  }
}

/* 动画效果 */
.auth-fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 加载状态样式 */
.auth-loading {
  @apply opacity-75 pointer-events-none;
}

/* 错误状态样式 */
.auth-error :deep(.el-input__wrapper) {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1) !important;
}

/* 成功状态样式 */
.auth-success :deep(.el-input__wrapper) {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.1) !important;
}