#root {
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}

.card {
  padding: 2em;
}

.read-the-docs {
  color: #888;
}

.app-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #1890ff 0%, #1890ff 50%, #ffffff 50%, #ffffff 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.app-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><rect width="1" height="1" fill="rgba(255,255,255,0.1)"/></svg>');
  opacity: 0.1;
  animation: backgroundMove 20s linear infinite;
  pointer-events: none;
}

@keyframes backgroundMove {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 40px 40px;
  }
}

/* 移除原有大卡片样式影响 */
.user-info-fixed, .user-info-card {
  display: none !important;
}

/* 添加响应式设计 */
@media (max-width: 768px) {
  .login-container {
    padding: 32px;
    margin: 16px;
    min-width: auto;
  }
  
  .login-title {
    font-size: 20px;
    margin-bottom: 24px;
  }
  
  .ant-btn-primary {
    height: 40px;
    font-size: 14px;
    padding: 0 24px;
  }
}

.back-button {
  color: #666;
  border: none;
  background: transparent;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

.back-button:hover {
  color: #1890ff;
  background: rgba(24, 144, 255, 0.1);
}

.back-button .anticon {
  margin-right: 4px;
}

.user-info-fixed {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 1000;
  min-width: 320px;
}

.main-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 0;
  margin-top: 80px;
}
