/* ============ 年级选择卡片增强（上下排布局） ============ */

/* 年级网格容器 */
.grade-pick-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
}

/* 卡片主体：上下竖排，居中 */
.grade-pick {
  border: 2px solid #e8ecf1 !important;
  border-radius: 16px !important;
  padding: 14px 8px 12px !important;
  cursor: pointer !important;
  background: #fff !important;
  transition: all .2s ease !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  position: relative;
  overflow: hidden;
}
.grade-pick::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40px;
  background: linear-gradient(180deg, rgba(245,130,174,.05) 0%, transparent 100%);
  pointer-events: none;
}

/* 第一行：数字徽章（圆角方块，渐变底） */
.grade-pick > div:nth-child(1) {
  font-size: 19px !important;
  font-weight: 800 !important;
  width: 34px !important;
  height: 34px !important;
  line-height: 34px !important;
  text-align: center !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #6baeff, #4a8ff5) !important;
  color: #fff !important;
  margin-bottom: 7px !important;
  box-shadow: 0 2px 8px rgba(74,143,245,.25) !important;
}

/* 第二行：年级名（主视觉） */
.grade-pick > div:nth-child(2) {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  margin: 0 !important;
  letter-spacing: 1px !important;
}

/* 第三行：科数（粉色小胶囊） */
.grade-pick > div:nth-child(3) {
  display: inline-block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--primary) !important;
  background: rgba(245,130,174,.10) !important;
  padding: 2px 10px !important;
  border-radius: 10px !important;
  margin-top: 6px !important;
}

/* 选中态 */
.grade-pick.selected {
  border-color: var(--primary) !important;
  box-shadow: 0 3px 14px rgba(245,130,174,.25), 0 1px 3px rgba(0,0,0,.05) !important;
  background: linear-gradient(180deg, #fff8fb 0%, #fff 45%) !important;
}
.grade-pick.selected > div:nth-child(1) {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
  box-shadow: 0 2px 8px rgba(245,130,174,.35) !important;
}
.grade-pick:active {
  transform: scale(.96) !important;
}

/* 头像选择行 */
.avatar-pick-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: center !important;
}
.avatar-pick {
  font-size: 28px !important;
  width: 48px !important;
  height: 48px !important;
  line-height: 44px !important;
  text-align: center !important;
  border-radius: 50% !important;
  border: 2px solid #e9ecef !important;
  cursor: pointer !important;
  background: #fff !important;
  transition: all .2s ease !important;
}
.avatar-pick:active { transform: scale(.92); }
.avatar-pick.selected {
  border-color: var(--primary) !important;
  box-shadow: 0 2px 10px rgba(245,130,174,.3) !important;
  background: #fff8fb !important;
}

/* 选择年级标题微调 */
.login-card > div[style*="font-size:13px"] {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  margin: 18px 0 10px !important;
}

/* ============ 学科标题栏：浅色背景上文字强制深色 ============ */
.subject-header {
  color: #1a1a2e !important;
}
.subject-header .sh-title {
  color: #1a1a2e !important;
}
.subject-header .sh-desc {
  color: #444 !important;
}
.subject-header .sh-big {
  /* 图标保持原色，不覆盖 */
}