:root {
  --bs-body-font-size: 1rem;
  --bs-body-font-color: #2a363b;
  --bs-body-line-height: 1.5;
  --bs-body-color: #2a363b;
  --bs-active-color: #b65148;
  --bs-hover-color: #a0453d;
  --bs-gray: #666666;
  --bs-btn-color: #fff;
  --bs-btn-bg: #6c757d;
  --bs-btn-border-color: #6c757d;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #5c636a;
  --bs-btn-hover-border-color: #565e64;
  --bs-btn-focus-shadow-rgb: 130, 138, 145;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #565e64;
  --bs-btn-active-border-color: #51585e;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #6c757d;
  --bs-btn-disabled-border-color: #6c757d;
  --bs-form-check-input-checked-bg-color: #b65148;
  --bs-form-check-input-checked-border-color: #b65148;
  --bs-pagination-active-bg: #6c757d;
  --bs-pagination-active-border-color: #6c757d;
  --bs-nav-link-font-size: 1rem;
  --bs-accordion-active-bg: #6c757d;
  --bs-breadcrumb-divider: ">";
  --bs-link-color-rgb: var(--bs-active-color) !important;
  --bs-link-hover-color-rgb: var(--bs-hover-color) !important;
  --bs-card-color:var(--bs-body-color);
  --bs-card-padding-x: 1rem;
  --bs-card-padding-y: 0.5rem;
  --bs-card-spacer-x: 1rem;
  --bs-card-spacer-y: 0.5rem;
}
.form-check-input:checked {
  background-color: var(--bs-form-check-input-checked-bg-color);
  border-color: var(--bs-form-check-input-checked-border-color);
}
/* 表单元素样式 */
.form-control {
  border: 1px solid #e9ecef;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  /* 移除transform过渡 */
  padding: 8px 16px;
}

.form-control:focus {
  border-color: #b65148;
  box-shadow: 0 0 0 0.2rem rgba(182, 81, 72, 0.25);
}
/* 全屏斜向波浪背景 - 注册页面专用 */
body {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #f1f3f4 100%);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  background-attachment: fixed;
}
.card-register{
  font-size: 0.875rem;
}
.card-register span {
  font-size: 0.75rem;
  color: #6c757d;
}
.card-register:hover {
  box-shadow: 0 12px 40px rgba(182, 81, 72, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.08);
}

.card-register a {
  color: var(--bs-active-color);
  text-decoration: none;
}
.card-register input {
  font-size: 0.75rem;
}
.card-register .btn {
  font-size: 0.875rem;
}

.form-control:focus {
  border-color: #b65148;
  box-shadow: 0 0 0 0.2rem rgba(182, 81, 72, 0.25);
}
/* 按钮样式 */
.btn-secondary {
  background: linear-gradient(135deg, #a04740, #8b3d36);
  border: none;
  padding: 8px 16px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  background: linear-gradient(135deg, #a04740, #8b3d36);
  box-shadow: 0 5px 15px rgba(182, 81, 72, 0.3);
}

.btn-outline-secondary {
  border-color: #6c757d;
  color: #6c757d;
  transition: all 0.3s ease;
}

.btn-outline-secondary:hover {
  background-color: #6c757d;
  border-color: #6c757d;
  transform: translateY(-1px);
}

/* 斜向粒子流 */
.angled-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.angled-particle {
  position: absolute;
  width: var(--particle-size);
  height: var(--particle-size);
  background: var(--particle-color);
  border-radius: 50%;
  opacity: 0;
  animation: angledFloat var(--animation-duration) linear infinite;
  animation-delay: var(--animation-delay);
}

/* 斜向浮动动画 */
@keyframes angledFloat {
  0% {
    transform: translate3d(-100px, 100vh, 0) rotate(-15deg) scale(0.5);
    opacity: 0;
  }
  10% {
    opacity: var(--particle-opacity);
    transform: translate3d(0, 90vh, 0) rotate(-15deg) scale(1);
  }
  90% {
    opacity: var(--particle-opacity);
    transform: translate3d(var(--x-drift), 10vh, 0) rotate(-15deg) scale(1);
  }
  100% {
    transform: translate3d(100px, -10vh, 0) rotate(-15deg) scale(0.8);
    opacity: 0;
  }
}



/* 注册卡片 - 毛玻璃效果 */
.card-register {
  border: none;
  border-radius: 24px;
  box-shadow: 0 12px 48px rgba(182, 81, 72, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  transition: all 0.4s ease;
  transform: translateZ(0);
  will-change: transform;
  position: relative;
  z-index: 10;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .angled-particle {
    --particle-size: var(--mobile-size, 4px) !important;
  }
  
  .card-register {
    margin: 15px;
    border-radius: 20px;
  }
  .card-register {
    margin: 10px;
    border-radius: 16px;
  }
  .input-group .btn-sm {
    font-size: 0.75rem !important;
  }
}

/* 波浪容器 - 全屏背景 */
.bg-waves-angled {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
/* 波浪层 - 左右全屏 */
.angled-wave {
  position: absolute;
  width: 300%;  /* 增加到400%宽度 */
  height: 150vh; /* 增加高度覆盖更多区域 */
  left: -150%; /* 调整居中位置 */
  top: -25vh; /* 上下延伸 */
  transform-origin: center center;
}

.angled-wave-1 {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(182, 81, 72, 0.08) 35%,
    rgba(182, 81, 72, 0.12) 50%,
    rgba(182, 81, 72, 0.08) 65%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: waveFlow1 35s ease-in-out infinite;
}

.angled-wave-2 {
  background: linear-gradient(
    125deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(108, 117, 125, 0.06) 30%,
    rgba(108, 117, 125, 0.09) 50%,
    rgba(108, 117, 125, 0.06) 70%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: waveFlow2 40s ease-in-out infinite;
}

.angled-wave-3 {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(182, 81, 72, 0.04) 25%,
    rgba(182, 81, 72, 0.06) 50%,
    rgba(182, 81, 72, 0.04) 75%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: waveFlow3 45s ease-in-out infinite;
}

/* 微调波浪层位置和角度，确保三层协调 */
.angled-wave-1 {
  top: 10%;
  transform-origin: 30% 50%;
}

.angled-wave-2 {
  top: 55%;
  transform-origin: 50% 50%;
}

.angled-wave-3 {
  top: -5%;
  transform-origin: 70% 50%;
}

/* 优化动画范围，减少横向移动距离 */
@keyframes waveFlow1 {
  0%, 100% {
    transform: translateX(-10%) rotate(-6deg); /* 减少移动范围 */
  }
  50% {
    transform: translateX(10%) rotate(-8deg);
  }
}

@keyframes waveFlow2 {
  0%, 100% {
    transform: translateX(-5%) rotate(-12deg);
  }
  50% {
    transform: translateX(5%) rotate(-14deg);
  }
}

@keyframes waveFlow3 {
  0%, 100% {
    transform: translateX(0%) rotate(-18deg);
  }
  50% {
    transform: translateX(8%) rotate(-20deg);
  }
}

/* 渐变边缘羽化，避免硬切 */
.angled-wave-1 {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(182, 81, 72, 0) 15%, /* 增加透明过渡区 */
    rgba(182, 81, 72, 0.08) 35%,
    rgba(182, 81, 72, 0.12) 50%,
    rgba(182, 81, 72, 0.08) 65%,
    rgba(182, 81, 72, 0) 85%, /* 增加透明过渡区 */
    rgba(255, 255, 255, 0) 100%
  );
  animation: waveFlow1 35s ease-in-out infinite;
}

.angled-wave-2 {
  background: linear-gradient(
    125deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(108, 117, 125, 0) 20%,
    rgba(108, 117, 125, 0.06) 40%,
    rgba(108, 117, 125, 0.09) 50%,
    rgba(108, 117, 125, 0.06) 60%,
    rgba(108, 117, 125, 0) 80%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: waveFlow2 40s ease-in-out infinite;
}

.angled-wave-3 {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(182, 81, 72, 0) 25%,
    rgba(182, 81, 72, 0.04) 45%,
    rgba(182, 81, 72, 0.06) 50%,
    rgba(182, 81, 72, 0.04) 55%,
    rgba(182, 81, 72, 0) 75%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: waveFlow3 45s ease-in-out infinite;
}

/* 响应式调整 - 减小尺寸 */
@media (max-width: 768px) {
  .angled-wave {
    width: 250%;  /* 从500%减少到250% */
    left: -75%;   /* 从-200%调整到-75% */
    height: 150vh; /* 从200vh减少到150vh */
    top: -25vh;   /* 从-50vh减少到-25vh */
  }
}

@media (max-width: 576px) {
  .angled-wave {
    width: 200%;  /* 从600%减少到300% */
    left: -100%;  /* 从-250%调整到-100% */
    height: 150vh; /* 从250vh减少到150vh */
    top: -25vh;   /* 从-50vh减少到-25vh */
  }
}

@media (max-width: 375px) {
  .angled-wave {
    width: 250%;  /* 从700%减少到350% */
    left: -125%;  /* 从-300%调整到-125% */
  }
}

/* 同时优化颜色强度，避免过于明显 */
.angled-wave-1 {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(182, 81, 72, 0) 10%,     /* 减少过渡区域 */
    rgba(182, 81, 72, 0.06) 30%,  /* 降低透明度 */
    rgba(182, 81, 72, 0.08) 50%,  /* 降低透明度 */
    rgba(182, 81, 72, 0.06) 70%,
    rgba(182, 81, 72, 0) 90%,
    rgba(255, 255, 255, 0) 100%
  );
}

.angled-wave-2 {
  background: linear-gradient(
    125deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(108, 117, 125, 0) 15%,
    rgba(108, 117, 125, 0.04) 35%,
    rgba(108, 117, 125, 0.06) 50%,
    rgba(108, 117, 125, 0.04) 65%,
    rgba(108, 117, 125, 0) 85%,
    rgba(255, 255, 255, 0) 100%
  );
}

.angled-wave-3 {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(182, 81, 72, 0) 20%,
    rgba(182, 81, 72, 0.02) 40%,
    rgba(182, 81, 72, 0.04) 50%,
    rgba(182, 81, 72, 0.02) 60%,
    rgba(182, 81, 72, 0) 80%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* 小屏幕颜色强度也相应降低 */
@media (max-width: 768px) {
  .angled-wave-1 {
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(182, 81, 72, 0.08) 35%,
      rgba(182, 81, 72, 0.12) 50%,
      rgba(182, 81, 72, 0.08) 65%,
      rgba(255, 255, 255, 0) 100%
    );
  }

  .angled-wave-2 {
    background: linear-gradient(
      125deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(108, 117, 125, 0.06) 40%,
      rgba(108, 117, 125, 0.09) 50%,
      rgba(108, 117, 125, 0.06) 60%,
      rgba(255, 255, 255, 0) 100%
    );
  }

  .angled-wave-3 {
    background: linear-gradient(
      145deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(182, 81, 72, 0.04) 45%,
      rgba(182, 81, 72, 0.06) 50%,
      rgba(182, 81, 72, 0.04) 55%,
      rgba(255, 255, 255, 0) 100%
    );
  }
}