/* ==========================================================================
   素养星计划 · 页面层
   各页面专属布局与区块样式（仅放无法复用的部分）
   ========================================================================== */

/* ==========================================================================
   首页 · Hero
   ========================================================================== */

.hero {
  position: relative;
  padding: var(--sp-9) 0 var(--sp-8);
  overflow: hidden;
}

.hero__inner {
  display: grid;
  gap: var(--sp-7);
  align-items: center;
}

.hero__eyebrow { margin-bottom: var(--sp-5); }

.hero__title {
  font-size: var(--fs-display);
  font-weight: var(--fw-heavy);
  line-height: 1.14;
  letter-spacing: -0.03em;
}

.hero__title em {
  font-style: normal;
  background: var(--g-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lead {
  margin-top: var(--sp-5);
  max-width: 560px;
  font-size: var(--fs-sub);
  line-height: var(--lh-body);
  color: var(--t-2);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
}

.hero__note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--t-3);
}

/* 数据条 */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-8);
  padding: var(--sp-5);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.stat-strip .stat { text-align: center; }

.stat-strip .stat__num { font-size: 26px; }

/* 浮动成就卡（桌面端） */
.hero__visual { position: relative; }

.orbit-card {
  position: relative;
  padding: var(--sp-6);
  background: linear-gradient(158deg, rgba(30, 40, 84, .9), rgba(13, 18, 42, .96));
  border: 1px solid var(--glass-border-2);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-float);
  overflow: hidden;
}

.orbit-card::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto;
  height: 220px;
  background: radial-gradient(closest-side, rgba(109, 91, 255, .5), transparent);
  filter: blur(4px);
}

.orbit-card__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.orbit-card__ring { position: relative; display: grid; place-items: center; }

.orbit-card__list {
  position: relative;
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.orbit-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: 11px var(--sp-3);
  background: rgba(8, 12, 28, .55);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--r-sm);
}

.orbit-row__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #cdd5ff;
  background: rgba(109, 91, 255, .18);
  border-radius: 10px;
}

.orbit-row__title { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.orbit-row__meta { font-size: var(--fs-xs); color: var(--t-4); }

/* ==========================================================================
   首页 · 能力矩阵 / 入驻流程 / 导师风采 / FAQ / CTA
   ========================================================================== */

.feature-card {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  padding: var(--sp-6);
}

.feature-card__title { font-size: var(--fs-sub); font-weight: var(--fw-semi); }
.feature-card__text { font-size: var(--fs-sm); color: var(--t-3); line-height: var(--lh-body); }

.feature-card__index {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .1em;
  color: var(--t-4);
}

/* 入驻流程 */
.flow {
  display: grid;
  gap: var(--sp-5);
  counter-reset: flow;
}

.flow__item {
  position: relative;
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-6);
}

.flow__no {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font-family: var(--font-num);
  font-size: var(--fs-sub);
  font-weight: var(--fw-heavy);
  color: #fff;
  background: var(--g-brand);
  border-radius: 50%;
  box-shadow: 0 0 22px -6px rgba(109, 91, 255, .95);
}

.flow__title { font-size: var(--fs-sub); font-weight: var(--fw-semi); }
.flow__text { font-size: var(--fs-sm); color: var(--t-3); }
.flow__meta { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--c-cyan); }

/* 横滑导师 / 口碑 */
.hscroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(258px, 78%);
  gap: var(--sp-4);
  overflow-x: auto;
  padding: var(--sp-2) var(--sp-5) var(--sp-6);
  margin: 0 auto;
  max-width: var(--w-container);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.hscroll::-webkit-scrollbar { display: none; }
.hscroll > * { scroll-snap-align: start; }

.mentor-card {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5);
}

.mentor-card__top { display: flex; align-items: center; gap: var(--sp-4); }
.mentor-card__name { font-size: var(--fs-body); font-weight: var(--fw-semi); }
.mentor-card__sub { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--t-3); }
.mentor-card__quote { font-size: var(--fs-sm); color: var(--t-2); line-height: var(--lh-body); }

.quote-card {
  position: relative;
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-6);
}

.quote-card__mark {
  position: absolute;
  top: 16px;
  right: 18px;
  color: rgba(255, 255, 255, .09);
}

.quote-card__text { font-size: var(--fs-sm); color: var(--t-2); line-height: var(--lh-body); }
.quote-card__who { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--t-3); }

/* FAQ */
.faq { display: grid; gap: var(--sp-3); }

.faq__item {
  overflow: hidden;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  transition: border-color var(--d-base) var(--e-out);
}

.faq__item.is-open { border-color: rgba(109, 91, 255, .45); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  padding: 17px var(--sp-5);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  text-align: left;
  cursor: pointer;
  transition: color var(--d-base) var(--e-out);
}

.faq__q:hover { color: #fff; }

.faq__q .icon { color: var(--t-3); transition: transform var(--d-base) var(--e-out); }
.faq__item.is-open .faq__q .icon { transform: rotate(180deg); color: var(--c-cyan); }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--d-slow) var(--e-out);
}

.faq__item.is-open .faq__a { grid-template-rows: 1fr; }

.faq__a > div { overflow: hidden; }

.faq__a p {
  padding: 0 var(--sp-5) 18px;
  font-size: var(--fs-sm);
  color: var(--t-3);
  line-height: var(--lh-body);
}

/* 结尾行动条 */
.cta-band {
  position: relative;
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-8) var(--sp-6);
  text-align: center;
  justify-items: center;
  background: linear-gradient(140deg, rgba(109, 91, 255, .22), rgba(0, 210, 255, .12));
  border: 1px solid var(--glass-border-2);
  border-radius: var(--r-xl);
  overflow: hidden;
}

.cta-band__title { font-size: var(--fs-h2); }
.cta-band__text { max-width: 520px; font-size: var(--fs-sm); color: var(--t-2); }

/* ==========================================================================
   登录 / 注册
   ========================================================================== */

.auth {
  display: grid;
  gap: var(--sp-7);
  align-items: stretch;
  padding: var(--sp-8) 0;
}

.auth__aside {
  display: none;
  position: relative;
  padding: var(--sp-8);
  background: linear-gradient(158deg, rgba(30, 40, 84, .88), rgba(12, 17, 40, .96));
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  overflow: hidden;
}

.auth__aside::after {
  content: "";
  position: absolute;
  inset: auto -30% -40%;
  height: 320px;
  background: radial-gradient(closest-side, rgba(0, 210, 255, .32), transparent);
}

.auth__aside-title {
  position: relative;
  margin-bottom: var(--sp-5);
  font-size: var(--fs-h2);
}

.auth__points {
  position: relative;
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}

.auth__point {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--t-2);
}

.auth__point .icon { margin-top: 3px; color: var(--c-cyan); }

.auth__panel {
  min-width: 0;
  padding: var(--sp-7) var(--sp-6);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--sh-card);
}

.auth__head { margin-bottom: var(--sp-6); }
.auth__title { font-size: var(--fs-h2); margin-bottom: var(--sp-2); }
.auth__desc { font-size: var(--fs-sm); color: var(--t-3); }

.auth__switch {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, .07);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--t-3);
}

.auth__switch a { color: #a9b4ff; font-weight: var(--fw-semi); }
.auth__switch a:hover { color: #fff; text-decoration: underline; }

.auth__legal {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--t-4);
}

/* 注册成功 */
.done-panel {
  display: grid;
  justify-items: center;
  gap: var(--sp-4);
  text-align: center;
  padding: var(--sp-6) 0;
}

.done-panel__icon {
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  color: #fff;
  background: var(--g-brand);
  border-radius: 50%;
  box-shadow: var(--glow-violet);
  animation: pop-in var(--d-slower) var(--e-spring);
}

@keyframes pop-in {
  from { transform: scale(.6); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.done-panel__gift {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: rgba(255, 197, 61, .1);
  border: 1px solid rgba(255, 197, 61, .32);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: #ffdf95;
}

/* ==========================================================================
   会员中心
   ========================================================================== */

.profile-card {
  position: relative;
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-7) var(--sp-6);
  background:
    radial-gradient(120% 130% at 88% 0%, rgba(0, 210, 255, .3), transparent 58%),
    linear-gradient(150deg, rgba(109, 91, 255, .34), rgba(13, 18, 42, .96));
  border: 1px solid var(--glass-border-2);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-card);
  overflow: hidden;
}

.profile-card__top {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.profile-card__name {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
}

.profile-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-top: 6px;
  font-size: var(--fs-xs);
  color: var(--t-2);
}

.profile-card__meta span { display: inline-flex; align-items: center; gap: 5px; }

.profile-card__score {
  display: grid;
  gap: 2px;
  margin-left: auto;
  text-align: right;
}

.profile-card__score .num { font-size: 34px; line-height: 1; }

.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}

.metric {
  display: grid;
  gap: 6px;
  padding: var(--sp-5);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
}

.metric__top { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--t-3); }
.metric__num { font-size: 25px; font-weight: var(--fw-bold); }

.quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}

.quick {
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--t-2);
  text-align: center;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  transition: all var(--d-base) var(--e-out);
}

.quick:hover {
  color: #fff;
  transform: translateY(-4px);
  border-color: var(--glass-border-2);
  box-shadow: var(--glow-violet);
}

.learn-row {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  transition: background-color var(--d-fast) var(--e-out);
}

.learn-row:last-child { border-bottom: 0; }
.learn-row:hover { background: rgba(109, 91, 255, .07); }

.learn-row__cover {
  width: 62px;
  height: 62px;
  border-radius: var(--r-sm);
  object-fit: cover;
}

.learn-row__body { display: grid; gap: 7px; align-content: center; min-width: 0; }
.learn-row__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.learn-row__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--t-4); }

.log-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 13px var(--sp-4);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.log-row:last-child { border-bottom: 0; }
.log-row__body { display: grid; gap: 2px; min-width: 0; }
.log-row__title { font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-row__time { font-size: var(--fs-xs); color: var(--t-4); }
.log-row__val { margin-left: auto; font-weight: var(--fw-bold); font-size: var(--fs-body); }
.log-row__val.is-plus { color: var(--c-success); }
.log-row__val.is-minus { color: #ffb1b1; }

/* ==========================================================================
   课程中心
   ========================================================================== */

.filter-bar {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.filter-bar__row { display: grid; gap: var(--sp-3); }

.filter-bar__cats {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.filter-bar__cats::-webkit-scrollbar { display: none; }

.search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.search-box .icon { position: absolute; left: 14px; color: var(--t-3); pointer-events: none; }
.search-box .input { padding-left: 44px; }

.result-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin: var(--sp-6) 0 var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--t-3);
}

.course-card {
  display: grid;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
}

.course-card__cover {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-nebula);
}

.course-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--d-slow) var(--e-out);
}

.course-card:hover .course-card__cover img { transform: scale(1.05); }

.course-card__tags {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  display: flex;
  gap: 6px;
}

.course-card__body { display: grid; gap: var(--sp-3); padding: var(--sp-5); }

.course-card__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.course-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--t-4);
}

.course-card__meta span { display: inline-flex; align-items: center; gap: 5px; }

.course-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(255, 255, 255, .07);
  font-size: var(--fs-xs);
  color: var(--t-3);
}

.course-card__price { display: inline-flex; align-items: center; gap: 5px; color: #ffdf95; font-weight: var(--fw-semi); }

/* 课程详情 */
.course-hero {
  display: grid;
  gap: var(--sp-6);
  padding-top: var(--sp-7);
}

.player {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--glass-border-2);
  background: #05081a;
  box-shadow: var(--sh-card);
}

.player img { width: 100%; height: 100%; object-fit: cover; opacity: .82; }

.player__mask {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: var(--sp-4);
  background: linear-gradient(180deg, rgba(5, 8, 26, .25), rgba(5, 8, 26, .72));
}

.player__play {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  color: #fff;
  background: rgba(109, 91, 255, .92);
  border-radius: 50%;
  box-shadow: 0 0 46px -6px rgba(109, 91, 255, 1);
  transition: transform var(--d-base) var(--e-spring);
}

.player__play:hover { transform: scale(1.08); }
.player__play .icon { margin-left: 4px; }

.player__note {
  position: absolute;
  left: var(--sp-4);
  bottom: var(--sp-4);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: var(--fs-xs);
  color: var(--t-2);
  background: rgba(5, 8, 26, .7);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-full);
}

.chapter-list { display: grid; }

.chapter {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: 14px var(--sp-4);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  cursor: pointer;
  transition: background-color var(--d-fast) var(--e-out);
}

.chapter:last-child { border-bottom: 0; }
.chapter:hover { background: rgba(109, 91, 255, .08); }

.chapter__no {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--t-3);
  background: var(--glass-bg-2);
  border-radius: 50%;
  transition: all var(--d-base) var(--e-out);
}

.chapter.is-done .chapter__no {
  color: #fff;
  background: rgba(34, 197, 94, .9);
}

.chapter__title { font-size: var(--fs-sm); }
.chapter.is-done .chapter__title { color: var(--t-3); }
.chapter__meta { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--t-4); }

.aside-sticky { display: grid; gap: var(--sp-4); align-content: start; }

/* ==========================================================================
   每日打卡
   ========================================================================== */

.checkin-hero {
  display: grid;
  gap: var(--sp-6);
  justify-items: center;
  text-align: center;
  padding: var(--sp-8) var(--sp-6);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(109, 91, 255, .34), transparent 62%),
    linear-gradient(160deg, rgba(21, 29, 63, .95), rgba(11, 16, 36, .98));
  border: 1px solid var(--glass-border-2);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-card);
}

.checkin-btn {
  position: relative;
  display: grid;
  place-items: center;
  gap: 6px;
  width: 176px;
  height: 176px;
  color: #fff;
  background: var(--g-brand);
  border-radius: 50%;
  box-shadow: 0 22px 60px -20px rgba(109, 91, 255, 1), inset 0 0 40px rgba(255, 255, 255, .14);
  cursor: pointer;
  transition: transform var(--d-base) var(--e-spring), box-shadow var(--d-base) var(--e-out);
}

.checkin-btn:hover:not(:disabled) { transform: scale(1.04); }
.checkin-btn:active:not(:disabled) { transform: scale(.98); }

.checkin-btn:disabled,
.checkin-btn.is-done {
  cursor: default;
  background: var(--glass-bg-2);
  border: 1px solid var(--glass-border-2);
  box-shadow: none;
  color: var(--t-2);
}

.checkin-btn__label { font-size: var(--fs-sub); font-weight: var(--fw-bold); }
.checkin-btn__sub { font-size: var(--fs-xs); color: rgba(255, 255, 255, .8); }
.checkin-btn.is-done .checkin-btn__sub { color: var(--t-3); }

.checkin-btn__ring {
  position: absolute;
  inset: -11px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, .28);
  animation: spin 26s linear infinite;
}

/* 星粒动效 */
.star-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}

.star-burst i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-gold);
  box-shadow: 0 0 10px 2px rgba(255, 197, 61, .8);
  animation: burst 900ms var(--e-out) forwards;
}

@keyframes burst {
  from { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  to   { transform: translate(calc(-50% + var(--bx)), calc(-50% + var(--by))) scale(.2); opacity: 0; }
}

/* 打卡日历 */
.calendar {
  display: grid;
  gap: var(--sp-3);
}

.calendar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.calendar__month { font-size: var(--fs-sub); font-weight: var(--fw-semi); }

.calendar__nav { display: flex; gap: var(--sp-2); }

.calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.calendar__dow {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--t-4);
  padding-bottom: 4px;
}

.calendar__cell {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  font-size: var(--fs-xs);
  color: var(--t-3);
  background: rgba(255, 255, 255, .035);
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  transition: all var(--d-base) var(--e-out);
}

.calendar__cell.is-empty { background: none; }

.calendar__cell.is-done {
  color: #fff;
  font-weight: var(--fw-semi);
  background: rgba(109, 91, 255, .26);
  border-color: rgba(109, 91, 255, .5);
}

.calendar__cell.is-done::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-gold);
  box-shadow: 0 0 8px 1px rgba(255, 197, 61, .9);
}

.calendar__cell.is-today {
  border-color: var(--c-cyan);
  box-shadow: 0 0 0 1px rgba(0, 210, 255, .5);
}

.task-list { display: grid; }

.task {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: 14px var(--sp-4);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.task:last-child { border-bottom: 0; }

.task__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: #cdd5ff;
  background: rgba(109, 91, 255, .16);
  border-radius: 11px;
}

.task.is-done .task__icon { color: #a7f3c8; background: rgba(34, 197, 94, .18); }
.task__title { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.task__meta { font-size: var(--fs-xs); color: var(--t-4); }
.task__pts { font-size: var(--fs-xs); font-weight: var(--fw-semi); color: #ffdf95; white-space: nowrap; }

.rule-list { display: grid; gap: var(--sp-3); }

.rule {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--t-2);
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--r-sm);
}

.rule .icon { margin-top: 2px; color: var(--c-gold); }

/* ==========================================================================
   积分商城
   ========================================================================== */

.points-card {
  position: relative;
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-7) var(--sp-6);
  background:
    radial-gradient(110% 130% at 84% 0%, rgba(255, 197, 61, .26), transparent 58%),
    linear-gradient(150deg, rgba(109, 91, 255, .3), rgba(13, 18, 42, .96));
  border: 1px solid rgba(255, 197, 61, .28);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-card);
  overflow: hidden;
}

.points-card__num {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: 46px;
  font-weight: var(--fw-heavy);
  line-height: 1;
  background: var(--g-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.points-card__num small { font-size: var(--fs-sm); color: var(--t-3); -webkit-text-fill-color: var(--t-3); }

.level-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--t-2);
}

.product-card {
  display: grid;
  overflow: hidden;
  padding: 0;
}

.product-card__cover { position: relative; aspect-ratio: 4 / 3; background: var(--c-nebula); overflow: hidden; }
.product-card__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-slow) var(--e-out); }
.product-card:hover .product-card__cover img { transform: scale(1.05); }

.product-card__stock {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  padding: 4px 10px;
  font-size: 11px;
  color: var(--t-2);
  background: rgba(5, 8, 26, .72);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-full);
}

.product-card__body { display: grid; gap: var(--sp-3); padding: var(--sp-5); }
.product-card__title { font-size: var(--fs-body); font-weight: var(--fw-semi); line-height: var(--lh-snug); }

.product-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(255, 255, 255, .07);
}

.price-tag { display: inline-flex; align-items: baseline; gap: 4px; }
.price-tag b { font-size: var(--fs-h3); font-weight: var(--fw-heavy); color: #ffd76e; }
.price-tag small { font-size: var(--fs-xs); color: var(--t-3); }

.redeem-summary {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4);
  font-size: var(--fs-sm);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
}

.redeem-summary__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.redeem-summary__row span { color: var(--t-3); }

/* ==========================================================================
   关于我们
   ========================================================================== */

.about-hero {
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-8) 0 var(--sp-6);
  text-align: center;
  justify-items: center;
}

.value-card { display: grid; gap: var(--sp-3); padding: var(--sp-6); align-content: start; }

.contact-grid { display: grid; gap: var(--sp-4); }

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  transition: all var(--d-base) var(--e-out);
}

.contact-item:hover { border-color: var(--glass-border-2); transform: translateY(-3px); }
.contact-item__label { font-size: var(--fs-xs); color: var(--t-4); }
.contact-item__value { font-size: var(--fs-body); font-weight: var(--fw-medium); word-break: break-all; }

.license-box {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--t-2);
  background: rgba(255, 255, 255, .035);
  border: 1px dashed rgba(255, 255, 255, .16);
  border-radius: var(--r-md);
}

.license-box a { color: #a9b4ff; }
.license-box a:hover { text-decoration: underline; }

/* ==========================================================================
   仪表盘 / 列表页通用分栏
   ========================================================================== */

.grid--split { grid-template-columns: 1fr; }

.list-card { padding: var(--sp-5) 0; overflow: hidden; }
.list-card__head { padding: 0 var(--sp-5) var(--sp-4); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }

/* ==========================================================================
   响应式
   ========================================================================== */

@media (min-width: 768px) {
  .metric-grid { grid-template-columns: repeat(4, 1fr); }
  .flow { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
  .hscroll { grid-auto-columns: 296px; }
  .filter-bar__row { grid-template-columns: auto 280px; align-items: center; }
  .auth__panel { padding: var(--sp-8); }
}

@media (min-width: 1024px) {
  .hero { padding: var(--sp-11) 0 var(--sp-9); }
  .hero__inner { grid-template-columns: 1.08fr .92fr; gap: var(--sp-9); }
  .stat-strip { max-width: 520px; }
  .flow { grid-template-columns: repeat(4, 1fr); }
  .auth { grid-template-columns: 1fr 1fr; gap: var(--sp-9); }
  .auth__aside { display: block; }
  .course-hero { grid-template-columns: 1.6fr 1fr; align-items: start; }
  .grid--split { grid-template-columns: 1.45fr 1fr; }
  .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}

@media (max-width: 767px) {
  .hscroll { grid-auto-columns: 82%; padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .auth > * { min-width: 0; }
  .steps { gap: 6px; }
  .steps__item { gap: 6px; font-size: 11px; white-space: nowrap; }
  .steps__dot { width: 22px; height: 22px; font-size: 10px; }
  .steps__line { min-width: 8px; }
  .checkin-btn { width: 152px; height: 152px; }
  .profile-card__score { margin-left: 0; text-align: left; }
  .quick-grid { gap: var(--sp-3); }
  .quick { padding: var(--sp-4) var(--sp-2); font-size: var(--fs-xs); }
  .quick .icon-plate { width: 42px; height: 42px; }
}