page {
  background: linear-gradient(180deg, #eaf6f1 0%, #f5f6fa 360rpx);
  color: #1a1a2e;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.set-page {
  padding: 24rpx 24rpx 64rpx;
  min-height: 100vh;
  box-sizing: border-box;
}

/* === 用户卡片（翡翠绿，呼应首页头部） === */
.user-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #29b785 0%, #1a8a63 100%);
  border-radius: 28rpx;
  box-shadow: 0 12rpx 32rpx rgba(26, 138, 99, 0.25);
  margin-bottom: 32rpx;
}

.user-card::before,
.user-card::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  pointer-events: none;
}

.user-card::before {
  width: 240rpx;
  height: 240rpx;
  top: -110rpx;
  right: -60rpx;
}

.user-card::after {
  width: 140rpx;
  height: 140rpx;
  bottom: -70rpx;
  left: -30rpx;
  background: rgba(255, 255, 255, 0.05);
}

.user-info {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  padding: 44rpx 32rpx;
  gap: 24rpx;
}

.user-avatar {
  width: 104rpx;
  height: 104rpx;
  background-color: rgba(255, 255, 255, 0.2);
  border: 2rpx solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-avatar.default-avatar {
  background-color: rgba(255, 255, 255, 0.16);
}

.avatar-text {
  font-size: 40rpx;
  font-weight: 600;
  color: #ffffff;
}

.avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.name-row {
  display: flex;
  align-items: center;
}

.level-tag {
  margin-left: 12rpx;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 16rpx;
  padding: 4rpx 14rpx;
  flex-shrink: 0;
}

.level-text {
  font-size: 20rpx;
  color: #ffffff;
}

.user-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.user-name,
.login-title {
  font-size: 34rpx;
  font-weight: 700;
  color: #ffffff;
}

.login-desc {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.65);
}

.login-btn {
  padding: 14rpx 32rpx;
  background-color: #ffffff;
  border-radius: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.login-btn:active {
  transform: scale(0.95);
}

.login-btn-text {
  font-size: 26rpx;
  color: #1a8a63;
  font-weight: 600;
}

/* === 菜单分组 === */
.section {
  margin-bottom: 24rpx;
}

.card {
  background-color: #ffffff;
  border-radius: 24rpx;
  border: 1rpx solid rgba(31, 61, 56, 0.06);
  box-shadow: 0 6rpx 20rpx rgba(31, 61, 56, 0.07);
}

.menu-list {
  padding: 8rpx 28rpx;
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28rpx 0;
  border-bottom: 1rpx solid rgba(31, 61, 56, 0.06);
  transition: opacity 0.2s ease;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item:active {
  opacity: 0.6;
}

.menu-left {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.menu-icon {
  width: 64rpx;
  height: 64rpx;
  border-radius: 18rpx;
  background-color: rgba(26, 138, 99, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-icon.danger-bg {
  background-color: rgba(224, 90, 78, 0.08);
}

.menu-title {
  font-size: 28rpx;
  color: #1a1a1a;
  font-weight: 500;
}

.menu-title.danger {
  color: #e05a4e;
}

/* === 版本信息 === */
.version-info {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx 0;
}

.version-text {
  font-size: 24rpx;
  color: #9fb0a9;
}

/* === 登录弹窗 === */
.login-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.login-popup-content {
  width: 82%;
  max-width: 600rpx;
  background-color: #ffffff;
  border-radius: 28rpx;
  overflow: hidden;
  box-shadow: 0 16rpx 48rpx rgba(31, 61, 56, 0.18);
}

.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx 32rpx 0;
}

.popup-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #1a1a1a;
}

.popup-close {
  width: 56rpx;
  height: 56rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.popup-close:active {
  background-color: #f3f4f6;
}

.popup-body {
  padding: 32rpx;
}

.form-item {
  margin-bottom: 24rpx;
}

.form-item:last-child {
  margin-bottom: 0;
}

.form-label {
  display: block;
  font-size: 26rpx;
  color: #6b7280;
  margin-bottom: 12rpx;
  font-weight: 500;
}

.form-input {
  width: 100%;
  height: 80rpx;
  background-color: #f7f9f8;
  border-radius: 16rpx;
  padding: 0 24rpx;
  font-size: 28rpx;
  color: #1a1a1a;
  box-sizing: border-box;
  border: 1rpx solid #e5eae8;
}

.form-input:focus {
  border-color: #1a8a63;
}

.popup-footer {
  padding: 0 32rpx 32rpx;
}

.submit-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(135deg, #29b785, #1a8a63);
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6rpx 18rpx rgba(26, 138, 99, 0.28);
  transition: all 0.2s ease;
}

.submit-btn:active {
  transform: scale(0.98);
  opacity: 0.9;
}

.submit-btn-text {
  font-size: 30rpx;
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 4rpx;
}