:root {
  --container-padding: 20px;
  --container-margin: 20px;
  --glass-bg-light: rgba(255, 255, 255, 0.05);
  --glass-bg-dark: rgba(0, 0, 0, 0.15);
  --glass-border: 1px solid rgba(100, 180, 255, 0.5);
  --glass-shadow: 0 8px 32px rgba(10, 8, 8, 0.2);
}

.base-container {
  padding: var(--container-padding);
  margin: var(--container-margin) 0;
  border-radius: 8px;
}

/* 玻璃容器 */
.glass-container {
  width: 80%;
  max-width: 1400px;
  min-height: calc(100vh - 350px);
  max-height: calc(100vh - 120px);
  margin: 0 auto;
  padding: 14px;
  background: var(--glass-bg-light);
  backdrop-filter: blur(2px);
  border-radius: 16px;
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition: all 0.3s;
  overflow: hidden;
  /* 禁止滚动 */
}

.dark .glass-container {
  background: var(--glass-bg-dark);
  backdrop-filter: blur(1px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.form-container {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.card {
  padding: var(--container-padding);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 16px;
}

.dark .card {
  background: rgba(30, 30, 30, 0.9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.card.content-card {
  padding: 14px;
  background: rgb(255, 255, 255);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(1px);
}

.dark .card.content-card {
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(1px);
}