/* ==========================================================================
   LexiType 引导页样式
   设计基准：1rem = 100px（基于 1920px 设计稿宽度）
   移动端优先响应式布局
   ========================================================================== */

/* ---------- CSS 变量（设计令牌） ---------- */
:root {
  --color-bg: #f3f4f8;
  --color-white: #ffffff;
  --color-text-primary: #1d2129;
  --color-text-secondary: #434656;
  --color-text-muted: #4e5969;
  --color-text-light: #737688;
  --color-blue: #5387d9;
  --color-blue-dark: #165dff;
  --color-orange: #ff7d00;
  --color-green: #00b42a;
  --color-border: #c3c5d9;
  --color-gray-bg: #f5f7fa;
  --color-avatar-bg: #e1e1ef;
  --shadow-sm: 0 0.02rem 0.06rem rgba(0, 0, 0, 0.06);
  --shadow-md: 0 0.1rem 0.15rem -0.03rem rgba(0, 0, 0, 0.1), 0 0.04rem 0.06rem -0.04rem rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 0.25rem 0.5rem -0.12rem rgba(0, 0, 0, 0.25);
  --max-width: 14.4rem;
  --section-gap: 0.8rem;
}

/* ---------- 基础重置与 rem 基准 ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* 1920px 设计稿下 1rem = 100px；手机端设下限避免文字过小 */
  font-size: clamp(50px, 5.208333vw, 100px);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

@media (min-width: 1920px) {
  html {
    font-size: 100px;
  }
}

/* ---------- iPad / 平板（768px–1366px）：放大 rem，改善横屏与 Pro 竖屏可读性 ---------- */
@media (min-width: 768px) and (max-width: 1366px) {
  html {
    /* 1024 宽约 72px/rem，较默认 53px 提升约 35% */
    font-size: clamp(68px, 7.03125vw, 88px);
  }
}

/* iPad 安全区与触控目标（与 page-home 系列页面配合） */
@media (min-width: 768px) and (max-width: 1366px) {
  .page-home .dash-header {
    padding-left: max(0.16rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.16rem, env(safe-area-inset-right, 0px));
  }

  .page-home .dash-main {
    padding-bottom: max(0.24rem, env(safe-area-inset-bottom, 0px));
  }

  .page-home .dash-sidebar {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .page-home .dash-pill,
  .page-home .dash-header__menu-btn,
  .page-home .dash-btn,
  .page-home .dash-btn--sm,
  .page-home .dash-nav__link,
  .page-home .dash-tabs__btn {
    min-height: 44px;
  }

  .page-home .dash-pill {
    padding: 0.08rem 0.12rem;
  }

  .page-home .dash-breadcrumb__text {
    font-size: max(0.16rem, 16px);
    line-height: 0.24rem;
  }

  .page-home .dash-card__head h2,
  .page-home .dash-card__title {
    font-size: max(0.18rem, 18px);
    line-height: 0.26rem;
  }

  .page-home .dash-card__meta,
  .page-home .dash-btn,
  .page-home .dash-recent-item__title {
    font-size: max(0.15rem, 15px);
    line-height: 0.22rem;
  }

  .page-settings .settings-tabs__btn,
  .page-settings .dash-tool-pill {
    font-size: max(0.15rem, 15px);
    line-height: 0.22rem;
    min-height: 44px;
  }

  .page-settings .settings-breadcrumb__title {
    font-size: max(0.17rem, 17px);
    line-height: 0.24rem;
  }
}

body {
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  line-height: 1.5;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* ---------- 通用容器 ---------- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0.24rem;
  padding-right: 0.24rem;
}

.section-title {
  font-size: 0.3rem;
  font-weight: 800;
  line-height: 0.312rem;
  letter-spacing: -0.0024rem;
  text-align: center;
  color: var(--color-text-primary);
}

/* ==========================================================================
   顶部导航栏
   ========================================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-white);
  width: 100%;
  padding-left: 12.5vw;
  padding-right: 12.5vw;
}

.header__nav {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  max-width: var(--max-width);
  height: 0.64rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0.24rem;
  padding-right: 0.24rem;
}

/* Logo 裁切容器：仅显示图标区域（对齐 Figma 106.66×32） */
.header__logo {
  position: relative;
  z-index: 1;
  display: block;
  width: 1.0666rem;
  height: 0.32rem;
  overflow: hidden;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-filter: drop-shadow(0 0.02rem 0.04rem rgba(0, 0, 0, 0.08));
  filter: drop-shadow(0 0.02rem 0.04rem rgba(0, 0, 0, 0.08));
}

.header__logo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: left center;
  object-position: left center;
}

/* 导航链接水平居中（相对整个导航栏居中） */
.header__menu {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 0.32rem;
}

.header__link {
  display: block;
  font-size: 0.16rem;
  line-height: 0.256rem;
  letter-spacing: 0.005rem;
  color: var(--color-text-secondary);
  white-space: nowrap;
  -webkit-transition: color 0.2s;
  -o-transition: color 0.2s;
  transition: color 0.2s;
}

.header__link:hover {
  color: var(--color-blue);
}

.header__link--active {
  color: var(--color-blue);
}

.header__actions {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.24rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  margin-left: auto;
}

.header__login {
  font-size: 0.16rem;
  line-height: 0.256rem;
  color: var(--color-text-secondary);
  padding: 0.08rem 0;
}

.header__login:hover {
  color: var(--color-blue);
}

.header__cta {
  background-color: var(--color-blue);
  color: var(--color-white);
  font-size: 0.16rem;
  line-height: 0.256rem;
  padding: 0.08rem 0.32rem;
  border-radius: 0.1rem;
  -webkit-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.header__cta:hover {
  opacity: 0.9;
}

/* 移动端汉堡菜单按钮 */
.header__toggle {
  position: relative;
  z-index: 1;
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.08rem;
}

.header__toggle span {
  display: block;
  width: 0.22rem;
  height: 0.02rem;
  background-color: var(--color-text-primary);
  border-radius: 0.01rem;
}

/* ==========================================================================
   主内容区
   ========================================================================== */
.main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: var(--section-gap);
  padding-top: 0.63rem;
  /* 常见问题与页脚之间的区块间距（对齐 Figma 80px） */
  padding-bottom: var(--section-gap);
}

/* ==========================================================================
   Hero 区域
   ========================================================================== */
.hero {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.64rem;
}

.hero__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.23rem;
  max-width: 8.96rem;
  text-align: center;
}

.hero__title {
  font-size: 0.36rem;
  font-weight: 800;
  line-height: 0.432rem;
  letter-spacing: -0.0072rem;
  color: var(--color-text-primary);
}

.hero__title-highlight {
  color: var(--color-blue);
}

.hero__subtitle {
  font-size: 0.18rem;
  line-height: 0.306rem;
  color: var(--color-text-secondary);
  max-width: 6.72rem;
}

.hero__cta-wrap {
  padding-top: 0.17rem;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.hero__cta {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.0799rem;
  background-color: var(--color-orange);
  color: var(--color-white);
  font-size: 0.24rem;
  line-height: 0.312rem;
  letter-spacing: -0.0024rem;
  padding: 0.155rem 0.4rem 0.1569rem;
  border-radius: 0.04rem;
  -webkit-box-shadow: var(--shadow-sm);
  box-shadow: var(--shadow-sm);
  -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
  transition: opacity 0.2s, -webkit-transform 0.2s;
  -o-transition: opacity 0.2s, transform 0.2s;
  transition: opacity 0.2s, transform 0.2s;
  transition: opacity 0.2s, transform 0.2s, -webkit-transform 0.2s;
}

.hero__cta:hover {
  opacity: 0.92;
  -webkit-transform: translateY(-0.01rem);
  -ms-transform: translateY(-0.01rem);
  transform: translateY(-0.01rem);
}

.hero__cta-arrow {
  width: 0.14rem;
  height: 0.12rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

/* ==========================================================================
   UI Mockup 预览
   ========================================================================== */
.mockup {
  position: relative;
  max-width: 10.24rem;
  width: 100%;
}

/* 装饰性光晕（非列表元素，可使用绝对定位） */
.mockup__glow {
  position: absolute;
  width: 1.28rem;
  height: 1.28rem;
  border-radius: 0.12rem;
  -webkit-filter: blur(0.32rem);
  filter: blur(0.32rem);
  pointer-events: none;
  z-index: 0;
}

.mockup__glow--left {
  bottom: 0;
  left: 0;
  background-color: rgba(22, 93, 255, 0.05);
}

.mockup__glow--right {
  bottom: 0;
  right: 0;
  background-color: rgba(255, 125, 0, 0.05);
}

/* 浮动标签上下缓动动画 */
@-webkit-keyframes mockup-tag-float {
  0%,
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  50% {
    -webkit-transform: translateY(-0.08rem);
    transform: translateY(-0.08rem);
  }
}

@keyframes mockup-tag-float {
  0%,
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  50% {
    -webkit-transform: translateY(-0.08rem);
    transform: translateY(-0.08rem);
  }
}

/* 浮动标签 */
.mockup__tag {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.08rem;
  background-color: var(--color-white);
  padding: 0.09rem 0.17rem;
  border-radius: 0.12rem;
  font-size: 0.14rem;
  line-height: 0.2rem;
  color: var(--color-text-primary);
  -webkit-box-shadow: var(--shadow-md);
  box-shadow: var(--shadow-md);
  z-index: 2;
  white-space: nowrap;
  -webkit-animation: mockup-tag-float 3s ease-in-out infinite;
  animation: mockup-tag-float 3s ease-in-out infinite;
  will-change: transform;
}

.mockup__tag--left {
  left: -0.48rem;
  top: 25%;
  border: 1px solid rgba(22, 93, 255, 0.2);
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.mockup__tag--right {
  right: -0.48rem;
  top: 33.33%;
  border: 1px solid rgba(255, 125, 0, 0.2);
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
  -webkit-animation-duration: 3.4s;
  animation-duration: 3.4s;
}

.mockup__tag--bottom {
  left: -0.32rem;
  bottom: 25%;
  border: 1px solid rgba(0, 180, 42, 0.2);
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-duration: 2.8s;
  animation-duration: 2.8s;
}

.mockup__tag-icon {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.mockup__tag-mono {
  font-family: "JetBrains Mono", "Courier New", monospace;
  font-weight: 700;
}

/* Mockup 主卡片：整图展示（1024×399，来自 Figma 节点 1:768） */
.mockup__card {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: 0.16rem;
  overflow: hidden;
}

.mockup__card-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 10.24rem;
  margin: 0 auto;
  /* 保持原始比例，禁止拉伸变形 */
  -o-object-fit: contain;
  object-fit: contain;
}

/* ==========================================================================
   核心优势 Features
   ========================================================================== */
.features {
  width: 100%;
}

.features .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.64rem;
}

.features__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.24rem;
}

.feature-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.153rem;
  padding: 0.33rem;
  border-radius: 0.16rem;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
}

.feature-card--featured {
  background-color: rgba(22, 93, 255, 0.03);
  border-color: var(--color-blue);
}

.feature-card__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 0.56rem;
  height: 0.56rem;
  border-radius: 0.08rem;
  background-color: var(--color-gray-bg);
  border: 1px solid var(--color-border);
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.feature-card__icon--blue {
  background-color: var(--color-blue);
  border-color: transparent;
  -webkit-box-shadow: 0 0.1rem 0.15rem -0.03rem rgba(22, 93, 255, 0.2), 0 0.04rem 0.06rem -0.04rem rgba(22, 93, 255, 0.2);
  box-shadow: 0 0.1rem 0.15rem -0.03rem rgba(22, 93, 255, 0.2), 0 0.04rem 0.06rem -0.04rem rgba(22, 93, 255, 0.2);
}

.feature-card__icon img {
  -o-object-fit: contain;
  object-fit: contain;
}

.feature-card__title {
  font-size: 0.2rem;
  line-height: 0.3rem;
  font-weight: 500;
  color: var(--color-text-primary);
  padding-top: 0.087rem;
}

.feature-card__desc {
  font-size: 0.16rem;
  line-height: 0.256rem;
  color: var(--color-text-secondary);
}

/* ==========================================================================
   学员评价 Testimonials
   ========================================================================== */
.testimonials {
  background-color: var(--color-gray-bg);
  padding: 0.8rem 12.5vw;
  width: 100%;
}

.testimonials .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.64rem;
  padding-left: 0.24rem;
  padding-right: 0.24rem;
}

.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.32rem;
}

.testimonial-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.24rem;
  padding: 0.33rem;
  border-radius: 0.12rem;
  background-color: var(--color-white);
  -webkit-box-shadow: var(--shadow-sm);
  box-shadow: var(--shadow-sm);
}

.testimonial-card--gray {
  background-color: var(--color-gray-bg);
  border: 1px solid var(--color-border);
  -webkit-box-shadow: 0 0.01rem 0.01rem rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.01rem 0.01rem rgba(0, 0, 0, 0.05);
}

.testimonial-card--bordered {
  border: 1px solid var(--color-blue);
  -webkit-box-shadow: 0 0 0 0.02rem rgba(22, 93, 255, 0.05);
  box-shadow: 0 0 0 0.02rem rgba(22, 93, 255, 0.05);
}

/* 评价卡片头部 - 使用 flex 布局，禁止绝对定位 */
.testimonial-card__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.16rem;
}

.testimonial-card__user {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.16rem;
}

.testimonial-card__avatar {
  width: 0.56rem;
  height: 0.56rem;
  border-radius: 0.12rem;
  border: 0.02rem solid;
  padding: 0.02rem;
  background-color: var(--color-avatar-bg);
  overflow: hidden;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.testimonial-card__avatar--blue {
  border-color: rgba(22, 93, 255, 0.1);
}

.testimonial-card__avatar--orange {
  border-color: rgba(255, 125, 0, 0.1);
}

.testimonial-card__avatar--green {
  border-color: rgba(0, 180, 42, 0.1);
}

.testimonial-card__avatar img {
  width: 0.52rem;
  height: 0.52rem;
  border-radius: 0.1rem;
  -o-object-fit: cover;
  object-fit: cover;
}

.testimonial-card__info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.03rem;
}

.testimonial-card__name {
  font-size: 0.16rem;
  line-height: 0.24rem;
  font-weight: 500;
  color: var(--color-text-primary);
}

.testimonial-card__tag {
  display: inline-block;
  font-size: 0.1rem;
  line-height: 0.15rem;
  letter-spacing: 0.005rem;
  text-transform: uppercase;
  padding: 0.01rem 0.08rem;
  border-radius: 0.02rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.testimonial-card__tag--blue {
  background-color: rgba(22, 93, 255, 0.1);
  color: var(--color-blue);
}

.testimonial-card__tag--orange {
  background-color: rgba(255, 125, 0, 0.1);
  color: var(--color-orange);
}

.testimonial-card__tag--green {
  background-color: rgba(0, 180, 42, 0.1);
  color: var(--color-green);
}

.testimonial-card__stars {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0;
  -webkit-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9);
  -webkit-transform-origin: right center;
  -ms-transform-origin: right center;
  transform-origin: right center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.testimonial-card__stars img {
  width: 0.2rem;
  height: 0.19rem;
}

.testimonial-card__quote {
  font-size: 0.16rem;
  line-height: 0.272rem;
  color: var(--color-text-secondary);
  font-style: italic;
}

.testimonial-card__quote strong {
  color: var(--color-text-primary);
  font-weight: 500;
}

/* ==========================================================================
   常见问题 FAQ
   ========================================================================== */
.faq {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.faq__inner {
  max-width: 8.4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.48rem;
}

.faq__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.12rem;
}

.faq__item {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 0.08rem;
  overflow: hidden;
}

.faq__question {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
  padding: 0.24rem;
  font-size: 0.16rem;
  line-height: 0.24rem;
  color: var(--color-text-primary);
  text-align: left;
  gap: 0.16rem;
}

.faq__question:hover {
  background-color: rgba(245, 247, 250, 0.5);
}

.faq__chevron {
  width: 0.12rem;
  height: 0.074rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  -o-transition: transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

.faq__item--open .faq__chevron {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.faq__answer {
  padding: 0 0.24rem 0.24rem;
}

.faq__answer p {
  font-size: 0.14rem;
  line-height: 0.21rem;
  color: var(--color-text-muted);
}

/* ==========================================================================
   页脚 Footer
   ========================================================================== */
.footer {
  background-color: var(--color-white);
  border-top: 1px solid var(--color-border);
  padding: 0.81rem 12.5vw 0.8rem;
  width: 100%;
}

.footer__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.64rem;
  padding-left: 0.24rem;
  padding-right: 0.24rem;
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.48rem;
}

.footer__brand {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.24rem;
}

/* 页脚 Logo 裁切容器：显示完整品牌文字（对齐 Figma 133.33×40） */
.footer__logo-wrap {
  position: relative;
  width: 1.3333rem;
  height: 0.4rem;
  overflow: hidden;
  -webkit-filter: drop-shadow(0 0.01rem 0.01rem rgba(0, 0, 0, 0.05));
  filter: drop-shadow(0 0.01rem 0.01rem rgba(0, 0, 0, 0.05));
}

.footer__logo {
  position: absolute;
  top: 0;
  left: -88%;
  width: 276.01%;
  height: 100%;
  max-width: none;
}

.footer__desc {
  font-size: 0.14rem;
  line-height: 0.2275rem;
  color: var(--color-text-secondary);
  max-width: 3.2rem;
}

.footer__social {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.16rem;
}

.footer__social-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 0.36rem;
  height: 0.36rem;
  background-color: var(--color-gray-bg);
  border-radius: 0.12rem;
  -webkit-transition: background-color 0.2s;
  -o-transition: background-color 0.2s;
  transition: background-color 0.2s;
}

.footer__social-link:hover {
  background-color: var(--color-border);
}

.footer__social-link img {
  -o-object-fit: contain;
  object-fit: contain;
}

.footer__heading {
  font-size: 0.16rem;
  line-height: 0.24rem;
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 0.32rem;
}

.footer__links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.16rem;
}
.footer__links li{
	font-size: 0;
	line-height: 1;
}
.footer__links a {
  font-size: 0.14rem;
  line-height: 0.21rem;
  color: var(--color-text-secondary);
  padding: 0.015rem 0;
  -webkit-transition: color 0.2s;
  -o-transition: color 0.2s;
  transition: color 0.2s;
}

.footer__links a:hover {
  color: var(--color-blue);
}

.footer__links-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.32rem;
}

.footer__bottom {
  border-top: 1px solid rgba(195, 197, 217, 0.3);
  padding-top: 0.33rem;
  text-align: center;
}

.footer__bottom p {
  font-family: "JetBrains Mono", "Courier New", monospace;
  font-size: 0.12rem;
  line-height: 0.18rem;
  color: var(--color-text-light);
}

/* ==========================================================================
   响应式断点 - 平板
   ========================================================================== */
@media (max-width: 1024px) {
  .header {
    padding-left: 0;
    padding-right: 0;
  }

  .header__nav {
    padding-left: 0.24rem;
    padding-right: 0.24rem;
    max-width: none;
  }

  .header__menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    z-index: 99;
    background-color: var(--color-white);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0.16rem 0.24rem;
    gap: 0.08rem;
    border-bottom: 1px solid var(--color-border);
    -webkit-box-shadow: var(--shadow-sm);
    box-shadow: var(--shadow-sm);
  }

  .header__menu--open {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .header__menu .header__link {
    padding: 0.1rem 0;
    text-align: center;
  }

  .header__toggle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-negative: 0;
    flex-shrink: 0;
  }

  .features__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .testimonials {
    padding-left: 0.24rem;
    padding-right: 0.24rem;
  }

  .testimonials__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer {
    padding-left: 0.24rem;
    padding-right: 0.24rem;
  }

  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__brand {
    grid-column: 1 / -1;
  }

  /* 隐藏 mockup 浮动标签 */
  .mockup__tag {
    display: none;
  }
}

/* ==========================================================================
   响应式断点 - 移动端
   ========================================================================== */
@media (max-width: 768px) {
  .header__actions .header__login {
    display: none;
  }

  .header__actions .header__cta {
    font-size: 0.14rem;
    padding: 0.06rem 0.16rem;
  }

  .hero__title {
    font-size: 0.28rem;
    line-height: 0.36rem;
  }

  .hero__subtitle {
    font-size: 0.16rem;
    line-height: 0.28rem;
  }

  .hero__cta {
    font-size: 0.2rem;
    padding: 0.12rem 0.32rem;
  }

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

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

  .footer__grid {
    grid-template-columns: 1fr;
    gap: 0.32rem;
  }

  .footer__links-grid {
    grid-template-columns: 1fr;
    gap: 0.16rem;
  }

  .testimonial-card__header {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }

  .testimonial-card__stars {
    -webkit-transform-origin: left center;
    -ms-transform-origin: left center;
    transform-origin: left center;
  }
}

/* ==========================================================================
   响应式断点 - 小屏手机
   ========================================================================== */
@media (max-width: 480px) {
  .container {
    padding-left: 0.16rem;
    padding-right: 0.16rem;
  }

}

/* ==========================================================================
   打印样式与无障碍
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    -webkit-animation-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    -webkit-transition-duration: 0.01ms !important;
    -o-transition-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

:focus-visible {
  outline: 0.02rem solid var(--color-blue);
  outline-offset: 0.02rem;
}

/* ==========================================================================
   主页 Dashboard（home.html）— 节点 1:2388
   作用域：body.page-home，与引导页 index 样式隔离
   ========================================================================== */
.page-home {
  background-color: var(--color-white);
  overflow-x: hidden;
}

.page-home .dash {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main";
  grid-template-columns: var(--dash-sidebar-width, 2.13rem) 1fr;
  grid-template-rows: 0.59rem 1fr;
  min-height: 100vh;
  -webkit-transition: grid-template-columns 0.25s ease;
  -o-transition: grid-template-columns 0.25s ease;
  transition: grid-template-columns 0.25s ease;
}

.page-home .dash.dash--sidebar-collapsed {
  --dash-sidebar-width: 0.72rem;
}

/* ---------- 顶部栏 ---------- */
.page-home .dash-header {
  grid-area: header;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 0.59rem;
  padding-right: 0.24rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background-color: var(--color-white);
  position: sticky;
  top: 0;
  z-index: 200;
  overflow: visible;
}

.page-home .dash-header__brand {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.08rem;
  width: var(--dash-sidebar-width, 2.13rem);
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-left: 0.24rem;
  overflow: hidden;
  -webkit-transition: width 0.25s ease, padding 0.25s ease;
  -o-transition: width 0.25s ease, padding 0.25s ease;
  transition: width 0.25s ease, padding 0.25s ease;
}

.page-home .dash-header__logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 0.08rem;
  background-color: var(--color-blue);
  color: var(--color-white);
  font-size: 0.2rem;
  font-weight: 700;
  line-height: 0.28rem;
  font-family: Inter, Arial, sans-serif;
}

.page-home .dash-header__brand-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-left: 0.08rem;
}

.page-home .dash-header__brand-text strong {
  font-size: 0.2rem;
  line-height: 0.28rem;
  color: #181c23;
  font-weight: 500;
}

.page-home .dash-header__brand-text span {
  font-size: 0.1rem;
  line-height: 0.1rem;
  letter-spacing: 0.005rem;
  color: #787586;
  font-family: Inter, Arial, sans-serif;
}

/* 顶栏「主页」面包屑按钮 */
.page-home .dash-breadcrumb {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.08rem;
  margin-left: 0.16rem;
  padding: 0.04rem 0.08rem;
  border-radius: 0.04rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-transition: background-color 0.2s;
  -o-transition: background-color 0.2s;
  transition: background-color 0.2s;
}

.page-home .dash-breadcrumb:hover {
  background-color: rgba(83, 135, 217, 0.08);
}

.page-home .dash-breadcrumb__icon {
  display: block;
  width: 0.18rem;
  height: 0.14rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-home .dash-breadcrumb__text {
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 500;
  color: #181c23;
  white-space: nowrap;
}

.page-home .dash-header__tools {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.1rem;
  margin-left: auto;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  overflow: visible;
}

.page-home .dash-pill {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.04rem;
  padding: 0.04rem 0.12rem 0.04rem 0.08rem;
  border: 1px solid #e3e9f1;
  border-radius: 9999px;
  background-color: var(--color-white);
  font-size: 0.12rem;
  line-height: 0.16rem;
  color: #475569;
  white-space: nowrap;
}

.page-home .dash-pill img {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-home .dash-pill__arrow {
  margin-left: 0.02rem;
}

.page-home .dash-wechat-wrap {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  vertical-align: middle;
}

.page-home .dash-wechat-popover {
  position: absolute;
  top: calc(100% + 0.08rem);
  right: 0;
  z-index: 1200;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.08rem;
  min-width: 1.44rem;
  padding: 0.12rem;
  border: 1px solid #e3e9f1;
  border-radius: 0.1rem;
  background-color: var(--color-white);
  -webkit-box-shadow: 0 0.08rem 0.24rem rgba(15, 23, 42, 0.12);
  box-shadow: 0 0.08rem 0.24rem rgba(15, 23, 42, 0.12);
}

.page-home .dash-wechat-popover[hidden] {
  display: none !important;
}

.page-home .dash-qr-hover-wrap .dash-wechat-popover {
  display: none !important;
  pointer-events: none;
}

.page-home .dash-qr-hover-wrap:hover .dash-wechat-popover,
.page-home .dash-qr-hover-wrap:focus-within .dash-wechat-popover {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  pointer-events: auto;
}

.page-home .dash-wechat-popover__qr {
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 0.06rem;
  -o-object-fit: cover;
  object-fit: cover;
}

.page-home .dash-wechat-popover__tip {
  margin: 0;
  font-size: 0.12rem;
  line-height: 0.18rem;
  color: #475569;
  white-space: nowrap;
}

.page-home .dash-wechat-popover__empty {
  margin: 0;
  padding: 0.16rem 0.08rem;
  font-size: 0.12rem;
  line-height: 0.18rem;
  color: #86909c;
  text-align: center;
}

.page-home .dash-header__user {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.08rem;
  margin-left: 0.16rem;
  padding-left: 0.09rem;
  border-left: 1px solid #c9c4d7;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-home .dash-header__avatar {
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-home .dash-header__user-info strong {
  display: block;
  font-size: 0.12rem;
  line-height: 0.16rem;
  color: #181c23;
  font-weight: 700;
  font-family: Inter, Arial, sans-serif;
}

.page-home .dash-header__user-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.04rem;
  font-size: 0.1rem;
  line-height: 0.15rem;
  color: #787586;
}

.page-home .dash-badge {
  background-color: #e5deff;
  color: var(--color-blue);
  padding: 0.02rem 0.06rem;
  border-radius: 9999px;
  font-size: 0.1rem;
  line-height: 0.15rem;
}

.page-home .dash-header__menu-btn {
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.04rem;
  padding: 0.08rem;
  margin-left: 0.12rem;
}

.page-home .dash-header__menu-btn span {
  display: block;
  width: 0.18rem;
  height: 0.02rem;
  background-color: #181c23;
}

/* ---------- 侧边导航 ---------- */
.page-home .dash-sidebar {
  grid-area: sidebar;
  position: sticky;
  top: 0.59rem;
  -ms-flex-item-align: start;
  align-self: start;
  height: calc(100vh - 0.59rem);
  background-color: var(--color-white);
  padding: 0.28rem 0.16rem 0.08rem;
  overflow: hidden;
  border-right: 1px solid rgba(0, 0, 0, 0.04);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.page-home .dash-sidebar > nav {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.page-home .dash-sidebar__toggle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 0.06rem;
  width: 100%;
  margin-top: 0.08rem;
  padding: 0.1rem 0;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  background: transparent;
  color: #787586;
  font-size: 0.12rem;
  line-height: 1;
  cursor: pointer;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-transition: color 0.2s, background-color 0.2s, -webkit-transform 0.25s ease;
  -o-transition: color 0.2s, background-color 0.2s, transform 0.25s ease;
  transition: color 0.2s, background-color 0.2s, transform 0.25s ease;
}

.page-home .dash-sidebar__toggle:hover {
  color: var(--color-blue);
  background-color: rgba(245, 246, 248, 0.9);
}

.page-home .dash-sidebar__toggle-icon {
  display: block;
}

.page-home .dash.dash--sidebar-collapsed .dash-sidebar__toggle-icon {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.page-home .dash.dash--sidebar-collapsed .dash-sidebar__toggle-label {
  display: none;
}

.page-home .dash.dash--sidebar-collapsed .dash-sidebar {
  padding-left: 0.1rem;
  padding-right: 0.1rem;
}

.page-home .dash.dash--sidebar-collapsed .dash-header__brand {
  padding-left: 0.14rem;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.page-home .dash.dash--sidebar-collapsed .dash-nav__link {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 0;
  padding-left: 0.1rem;
  padding-right: 0.1rem;
}

.page-home .dash.dash--sidebar-collapsed .dash-nav__link > span:not(.dash-nav__icon) {
  width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
}

.page-home .dash-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.04rem;
}

.page-home .dash-nav__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.16rem;
  padding: 0.14rem 0.16rem;
  border-radius: 0.08rem;
  font-size: 0.14rem;
  line-height: 0.2rem;
  color: #333333;
  -webkit-transition: background 0.2s;
  -o-transition: background 0.2s;
  transition: background 0.2s;
}

.page-home .dash-nav__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 0.2rem;
  height: 0.2rem;
  aspect-ratio: 1 / 1;
}

.page-home .dash-nav__icon img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.page-home .dash-nav__icon img.dash-nav__icon-active {
  display: none;
}

.page-home .dash-nav__link--active .dash-nav__icon img.dash-nav__icon-default {
  display: none;
}

.page-home .dash-nav__link--active .dash-nav__icon img.dash-nav__icon-active {
  display: block;
}

.page-home .dash-nav__link--vip.dash-nav__link--member .dash-nav__icon img.dash-nav__icon-default {
  display: none;
}

.page-home .dash-nav__link--vip.dash-nav__link--member .dash-nav__icon img.dash-nav__icon-active {
  display: block;
}

.page-home .dash-nav__link:hover {
  background-color: rgba(245, 246, 248, 0.8);
}

.page-home .dash-nav__link--active {
  background: -webkit-gradient(linear, left top, right top, from(#5dadff), to(#246eff));
  background: -o-linear-gradient(left, #5dadff, #246eff);
  background: linear-gradient(to right, #5dadff, #246eff);
  color: var(--color-white);
}

.page-home .dash-nav__link--vip {
  position: relative;
  overflow: hidden;
}

.page-home .dash-nav__link--vip::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 0.04rem;
  background-color: rgba(255, 255, 255, 0.3);
}

/* ---------- 主内容区 ---------- */
.page-home .dash-main {
  grid-area: main;
  --dash-home-content-width: 12.4rem;
  --dash-home-side-width: 3.95rem;
  padding: 0.22rem 0.24rem 0.4rem 0.16rem;
  min-width: 0;
}

.page-home .dash-notice {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.15rem;
  width: 100%;
  max-width: var(--dash-home-content-width);
  margin: 0 auto 0.12rem;
  padding: 0.06rem 0.19rem;
  background-color: #ebf3ff;
  border-radius: 0.04rem;
}

.page-home .dash-notice__icon {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-transform: scale(0.75);
  -ms-transform: scale(0.75);
  transform: scale(0.75);
}

.page-home .dash-notice p {
  font-size: 0.12rem;
  line-height: 0.18rem;
  color: var(--color-blue-dark);
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.page-home .dash-layout {
  display: grid;
  width: 100%;
  max-width: var(--dash-home-content-width);
  margin: 0 auto;
  grid-template-columns: minmax(0, calc(var(--dash-home-content-width) - var(--dash-home-side-width) - 0.12rem)) var(--dash-home-side-width);
  gap: 0.12rem;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

.page-home .dash-col-main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
  min-height: 0;
  -ms-flex-item-align: stretch;
  align-self: stretch;
}

.page-home .dash-col-side {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  min-height: 0;
  -ms-flex-item-align: stretch;
  align-self: stretch;
}

/* ---------- 通用卡片 ---------- */
.page-home .dash-card {
  background-color: var(--color-white);
  border: 1px solid #e5e6eb;
  border-radius: 0.12rem;
  -webkit-box-shadow: var(--shadow-sm);
  box-shadow: var(--shadow-sm);
  padding: 0.17rem;
}

.page-home .dash-card__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 0.12rem;
}

.page-home .dash-card__head h2,
.page-home .dash-card__title {
  font-size: 0.18rem;
  line-height: 0.2rem;
  font-weight: 700;
  color: #191b24;
}

.page-home .dash-card__title {
  margin-bottom: 0.16rem;
}

.page-home .dash-card__meta {
  font-size: 0.14rem;
  line-height: 0.16rem;
  color: var(--color-text-light);
  font-weight: 400;
}

.page-home .dash-card__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.04rem;
}

.page-home .dash-icon-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0.052rem;
  border-radius: 0.04rem;
}

.page-home .dash-icon-btn:hover {
  background-color: rgba(245, 246, 248, 0.8);
}

/* ---------- 按钮 ---------- */
.page-home .dash-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 0.08rem;
  border-radius: 0.04rem;
  font-size: 0.12rem;
  line-height: 0.18rem;
  white-space: nowrap;
  -webkit-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.page-home .dash-btn--primary {
  background-color: var(--color-blue-dark);
  color: var(--color-white);
  padding: 0.11rem 0.12rem;
}

.page-home .dash-btn--primary:hover {
  opacity: 0.9;
}

.page-home .dash-btn--sm {
  font-size: 0.1rem;
  line-height: 0.15rem;
  padding: 0.04rem 0.12rem;
}

.page-home .dash-btn--outline {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border: 1px solid var(--color-border);
  background-color: var(--color-white);
  color: var(--color-text-secondary);
  padding: 0.11rem 0.12rem;
  border-radius: 0.08rem;
}

/* ---------- 键盘指法卡片 ---------- */
.page-home .dash-card--fingering {
  padding: 0.29rem 0.17rem 0.17rem;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.page-home .dash-fingering-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0.12rem 0.18rem 0.12rem 0.12rem;
  border-radius: 0.04rem;
  -webkit-box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.07);
  box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.07);
  gap: 0.12rem;
}

.page-home .dash-fingering-row__left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.12rem;
  min-width: 0;
}

.page-home .dash-fingering-row__num {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 0.32rem;
  height: 0.32rem;
  border: 1px solid rgba(22, 93, 255, 0.3);
  border-radius: 0.12rem;
  font-size: 0.12rem;
  font-weight: 700;
  color: var(--color-blue-dark);
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-home .dash-fingering-row h3 {
  font-size: 0.16rem;
  line-height: 0.2rem;
  font-weight: 700;
  color: #191b24;
}

.page-home .dash-fingering-row p {
  font-size: 0.12rem;
  line-height: 0.16rem;
  color: var(--color-text-light);
  margin-top: 0.02rem;
}

/* ---------- 学习统计 ---------- */
.page-home .dash-card--duration {
  padding: 0.16rem;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.page-home .dash-tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.2rem;
  border-bottom: 1px solid rgba(195, 197, 217, 0.1);
  margin: 0 0 0.18rem;
  padding: 0 0 0.01rem;
}

.page-home .dash-tabs li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.page-home .dash-tabs__btn {
  font-size: 0.13rem;
  line-height: 0.195rem;
  color: var(--color-border);
  padding-bottom: 0.06rem;
  border-bottom: 0.02rem solid transparent;
  margin-bottom: -0.01rem;
}

.page-home .dash-tabs__btn--active {
  color: var(--color-blue-dark);
  border-bottom-color: var(--color-blue-dark);
}

.page-home .dash-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.12rem;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

.page-home .dash-metric {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.12rem;
  height: 100%;
  min-height: 0.88rem;
  padding: 0.14rem 0.12rem;
  border-radius: 0.12rem;
  min-width: 0;
}

.page-home .dash-metric--purple {
  background-color: #f3edff;
}

.page-home .dash-metric--blue {
  background-color: #edf3ff;
}

.page-home .dash-metric--yellow {
  background-color: #fff8e8;
}

.page-home .dash-metric__icon-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 0.44rem;
  height: 0.44rem;
  border-radius: 50%;
  background-color: #fff;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-home .dash-metric__info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.02rem;
  min-width: 0;
}

.page-home .dash-metric__label {
  font-size: 0.12rem;
  line-height: 0.18rem;
  color: var(--color-text-secondary);
  word-break: break-word;
}

.page-home .dash-metric__value {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  gap: 0.04rem;
  min-height: 0.28rem;
}

.page-home .dash-metric__value strong {
  font-size: 0.2rem;
  line-height: 0.28rem;
  color: #191b24;
  font-weight: 600;
}

.page-home .dash-metric__trend {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  margin-bottom: 0.04rem;
}

.page-home .dash-metric__up {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-transform: scale(0.75);
  -ms-transform: scale(0.75);
  transform: scale(0.75);
  -webkit-transform-origin: left bottom;
  -ms-transform-origin: left bottom;
  transform-origin: left bottom;
  margin-bottom: 0.1rem;
  margin-left: 0.04rem;
}

.page-home .dash-metric__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 0.32rem;
  height: 0.32rem;
}

.page-home .dash-metric__icon--sentence {
  background: transparent;
}

.page-home .dash-metric__icon--word {
  background: transparent;
  color: #165dff;
  font-size: 0.18rem;
  font-weight: 700;
  line-height: 0.24rem;
}

.page-home .dash-metric__icon--duration {
  background: transparent;
}

/* ---------- 最近学习（上封面 + 下标题） ---------- */
.page-home .dash-card--recent .dash-card__title {
  margin-bottom: 0.16rem;
  line-height: 0.16rem;
}

.page-home .dash-card--recent {
  padding: 0.25rem 0.17rem 0.28rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.page-home .dash-recent-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  --dash-recent-cols: 5;
  --dash-recent-gap: 0.16rem;
  gap: var(--dash-recent-gap);
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 0;
  height: 100%;
}

.page-home .dash-recent-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc((100% - (var(--dash-recent-cols) - 1) * var(--dash-recent-gap)) / var(--dash-recent-cols));
  flex: 0 0 calc((100% - (var(--dash-recent-cols) - 1) * var(--dash-recent-gap)) / var(--dash-recent-cols));
  width: calc((100% - (var(--dash-recent-cols) - 1) * var(--dash-recent-gap)) / var(--dash-recent-cols));
  max-width: calc((100% - (var(--dash-recent-cols) - 1) * var(--dash-recent-gap)) / var(--dash-recent-cols));
  min-width: 0;
}

.page-home .dash-recent-item__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  gap: 0.08rem;
  width: 100%;
  height: 100%;
  min-height: 0;
  text-decoration: none;
  color: inherit;
}

.page-home .dash-recent-item__cover {
  width: 100%;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0;
  flex: 1 1 0;
  min-height: 0;
  height: 0;
  border-radius: 0.06rem;
  background-color: var(--color-avatar-bg);
  overflow: hidden;
}

.page-home .dash-recent-item__cover img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}

.page-home .dash-recent-item__title {
  margin: 0;
  width: 100%;
  font-size: 0.11rem;
  line-height: 0.16rem;
  color: #191b24;
  font-weight: 500;
  text-align: left;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.page-home .dash-hot-thumb {
  width: 0.56rem;
  height: 0.4rem;
  border-radius: 0.02rem;
  overflow: hidden;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-home .dash-hot-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}

/* ---------- 复习中心（Figma 节点 1:2610） ---------- */
.page-home .dash-card--review {
  padding: 0.17rem;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.page-home .dash-card--review .dash-card__title {
  margin-bottom: 0.12rem;
  line-height: 0.16rem;
}

.page-home .dash-review-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  gap: 0.12rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-home .dash-review-grid > li {
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.page-home .dash-review-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.08rem;
  width: 100%;
  min-height: 0.72rem;
  padding: 0.1rem 0.14rem;
  border: 1px solid rgba(195, 197, 217, 0.1);
  border-radius: 0.04rem;
  -webkit-box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.07);
  box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.07);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  -webkit-transition: background-color 0.2s;
  -o-transition: background-color 0.2s;
  transition: background-color 0.2s;
}

.page-home .dash-review-item:hover {
  background-color: #f7f8fa;
}

.page-home .dash-review-item__left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.08rem;
  min-width: 0;
}

.page-home .dash-review-item__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-home .dash-review-item__icon--wrong {
  background-color: rgba(186, 26, 26, 0.1);
}

.page-home .dash-review-item__icon--vocab {
  width: 0.32rem;
  height: 0.32rem;
  background-color: rgba(152, 72, 0, 0.1);
}

.page-home .dash-review-item strong {
  font-size: 0.14rem;
  line-height: 0.2rem;
  color: #191b24;
  font-weight: 700;
}

/* ---------- 我的打卡 ---------- */
.page-home .dash-card--checkin {
  padding: 0.17rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.3rem;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-height: 0;
}

.page-home .dash-checkin-stats {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0.17rem;
  background-color: rgba(238, 238, 238, 0.3);
  border: 1px solid rgba(195, 197, 217, 0.2);
  border-radius: 0.08rem;
}

.page-home .dash-checkin-stats__col {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 0.04rem;
  min-height: 0.48rem;
}

.page-home .dash-checkin-stats__col--right {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.page-home .dash-checkin-stats__label {
  font-size: 0.1rem;
  line-height: 0.15rem;
  color: var(--color-border);
  white-space: nowrap;
}

.page-home .dash-checkin-stats__value {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  gap: 0.04rem;
}

.page-home .dash-checkin-stats__num {
  font-size: 0.24rem;
  line-height: 0.32rem;
  font-weight: 700;
  color: #191b24;
}

.page-home .dash-checkin-stats__num--blue {
  color: var(--color-blue-dark);
}

.page-home .dash-checkin-stats__unit {
  display: block;
  width: 0.11016rem;
  height: 0.10629rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-home .dash-checkin-progress__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  font-size: 0.11rem;
  line-height: 0.165rem;
  color: var(--color-text-secondary);
  padding: 0 0.04rem;
  margin-bottom: 0.08rem;
}

.page-home .dash-checkin-progress__bar {
  height: 0.08rem;
  background-color: #e7e7f4;
  border-radius: 0.12rem;
  overflow: hidden;
}

.page-home .dash-checkin-progress__bar span {
  display: block;
  height: 100%;
  background-color: var(--color-blue-dark);
  border-radius: 0.12rem;
}

.page-home .dash-checkin-week {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-height: 0;
}

.page-home .dash-checkin-week__title {
  font-size: 0.11rem;
  line-height: 0.165rem;
  color: var(--color-text-secondary);
  margin-bottom: 0.12rem;
  padding-top: 0.08rem;
}

.page-home .dash-checkin-days {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 0.04rem;
}

.page-home .dash-checkin-days li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.08rem;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}

.page-home .dash-checkin-days span {
  font-size: 0.1rem;
  line-height: 0.15rem;
  color: var(--color-border);
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}

.page-home .dash-checkin-days__active {
  color: var(--color-blue-dark) !important;
}

.page-home .dash-checkin-day {
  display: block;
  width: 0.32rem;
  height: 0.32rem;
  border: 0.02rem dashed rgba(195, 197, 217, 0.3);
  border-radius: 0.04rem;
  background-color: rgba(238, 238, 238, 0.5);
  pointer-events: none;
}

.page-home .dash-checkin-day--done {
  background-color: var(--color-blue-dark);
  border-style: solid;
  border-color: var(--color-blue-dark);
}

.page-home .dash-checkin-btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.12rem;
  padding-top: 0.08rem;
}

.page-home .dash-checkin-btns .dash-btn--primary {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border-radius: 0.08rem;
}

/* ---------- 热门课程（列表 flex） ---------- */
.page-home .dash-hot-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.07rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-home .dash-hot-list > li {
  min-width: 0;
}

.page-home .dash-hot-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.12rem;
  padding: 0.08rem;
  background-color: rgba(238, 238, 238, 0.3);
  border-radius: 0.04rem;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  -webkit-transition: background-color 0.2s;
  -o-transition: background-color 0.2s;
  transition: background-color 0.2s;
}

.page-home .dash-hot-item:hover {
  background-color: rgba(238, 238, 238, 0.55);
}

.page-home .dash-hot-item__info {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
}

.page-home .dash-hot-item h3 {
  font-size: 0.11rem;
  line-height: 0.165rem;
  color: #191b24;
  font-weight: 500;
}

.page-home .dash-hot-item p {
  font-size: 0.1rem;
  line-height: 0.15rem;
  color: var(--color-text-light);
}

/* ---------- 微信公众号 ---------- */
.page-home .dash-card--wechat {
  padding: 0.12rem;
}

.page-home .dash-wechat {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 0.12rem;
  padding: 0.08rem 0;
}

.page-home .dash-wechat__text h3 {
  font-size: 0.18rem;
  line-height: 0.28rem;
  color: #333333;
  font-weight: 500;
  margin-bottom: 0.04rem;
}

.page-home .dash-wechat__text p {
  font-size: 0.12rem;
  line-height: 0.16rem;
  color: rgba(51, 51, 51, 0.6);
}

.page-home .dash-wechat__qr {
  padding: 0.05rem;
  border: 1px solid var(--color-border);
  border-radius: 0.06rem;
  background-color: var(--color-white);
  -webkit-box-shadow: 0 0.01rem 0.01rem rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.01rem 0.01rem rgba(0, 0, 0, 0.05);
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-home .dash-wechat__qr img {
  width: 1.05rem;
  height: 1.05rem;
  max-width: none;
}

/* ---------- Dashboard 响应式 ---------- */
@media (max-width: 1200px) {
  .page-home .dash-layout {
    grid-template-columns: 1fr;
    max-width: 7.4rem;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
  }

  .page-home .dash-card--review {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .page-home .dash-review-grid {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .page-home .dash-notice {
    max-width: 7.4rem;
  }

  .page-home .dash-header__tools .dash-pill span {
    display: none;
  }

  .page-home .dash-pill {
    padding: 0.06rem;
  }
}

@media (max-width: 1024px) {
  .page-home .dash {
    grid-template-areas:
      "header header"
      "main main";
    grid-template-columns: 1fr;
  }

  .page-home .dash-sidebar {
    position: fixed;
    left: 0;
    top: 0.59rem;
    bottom: 0;
    width: 2.13rem;
    height: auto;
    overflow: hidden;
    z-index: 150;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    -o-transition: transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
    -webkit-box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
  }

  .page-home .dash-sidebar--open {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  .page-home .dash-header__menu-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .page-home .dash-sidebar__toggle {
    display: none;
  }

  .page-home .dash-header__brand {
    width: auto;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }

  .page-home .dash-review-grid,
  .page-home .dash-metrics {
    grid-template-columns: 1fr;
  }

  .page-home .dash-recent-grid {
    --dash-recent-gap: 0.14rem;
  }

  .page-home .dash-review-grid {
    gap: 0.16rem;
  }

  .page-home .dash-review-item {
    min-height: 0.48rem;
    padding: 0.08rem 0.12rem;
  }
}

/* ---------- 打卡规则弹框（Figma 节点 1:6554） ---------- */
.page-home .dash-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0.16rem;
}

.page-home .dash-modal[hidden] {
  display: none;
}

.page-home .dash-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(107, 114, 128, 0.5);
}

.page-home .dash-modal__panel {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 4.8rem;
  max-width: 100%;
  max-height: calc(100vh - 0.32rem);
  background-color: var(--color-white);
  border-radius: 0.12rem;
  -webkit-box-shadow: var(--shadow-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.page-home .dash-modal__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 0.16rem 0.24rem 0.17rem;
  border-bottom: 1px solid #f3f4f6;
}

.page-home .dash-modal__title {
  font-size: 0.2rem;
  line-height: 0.28rem;
  font-weight: 500;
  color: #333;
}

.page-home .dash-modal__close {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 0.2rem;
  height: 0.2rem;
  border-radius: 0.04rem;
}

.page-home .dash-modal__close:hover {
  background-color: rgba(245, 246, 248, 0.8);
}

.page-home .dash-modal__close img {
  display: block;
  width: 0.2rem;
  height: 0.2rem;
}

.page-home .dash-rule__icon img {
  display: block;
  width: 0.16rem;
  height: 0.16rem;
}

.page-home .dash-modal__body {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow: auto;
  padding: 0.24rem 0.32rem 0.48rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.32rem;
}

.page-home .dash-rule {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.12rem;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.page-home .dash-rule__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 0.24rem;
  height: 0.24rem;
  margin-top: 0.04rem;
  border-radius: 0.06rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-home .dash-rule__icon--star {
  background-color: #faf5ff;
}

.page-home .dash-rule__icon--gear {
  background-color: #eff6ff;
}

.page-home .dash-rule__icon--fire {
  background-color: #fff7ed;
}

.page-home .dash-rule__icon--calendar {
  background-color: #f0fdf4;
}

.page-home .dash-rule__content {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
}

.page-home .dash-rule__heading {
  font-size: 0.18rem;
  line-height: 0.28rem;
  font-weight: 500;
  color: #666;
  margin-bottom: 0.07rem;
}

.page-home .dash-rule__text {
  font-size: 0.15rem;
  line-height: 0.2438rem;
  font-weight: 500;
  color: #6b7280;
}

.page-home .dash-rule__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.03rem;
  padding-left: 0.24rem;
}

.page-home .dash-rule__list li {
  position: relative;
  font-size: 0.15rem;
  line-height: 0.2438rem;
  font-weight: 500;
  color: #6b7280;
}

.page-home .dash-rule__list li::before {
  content: "•";
  position: absolute;
  left: -0.16rem;
  color: #9ca3af;
  font-weight: 400;
}

.page-home .dash-rule__list--warn {
  color: #f59e0b;
}

.page-home .dash-modal__footer {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 0 0.24rem 0.24rem;
}

.page-home .dash-modal__confirm {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  padding: 0.14rem;
  border-radius: 0.12rem;
  background-color: var(--color-blue-dark);
  color: var(--color-white);
  font-size: 0.18rem;
  line-height: 0.28rem;
  font-weight: 500;
  -webkit-box-shadow: var(--shadow-md);
  box-shadow: var(--shadow-md);
}

.page-home .dash-modal__confirm:hover {
  opacity: 0.92;
}

body.dash-modal-open {
  overflow: hidden;
}

/* ---------- 打卡设置弹框（Figma 节点 1:6632） ---------- */
.page-home .dash-modal--settings .dash-modal__backdrop {
  background-color: rgba(31, 41, 55, 0.5);
}

.page-home .dash-modal__panel--settings {
  width: 5.6rem;
  border-radius: 0.16rem;
}

.page-home .dash-modal__header--settings {
  padding: 0.24rem 0.32rem 0.25rem;
}

.page-home .dash-modal__title--settings {
  color: #111827;
  line-height: 0.3rem;
}

.page-home .dash-settings__body {
  padding: 0.32rem 0.32rem 0.64rem;
}

.page-home .dash-settings__label {
  font-size: 0.16rem;
  line-height: 0.24rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.24rem;
}

.page-home .dash-settings__card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.24rem;
  padding: 0.25rem;
  background-color: var(--color-white);
  border: 1px solid #f3f4f6;
  border-radius: 0.12rem;
  -webkit-box-shadow: 0 0.01rem 0.01rem rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.01rem 0.01rem rgba(0, 0, 0, 0.05);
}

.page-home .dash-settings__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 0.12rem;
}

.page-home .dash-settings__hint {
  font-size: 0.14rem;
  line-height: 0.21rem;
  font-weight: 500;
  color: #6b7280;
}

.page-home .dash-settings__value {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  gap: 0.04rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-home .dash-settings__value strong {
  font-family: Inter, Arial, sans-serif;
  font-size: 0.22rem;
  line-height: 0.33rem;
  font-weight: 700;
  color: #111827;
}

.page-home .dash-settings__value span {
  font-size: 0.14rem;
  line-height: 0.21rem;
  font-weight: 500;
  color: #111827;
}

.page-home .dash-settings__slider-wrap {
  padding: 0 0.04rem;
}

.page-home .dash-settings__slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 0.08rem;
  margin: 0.06rem 0 0.08rem;
  border-radius: 0.04rem;
  background: #f3f4f6;
  outline: none;
  cursor: pointer;
}

.page-home .dash-settings__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 0.2rem;
  height: 0.2rem;
  border: 1px solid #e5e7eb;
  border-radius: 50%;
  background-color: var(--color-white);
  -webkit-box-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.1);
  box-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.1);
}

.page-home .dash-settings__slider::-moz-range-thumb {
  width: 0.2rem;
  height: 0.2rem;
  border: 1px solid #e5e7eb;
  border-radius: 50%;
  background-color: var(--color-white);
  box-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.1);
}

.page-home .dash-settings__slider::-moz-range-track {
  height: 0.08rem;
  border-radius: 0.04rem;
  background: #f3f4f6;
}

.page-home .dash-settings__scale {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  font-family: Inter, Arial, sans-serif;
  font-size: 0.12rem;
  line-height: 0.18rem;
  color: #9ca3af;
}

.page-home .dash-settings__quote {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 0.08rem;
}

.page-home .dash-settings__quote img {
  display: block;
  width: 0.2rem;
  height: 0.2rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-home .dash-settings__quote p {
  font-family: Inter, Arial, sans-serif;
  font-size: 0.14rem;
  line-height: 0.21rem;
  font-style: italic;
  color: #6b7280;
}

.page-home .dash-settings__footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.16rem;
  padding: 0 0.32rem 0.32rem;
}

.page-home .dash-settings__cancel,
.page-home .dash-settings__save {
  font-size: 0.16rem;
  line-height: 0.24rem;
  font-weight: 500;
  border-radius: 0.1rem;
  padding: 0.13rem 0.25rem;
}

.page-home .dash-settings__cancel {
  width: 2.41rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  border: 1px solid #e5e7eb;
  background-color: var(--color-white);
  color: #4b5563;
}

.page-home .dash-settings__cancel:hover {
  background-color: #f9fafb;
}

.page-home .dash-settings__save {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border: none;
  background-color: var(--color-blue-dark);
  color: var(--color-white);
  -webkit-box-shadow: 0 0.04rem 0.06rem -0.01rem #e9d5ff, 0 0.02rem 0.04rem -0.02rem #e9d5ff;
  box-shadow: 0 0.04rem 0.06rem -0.01rem #e9d5ff, 0 0.02rem 0.04rem -0.02rem #e9d5ff;
}

.page-home .dash-settings__save:hover {
  opacity: 0.92;
}

@media (max-width: 768px) {
  .page-home .dash-settings__footer {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .page-home .dash-settings__cancel {
    width: 100%;
  }
}

/* ---------- 打卡日历弹框（Figma 节点 1:6673） ---------- */
.page-home .dash-modal--calendar .dash-modal__backdrop {
  background-color: rgba(17, 24, 39, 0.5);
}

.page-home .dash-modal--calendar .dash-modal__panel {
  width: 5.54rem;
  max-height: none;
  overflow: visible;
  border-radius: 0.12rem;
  -webkit-box-shadow: 0 0.25rem 0.5rem -0.12rem rgba(0, 0, 0, 0.25);
  box-shadow: 0 0.25rem 0.5rem -0.12rem rgba(0, 0, 0, 0.25);
}

.page-home .dash-calendar__header {
  position: relative;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 0.2rem 0.24rem 0.21rem;
  border-bottom: 1px solid #f9fafb;
}

.page-home .dash-calendar__title {
  width: 100%;
  font-size: 0.2rem;
  line-height: 0.28rem;
  font-weight: 500;
  color: #1f2937;
  text-align: center;
}

.page-home .dash-calendar__close {
  position: absolute;
  top: 0.24rem;
  right: 0.24rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 0.24rem;
  height: 0.24rem;
  border-radius: 0.04rem;
}

.page-home .dash-calendar__close:hover {
  background-color: rgba(245, 246, 248, 0.8);
}

.page-home .dash-calendar__close img {
  display: block;
  width: 0.24rem;
  height: 0.24rem;
  max-width: none;
}

.page-home .dash-calendar__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.24rem;
  width: 100%;
  padding: 0.24rem;
}

.page-home .dash-calendar__nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
}

.page-home .dash-calendar__nav-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 0.2rem;
  height: 0.2rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  border-radius: 0.04rem;
}

.page-home .dash-calendar__nav-btn:hover {
  background-color: rgba(245, 246, 248, 0.8);
}

.page-home .dash-calendar__nav-btn img {
  display: block;
  width: 0.2rem;
  height: 0.2rem;
  max-width: none;
}

.page-home .dash-calendar__month {
  font-size: 0.18rem;
  line-height: 0.28rem;
  font-weight: 700;
  color: #1f2937;
}

.page-home .dash-calendar__summary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  height: 0.74rem;
  padding: 0.13rem;
  background-color: rgba(249, 250, 251, 0.5);
  border: 1px solid #f3f4f6;
  border-radius: 0.12rem;
}

.page-home .dash-calendar__total {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.08rem;
  margin-bottom: 0.04rem;
}

.page-home .dash-calendar__total img {
  display: block;
  width: 0.12rem;
  height: 0.12rem;
  max-width: none;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-home .dash-calendar__total strong {
  font-size: 0.2rem;
  line-height: 0.28rem;
  font-weight: 700;
  color: #1f2937;
}

.page-home .dash-calendar__total-label {
  font-size: 0.12rem;
  line-height: 0.16rem;
  font-weight: 500;
  color: #9ca3af;
}

.page-home .dash-calendar__grid-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.16rem;
  width: 100%;
  padding: 0.25rem;
  background-color: rgba(249, 250, 251, 0.3);
  border: 1px solid #f3f4f6;
  border-radius: 0.16rem;
}

.page-home .dash-calendar__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  height: 0.2rem;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-items: center;
}

.page-home .dash-calendar__weekdays span {
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 500;
  color: #9ca3af;
  text-align: center;
}

.page-home .dash-calendar__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 0.6516rem;
  row-gap: 0.08rem;
}

.page-home .dash-calendar__day {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 0.6516rem;
  font-size: 0.16rem;
  line-height: 0.24rem;
  font-weight: 400;
  color: #1f2937;
  text-align: center;
}

.page-home .dash-calendar__day--future {
  font-weight: 400;
  color: #9ca3af;
}

.page-home .dash-calendar__day--muted {
  font-weight: 400;
  color: #e5e7eb;
}

.page-home .dash-calendar__day--today {
  font-weight: 700;
  color: #1f2937;
}

.page-home .dash-calendar__day--today .dash-calendar__day-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 0.4rem;
  height: 0.4rem;
  background-color: var(--color-white);
  border: 2px solid #165dff;
  border-radius: 0.08rem;
  font-size: 0.16rem;
  line-height: 0.24rem;
  font-weight: 700;
  -webkit-box-shadow: 0 0.01rem 0.01rem rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.01rem 0.01rem rgba(0, 0, 0, 0.05);
}

@media (max-width: 768px) {
  .page-home .dash-header__user-info {
    display: none;
  }

  .page-home .dash-notice p {
    white-space: normal;
    font-size: 13px;
    line-height: 20px;
  }

  .page-home .dash-checkin-btns {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  /* 主页手机端字号优化 */
  .page-home .dash-breadcrumb__text {
    font-size: 14px;
    line-height: 20px;
  }

  .page-home .dash-pill {
    font-size: 13px;
    line-height: 18px;
  }

  .page-home .dash-nav__link {
    font-size: 15px;
    line-height: 22px;
  }

  .page-home .dash-card__head h2,
  .page-home .dash-card__title {
    font-size: 17px;
    line-height: 24px;
  }

  .page-home .dash-card__meta {
    font-size: 14px;
    line-height: 20px;
  }

  .page-home .dash-btn {
    font-size: 14px;
    line-height: 20px;
  }

  .page-home .dash-btn--sm {
    font-size: 13px;
    line-height: 18px;
  }

  .page-home .dash-fingering-row h3 {
    font-size: 16px;
    line-height: 22px;
  }

  .page-home .dash-fingering-row p {
    font-size: 13px;
    line-height: 18px;
  }

  .page-home .dash-tabs__btn {
    font-size: 14px;
    line-height: 20px;
  }

  .page-home .dash-metric__label {
    font-size: 13px;
    line-height: 18px;
  }

  .page-home .dash-metric__value strong {
    font-size: 20px;
    line-height: 28px;
  }

  .page-home .dash-recent-item__title {
    font-size: 14px;
    line-height: 20px;
  }

  .page-home .dash-review-item strong {
    font-size: 15px;
    line-height: 22px;
  }

  .page-home .dash-checkin-stats__label {
    font-size: 13px;
    line-height: 18px;
  }

  .page-home .dash-checkin-stats__num {
    font-size: 22px;
    line-height: 30px;
  }

  .page-home .dash-checkin-progress__head,
  .page-home .dash-checkin-week__title {
    font-size: 13px;
    line-height: 18px;
  }

  .page-home .dash-checkin-days span {
    font-size: 12px;
    line-height: 16px;
  }

  .page-home .dash-hot-item h3 {
    font-size: 14px;
    line-height: 20px;
  }

  .page-home .dash-hot-item p {
    font-size: 12px;
    line-height: 16px;
  }

  .page-home .dash-wechat__text h3 {
    font-size: 17px;
    line-height: 26px;
  }

  .page-home .dash-wechat__text p {
    font-size: 13px;
    line-height: 18px;
  }

  /* 弹窗通用 */
  .page-home .dash-modal {
    padding: 12px;
  }

  .page-home .dash-modal__panel,
  .page-home .dash-modal--calendar .dash-modal__panel,
  .page-home .dash-modal__panel--settings {
    width: calc(100vw - 24px);
    max-width: none;
  }

  .page-home .dash-modal__title,
  .page-home .dash-modal__title--settings {
    font-size: 18px;
    line-height: 26px;
  }

  .page-home .dash-rule__heading {
    font-size: 16px;
    line-height: 24px;
  }

  .page-home .dash-rule__text,
  .page-home .dash-rule__list li {
    font-size: 14px;
    line-height: 22px;
  }

  .page-home .dash-modal__confirm {
    font-size: 16px;
    line-height: 24px;
    padding: 12px;
  }

  .page-home .dash-settings__label {
    font-size: 15px;
    line-height: 22px;
  }

  .page-home .dash-settings__hint {
    font-size: 14px;
    line-height: 20px;
  }

  .page-home .dash-settings__value strong {
    font-size: 22px;
    line-height: 30px;
  }

  .page-home .dash-settings__value span {
    font-size: 14px;
  }

  .page-home .dash-settings__scale {
    font-size: 13px;
  }

  .page-home .dash-settings__quote p {
    font-size: 13px;
    line-height: 20px;
  }

  .page-home .dash-settings__cancel,
  .page-home .dash-settings__save {
    font-size: 15px;
    line-height: 22px;
    padding: 12px;
  }

  /* 打卡日历弹窗 */
  .page-home .dash-calendar__title {
    font-size: 18px;
    line-height: 26px;
  }

  .page-home .dash-calendar__header {
    padding: 16px 16px 14px;
  }

  .page-home .dash-calendar__close {
    top: 16px;
    right: 16px;
  }

  .page-home .dash-calendar__body {
    padding: 16px;
    gap: 16px;
  }

  .page-home .dash-calendar__month {
    font-size: 17px;
    line-height: 26px;
  }

  .page-home .dash-calendar__summary {
    height: auto;
    min-height: 72px;
  }

  .page-home .dash-calendar__total strong {
    font-size: 20px;
    line-height: 28px;
  }

  .page-home .dash-calendar__total-label {
    font-size: 13px;
    line-height: 18px;
  }

  .page-home .dash-calendar__grid-wrap {
    padding: 16px 12px;
  }

  .page-home .dash-calendar__weekdays {
    height: 22px;
  }

  .page-home .dash-calendar__weekdays span {
    font-size: 14px;
    line-height: 20px;
  }

  .page-home .dash-calendar__days {
    grid-auto-rows: 44px;
  }

  .page-home .dash-calendar__day {
    height: 44px;
    font-size: 15px;
    line-height: 22px;
  }

  .page-home .dash-calendar__day--today .dash-calendar__day-inner {
    width: 36px;
    height: 36px;
    font-size: 15px;
    line-height: 22px;
  }
}

@media (max-width: 480px) {
  .page-home .dash-card__head h2,
  .page-home .dash-card__title {
    font-size: 18px;
  }

  .page-home .dash-btn {
    font-size: 15px;
  }

  .page-home .dash-calendar__day {
    font-size: 16px;
    height: 46px;
  }

  .page-home .dash-calendar__days {
    grid-auto-rows: 46px;
  }

  .page-home .dash-calendar__day--today .dash-calendar__day-inner {
    width: 38px;
    height: 38px;
    font-size: 16px;
  }
}

/* ==========================================================================
   设置页（settings.html）— Figma 节点 1:4125
   作用域：body.page-settings，复用 page-home 的 dash 布局
   ========================================================================== */
.page-settings {
  background-color: var(--color-white);
}

.page-settings .dash-main--settings {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 0;
  background-color: #ffffff;
  min-width: 0;
}

.page-settings .dash-header--settings {
  gap: 0;
  overflow: hidden;
}

.page-settings .dash-header--settings .dash-header__brand {
  width: 2.13rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-settings .dash-header--settings .settings-page__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.09rem;
  margin-left: 0.16rem;
  padding: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-settings .dash-toolbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  gap: 0.08rem;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  padding: 0 0.16rem 0 0.12rem;
  overflow-x: auto;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.page-settings .dash-toolbar::-webkit-scrollbar {
  display: none;
}

.page-settings .dash-header--settings .dash-header__menu-btn {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-settings .dash-tool-pill {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.04rem;
  padding: 0.04rem 0.12rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  border: 1px solid #e3e9f1;
  border-radius: 9999px;
  background-color: var(--color-white);
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 500;
  color: #475569;
  white-space: nowrap;
}

.page-settings .dash-tool-pill--active {
  border-color: var(--color-blue);
}

.page-settings .dash-tool-pill img {
  display: block;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  max-width: none;
}

.page-settings .dash-tool-pill__arrow {
  width: 0.08rem;
  height: 0.08rem;
}

.page-settings .dash-tool-pill__toggle {
  width: 0.16rem;
  height: 0.16rem;
}

.page-settings .settings-page {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-height: 0;
}

.page-settings .settings-top {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  background-color: var(--color-white);
  padding: 0 0.32rem;
}

.page-settings .settings-breadcrumb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  line-height: 0;
}

.page-settings .settings-breadcrumb img {
  display: block;
  width: 0.18rem;
  height: 0.14rem;
  max-width: none;
}

.page-settings .settings-breadcrumb__btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0;
  padding: 0.04rem 0.12rem;
  border: 1px solid #e3e9f1;
  border-radius: 9999px;
  background-color: var(--color-white);
  cursor: pointer;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  line-height: 0;
}

.page-settings .settings-breadcrumb__btn img {
  display: block;
  width: 0.14rem;
  height: 0.14rem;
  max-width: none;
}

.page-settings .settings-breadcrumb__title {
  margin: 0;
  font-size: 0.16rem;
  line-height: 0.2rem;
  font-weight: 500;
  color: #181c23;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-settings .settings-tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 0.32rem;
  min-height: 0.59rem;
  padding: 0.16rem 0 0;
  border-bottom: 1px solid transparent;
}

.page-settings .settings-content {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 0.21rem 0.32rem 0.4rem;
}

.page-settings .settings-tabs__btn {
  display: inline-block;
  padding: 0 0 0.14rem;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  font-size: 0.18rem;
  line-height: 0.26rem;
  font-weight: 500;
  color: #4e5969;
  cursor: pointer;
  margin-bottom: -1px;
  text-decoration: none;
}

.page-settings .settings-tabs__btn:disabled {
  cursor: default;
  opacity: 1;
}

.page-settings .settings-tabs__btn--active {
  color: var(--color-blue);
  border-bottom-color: var(--color-blue);
}

.page-settings .settings-auto-save-hint {
  margin: 0.12rem 0 0;
  font-size: 0.12rem;
  line-height: 1.5;
  color: #86909c;
}

.page-settings .settings-toast {
  position: fixed;
  left: 50%;
  bottom: 0.48rem;
  z-index: 1200;
  max-width: 80%;
  padding: 0.1rem 0.18rem;
  font-size: 0.14rem;
  line-height: 1.4;
  color: #fff;
  background: rgba(29, 33, 41, 0.92);
  border-radius: 0.08rem;
  -webkit-transform: translateX(-50%) translateY(0.12rem);
  transform: translateX(-50%) translateY(0.12rem);
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.2s ease, transform 0.2s ease;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.page-settings .settings-toast--show {
  opacity: 1;
  -webkit-transform: translateX(-50%) translateY(0);
  transform: translateX(-50%) translateY(0);
}

.page-settings .settings-coming-soon {
  width: 100%;
  max-width: 8.64rem;
  margin-bottom: 0.16rem;
  padding: 0.12rem 0.16rem;
  background: #fff7e8;
  border: 1px solid #ffcf8b;
  border-radius: 0.08rem;
}

.page-settings .settings-coming-soon__text {
  margin: 0;
  font-size: 0.13rem;
  line-height: 1.5;
  color: #d25f00;
}

.page-settings .settings-card {
  width: 100%;
  max-width: 8.64rem;
  padding: 0.4rem;
  background-color: var(--color-white);
  border-radius: 0.12rem;
  -webkit-box-shadow: 0 0.04rem 0.12rem rgba(0, 0, 0, 0.04);
  box-shadow: 0 0.04rem 0.12rem rgba(0, 0, 0, 0.04);
}

.page-settings .settings-panel--voice {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

/* 设置项单列纵向排列（Figma 1:4505） */
.page-settings .settings-panel__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.32rem;
  width: 100%;
  max-width: 7.24rem;
  padding-top: 0.08rem;
}

.page-settings .settings-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  /* justify-content: space-between; */
  gap: 0.16rem;
  font-size: 0;
  line-height: 1;
}

.page-settings .settings-row__label {
  font-size: 0.18rem;
  line-height: 0.26rem;
  font-weight: 500;
  color: #191b24;
  white-space: nowrap;
}

.page-settings .settings-row--toggle .settings-row__label {
  color: #434656;
}

.page-settings .settings-row--toggle {
  width: 100%;
  margin-bottom: -0.08rem;
}

.page-settings .settings-row--select {
  width: 100%;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  /* justify-content: space-between; */
}

.page-settings .settings-row--select .settings-row__label {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-settings .settings-row--select .settings-select {
  /* margin-left: auto; */
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-settings .settings-toggle {
  position: relative;
  width: 0.44rem;
  height: 0.24rem;
  border: none;
  border-radius: 0.24rem;
  background-color: #c9cdd4;
  padding: 0.02rem;
  cursor: pointer;
  -webkit-transition: background-color 0.2s;
  -o-transition: background-color 0.2s;
  transition: background-color 0.2s;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-settings .settings-toggle--on {
  background-color: var(--color-blue-dark);
}

.page-settings .settings-toggle__thumb {
  display: block;
  width: 0.2rem;
  height: 0.2rem;
  border-radius: 0.1rem;
  background-color: var(--color-white);
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  -o-transition: transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
}

.page-settings .settings-toggle--on .settings-toggle__thumb {
  -webkit-transform: translateX(0.2rem);
  -ms-transform: translateX(0.2rem);
  transform: translateX(0.2rem);
}

.page-settings .settings-select {
  position: relative;
  width: 2.56rem;
  max-width: 100%;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-settings .settings-select__input {
  width: 100%;
  height: 0.44rem;
  padding: 0.09rem 0.32rem 0.07rem 0.17rem;
  border: 1px solid rgba(195, 197, 217, 0.3);
  border-radius: 0.08rem;
  background-color: var(--color-white);
  font-size: 0.18rem;
  line-height: 0.26rem;
  font-weight: 500;
  color: #191b24;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

.page-settings .settings-select__arrow {
  position: absolute;
  top: 50%;
  right: 0.12rem;
  width: 0.08rem;
  height: 0.08rem;
  margin-top: -0.04rem;
  pointer-events: none;
}

.page-settings .settings-slider-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.12rem;
}

.page-settings .settings-slider-group__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 0.12rem;
}

.page-settings .settings-slider-group__value {
  font-family: Inter, Arial, sans-serif;
  font-size: 0.18rem;
  line-height: 0.26rem;
  font-weight: 700;
  color: #191b24;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-settings .settings-slider-group__value--blue {
  color: var(--color-blue-dark);
}

.page-settings .settings-slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 0.04rem;
  margin: 0.05rem 0;
  border-radius: 0.02rem;
  background: #e5e6eb;
  outline: none;
  cursor: pointer;
}

.page-settings .settings-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 0.14rem;
  height: 0.14rem;
  border: 2px solid var(--color-white);
  border-radius: 50%;
  background-color: var(--color-blue-dark);
  -webkit-box-shadow: 0 0.01rem 0.04rem rgba(0, 0, 0, 0.1);
  box-shadow: 0 0.01rem 0.04rem rgba(0, 0, 0, 0.1);
}

.page-settings .settings-slider::-moz-range-thumb {
  width: 0.14rem;
  height: 0.14rem;
  border: 2px solid var(--color-white);
  border-radius: 50%;
  background-color: var(--color-blue-dark);
  box-shadow: 0 0.01rem 0.04rem rgba(0, 0, 0, 0.1);
}

.page-settings .settings-slider::-moz-range-track {
  height: 0.04rem;
  border-radius: 0.02rem;
  background: #e5e6eb;
}

.page-settings .settings-slider-group__scale {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0 0.04rem;
  font-family: Inter, Arial, sans-serif;
  font-size: 0.12rem;
  line-height: 0.18rem;
  font-weight: 400;
  color: #737688;
}

.page-settings .settings-slider-group--section {
  padding-top: 0.32rem;
  border-top: 1px solid rgba(195, 197, 217, 0.1);
}

.page-settings .settings-placeholder {
  padding: 0.8rem 0;
  text-align: center;
  font-size: 0.18rem;
  line-height: 0.26rem;
  color: #737688;
}

/* 设置页响应式 */
@media (max-width: 1200px) {
  .page-settings .settings-card {
    max-width: none;
  }
}

@media (max-width: 1024px) {
  .page-settings .settings-top {
    padding: 0 0.16rem;
  }

  .page-settings .settings-content {
    padding: 0.16rem 0.16rem 0.24rem;
  }

  .page-settings .settings-tabs {
    gap: 0.2rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .page-settings .settings-tabs::-webkit-scrollbar {
    display: none;
  }

  .page-settings .settings-tabs__btn {
    -ms-flex-negative: 0;
    flex-shrink: 0;
  }

  .page-settings .settings-card {
    padding: 0.24rem;
  }

  .page-settings .settings-select {
    width: auto;
    min-width: 140px;
    max-width: 56vw;
  }

  /* 小屏 rem 基准为 50px，改用 px 保证可读性 */
  .page-settings .dash-tool-pill {
    font-size: 15px;
    line-height: 22px;
  }

  .page-settings .dash-header--settings .dash-header__brand {
    width: auto;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    min-width: 0;
  }

  .page-settings .dash-header--settings .settings-page__head {
    gap: 9px;
    margin-left: 12px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
  }

  .page-settings .settings-breadcrumb img {
    width: 18px;
    height: 14px;
  }

  .page-settings .settings-breadcrumb__btn {
    padding: 4px 12px;
  }

  .page-settings .settings-breadcrumb__btn img {
    width: 14px;
    height: 14px;
  }

  .page-settings .settings-breadcrumb__title {
    font-size: 17px;
    line-height: 20px;
  }

  .page-settings .settings-tabs__btn {
    font-size: 18px;
    line-height: 28px;
  }

  .page-settings .settings-row__label,
  .page-settings .settings-slider-group__value,
  .page-settings .settings-placeholder {
    font-size: 18px;
    line-height: 28px;
  }

  .page-settings .settings-select__input {
    height: 44px;
    padding: 8px 28px 8px 12px;
    font-size: 18px;
    line-height: 26px;
    color: #191b24;
    -webkit-text-fill-color: #191b24;
  }

  .page-settings .settings-select__arrow {
    right: 12px;
    width: 10px;
    height: 10px;
    margin-top: -5px;
  }

  .page-settings .settings-slider-group__scale {
    font-size: 14px;
    line-height: 20px;
  }
}

/* ==========================================================================
   设置音效页（settings-sound.html）— Figma 节点 1:4594
   ========================================================================== */
.page-settings-sound .settings-content--sound {
  padding-top: 0.13rem;
}

.page-settings .settings-sound-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.32rem;
  width: 100%;
  max-width: 8.96rem;
}

.page-settings .settings-sound-card {
  padding: 0.25rem;
  border: 1px solid #e5e6eb;
  border-radius: 0.12rem;
  background-color: var(--color-white);
}

.page-settings .settings-sound-card__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 0.16rem;
}

.page-settings .settings-sound-card__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.12rem;
  min-width: 0;
}

.page-settings .settings-sound-card__icon {
  display: block;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  max-width: none;
}

.page-settings .settings-sound-card__icon--typing {
  width: 0.2rem;
  height: 0.14rem;
}

.page-settings .settings-sound-card__icon--complete {
  width: 0.18rem;
  height: 0.18rem;
}

.page-settings .settings-sound-card__name {
  margin: 0;
  font-size: 0.16rem;
  line-height: 0.24rem;
  font-weight: 500;
  color: #1d2129;
  white-space: nowrap;
}

.page-settings .settings-toggle--sound {
  width: 0.44rem;
  height: 0.22rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-settings .settings-toggle--sound .settings-toggle__thumb {
  width: 0.18rem;
  height: 0.18rem;
  border-radius: 0.09rem;
}

.page-settings .settings-toggle--sound.settings-toggle--on .settings-toggle__thumb {
  -webkit-transform: translateX(0.22rem);
  -ms-transform: translateX(0.22rem);
  transform: translateX(0.22rem);
}

.page-settings .settings-sound-card__body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.32rem;
  padding-top: 0.24rem;
}

.page-settings .settings-sound-card__field {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.08rem;
  min-width: 0;
}

.page-settings .settings-sound-card__label {
  font-size: 0.12rem;
  line-height: 0.16rem;
  font-weight: 500;
  color: #4e5969;
}

.page-settings .settings-sound-select {
  position: relative;
  width: 100%;
  font-size: 0;
  line-height: 1;
}

.page-settings .settings-sound-select__input {
  width: 100%;
  padding: 0.08rem 0.4rem 0.08rem 0.16rem;
  border: none;
  border-radius: 0.08rem;
  background-color: #f2f3f5;
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 500;
  color: #1d2129;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  outline: none;
  box-shadow: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.page-settings .settings-sound-select__input::-ms-expand {
  display: none;
}

.page-settings .settings-sound-select__input:focus,
.page-settings .settings-sound-select__input:focus-visible {
  outline: none;
  box-shadow: none;
}

.page-settings .settings-sound-select__arrow {
  position: absolute;
  top: 50%;
  right: 0.12rem;
  width: 0.08rem;
  height: 0.08rem;
  margin-top: -0.04rem;
  pointer-events: none;
}

.page-settings .settings-sound-volume__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 0.12rem;
}

.page-settings .settings-sound-volume__value {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.12rem;
  line-height: 0.16rem;
  font-weight: 400;
  color: var(--color-blue-dark);
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-settings .settings-sound-slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 0.16rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  outline: none;
  cursor: pointer;
}

.page-settings .settings-sound-slider:focus,
.page-settings .settings-sound-slider:focus-visible {
  outline: none;
}

.page-settings .settings-sound-slider::-webkit-slider-runnable-track {
  height: 0.04rem;
  border: none;
  border-radius: 0.02rem;
  background-color: #e5e6eb;
}

.page-settings .settings-sound-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 0.16rem;
  height: 0.16rem;
  margin-top: -0.06rem;
  border: 2px solid var(--color-blue-dark);
  border-radius: 0.08rem;
  background-color: var(--color-white);
  -webkit-box-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.1);
  box-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.1);
}

.page-settings .settings-sound-slider::-moz-range-thumb {
  width: 0.16rem;
  height: 0.16rem;
  border: 2px solid var(--color-blue-dark);
  border-radius: 0.08rem;
  background-color: var(--color-white);
  box-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.1);
}

.page-settings .settings-sound-slider::-moz-range-track {
  height: 0.04rem;
  border: none;
  border-radius: 0.02rem;
  background: #e5e6eb;
}

@media (max-width: 1024px) {
  .page-settings .settings-sound-card__body {
    grid-template-columns: 1fr;
    gap: 0.24rem;
  }

  .page-settings .settings-sound-card__name {
    font-size: 17px;
    line-height: 26px;
  }

  .page-settings .settings-sound-card__label {
    font-size: 14px;
    line-height: 20px;
  }

  .page-settings .settings-sound-select__input {
    height: 40px;
    padding: 8px 36px 8px 12px;
    font-size: 15px;
    line-height: 22px;
    color: #1d2129;
    -webkit-text-fill-color: #1d2129;
  }

  .page-settings .settings-sound-select__arrow {
    right: 12px;
    width: 10px;
    height: 10px;
    margin-top: -5px;
  }

  .page-settings .settings-sound-volume__value {
    font-size: 14px;
    line-height: 20px;
  }
}

/* ==========================================================================
   设置答题页（settings-answer.html）— Figma 节点 1:5117
   ========================================================================== */
.page-settings-answer .settings-content--answer {
  padding-top: 0.13rem;
}

.page-settings .settings-answer-card {
  width: 100%;
  max-width: 8.96rem;
  border: 1px solid #c3c5d9;
  border-radius: 0.08rem;
  background-color: var(--color-white);
  -webkit-box-shadow: 0 0.01rem 0.02rem rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.01rem 0.02rem rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.page-settings .settings-answer-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 0.24rem;
  padding: 0.24rem;
}

.page-settings .settings-answer-row__info {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
}

.page-settings .settings-answer-row__title {
  margin: 0;
  font-size: 0.16rem;
  line-height: 0.24rem;
  font-weight: 500;
  color: #191b24;
}

.page-settings .settings-answer-row__desc {
  margin: 0.04rem 0 0;
  max-width: 2.85rem;
  font-size: 0.12rem;
  line-height: 0.16rem;
  font-weight: 500;
  color: rgba(67, 70, 86, 0.7);
}

.page-settings .settings-answer-row__controls {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.23rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-settings .settings-answer-wrongbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 1.33rem;
  height: 0.34rem;
  padding: 0 0.12rem;
  border: 1px solid rgba(195, 197, 217, 0.5);
  border-radius: 0.04rem;
  background-color: #ededfa;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-settings .settings-answer-wrongbox__prefix,
.page-settings .settings-answer-wrongbox__suffix {
  font-size: 0.12rem;
  line-height: 0.16rem;
  font-weight: 500;
  color: #434656;
  white-space: nowrap;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-settings .settings-answer-wrongbox__select-wrap {
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  margin: 0 0.04rem;
  font-size: 0;
  line-height: 1;
}

.page-settings .settings-answer-wrongbox__select {
  width: 100%;
  padding: 0 0.16rem 0 0.04rem;
  border: none;
  background: transparent;
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 500;
  color: var(--color-blue-dark);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

.page-settings .settings-answer-wrongbox__arrow {
  position: absolute;
  top: 50%;
  right: 0;
  width: 0.08rem;
  height: 0.08rem;
  margin-top: -0.04rem;
  pointer-events: none;
}

.page-settings .settings-answer-card__divider {
  height: 1px;
  margin: 0;
  border: none;
  background-color: rgba(195, 197, 217, 0.3);
}

.page-settings-answer .settings-toggle--sound:not(.settings-toggle--on) {
  background-color: #c3c5d9;
}

@media (max-width: 1024px) {
  .page-settings .settings-answer-row {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 0.16rem;
  }

  .page-settings .settings-answer-row__title {
    font-size: 17px;
    line-height: 26px;
  }

  .page-settings .settings-answer-row__desc {
    max-width: none;
    font-size: 14px;
    line-height: 20px;
  }

  .page-settings .settings-answer-row__controls {
    width: 100%;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }

  .page-settings .settings-answer-wrongbox {
    width: auto;
    min-width: 133px;
    height: 34px;
    padding: 0 12px;
  }

  .page-settings .settings-answer-wrongbox__prefix,
  .page-settings .settings-answer-wrongbox__suffix {
    font-size: 13px;
    line-height: 18px;
  }

  .page-settings .settings-answer-wrongbox__select {
    font-size: 15px;
    line-height: 22px;
    color: var(--color-blue-dark);
    -webkit-text-fill-color: var(--color-blue-dark);
  }

  .page-settings .settings-answer-wrongbox__arrow {
    width: 10px;
    height: 10px;
    margin-top: -5px;
  }
}

/* ==========================================================================
   设置个性化页（settings-personal.html）— Figma 节点 1:5737
   ========================================================================== */
.page-settings-personal .settings-content--personal {
  padding-top: 0.13rem;
}

.page-settings .settings-personal-card {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 8.4rem;
  max-width: 100%;
  padding: 0.32rem;
  border-radius: 0.08rem;
  background-color: var(--color-white);
  -webkit-box-shadow: 0 0.02rem 0.06rem rgba(0, 0, 0, 0.06);
  box-shadow: 0 0.02rem 0.06rem rgba(0, 0, 0, 0.06);
}

.page-settings .settings-personal-card__top {
  width: 100%;
  min-height: 3.12rem;
}

.page-settings .settings-personal-card__left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
  max-width: 3.58rem;
}

.page-settings .settings-personal-section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.08rem;
}

.page-settings .settings-personal-section--color {
  gap: 0.16rem;
}

.page-settings .settings-personal-section--sizes {
  width: 100%;
  gap: 0.32rem;
}

.page-settings .settings-personal-section__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.08rem;
  min-height: 0.24rem;
}

.page-settings .settings-personal-badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 0.2rem;
  height: 0.2rem;
  border-radius: 0.02rem;
  background-color: #165dff;
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 0.1rem;
  line-height: 0.15rem;
  font-weight: 700;
  color: var(--color-white);
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-settings .settings-personal-section__title {
  margin: 0;
  font-size: 0.16rem;
  line-height: 0.24rem;
  font-weight: 700;
  color: #191b24;
}

.page-settings .settings-personal-section__content--font {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.08rem;
  padding-top: 0.08rem;
}

.page-settings .settings-personal-section__content--color {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.12rem;
}

.page-settings .settings-personal-font-select {
  position: relative;
  width: 100%;
}

.page-settings .settings-personal-font-select__input {
  display: block;
  width: 100%;
  padding: 0.13rem 0.36rem 0.13rem 0.17rem;
  border: 1px solid #c3c5d9;
  border-radius: 0.04rem;
  background-color: #faf8ff;
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 0.16rem;
  line-height: 0.24rem;
  font-weight: 400;
  color: #191b24;
  -webkit-text-fill-color: #191b24;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

.page-settings .settings-personal-font-select__arrow {
  position: absolute;
  top: 50%;
  right: 0.16rem;
  width: 0.12rem;
  height: 0.074rem;
  margin-top: -0.037rem;
  pointer-events: none;
}

.page-settings .settings-personal-hint {
  margin: 0;
  padding-left: 0.04rem;
  font-size: 0.12rem;
  line-height: 0.16rem;
  font-weight: 500;
  color: #434656;
}

.page-settings .settings-personal-hint--muted {
  opacity: 0.7;
}

.page-settings .settings-personal-color-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.16rem;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.page-settings .settings-personal-color {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.12rem;
  padding: 0.09rem 0.13rem;
  border: 1px solid #c3c5d9;
  border-radius: 0.04rem;
  background-color: rgba(225, 225, 239, 0.3);
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-settings .settings-personal-color__swatch {
  display: block;
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 0.04rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-settings .settings-personal-color__hex {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 400;
  color: #191b24;
  white-space: nowrap;
}

.page-settings .settings-personal-color__btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  min-height: 0.38rem;
  padding: 0.09rem 0.17rem;
  border: 1px solid #0047cf;
  border-radius: 0.04rem;
  background-color: var(--color-white);
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 500;
  color: #0047cf;
  cursor: pointer;
  white-space: nowrap;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-settings .settings-personal-sliders {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.32rem;
}

.page-settings .settings-personal-slider-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.12rem;
}

.page-settings .settings-personal-slider-row__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 0.12rem;
  min-height: 0.2rem;
}

.page-settings .settings-personal-slider-row__label {
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 500;
  color: #191b24;
}

.page-settings .settings-personal-slider-row__value {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 0.12rem;
  line-height: 0.16rem;
  font-weight: 700;
  color: #165dff;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-settings .settings-personal-slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 0.06rem;
  margin: 0;
  border-radius: 0.04rem;
  background: #e1e1ef;
  outline: none;
  cursor: pointer;
}

.page-settings .settings-personal-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 0.16rem;
  height: 0.16rem;
  border: none;
  border-radius: 0.08rem;
  background-color: #165dff;
}

.page-settings .settings-personal-slider::-moz-range-thumb {
  width: 0.16rem;
  height: 0.16rem;
  border: none;
  border-radius: 0.08rem;
  background-color: #165dff;
}

.page-settings .settings-personal-slider::-moz-range-track {
  height: 0.06rem;
  border-radius: 0.04rem;
  background: #e1e1ef;
}

@media (max-width: 1024px) {
  .page-settings .settings-personal-card {
    width: 100%;
    padding: 24px;
  }

  .page-settings .settings-personal-card__top {
    min-height: 0;
  }

  .page-settings .settings-personal-card__left {
    max-width: none;
  }

  .page-settings .settings-personal-section--sizes {
    margin-top: 0.32rem;
  }

  .page-settings .settings-personal-section__title {
    font-size: 17px;
    line-height: 26px;
  }

  .page-settings .settings-personal-font-select__input {
    padding: 13px 36px 13px 17px;
    font-size: 15px;
    line-height: 22px;
  }

  .page-settings .settings-personal-font-select__arrow {
    right: 16px;
    width: 12px;
    height: 8px;
    margin-top: -4px;
  }

  .page-settings .settings-personal-hint {
    font-size: 12px;
    line-height: 16px;
  }

  .page-settings .settings-personal-color__hex {
    font-size: 14px;
    line-height: 20px;
  }

  .page-settings .settings-personal-color__btn {
    min-height: 38px;
    font-size: 14px;
    line-height: 20px;
    padding: 9px 17px;
  }

  .page-settings .settings-personal-slider-row__label {
    font-size: 14px;
    line-height: 20px;
  }

  .page-settings .settings-personal-slider-row__value {
    font-size: 12px;
    line-height: 16px;
  }
}

/* ---------- 异常报错弹框（Figma 节点 1:6788） ---------- */
.page-home .dash-modal--feedback .dash-modal__backdrop {
  background-color: rgba(156, 163, 175, 0.5);
}

.page-home .dash-modal__panel--feedback {
  width: 6rem;
  max-width: 100%;
  max-height: calc(100vh - 0.32rem);
  padding: 0.4rem 0.4rem 0.56rem;
  border-radius: 0.12rem;
  overflow: auto;
  -webkit-box-shadow: 0 0.1rem 0.15rem -0.03rem rgba(0, 0, 0, 0.1), 0 0.04rem 0.06rem -0.04rem rgba(0, 0, 0, 0.1);
  box-shadow: 0 0.1rem 0.15rem -0.03rem rgba(0, 0, 0, 0.1), 0 0.04rem 0.06rem -0.04rem rgba(0, 0, 0, 0.1);
}

.page-home .feedback-modal__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.08rem;
  margin-bottom: 0.32rem;
}

.page-home .feedback-modal__title {
  margin: 0;
  font-size: 0.28rem;
  line-height: 0.35rem;
  font-weight: 500;
  color: #1d2129;
}

.page-home .feedback-modal__subtitle {
  margin: 0;
  font-size: 0.14rem;
  line-height: 0.21rem;
  font-weight: 500;
  color: #86909c;
}

.page-home .feedback-modal__form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.32rem;
}

.page-home .feedback-modal__section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.16rem;
}

.page-home .feedback-modal__section-title {
  margin: 0;
  font-size: 0.18rem;
  line-height: 0.27rem;
  font-weight: 500;
  color: #1d2129;
}

.page-home .feedback-modal__chips {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 0.12rem;
}

.page-home .feedback-modal__chip {
  margin: 0;
  padding: 0.09rem 0.21rem;
  border: 1px solid #e5e6eb;
  border-radius: 0.08rem;
  background-color: var(--color-white);
  font-size: 0.14rem;
  line-height: 0.21rem;
  font-weight: 500;
  color: #4e5969;
  cursor: pointer;
  white-space: nowrap;
}

.page-home .feedback-modal__chip--active {
  border-color: #165dff;
  background-color: rgba(22, 93, 255, 0.05);
  color: #165dff;
}

.page-home .feedback-modal__textarea {
  display: block;
  width: 100%;
  height: 1.6rem;
  padding: 0.16rem;
  border: 1px solid #e5e6eb;
  border-radius: 0.08rem;
  background-color: #f7f8fa;
  font-family: inherit;
  font-size: 0.14rem;
  line-height: 0.24rem;
  font-weight: 500;
  color: #1d2129;
  resize: vertical;
  outline: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.page-home .feedback-modal__textarea::-webkit-input-placeholder {
  color: #c9cdd4;
}

.page-home .feedback-modal__textarea::-moz-placeholder {
  color: #c9cdd4;
}

.page-home .feedback-modal__textarea:-ms-input-placeholder {
  color: #c9cdd4;
}

.page-home .feedback-modal__textarea::placeholder {
  color: #c9cdd4;
}

.page-home .feedback-modal__upload {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 0.08rem;
  width: 1.2rem;
  height: 1.2rem;
  border: 1px dashed #c9cdd4;
  border-radius: 0.08rem;
  background-color: var(--color-white);
  cursor: pointer;
}

.page-home .feedback-modal__upload-icon {
  display: block;
  width: 0.24rem;
  height: 0.24rem;
}

.page-home .feedback-modal__upload-text {
  font-size: 0.12rem;
  line-height: 0.18rem;
  font-weight: 500;
  color: #86909c;
}

.page-home .feedback-modal__footer {
  padding-top: 0.08rem;
  font-size: 0;
  line-height: 1;
}

.page-home .feedback-modal__submit {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 2rem;
  height: 0.48rem;
  padding: 0.115rem 0;
  border: none;
  border-radius: 0.08rem;
  background-color: #165dff;
  font-size: 0.16rem;
  line-height: 0.24rem;
  font-weight: 500;
  color: var(--color-white);
  cursor: pointer;
}

.page-home .feedback-modal__submit:hover {
  background-color: #0f4fd4;
}

@media (max-width: 1024px) {
  .page-home .dash-modal__panel--feedback {
    width: calc(100% - 32px);
    padding: 32px 24px 40px;
  }

  .page-home .feedback-modal__title {
    font-size: 24px;
    line-height: 32px;
  }

  .page-home .feedback-modal__subtitle {
    font-size: 14px;
    line-height: 21px;
  }

  .page-home .feedback-modal__section-title {
    font-size: 17px;
    line-height: 26px;
  }

  .page-home .feedback-modal__chip {
    font-size: 14px;
    line-height: 21px;
    padding: 9px 21px;
  }

  .page-home .feedback-modal__textarea {
    height: 160px;
    font-size: 14px;
    line-height: 24px;
  }

  .page-home .feedback-modal__upload {
    width: 120px;
    height: 120px;
  }

  .page-home .feedback-modal__submit {
    width: 200px;
    height: 48px;
    font-size: 16px;
    line-height: 24px;
  }
}

/* ---------- 意见反馈弹框（Figma 节点 1:6832） ---------- */
.page-home .dash-modal--suggest .dash-modal__backdrop {
  background-color: #9ca3af;
}

.page-home .dash-modal__panel--suggest {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 5.2rem;
  max-width: 100%;
  max-height: calc(100vh - 0.32rem);
  padding: 0;
  border-radius: 0.12rem;
  overflow: hidden;
  -webkit-box-shadow: 0 0.2rem 0.25rem -0.05rem rgba(0, 0, 0, 0.1), 0 0.08rem 0.1rem -0.06rem rgba(0, 0, 0, 0.1);
  box-shadow: 0 0.2rem 0.25rem -0.05rem rgba(0, 0, 0, 0.1), 0 0.08rem 0.1rem -0.06rem rgba(0, 0, 0, 0.1);
}

.page-home .suggest-modal__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 0.16rem 0.24rem 0.17rem;
  border-bottom: 1px solid #e5e6eb;
}

.page-home .suggest-modal__title {
  margin: 0;
  font-size: 0.18rem;
  line-height: 0.225rem;
  font-weight: 500;
  color: #1d2129;
}

.page-home .suggest-modal__close {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0;
  padding: 0.04rem;
  border: none;
  border-radius: 0.06rem;
  background: none;
  cursor: pointer;
}

.page-home .suggest-modal__close img {
  display: block;
  width: 0.2rem;
  height: 0.2rem;
}

.page-home .suggest-modal__body {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-height: 0;
  padding: 0.2rem 0.24rem;
}

.page-home .suggest-modal__field {
  position: relative;
  width: 100%;
}

.page-home .suggest-modal__textarea {
  display: block;
  width: 100%;
  height: 1.8rem;
  padding: 0.17rem 0.17rem 0.36rem;
  border: 1px solid #e5e6eb;
  border-radius: 0.08rem;
  background-color: #f7f8fa;
  font-family: inherit;
  font-size: 0.14rem;
  line-height: 0.24rem;
  font-weight: 500;
  color: #1d2129;
  resize: none;
  outline: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.page-home .suggest-modal__textarea::-webkit-input-placeholder {
  color: #86909c;
}

.page-home .suggest-modal__textarea::-moz-placeholder {
  color: #86909c;
}

.page-home .suggest-modal__textarea:-ms-input-placeholder {
  color: #86909c;
}

.page-home .suggest-modal__textarea::placeholder {
  color: #86909c;
}

.page-home .suggest-modal__counter {
  position: absolute;
  right: 0.16rem;
  bottom: 0.12rem;
  font-size: 0.12rem;
  line-height: 0.18rem;
  font-weight: 400;
  color: #86909c;
  pointer-events: none;
}

.page-home .suggest-modal__footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 0.16rem 0.24rem;
}

.page-home .suggest-modal__submit {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0;
  padding: 0.1rem 0.4rem;
  border: none;
  border-radius: 0.08rem;
  background-color: #165dff;
  font-size: 0.14rem;
  line-height: 0.21rem;
  font-weight: 500;
  color: var(--color-white);
  cursor: pointer;
}

.page-home .suggest-modal__submit:hover {
  background-color: #0f4fd4;
}

@media (max-width: 1024px) {
  .page-home .dash-modal__panel--suggest {
    width: calc(100% - 32px);
  }

  .page-home .suggest-modal__title {
    font-size: 18px;
    line-height: 23px;
  }

  .page-home .suggest-modal__textarea {
    height: 180px;
    font-size: 14px;
    line-height: 24px;
    padding: 17px 17px 36px;
  }

  .page-home .suggest-modal__counter {
    font-size: 12px;
    line-height: 18px;
  }

  .page-home .suggest-modal__submit {
    font-size: 14px;
    line-height: 21px;
    padding: 10px 40px;
  }
}

/* ---------- 炫耀战绩海报弹框（Figma 节点 1:6902） ---------- */
.page-home .dash-modal--share-poster .dash-modal__backdrop {
  background-color: rgba(0, 0, 0, 0.6);
}

.page-home .dash-modal__panel--share-poster {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 4.4rem;
  max-width: 100%;
  max-height: calc(100vh - 0.32rem);
  padding: 0;
  border-radius: 0.16rem;
  overflow: hidden;
  -webkit-box-shadow: 0 0.25rem 0.5rem -0.12rem rgba(0, 0, 0, 0.25);
  box-shadow: 0 0.25rem 0.5rem -0.12rem rgba(0, 0, 0, 0.25);
}

.page-home .share-poster-modal__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 0.16rem 0.24rem 0.17rem;
  border-bottom: 1px solid #f3f4f6;
}

.page-home .share-poster-modal__title {
  margin: 0;
  font-size: 0.18rem;
  line-height: 0.28rem;
  font-weight: 500;
  color: #1d2129;
}

.page-home .share-poster-modal__close {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.page-home .share-poster-modal__close img {
  display: block;
  width: 0.24rem;
  height: 0.24rem;
}

.page-home .share-poster-modal__body {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0.24rem 0.24rem 0;
}

.page-home .share-poster__card {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.12rem;
  width: 100%;
  padding: 0.16rem 0.21rem 0.18rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.16rem;
  background: -webkit-gradient(linear, left top, left bottom, from(var(--poster-from, #165dff)), to(var(--poster-to, #0047cf)));
  background: linear-gradient(180deg, var(--poster-from, #165dff) 0%, var(--poster-to, #0047cf) 100%);
  -webkit-box-shadow: 0 0.01rem 0.02rem rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.01rem 0.02rem rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.page-home .share-poster__card--capturing {
  overflow: visible;
  padding-top: 0.18rem;
  padding-bottom: 0.22rem;
}

.page-home .share-poster__card--capturing .share-poster__brand-name,
.page-home .share-poster__card--capturing .share-poster__invite-url {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  word-break: break-all;
}

.page-home .share-poster__card--capturing .share-poster__brand-name {
  font-size: 0.15rem;
  line-height: 0.22rem;
}

.page-home .share-poster__card--capturing .share-poster__invite-link {
  max-width: none;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.page-home .share-poster__top,
.page-home .share-poster__user,
.page-home .share-poster__qr {
  width: 100%;
}

.page-home .share-poster__top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 0.12rem;
}

.page-home .share-poster__brand {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.08rem;
  width: auto;
  max-width: calc(100% - 1.12rem);
  min-height: 0.44rem;
  padding: 0.04rem 0.08rem;
  border-radius: 0.04rem;
  background-color: rgba(255, 255, 255, 0.2);
  -ms-flex-negative: 1;
  flex-shrink: 1;
  min-width: 0;
}

.page-home .share-poster__brand-logo {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 0.06rem;
  background-color: var(--poster-from, #165dff);
  font-size: 0.1rem;
  line-height: 0.15rem;
  font-weight: 700;
  color: var(--color-white);
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-home .share-poster__brand-name {
  min-width: 0;
  font-size: 0.16rem;
  line-height: 0.22rem;
  font-weight: 500;
  color: var(--color-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-home .share-poster__date {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-home .share-poster__user {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.16rem;
}

.page-home .share-poster__avatar-wrap {
  width: 0.56rem;
  height: 0.56rem;
  border: 2px solid rgba(22, 93, 255, 0.1);
  border-radius: 0.12rem;
  overflow: hidden;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-home .share-poster__avatar {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center 25%;
  object-position: center 25%;
}

.page-home .share-poster__user-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.04rem;
  min-width: 0;
}

.page-home .share-poster__username {
  font-size: 0.16rem;
  color: #ffffff;
}

.page-home .share-poster__user-desc {
  margin: 0;
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}

.page-home .share-poster__main-stat {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.08rem;
  width: 100%;
}

.page-home .share-poster__days {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 0.0799rem;
  width: 100%;
}

.page-home .share-poster__days-num {
  font-size: 0.36rem;
  line-height: 0.4rem;
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: -0.009rem;
}

.page-home .share-poster__days-unit {
  display: block;
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}

.page-home .share-poster__days-label {
  margin: 0;
  width: 100%;
  font-size: 0.16rem;
  line-height: 0.24rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.016rem;
  text-align: center;
}

.page-home .share-poster__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.16rem;
  width: 100%;
}

.page-home .share-poster__stat {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.04rem;
  min-height: 0.74rem;
  padding: 0.09rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.12rem;
  background-color: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  -webkit-box-shadow: 0 0.01rem 0.02rem rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.01rem 0.02rem rgba(0, 0, 0, 0.05);
}

.page-home .share-poster__stat-value {
  font-size: 0.24rem;
  line-height: 0.32rem;
  font-weight: 700;
  color: var(--color-white);
}

.page-home .share-poster__stat-label {
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
}

.page-home .share-poster__quote {
  margin: 0;
  padding: 0;
  border-left: 4px solid var(--color-white);
  width: 100%;
}

.page-home .share-poster__quote-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.08rem;
  padding-left: 0.2rem;
}

.page-home .share-poster__quote-en {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.2rem;
  line-height: 0.28rem;
  font-style: italic;
  color: var(--color-white);
}

.page-home .share-poster__quote-zh {
  margin: 0;
  font-size: 0.16rem;
  line-height: 0.24rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}

.page-home .share-poster__qr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 0.12rem;
  padding: 0.17rem;
  border: 1px solid rgba(195, 197, 217, 0.3);
  border-radius: 0.12rem;
  background-color: rgba(255, 255, 255, 0.05);
}

.page-home .share-poster__qr-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.04rem;
  min-width: 0;
}

.page-home .share-poster__qr-title {
  margin: 0;
  font-size: 0.18rem;
  line-height: 0.28rem;
  font-weight: 500;
  color: var(--color-white);
}

.page-home .share-poster__qr-desc {
  margin: 0;
  font-size: 0.12rem;
  line-height: 0.16rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
}

.page-home .share-poster__qr-img-wrap {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 0.05rem;
  border: 1px solid #c3c5d9;
  border-radius: 0.06rem;
  background-color: var(--color-white);
  -webkit-box-shadow: 0 0.01rem 0.01rem rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.01rem 0.01rem rgba(0, 0, 0, 0.05);
}

.page-home .share-poster__qr-img {
  display: block;
  width: 0.64rem;
  height: 0.64rem;
  opacity: 0.8;
}

.page-home .share-poster__invite {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 0.12rem;
  width: 100%;
  padding-top: 0.13rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.page-home .share-poster__invite-code {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.01rem;
}

.page-home .share-poster__invite-label {
  display: block;
  font-size: 0.1rem;
  line-height: 0.15rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.005rem;
  text-transform: uppercase;
}

.page-home .share-poster__invite-value {
  display: block;
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 0.18rem;
  line-height: 0.225rem;
  font-weight: 700;
  color: var(--color-white);
}

.page-home .share-poster__invite-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  gap: 0.02rem;
  min-width: 0;
  max-width: 1.72rem;
}

.page-home .share-poster__invite-link .share-poster__invite-label {
  text-align: right;
}

.page-home .share-poster__invite-url {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 0.11rem;
  line-height: 0.16rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  text-align: right;
}

.page-home .share-poster-skins {
  margin-top: 0.24rem;
}

.page-home .share-poster-skins__label {
  margin: 0 0 0.12rem;
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 500;
  color: rgba(78, 89, 105, 0.6);
}

.page-home .share-poster-skins__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.12rem;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.page-home .share-poster-skins__item {
  width: 0.28rem;
  height: 0.28rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0.12rem;
  background-color: var(--skin-color);
  cursor: pointer;
}

.page-home .share-poster-skins__item--active {
  width: 0.32rem;
  height: 0.32rem;
  border: 2px solid #165dff;
  padding: 0.02rem;
  background-color: var(--color-white);
  -webkit-box-shadow: 0 0 0 0.04rem rgba(22, 93, 255, 0.1);
  box-shadow: 0 0 0 0.04rem rgba(22, 93, 255, 0.1);
}

.page-home .share-poster-skins__item--active::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0.12rem;
  background-color: var(--skin-color);
}

.page-home .share-poster-modal__footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.16rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 0.25rem 0.24rem 0.24rem;
  border-top: 1px solid #f3f4f6;
}

.page-home .share-poster-modal__btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  min-height: 0.54rem;
  margin: 0;
  border-radius: 0.04rem;
  font-size: 0.16rem;
  line-height: 0.24rem;
  font-weight: 500;
  cursor: pointer;
}

.page-home .share-poster-modal__btn--ghost {
  border: 1px solid #c3c5d9;
  background-color: var(--color-white);
  color: #4e5969;
}

.page-home .share-poster-modal__btn--primary {
  border: none;
  background-color: #165dff;
  color: var(--color-white);
  -webkit-box-shadow: 0 0.1rem 0.15rem -0.03rem rgba(22, 93, 255, 0.2), 0 0.04rem 0.06rem -0.04rem rgba(22, 93, 255, 0.2);
  box-shadow: 0 0.1rem 0.15rem -0.03rem rgba(22, 93, 255, 0.2), 0 0.04rem 0.06rem -0.04rem rgba(22, 93, 255, 0.2);
}

.page-home .share-poster-modal__btn--primary:hover {
  background-color: #0f4fd4;
}

@media (max-width: 1024px) {
  .page-home .dash-modal__panel--share-poster {
    width: calc(100% - 32px);
  }

  .page-home .share-poster-modal__title {
    font-size: 18px;
    line-height: 28px;
  }

  .page-home .share-poster__days-num {
    font-size: 36px;
    line-height: 40px;
  }

  .page-home .share-poster__stat-value {
    font-size: 24px;
    line-height: 32px;
  }

  .page-home .share-poster-modal__btn {
    font-size: 16px;
    line-height: 24px;
    min-height: 54px;
  }
}

/* ========== 校内同步页（Figma 1:2757） ========== */

.page-school-sync .dash-main--school-sync {
  padding: 0;
  background-color: #f5f7fa;
}

.page-school-sync .school-sync {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.16rem;
  min-width: 0;
  padding: 0.16rem 0.24rem 0.4rem;
}

.page-school-sync .school-sync__level-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.12rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-school-sync .school-sync__level-bar::-webkit-scrollbar {
  display: none;
}

.page-school-sync .school-sync__level-pill {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 0.07rem 0.21rem;
  /* border: 1px solid #dae8ff; */
  border-radius: 9999px;
  /* background-color: var(--color-white); */
  font-size: 0.14rem;
  line-height: 0.22rem;
  font-weight: 500;
  color: #474555;
  white-space: nowrap;
  cursor: pointer;
  -webkit-transition: background-color 0.2s, border-color 0.2s, color 0.2s, -webkit-box-shadow 0.2s;
  -o-transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.page-school-sync .school-sync__level-pill--active {
  padding: 0.06rem 0.2rem;
  border-color: #2772ff;
  background-color: #2772ff;
  color: var(--color-white);
  -webkit-box-shadow: 0 0.01rem 0.01rem rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.01rem 0.01rem rgba(0, 0, 0, 0.05);
}

.page-school-sync .school-sync__filter-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 0.12rem;
  min-height: 0.82rem;
  padding: 0.12rem 0.2rem;
  border-radius: 0.1rem;
  background-color: var(--color-white);
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-school-sync .school-sync__filter-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.16rem;
  min-width: 0;
}

.page-school-sync .school-sync__filter-label {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  min-width: 0.56rem;
  font-size: 0.14rem;
  line-height: 0.22rem;
  font-weight: 500;
  color: #666;
  white-space: nowrap;
}

.page-school-sync .school-sync__filter-options {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 0.2rem 0.24rem;
  min-width: 0;
}

.page-school-sync .school-sync__filter-chip {
  padding: 0;
  border: none;
  background: none;
  font-size: 0.14rem;
  line-height: 0.22rem;
  font-weight: 500;
  color: #474555;
  white-space: nowrap;
  cursor: pointer;
  -webkit-transition: color 0.2s;
  -o-transition: color 0.2s;
  transition: color 0.2s;
}

.page-school-sync .school-sync__filter-chip--active {
  color: #5387d9;
}

.page-school-sync .school-sync__grid,
.page-my-learning .school-sync__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.14rem;
  min-width: 0;
  width: 100%;
}

.page-school-sync a.school-sync__card,
.page-my-learning a.school-sync__card {
  color: inherit;
  text-decoration: none;
}

.page-school-sync .school-sync__card,
.page-my-learning .school-sync__card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  gap: 0.12rem;
  min-width: 0;
  height: 1.48rem;
  padding: 0.12rem;
  border: none;
  border-radius: 0.1rem;
  background-color: var(--color-white);
  -webkit-box-shadow: 0 0.02rem 0.08rem rgba(0, 0, 0, 0.06);
  box-shadow: 0 0.02rem 0.08rem rgba(0, 0, 0, 0.06);
  cursor: pointer;
  -webkit-transition: background-color 0.2s, -webkit-box-shadow 0.2s;
  -o-transition: background-color 0.2s, box-shadow 0.2s;
  transition: background-color 0.2s, box-shadow 0.2s;
}

.page-school-sync .school-sync__card:hover,
.page-my-learning .school-sync__card:hover {
  background-color: #fafbfc;
  -webkit-box-shadow: 0 0.04rem 0.12rem rgba(0, 0, 0, 0.1);
  box-shadow: 0 0.04rem 0.12rem rgba(0, 0, 0, 0.1);
}

.page-school-sync .school-sync__cover,
.page-my-learning .school-sync__cover {
  position: relative;
  width: 0.88rem;
  height: 100%;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 0.06rem;
  background-color: var(--color-avatar-bg);
}

.page-school-sync .school-sync__cover img,
.page-my-learning .school-sync__cover img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  object-position: center center;
}

.page-school-sync .school-sync__cover-tag {
  position: absolute;
  z-index: 1;
  max-width: calc(100% - 0.08rem);
  padding: 0.02rem 0.05rem;
  border-radius: 0.02rem;
  font-size: 0.09rem;
  line-height: 0.13rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.page-school-sync .school-sync__cover-tag--subject {
  top: 0.04rem;
  left: 0.04rem;
  background-color: rgba(255, 255, 255, 0.92);
  color: #333;
}

.page-school-sync .school-sync__cover-tag--version {
  right: 0.04rem;
  bottom: 0.04rem;
  background-color: #e74c3c;
  color: #fff;
}

.page-school-sync .school-sync__body,
.page-my-learning .school-sync__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  padding: 0.02rem 0.04rem 0.02rem 0;
}

.page-school-sync .school-sync__title,
.page-my-learning .school-sync__title {
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 0.15rem;
  line-height: 0.22rem;
  font-weight: 700;
  color: #191b24;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.page-school-sync .school-sync__desc,
.page-my-learning .school-sync__desc {
  margin: 0.06rem 0 0;
  font-size: 0.11rem;
  line-height: 0.17rem;
  color: #666;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.page-school-sync .school-sync__learners,
.page-my-learning .school-sync__learners {
  margin: auto 0 0;
  font-size: 0.1rem;
  line-height: 0.15rem;
  color: #999;
}

.page-school-sync .school-sync__meta {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.02rem;
  margin: 0;
  font-size: 0.11rem;
  line-height: 0.14rem;
  font-weight: 500;
  color: #787586;
}

.page-school-sync .school-sync__meta img {
  display: block;
  width: 0.09rem;
  height: 0.05rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

@media (max-width: 960px) {
  .page-school-sync .school-sync__grid,
  .page-my-learning .school-sync__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .page-school-sync .school-sync {
    padding: 12px 16px 32px;
    gap: 12px;
  }

  .page-school-sync .school-sync__level-pill {
    font-size: 14px;
    line-height: 22px;
    padding: 6px 18px;
  }

  .page-school-sync .school-sync__level-pill--active {
    padding: 5px 16px;
  }

  .page-school-sync .school-sync__filter-card {
    min-height: auto;
    padding: 12px 14px;
    gap: 10px;
  }

  .page-school-sync .school-sync__filter-row {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 8px;
  }

  .page-school-sync .school-sync__filter-options {
    gap: 10px 16px;
  }

  .page-school-sync .school-sync__filter-chip {
    font-size: 14px;
    line-height: 22px;
  }

  .page-school-sync .school-sync__grid,
  .page-my-learning .school-sync__grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .page-school-sync .school-sync__card,
  .page-my-learning .school-sync__card {
    height: 120px;
    padding: 10px;
    gap: 10px;
  }

  .page-school-sync .school-sync__cover,
  .page-my-learning .school-sync__cover {
    width: 72px;
  }

  .page-school-sync .school-sync__title,
  .page-my-learning .school-sync__title {
    font-size: 15px;
    line-height: 22px;
  }

  .page-school-sync .school-sync__desc,
  .page-my-learning .school-sync__desc {
    font-size: 12px;
    line-height: 18px;
  }

  .page-school-sync .school-sync__learners,
  .page-my-learning .school-sync__learners {
    font-size: 11px;
    line-height: 16px;
  }

  .page-school-sync .school-sync__meta {
    font-size: 11px;
    line-height: 14px;
  }
}

/* ========== 课程详情页（Figma 1:6139） ========== */

.page-school-course-detail .course-detail__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.09rem;
  margin-left: 0.16rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-school-course-detail .course-detail__head-icon {
  display: block;
  width: 0.18rem;
  height: 0.14rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-school-course-detail .course-detail__head-back {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 0.32rem;
  height: 0.28rem;
  border: 1px solid #e3e9f1;
  border-radius: 9999px;
  background-color: var(--color-white);
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-school-course-detail .course-detail__head-back img {
  display: block;
  width: 0.14rem;
  height: 0.14rem;
}

.page-school-course-detail .course-detail__head-title {
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 500;
  color: #666;
  white-space: nowrap;
}

.page-school-course-detail .dash-main--course-detail {
  padding: 0;
  background-color: #f5f7fa;
}

.page-school-course-detail .course-detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.24rem;
  min-width: 0;
  padding: 0.22rem 0.24rem 0.4rem;
}

.page-school-course-detail .course-detail__hero {
  display: grid;
  grid-template-columns: 0.96rem minmax(0, 1fr) auto;
  grid-template-areas:
    "thumb info back";
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
  gap: 0.16rem 0.16rem;
  min-width: 0;
}

.page-school-course-detail .course-detail__thumb {
  grid-area: thumb;
  width: 0.96rem;
  height: 1.2rem;
  overflow: hidden;
  border: 1px solid #e8e8e8;
  border-radius: 0.08rem;
  background-color: var(--color-white);
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-school-course-detail .course-detail__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  margin: 0;
  -o-object-fit: cover;
  object-fit: cover;
  object-position: center center;
}

.page-school-course-detail .course-detail__info {
  grid-area: info;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.11rem;
  min-width: 0;
  padding-top: 0;
}

.page-school-course-detail .course-detail__title {
  margin: 0;
  font-size: 0.24rem;
  line-height: 0.32rem;
  font-weight: 500;
  color: #262626;
}

.page-school-course-detail .course-detail__meta {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.04rem;
  margin: 0;
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 400;
  color: #8c8c8c;
}

.page-school-course-detail .course-detail__meta img {
  display: block;
  width: 0.16rem;
  height: 0.16rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-school-course-detail .course-detail__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.1rem;
  margin-top: 0.07rem;
}

.page-school-course-detail .course-detail__btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  min-width: 0.77rem;
  height: 0.27rem;
  padding: 0 0.17rem;
  border-radius: 0.9rem;
  font-size: 0.14rem;
  line-height: 0.24rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.page-school-course-detail .course-detail__btn--primary {
  border: none;
  background-color: #2874ff;
  color: var(--color-white);
}

.page-school-course-detail .course-detail__btn--favorite {
  border: 1px solid #f70;
  background-color: var(--color-white);
  color: #f70;
}

.page-school-course-detail .course-detail__back {
  grid-area: back;
  -ms-flex-item-align: center;
  align-self: center;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0.07rem 0.17rem;
  border: 1px solid #e8e8e8;
  border-radius: 9999px;
  background-color: var(--color-white);
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 500;
  color: #8c8c8c;
  white-space: nowrap;
}

.page-school-course-detail .course-detail__progress {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.16rem;
  min-width: 0;
}

.page-school-course-detail .course-detail__progress-bar {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  height: 0.12rem;
  overflow: hidden;
  border-radius: 0.06rem;
  background-color: #e8e8e8;
}

.page-school-course-detail .course-detail__progress-fill {
  height: 100%;
  border-radius: inherit;
  background-color: #2874ff;
}

.page-school-course-detail .course-detail__progress-text {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  font-size: 0.12rem;
  line-height: 0.16rem;
  font-weight: 500;
  color: #8c8c8c;
  white-space: nowrap;
}

.page-school-course-detail .course-detail__lessons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.16rem;
  min-width: 0;
}

.page-school-course-detail .course-lesson__card {
  position: relative;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  min-height: 1.98rem;
  padding: 0.21rem;
  border: 1px solid #e8e8e8;
  border-radius: 0.12rem;
  background-color: var(--color-white);
  overflow: hidden;
}

.page-school-course-detail .course-lesson__card--empty {
  cursor: not-allowed;
  pointer-events: none;
  background-color: #fafafa;
  border-color: #ececec;
}

.page-school-course-detail .course-lesson__card--empty .course-lesson__title,
.page-school-course-detail .course-lesson__card--empty .course-lesson__subtitle {
  color: #a8abb2;
}

.page-school-course-detail .course-lesson__empty-hint {
  font-size: 0.12rem;
  line-height: 0.18rem;
  font-weight: 500;
  color: #a8abb2;
}

.page-school-course-detail .course-detail__btn--primary:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.page-school-course-detail .course-lesson__top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 0.12rem;
  padding-bottom: 0.08rem;
}

.page-school-course-detail .course-lesson__text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.04rem;
  min-width: 0;
}

.page-school-course-detail .course-lesson__title {
  margin: 0;
  font-size: 0.18rem;
  line-height: 0.28rem;
  font-weight: 700;
  color: #262626;
}

.page-school-course-detail .course-lesson__subtitle {
  margin: 0;
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 500;
  color: #8c8c8c;
}

.page-school-course-detail .course-lesson__badge {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 0.05rem 0.15rem 0.05rem 0.13rem;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  background-color: #f3f4f6;
  font-size: 0.12rem;
  line-height: 0.16rem;
  font-weight: 500;
  color: #8c8c8c;
  white-space: nowrap;
}

.page-school-course-detail .course-lesson__footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 0.12rem;
  padding-top: 0.32rem;
}

.page-school-course-detail .course-lesson__done {
  font-size: 0.12rem;
  line-height: 0.16rem;
  font-weight: 500;
  color: #8c8c8c;
}

.page-school-course-detail .course-lesson__index {
  font-size: 0.12rem;
  line-height: 0.16rem;
  font-weight: 400;
  color: #8c8c8c;
  opacity: 0.5;
}

.page-school-course-detail .course-lesson__ribbon {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.48rem;
  height: 0.48rem;
  overflow: hidden;
  pointer-events: none;
}

.page-school-course-detail .course-lesson__ribbon::before {
  content: "";
  position: absolute;
  top: 0.08rem;
  left: -0.2rem;
  width: 0.68rem;
  height: 0.24rem;
  background-color: #ff7d00;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

@media (max-width: 1280px) {
  .page-school-course-detail .course-detail__lessons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .page-school-course-detail .course-detail {
    padding: 16px 16px 32px;
    gap: 20px;
  }

  .page-school-course-detail .course-detail__hero {
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-areas:
      "thumb info"
      "back back";
    gap: 12px 16px;
  }

  .page-school-course-detail .course-detail__thumb {
    width: 96px;
    height: 120px;
  }

  .page-school-course-detail .course-detail__title {
    font-size: 20px;
    line-height: 28px;
  }

  .page-school-course-detail .course-detail__meta {
    font-size: 14px;
    line-height: 20px;
  }

  .page-school-course-detail .course-detail__btn {
    height: 32px;
    padding: 0 16px;
    font-size: 14px;
    line-height: 24px;
  }

  .page-school-course-detail .course-detail__back {
    justify-self: end;
    font-size: 14px;
    line-height: 20px;
  }

  .page-school-course-detail .course-detail__lessons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .page-school-course-detail .course-lesson__card {
    min-height: auto;
    padding: 16px;
  }

  .page-school-course-detail .course-lesson__title {
    font-size: 16px;
    line-height: 24px;
  }

  .page-school-course-detail .course-lesson__subtitle {
    font-size: 13px;
    line-height: 18px;
  }

  .page-school-course-detail .course-lesson__footer {
    padding-top: 20px;
  }
}

@media (max-width: 640px) {
  .page-school-course-detail .course-detail__lessons {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- 付费弹框（Figma 1:2197） ---------- */

.page-home .dash-modal--paywall .dash-modal__backdrop {
  background-color: rgba(0, 0, 0, 0.43);
}

.page-home .dash-modal__panel--paywall {
  position: relative;
  width: 4.8rem;
  max-width: 100%;
  border-radius: 0.08rem;
  -webkit-box-shadow: 0 0.2rem 0.25rem rgba(0, 0, 0, 0.15);
  box-shadow: 0 0.2rem 0.25rem rgba(0, 0, 0, 0.15);
  overflow: visible;
}

.page-home .paywall-modal__close {
  position: absolute;
  top: 0.24rem;
  right: 0.24rem;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 0.22rem;
  height: 0.22rem;
  padding: 0.04rem;
  border: none;
  border-radius: 0.04rem;
  background: none;
  cursor: pointer;
}

.page-home .paywall-modal__close:hover {
  background-color: rgba(83, 135, 217, 0.08);
}

.page-home .paywall-modal__close img {
  display: block;
  width: 0.14rem;
  height: 0.14rem;
}

.page-home .paywall-modal__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.32rem;
  padding: 0.48rem 0.4rem 0.4rem;
}

.page-home .paywall-modal__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.16rem;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
}

.page-home .paywall-modal__title {
  margin: 0;
  font-size: 0.24rem;
  line-height: 0.3rem;
  font-weight: 800;
  letter-spacing: -0.0024rem;
  color: #191b24;
}

.page-home .paywall-modal__subtitle {
  margin: 0;
  padding: 0 0.16rem;
  font-size: 0.16rem;
  line-height: 0.24rem;
  font-weight: 500;
  color: #434656;
}

.page-home .paywall-modal__features {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.24rem;
  margin: 0;
  padding: 0.08rem 0 0;
  list-style: none;
}

.page-home .paywall-modal__feature {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.2rem;
}

.page-home .paywall-modal__feature-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 0.12rem;
  background-color: rgba(83, 135, 217, 0.08);
}

.page-home .paywall-modal__feature-icon img {
  display: block;
  max-width: 0.22rem;
  max-height: 0.2rem;
  width: auto;
  height: auto;
}

.page-home .paywall-modal__feature-text {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  font-size: 0.18rem;
  line-height: 0.24rem;
  font-weight: 500;
  color: #191b24;
}

.page-home .paywall-modal__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.16rem;
  padding-top: 0.16rem;
}

.page-home .paywall-modal__trial {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-decoration: none;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  height: 0.48rem;
  border: none;
  border-radius: 0.9rem;
  background-color: #2874ff;
  font-size: 0.18rem;
  line-height: 0.288rem;
  font-weight: 500;
  color: var(--color-white);
  cursor: pointer;
  -webkit-box-shadow: 0 0.1rem 0.15rem -0.03rem rgba(83, 135, 217, 0.2), 0 0.04rem 0.06rem -0.04rem rgba(83, 135, 217, 0.2);
  box-shadow: 0 0.1rem 0.15rem -0.03rem rgba(83, 135, 217, 0.2), 0 0.04rem 0.06rem -0.04rem rgba(83, 135, 217, 0.2);
}

.page-home .paywall-modal__trial:hover {
  background-color: #1f66e6;
}

.page-home .paywall-modal__skip {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  padding: 0.16rem 0;
  border: none;
  background: none;
  font-size: 0.16rem;
  line-height: 0.24rem;
  font-weight: 500;
  color: #737688;
  cursor: pointer;
}

.page-home .paywall-modal__skip:hover {
  color: #434656;
}

@media (max-width: 1024px) {
  .page-home .paywall-modal__content {
    gap: 24px;
    padding: 40px 24px 32px;
  }

  .page-home .paywall-modal__title {
    font-size: 20px;
    line-height: 28px;
  }

  .page-home .paywall-modal__subtitle {
    font-size: 15px;
    line-height: 22px;
  }

  .page-home .paywall-modal__feature-text {
    font-size: 16px;
    line-height: 22px;
  }

  .page-home .paywall-modal__trial {
    height: 48px;
    font-size: 16px;
  }

  .page-home .paywall-modal__skip {
    font-size: 15px;
  }
}

/* ========== 练习页（Figma 1:1833） ========== */

.page-practice {
  background-color: var(--color-white);
}

.page-practice .practice {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.page-practice .practice-header {
  position: relative;
  z-index: 100;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 0.16rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 0.12rem 0.16rem 0.12rem 0.24rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background-color: var(--color-white);
  overflow: visible;
}

.page-practice .practice-header__left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.12rem;
  min-width: 0;
}

.page-practice .practice-back-wrap {
  position: relative;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-practice .practice-tool-wrap {
  position: relative;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-practice .practice-header__back {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 0.36rem;
  height: 0.36rem;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background-color: #165dff;
  cursor: pointer;
}

.page-practice .practice-header__back img {
  display: block;
  width: 0.2rem;
  height: 0.2rem;
}

.page-practice .practice-header__titles {
  min-width: 0;
}

.page-practice .practice-header__title {
  margin: 0;
  font-size: 0.15rem;
  line-height: 0.1875rem;
  font-weight: 700;
  letter-spacing: -0.0015rem;
  color: #165dff;
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.page-practice .practice-header__subtitle {
  margin: 0.03rem 0 0;
  font-size: 0.13rem;
  line-height: 0.1625rem;
  font-weight: 500;
  color: #86909c;
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.page-practice .practice-header__toolbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  gap: 0.08rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.page-practice .practice-header__toolbar::-webkit-scrollbar {
  display: none;
}

.page-practice .dash-tool-pill {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.04rem;
  padding: 0.04rem 0.12rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  border: 1px solid #e3e9f1;
  border-radius: 9999px;
  background-color: var(--color-white);
  font-size: 0.12rem;
  line-height: 0.16rem;
  font-weight: 500;
  color: #475569;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.page-practice .dash-tool-pill--active {
  border-color: #5387d9;
}

.page-practice .dash-tool-pill .dash-tool-pill__toggle {
  width: 0.16rem;
  height: 0.16rem;
  opacity: 0.38;
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease, transform 0.2s ease, -webkit-filter 0.2s ease, filter 0.2s ease;
  transition: opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;
}

.page-practice .dash-tool-pill--active .dash-tool-pill__toggle {
  opacity: 1;
  -webkit-filter: none;
  filter: none;
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

.page-practice .dash-tool-pill--wip {
  cursor: default;
  color: #94a3b8;
  border-color: #e8edf3;
  background-color: #f8fafc;
}

.page-practice .dash-tool-pill__wip {
  padding: 0 0.06rem;
  border-radius: 9999px;
  background-color: #eef2f7;
  font-size: 0.1rem;
  line-height: 0.16rem;
  font-weight: 500;
  color: #94a3b8;
}

.page-practice .dash-tool-pill img {
  display: block;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  max-width: none;
}

.page-practice .dash-tool-pill__arrow {
  width: 0.08rem;
  height: 0.08rem;
}

.page-practice .practice-typing-wrap[hidden],
.page-practice .practice-visible-word[hidden],
.page-practice .practice-shortcuts__key[hidden] {
  display: none !important;
}

.page-practice .practice-main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-height: 0;
  padding: 0.04rem 0.24rem 0.24rem;
}

.page-practice .practice-main__top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
 /* justify-content: flex-end; */
  gap: 0.16rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-top: 0.12rem;
}

.page-practice .practice-dropdown {
  position: absolute;
  top: calc(100% + 0.08rem);
  left: 0;
  z-index: 200;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.04rem;
  width: 1.32rem;
  padding: 0.09rem;
  border: 1px solid rgba(243, 244, 246, 0.5);
  border-radius: 0.16rem;
  background-color: var(--color-white);
  -webkit-box-shadow: 0 0.1rem 0.25rem -0.05rem rgba(0, 0, 0, 0.1), 0 0.08rem 0.1rem -0.06rem rgba(0, 0, 0, 0.1);
  box-shadow: 0 0.1rem 0.25rem -0.05rem rgba(0, 0, 0, 0.1), 0 0.08rem 0.1rem -0.06rem rgba(0, 0, 0, 0.1);
}

.page-practice .practice-dropdown[hidden] {
  display: none;
}

.page-practice .practice-dropdown__item {
  display: block;
  padding: 0.1rem 0.12rem;
  border-radius: 0.08rem;
  font-size: 0.16rem;
  line-height: 0.225rem;
  font-weight: 500;
  color: #475569;
  text-decoration: none;
  -webkit-transition: background-color 0.2s;
  -o-transition: background-color 0.2s;
  transition: background-color 0.2s;
}

.page-practice .practice-dropdown__item:hover {
  background-color: rgba(243, 244, 246, 0.8);
}

.page-practice .practice-dropdown__item--active {
  background-color: #f2f8ff;
  color: #165dff;
}

.page-practice .practice-main__tools {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.16rem;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.page-practice .practice-timer {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.04rem;
  padding: 0.05rem 0.13rem;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  background-color: var(--color-white);
  -webkit-box-shadow: 0 0.01rem 0.01rem rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.01rem 0.01rem rgba(0, 0, 0, 0.05);
}

.page-practice .practice-timer__icon {
  font-size: 0.12rem;
  line-height: 0.16rem;
  opacity: 0.6;
}

.page-practice .practice-timer__value {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.12rem;
  line-height: 0.16rem;
  font-weight: 500;
  color: #1f2937;
}

.page-practice .practice-segment {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0;
  padding: 0.05rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.08rem;
  background-color: rgba(243, 244, 246, 0.5);
}

.page-practice .practice-segment__btn {
  padding: 0.07rem 0.17rem;
  border: 1px solid transparent;
  border-radius: 0.06rem;
  background: none;
  font-size: 0.12rem;
  line-height: 0.16rem;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
}

.page-practice .practice-segment__btn--active {
  border-color: rgba(22, 93, 255, 0.2);
  background-color: var(--color-white);
  color: #165dff;
  -webkit-box-shadow: 0 0.01rem 0.01rem rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.01rem 0.01rem rgba(0, 0, 0, 0.05);
}

.page-practice .practice-main__center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-height: 0;
  padding: 0.24rem 0;
}

.page-practice .practice-center-stage {
  position: relative;
  width: 100%;
  max-width: 8.8rem;
  margin: 0 auto;
}

.page-practice .practice-center-stage > .practice-sentence {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.24rem);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: min(6.72rem, 100%);
  margin: 0;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 5;
}

.page-practice .practice-sentence {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 6.72rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0.14rem 0.25rem 0.25rem;
  border: 1px solid #c3c5d9;
  border-radius: 0.12rem;
  background-color: #f6f6f6;
  -webkit-box-shadow: 0 0.01rem 0.02rem rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.01rem 0.02rem rgba(0, 0, 0, 0.05);
}

.page-practice .practice-sentence__words {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 0.24rem;
  max-width: 100%;
}

.page-practice .practice-word {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-width: 0.6rem;
}

.page-practice .practice-word--wide {
  min-width: 0.8rem;
}

.page-practice .practice-word__phonetic {
  margin-bottom: 0.02rem;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.1rem;
  line-height: 0.15rem;
  font-weight: 400;
  color: #737688;
  text-align: center;
}

.page-practice .practice-word__text {
  margin-bottom: 0.04rem;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.18rem;
  line-height: 0.27rem;
  font-weight: 700;
  color: #191b24;
  text-align: center;
}

.page-practice .practice-word__dot {
  font-weight: 700;
}

.page-practice .practice-word__line {
  display: block;
  width: 100%;
  height: 0.04rem;
  border-radius: 0.12rem;
}

.page-practice .practice-word__line--subject {
  background-color: #ff4d4f;
}

.page-practice .practice-word__line--verb {
  background-color: #d43fcf;
}

.page-practice .practice-word__line--adverbial {
  background-color: #ff7d00;
}

.page-practice .practice-word__line--manner {
  background-color: #ffc107;
}

.page-practice .practice-word__label {
  margin-top: 0.06rem;
  font-size: 0.12rem;
  line-height: 0.18rem;
  font-weight: 500;
  color: #434656;
  text-align: center;
  white-space: nowrap;
}

.page-practice .practice-sentence__translation {
  -ms-flex-item-align: stretch;
  align-self: stretch;
  margin: 0.08rem 0 0;
  padding-top: 0.07rem;
  border-top: 1px solid rgba(195, 197, 217, 0.3);
  font-size: 0.16rem;
  line-height: 0.24rem;
  font-weight: 500;
  letter-spacing: 0.004rem;
  color: #434656;
  text-align: center;
}

.page-practice .practice-prompt {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.38rem;
  width: 100%;
  max-width: 8.8rem;
}

.page-practice .practice-prompt__translation-slot {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 0.48rem;
}

.page-practice .practice-prompt__translation-slot .practice-prompt__text,
.page-practice .practice-prompt__translation-slot .practice-visible-word__translation {
  grid-area: 1 / 1;
  width: 100%;
  margin: 0;
  text-align: center;
}

.page-practice .practice-prompt__translation-slot .practice-prompt__text[hidden],
.page-practice .practice-prompt__translation-slot .practice-visible-word__translation[hidden] {
  display: block !important;
  visibility: hidden;
  pointer-events: none;
}

.page-practice .practice-prompt__input-slot {
  position: relative;
  width: 100%;
  min-height: 0.56rem;
}

.page-practice .practice-prompt__input-slot > .practice-typing-wrap,
.page-practice .practice-prompt__input-slot > .practice-visible-word {
  width: 100%;
}

.page-practice .practice-prompt__text {
  margin: 0;
  font-size: 0.48rem;
  line-height: 0.48rem;
  font-weight: 500;
  letter-spacing: 0.024rem;
  color: #1f2937;
  text-align: center;
}

.page-practice .practice-visible-word__translation {
  margin: 0;
  font-size: 0.48rem;
  line-height: 0.48rem;
  font-weight: 500;
  letter-spacing: 0.024rem;
  color: #1f2937;
  text-align: center;
}

.page-practice .practice-typing-wrap {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  min-height: 0.56rem;
  cursor: text;
}

.page-practice .practice-typing {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 0.2rem 0.24rem;
  min-height: 0.48rem;
  padding: 0.08rem 0;
  width: 100%;
}

.page-practice .practice-typing--full {
  width: 100%;
}

.page-practice .practice-typing--split {
  gap: 0.2rem 0.28rem;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.page-practice .practice-word-group {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  gap: 0.04rem;
}

.page-practice .practice-word-punct {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.28rem;
  line-height: 0.36rem;
  font-weight: 600;
  padding: 0 0 0.06rem;
  color: #1f2937;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}

.page-practice .practice-word-input {
  margin: 0;
  padding: 0 0.04rem 0.06rem;
  border: none;
  border-bottom: 0.03rem solid #d1d5db;
  border-radius: 0;
  background: transparent;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.28rem;
  line-height: 0.36rem;
  font-weight: 600;
  color: #1f2937;
  text-align: center;
  outline: none;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-transition: color 0.15s, border-color 0.15s;
  -o-transition: color 0.15s, border-color 0.15s;
  transition: color 0.15s, border-color 0.15s;
}

.page-practice .practice-word-input:focus {
  border-bottom-color: #165dff;
  outline: none;
}

.page-practice .practice-word-input--correct {
  color: #1f2937;
  border-bottom-color: #d1d5db;
}

.page-practice .practice-word-input--wrong {
  color: #ff4d4f;
  border-bottom-color: #ff4d4f;
}

.page-practice .practice-word-input--wrong:focus {
  border-bottom-color: #ff4d4f;
}

.page-practice .practice-word-input:disabled {
  opacity: 1;
  cursor: default;
}

.page-practice .practice-typing--full .practice-word-input {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 50%;
  max-width: 100%;
  text-align: left;
}

.page-practice .practice-typing--shake {
  -webkit-animation: practice-typing-shake 0.32s ease;
  animation: practice-typing-shake 0.32s ease;
}

@-webkit-keyframes practice-typing-shake {
  0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); }
  25% { -webkit-transform: translateX(-4px); transform: translateX(-4px); }
  75% { -webkit-transform: translateX(4px); transform: translateX(4px); }
}

@keyframes practice-typing-shake {
  0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); }
  25% { -webkit-transform: translateX(-4px); transform: translateX(-4px); }
  75% { -webkit-transform: translateX(4px); transform: translateX(4px); }
}

.page-practice .practice-answer-hint {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.08rem);
  margin: 0;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.16rem;
  line-height: 0.24rem;
  font-weight: 500;
  color: #5387d9;
  text-align: center;
}

.page-practice.page-practice--show-words .practice-typing-wrap,
.page-practice.page-practice--show-words .practice-typing,
.page-practice.page-practice--show-words .practice-word-input {
  display: none !important;
}

.page-practice .practice-visible-word {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  margin-top: 0;
  outline: none;
  cursor: text;
}

.page-practice .practice-visible-word:focus {
  outline: none;
}

.page-practice .practice-visible-word--disabled {
  pointer-events: none;
  cursor: default;
}

.page-practice .practice-visible-word__chars {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 0.02rem;
  min-height: 0.56rem;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.42rem;
  line-height: 0.52rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.page-practice .practice-visible-word__chars--shake {
  -webkit-animation: practice-typing-shake 0.32s ease;
  animation: practice-typing-shake 0.32s ease;
}

.page-practice .practice-visible-char {
  display: inline-block;
  min-width: 0.2rem;
  color: #c5c9d2;
  text-align: center;
  border-bottom: 2px solid transparent;
  -webkit-transition: color 0.12s ease;
  -o-transition: color 0.12s ease;
  transition: color 0.12s ease;
}

.page-practice .practice-visible-char--typed {
  color: #e25555;
  border-bottom-color: transparent;
}

.page-practice .practice-visible-char--wrong {
  color: #fa8c16;
  border-bottom-color: #fa8c16;
}

.page-practice .practice-visible-char--current {
  color: #c5c9d2;
  border-bottom-color: #e25555;
}

.page-practice .practice-visible-char--pending {
  color: #dde1e8;
  border-bottom-color: transparent;
}

.page-practice .practice-visible-char--space {
  min-width: 0.14rem;
  color: transparent;
  border-bottom-color: transparent;
}

.page-practice .practice-visible-word-group {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-practice .practice-visible-word-group--pending {
  opacity: 0.5;
}

.page-practice .practice-visible-word-group--done .practice-visible-char {
  color: #e25555;
  border-bottom-color: transparent;
}

.page-practice .practice-visible-word__chars--sentence {
  max-width: 92%;
  gap: 0;
  font-size: 0.34rem;
  line-height: 0.46rem;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.page-practice.page-practice--mode-full.page-practice--show-words .practice-visible-word__phonetic {
  max-width: 90%;
  word-break: break-word;
  text-align: center;
}

.page-practice .practice-visible-word__chars--split {
  max-width: 100%;
  gap: 0.04rem 0.08rem;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  white-space: normal;
  overflow: visible;
}

.page-practice .practice-visible-char--punct {
  color: #8b93a1;
  border-bottom-color: transparent;
  min-width: auto;
}

.page-practice .practice-visible-word__phonetic {
  display: none !important;
}

.page-practice.page-practice--show-words .practice-main__center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.page-practice.page-practice--show-words .practice-visible-word {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

.page-practice .practice-prompt--success .practice-prompt__text {
  -webkit-animation: practice-success-pop 0.45s ease;
  animation: practice-success-pop 0.45s ease;
}

@-webkit-keyframes practice-success-pop {
  0% { -webkit-transform: scale(1); transform: scale(1); }
  40% { -webkit-transform: scale(1.04); transform: scale(1.04); color: #10b981; }
  100% { -webkit-transform: scale(1); transform: scale(1); }
}

@keyframes practice-success-pop {
  0% { -webkit-transform: scale(1); transform: scale(1); }
  40% { -webkit-transform: scale(1.04); transform: scale(1.04); color: #10b981; }
  100% { -webkit-transform: scale(1); transform: scale(1); }
}

.page-practice .practice-toast {
  position: fixed;
  left: 50%;
  bottom: 1.2rem;
  z-index: 400;
  max-width: calc(100% - 0.48rem);
  padding: 0.1rem 0.16rem;
  border-radius: 0.05rem;
  background-color: #d9d9d9;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.12rem;
  line-height: 0.16rem;
  font-weight: 500;
  color: #000;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  -webkit-transform: translateX(-50%) translateY(0.08rem);
  -ms-transform: translateX(-50%) translateY(0.08rem);
  transform: translateX(-50%) translateY(0.08rem);
  -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
  -o-transition: opacity 0.2s, transform 0.2s;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}

.page-practice .practice-toast--show {
  opacity: 1;
  -webkit-transform: translateX(-50%) translateY(0);
  -ms-transform: translateX(-50%) translateY(0);
  transform: translateX(-50%) translateY(0);
}

.page-practice .practice-shortcuts__key:active,
.page-practice .practice-shortcuts__nav:active {
  -webkit-transform: scale(0.96);
  -ms-transform: scale(0.96);
  transform: scale(0.96);
}

.page-practice .practice-sentence {
  -webkit-transition: opacity 0.25s, max-height 0.25s, margin 0.25s, padding 0.25s;
  -o-transition: opacity 0.25s, max-height 0.25s, margin 0.25s, padding 0.25s;
  transition: opacity 0.25s, max-height 0.25s, margin 0.25s, padding 0.25s;
}

.page-practice .practice-sentence[hidden] {
  display: none;
}

.page-practice .practice-sentence.practice-sentence--visible {
  -webkit-animation: practice-sentence-in 0.3s ease;
  animation: practice-sentence-in 0.3s ease;
}

@-webkit-keyframes practice-sentence-in {
  from {
    opacity: 0;
    -webkit-transform: translate(-50%, -0.08rem);
    transform: translate(-50%, -0.08rem);
  }
  to {
    opacity: 1;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
  }
}

@keyframes practice-sentence-in {
  from {
    opacity: 0;
    -webkit-transform: translate(-50%, -0.08rem);
    transform: translate(-50%, -0.08rem);
  }
  to {
    opacity: 1;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
  }
}

.page-practice .practice-main__bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.16rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 0 0.96rem 0.12rem;
}

.page-practice .practice-progress {
  width: 100%;
  max-width: 12.8rem;
}

.page-practice .practice-progress__track {
  position: relative;
  height: 0.04rem;
  border-radius: 999px;
  background-color: rgba(229, 231, 235, 0.6);
  overflow: visible;
}

.page-practice .practice-progress__fill {
  position: absolute;
  left: 0;
  top: 50%;
  width: 2%;
  height: 0.06rem;
  border-radius: 9999px;
  background-color: #0047cf;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: width 0.35s ease;
  -o-transition: width 0.35s ease;
  transition: width 0.35s ease;
}

.page-practice .practice-progress__thumb {
  position: absolute;
  left: 0;
  top: 50%;
  width: 10%;
  height: 0.08rem;
  border-radius: 9999px;
  background-color: rgba(83, 135, 217, 0.18);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: width 0.35s ease;
  -o-transition: width 0.35s ease;
  transition: width 0.35s ease;
}

.page-practice .practice-progress__accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2%;
  border-radius: 9999px 0 0 9999px;
  background-color: #a855f7;
  -webkit-transition: width 0.35s ease;
  -o-transition: width 0.35s ease;
  transition: width 0.35s ease;
}

.page-practice .practice-shortcuts {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.04rem;
  max-width: 100%;
  padding: 0.07rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.12rem;
  background-color: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  -webkit-box-shadow: 0 0.2rem 0.25rem -0.05rem rgba(0, 0, 0, 0.1), 0 0.08rem 0.1rem -0.06rem rgba(0, 0, 0, 0.1);
  box-shadow: 0 0.2rem 0.25rem -0.05rem rgba(0, 0, 0, 0.1), 0 0.08rem 0.1rem -0.06rem rgba(0, 0, 0, 0.1);
  overflow: visible;
  scrollbar-width: none;
}

.page-practice .practice-shortcuts::-webkit-scrollbar {
  display: none;
}

.page-practice .practice-shortcuts__nav {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  min-width: 0.32rem;
  padding: 0.09rem 0.15rem 0.07rem;
  border: 1px solid #5387d9;
  border-radius: 0.08rem;
  background: none;
  font-size: 0.12rem;
  line-height: 0.16rem;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
}

.page-practice .practice-shortcuts__divider {
  display: block;
  width: 1px;
  height: 0.24rem;
  margin: 0 0.04rem;
  background-color: #e5e7eb;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-practice .practice-shortcuts__key {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 0.07rem 0.14rem;
  border: 1px solid #f3f4f6;
  border-radius: 0.08rem;
  background: none;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.12rem;
  line-height: 0.16rem;
  font-weight: 500;
  color: #374151;
  white-space: nowrap;
  cursor: pointer;
}

.page-practice .practice-shortcuts__key--active {
  border-color: #165dff;
  background-color: rgba(22, 93, 255, 0.08);
  color: #165dff;
}

.page-practice .practice-shortcuts__nav,
.page-practice .practice-shortcuts__key {
  position: relative;
  overflow: visible;
  z-index: 1;
}

.page-practice .practice-shortcuts__nav[data-shortcut-tip]::after,
.page-practice .practice-shortcuts__key[data-shortcut-tip]::after {
  content: attr(data-shortcut-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.06rem);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  padding: 0.09rem 0.16rem;
  border-radius: 0.05rem;
  background-color: #d9d9d9;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.12rem;
  line-height: 0.16rem;
  font-weight: 500;
  color: #000;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-transition: opacity 0.15s ease, visibility 0.15s ease;
  -o-transition: opacity 0.15s ease, visibility 0.15s ease;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 20;
}

.page-practice .practice-shortcuts__nav[data-shortcut-tip]:hover::after,
.page-practice .practice-shortcuts__nav[data-shortcut-tip]:focus-visible::after,
.page-practice .practice-shortcuts__key[data-shortcut-tip]:hover::after,
.page-practice .practice-shortcuts__key[data-shortcut-tip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

.page-practice .practice-tooltip {
  margin: 0;
  padding: 0.09rem 0.16rem;
  border-radius: 0.05rem;
  background-color: #d9d9d9;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.12rem;
  line-height: 0.16rem;
  font-weight: 500;
  color: #000;
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 1024px) {
  .page-practice .practice-header {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    padding: 12px 16px;
  }

  .page-practice .practice-header__toolbar {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .page-practice .practice-header__title {
    font-size: 14px;
    line-height: 18px;
    white-space: normal;
  }

  .page-practice .practice-header__subtitle {
    font-size: 12px;
    line-height: 16px;
    white-space: normal;
  }

  .page-practice .practice-main {
    padding: 8px 16px 16px;
  }

  .page-practice .practice-main__top {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }

  .page-practice .practice-dropdown {
    width: 1.4rem;
  }

  .page-practice .practice-main__tools {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }

  .page-practice .practice-main__center {
    padding: 16px 0;
  }

  .page-practice .practice-sentence__words {
    gap: 16px;
  }

  .page-practice .practice-word__text {
    font-size: 16px;
    line-height: 24px;
  }

  .page-practice .practice-sentence__translation {
    font-size: 14px;
    line-height: 22px;
  }

  .page-practice .practice-prompt__text {
    font-size: 36px;
    line-height: 40px;
  }

  .page-practice .practice-visible-word__translation {
    font-size: 36px;
    line-height: 40px;
  }

  .page-practice .practice-word-input {
    font-size: 22px;
    line-height: 30px;
  }

  .page-practice .practice-main__bottom {
    padding: 0 0 12px;
  }
}

/* ---------- 练习加载页（Figma 1:2177） ---------- */

.page-practice--loading {
  overflow: hidden;
}

.page-practice .practice-loading[hidden] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.page-practice .practice-loading {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0.24rem;
  background-color: var(--color-white);
  -webkit-transition: opacity 0.4s ease, visibility 0.4s ease;
  -o-transition: opacity 0.4s ease, visibility 0.4s ease;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.page-practice .practice-loading--hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.page-practice .practice-loading__wrap {
  width: 100%;
  max-width: 4.48rem;
  padding: 0.24rem;
}

.page-practice .practice-loading__card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  padding: 0.48rem;
  border-radius: 0.32rem;
  background-color: var(--color-white);
  -webkit-box-shadow: 0 0.2rem 0.25rem rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.2rem 0.25rem rgba(0, 0, 0, 0.05);
}

.page-practice .practice-loading__logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 0.96rem;
  height: 0.96rem;
  border: 1px solid #5387d9;
  border-radius: 0.24rem;
  background-color: rgba(83, 135, 217, 0.05);
}

.page-practice .practice-loading__logo-img {
  display: block;
  width: 0.48rem;
  height: 0.48rem;
  -webkit-animation: practice-loading-spin 1.2s linear infinite;
  animation: practice-loading-spin 1.2s linear infinite;
}

@-webkit-keyframes practice-loading-spin {
  from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes practice-loading-spin {
  from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

.page-practice .practice-loading__text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.12rem;
  width: 100%;
  margin-top: 0.32rem;
  text-align: center;
}

.page-practice .practice-loading__title {
  margin: 0;
  font-size: 0.24rem;
  line-height: 0.32rem;
  font-weight: 500;
  letter-spacing: -0.006rem;
  color: #2c3e50;
}

.page-practice .practice-loading__subtitle {
  margin: 0;
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 500;
  color: #8e9aaf;
}

.page-practice .practice-loading__progress-wrap {
  width: 100%;
  margin-top: 0.32rem;
}

.page-practice .practice-loading__progress {
  position: relative;
  width: 100%;
  height: 0.03rem;
  overflow: hidden;
  border-radius: 9999px;
  background-color: #f3f4f6;
}

.page-practice .practice-loading__progress-fill {
  width: 0;
  height: 100%;
  border-radius: 9999px;
  background: -webkit-gradient(linear, left top, right top, from(#10b981), to(#3b82f6));
  background: -o-linear-gradient(left, #10b981 0%, #3b82f6 100%);
  background: linear-gradient(90deg, #10b981 0%, #3b82f6 100%);
  -webkit-transition: width 0.8s ease;
  -o-transition: width 0.8s ease;
  transition: width 0.8s ease;
}

.page-practice .practice-loading__dots {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 0.08rem;
  margin-top: 0.24rem;
}

.page-practice .practice-loading__dot {
  display: block;
  width: 0.06rem;
  height: 0.06rem;
  border-radius: 9999px;
  background-color: #cbd5e1;
  -webkit-animation: practice-loading-dot 1.2s ease-in-out infinite;
  animation: practice-loading-dot 1.2s ease-in-out infinite;
}

.page-practice .practice-loading__dot:nth-child(1) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.page-practice .practice-loading__dot:nth-child(2) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.page-practice .practice-loading__dot:nth-child(3) {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.page-practice .practice-loading__dot--active {
  background-color: #5387d9;
}

@-webkit-keyframes practice-loading-dot {
  0%, 80%, 100% {
    background-color: #cbd5e1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  40% {
    background-color: #5387d9;
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
  }
}

@keyframes practice-loading-dot {
  0%, 80%, 100% {
    background-color: #cbd5e1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  40% {
    background-color: #5387d9;
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
  }
}

@media (max-width: 1024px) {
  .page-practice .practice-loading__card {
    padding: 32px 24px;
    border-radius: 24px;
  }

  .page-practice .practice-loading__logo {
    width: 80px;
    height: 80px;
    border-radius: 20px;
  }

  .page-practice .practice-loading__logo-img {
    width: 40px;
    height: 40px;
  }

  .page-practice .practice-loading__title {
    font-size: 20px;
    line-height: 28px;
  }

  .page-practice .practice-loading__subtitle {
    font-size: 13px;
    line-height: 18px;
  }
}

/* ========== 朗读翻译页（Figma 1:2025） ========== */

.page-practice-read .practice-main {
  position: relative;
}

.page-practice-read .practice-read__top {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.page-practice-read .practice-read-report {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.04rem;
  margin-top: 0.13rem;
  padding: 0.04rem 0.12rem;
  border: 1px solid #e3e9f1;
  border-radius: 9999px;
  background-color: var(--color-white);
  font-size: 0.12rem;
  line-height: 0.16rem;
  font-weight: 500;
  color: #475569;
  white-space: nowrap;
  cursor: pointer;
}

.page-practice-read .practice-read-report img {
  display: block;
  width: 0.14rem;
  height: 0.14rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-practice-read .practice-read-mode-menu {
  position: absolute;
  top: 0.05rem;
  right: 0.24rem;
  z-index: 90;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.04rem;
  width: 2.4rem;
  padding: 0.09rem;
  border: 1px solid rgba(243, 244, 246, 0.5);
  border-radius: 0.16rem;
  background-color: var(--color-white);
  -webkit-box-shadow: 0 0.1rem 0.25rem -0.05rem rgba(0, 0, 0, 0.1), 0 0.08rem 0.1rem -0.06rem rgba(0, 0, 0, 0.1);
  box-shadow: 0 0.1rem 0.25rem -0.05rem rgba(0, 0, 0, 0.1), 0 0.08rem 0.1rem -0.06rem rgba(0, 0, 0, 0.1);
}

.page-practice-read .practice-read-mode-menu[hidden] {
  display: none;
}

.page-practice-read .practice-read-mode-menu__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.12rem;
  width: 100%;
  padding: 0.1rem 0.12rem;
  border: none;
  border-radius: 0.08rem;
  background-color: var(--color-white);
  font-size: 0.16rem;
  line-height: 0.225rem;
  font-weight: 500;
  color: #475569;
  text-align: left;
  cursor: pointer;
}

.page-practice-read .practice-read-mode-menu__item img {
  display: block;
  width: 0.18rem;
  height: 0.18rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-practice-read .practice-read-mode-menu__item--active {
  background-color: #f2f8ff;
  color: #165dff;
}

.page-practice-read .practice-read__center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.page-practice-read .practice-read-word {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  max-width: 3.2rem;
  text-align: center;
}

.page-practice-read .practice-read-word__text {
  margin: 0;
  font-size: 0.64rem;
  line-height: 0.64rem;
  font-weight: 900;
  letter-spacing: -0.016rem;
  color: #191b24;
}

.page-practice-read .practice-read-word__phonetic {
  margin: 0.15rem 0 0;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.18rem;
  line-height: 0.288rem;
  font-weight: 400;
  color: #737688;
}

.page-practice-read .practice-read-word__translation {
  margin: 0.17rem 0 0;
  padding-bottom: 0.33rem;
  font-size: 0.32rem;
  line-height: 0.48rem;
  font-weight: 500;
  color: #191b24;
}

@media (max-width: 1024px) {
  .page-practice-read .practice-read-word__text {
    font-size: 48px;
    line-height: 52px;
  }

  .page-practice-read .practice-read-word__phonetic {
    font-size: 15px;
    line-height: 24px;
  }

  .page-practice-read .practice-read-word__translation {
    font-size: 24px;
    line-height: 36px;
  }

  .page-practice-read .practice-read-mode-menu {
    width: 200px;
  }

  .page-practice-read .practice-read-mode-menu__item {
    font-size: 14px;
    line-height: 20px;
  }

  .page-practice-read .practice-read-report {
    font-size: 11px;
    margin-top: 8px;
  }
}

/* ========== 我的学习页（Figma 1:1067） ========== */

.page-my-learning .dash-main--my-learning {
  padding: 0;
  background-color: #f5f7fa;
}

.page-my-learning .my-learning {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.16rem;
  min-width: 0;
  padding: 0.16rem 0.24rem 0.4rem;
}

.page-my-learning .my-learning__tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.12rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.page-my-learning .my-learning__tabs::-webkit-scrollbar {
  display: none;
}

.page-my-learning a.my-learning__tab,
.page-my-learning .my-learning__tab {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 0.07rem 0.21rem;
  border: 1px solid #dae8ff;
  border-radius: 9999px;
  background-color: var(--color-white);
  font-size: 0.14rem;
  line-height: 0.22rem;
  font-weight: 500;
  color: #474555;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-transition: background-color 0.2s, border-color 0.2s, color 0.2s, -webkit-box-shadow 0.2s;
  -o-transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.page-my-learning .my-learning__tab--active {
  padding: 0.06rem 0.2rem;
  border-color: #5387d9;
  background-color: #5387d9;
  color: var(--color-white);
  -webkit-box-shadow: 0 0.01rem 0.01rem rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.01rem 0.01rem rgba(0, 0, 0, 0.05);
}

.page-my-learning a.my-learning__tab.my-learning__tab--active {
  padding: 0.06rem 0.2rem;
  border-color: #5387d9;
  background-color: #5387d9;
  color: var(--color-white);
  -webkit-box-shadow: 0 0.01rem 0.01rem rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.01rem 0.01rem rgba(0, 0, 0, 0.05);
}

.page-my-learning .school-sync__cover .my-learning__favorite {
  position: absolute;
  top: 0.04rem;
  right: 0.04rem;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 0.24rem;
  height: 0.24rem;
  padding: 0;
  border: none;
  border-radius: 0.04rem;
  background-color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
}

.page-my-learning .my-learning__favorite--empty {
  pointer-events: none;
}

.page-my-learning .my-learning__favorite img {
  display: block;
  width: 0.14rem;
  height: 0.14rem;
}

@media (max-width: 1024px) {
  .page-my-learning .my-learning {
    padding: 12px 16px 32px;
    gap: 12px;
  }

  .page-my-learning .my-learning__tab {
    font-size: 14px;
    line-height: 22px;
    padding: 6px 18px;
  }

  .page-my-learning .my-learning__tab--active,
  .page-my-learning a.my-learning__tab.my-learning__tab--active {
    padding: 5px 16px;
  }
}

/* ========== 我的学习-复习本空状态（Figma 1:3064） ========== */

.page-my-learning-review .dash-main--my-learning-review {
  padding: 0;
  background-color: #ffffff;
}

.page-my-learning-review .my-learning-review {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.16rem;
  min-width: 0;
  min-height: 100%;
  padding: 0.16rem 0.24rem 0.4rem;
}

.page-my-learning-review .my-learning-review__tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.12rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.page-my-learning-review .my-learning-review__tabs::-webkit-scrollbar {
  display: none;
}

.page-my-learning-review a.my-learning-review__tab {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 0.07rem 0.21rem;
  border: 1px solid #dae8ff;
  border-radius: 9999px;
  background-color: var(--color-white);
  font-size: 0.14rem;
  line-height: 0.22rem;
  font-weight: 500;
  color: #474555;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-transition: background-color 0.2s, border-color 0.2s, color 0.2s, -webkit-box-shadow 0.2s;
  -o-transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.page-my-learning-review .my-learning-review__tab--active {
  padding: 0.06rem 0.2rem;
  border-color: #2772ff;
  background-color: #2772ff;
  color: var(--color-white);
  -webkit-box-shadow: 0 0.01rem 0.01rem rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.01rem 0.01rem rgba(0, 0, 0, 0.05);
}

.page-my-learning-review .my-learning-review__subnav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 0.48rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 0.12rem 0.24rem;
  border-radius: 0.1rem;
  background-color: var(--color-white);
}

.page-my-learning-review .my-learning-review__subtab {
  padding: 0;
  border: none;
  background: none;
  font-size: 0.14rem;
  line-height: 0.22rem;
  font-weight: 500;
  color: #474555;
  white-space: nowrap;
  cursor: pointer;
  -webkit-transition: color 0.2s;
  -o-transition: color 0.2s;
  transition: color 0.2s;
}

.page-my-learning-review .my-learning-review__subtab--active {
  color: #2772ff;
}

.page-my-learning-review .my-learning-review__empty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  width: 100%;
  max-width: 5.76rem;
  margin: 0.48rem auto 0;
  padding: 0 0.32rem 0.4rem;
}

.page-my-learning-review .my-learning-review__empty-icon {
  display: block;
  width: 0.64rem;
  height: 0.64rem;
  margin-bottom: 0.24rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-my-learning-review .my-learning-review__empty-message {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.12rem;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  margin-bottom: 0.4rem;
  text-align: center;
}

.page-my-learning-review .my-learning-review__empty-title {
  margin: 0;
  font-size: 0.24rem;
  line-height: 0.32rem;
  font-weight: 500;
  color: #1f2937;
}

.page-my-learning-review .my-learning-review__empty-desc {
  margin: 0;
  font-size: 0.16rem;
  line-height: 0.24rem;
  font-weight: 500;
  color: #6b7280;
}

.page-my-learning-review .my-learning-review__tip {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.16rem;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  width: 100%;
  max-width: 5.12rem;
  margin-bottom: 0.4rem;
  padding: 0.25rem;
  border: 1px solid rgba(83, 135, 217, 0.6);
  border-radius: 0.12rem;
  background-color: rgba(83, 135, 217, 0.08);
  -webkit-box-shadow: 0 0.01rem 0.02rem rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.01rem 0.02rem rgba(0, 0, 0, 0.05);
}

.page-my-learning-review .my-learning-review__tip-icon {
  display: block;
  width: 0.2rem;
  height: 0.2rem;
  margin-top: 0.04rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-my-learning-review .my-learning-review__tip-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.08rem;
  min-width: 0;
}

.page-my-learning-review .my-learning-review__tip-title {
  margin: 0;
  font-size: 0.16rem;
  line-height: 0.24rem;
  font-weight: 500;
  color: #1f2937;
}

.page-my-learning-review .my-learning-review__tip-desc {
  margin: 0;
  font-size: 0.14rem;
  line-height: 0.2275rem;
  font-weight: 500;
  color: #4b5563;
}

.page-my-learning-review a.my-learning-review__link,
.page-my-learning-review a.my-learning-review__cta {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.04rem;
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 500;
  color: #165dff;
  text-decoration: none;
  -webkit-transition: opacity 0.15s;
  -o-transition: opacity 0.15s;
  transition: opacity 0.15s;
}

.page-my-learning-review a.my-learning-review__link {
  padding-top: 0.08rem;
}

.page-my-learning-review a.my-learning-review__link:hover,
.page-my-learning-review a.my-learning-review__cta:hover {
  opacity: 0.85;
}

.page-my-learning-review .my-learning-review__link-arrow {
  display: block;
  width: 0.08rem;
  height: auto;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-my-learning-review .my-learning-review__cta {
  margin-top: 0.08rem;
}

@media (max-width: 1024px) {
  .page-my-learning-review .my-learning-review {
    padding: 12px 16px 32px;
    gap: 12px;
  }

  .page-my-learning-review a.my-learning-review__tab {
    font-size: 14px;
    line-height: 22px;
    padding: 6px 18px;
  }

  .page-my-learning-review .my-learning-review__tab--active {
    padding: 5px 16px;
  }

  .page-my-learning-review .my-learning-review__subnav {
    min-height: 64px;
    gap: 32px;
  }

  .page-my-learning-review .my-learning-review__subtab {
    font-size: 14px;
    line-height: 22px;
  }

  .page-my-learning-review .my-learning-review__empty {
    margin-top: 24px;
    padding: 0 0 24px;
  }

  .page-my-learning-review .my-learning-review__empty-title {
    font-size: 20px;
    line-height: 28px;
  }

  .page-my-learning-review .my-learning-review__empty-desc {
    font-size: 14px;
    line-height: 22px;
  }

  .page-my-learning-review .my-learning-review__tip {
    padding: 16px;
  }
}

/* ========== 我的学习-错词本列表（Figma 1:3573） ========== */

.page-my-learning-words .dash-main--my-learning-words {
  padding: 0;
  background-color: #f5f7fa;
}

.page-my-learning-words .my-learning-words {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.16rem;
  min-width: 0;
  min-height: 100%;
  padding: 0.16rem 0.24rem 0.4rem;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}

.page-my-learning-words .my-learning-words__nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.12rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-my-learning-words .my-learning-words__tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.12rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.page-my-learning-words .my-learning-words__tabs::-webkit-scrollbar {
  display: none;
}

.page-my-learning-words a.my-learning-words__tab {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 0.07rem 0.21rem;
  border: 1px solid #dae8ff;
  border-radius: 9999px;
  background-color: var(--color-white);
  font-size: 0.14rem;
  line-height: 0.22rem;
  font-weight: 500;
  color: #474555;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-transition: background-color 0.2s, border-color 0.2s, color 0.2s, -webkit-box-shadow 0.2s;
  -o-transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.page-my-learning-words .my-learning-words__tab--active {
  padding: 0.06rem 0.2rem;
  border-color: #2772ff;
  background-color: #2772ff;
  color: var(--color-white);
  -webkit-box-shadow: 0 0.01rem 0.01rem rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.01rem 0.01rem rgba(0, 0, 0, 0.05);
}

.page-my-learning-words a.my-learning-words__tab.my-learning-words__tab--active {
  padding: 0.06rem 0.2rem;
  border-color: #2772ff;
  background-color: #2772ff;
  color: var(--color-white);
  -webkit-box-shadow: 0 0.01rem 0.01rem rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.01rem 0.01rem rgba(0, 0, 0, 0.05);
}

.page-my-learning-words .my-learning-words__subnav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 0.48rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 0.12rem 0.24rem;
  border-radius: 0.1rem;
  background-color: var(--color-white);
}

.page-my-learning-words a.my-learning-words__subtab,
.page-my-learning-words .my-learning-words__subtab {
  padding: 0;
  border: none;
  background: none;
  font-size: 0.14rem;
  line-height: 0.22rem;
  font-weight: 500;
  color: #474555;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-transition: color 0.2s;
  -o-transition: color 0.2s;
  transition: color 0.2s;
}

.page-my-learning-words .my-learning-words__subtab--active {
  color: #2772ff;
}

.page-my-learning-words a.my-learning-words__subtab.my-learning-words__subtab--active,
.page-my-learning-words .my-learning-words__subtab.my-learning-words__subtab--active {
  color: #2772ff;
}

.page-my-learning-words .my-learning-words__toolbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 0.24rem;
  min-height: 0.72rem;
  padding: 0.17rem;
  border: 1px solid #f3f4f6;
  border-radius: 0.08rem;
  background-color: var(--color-white);
  -webkit-box-shadow: 0 0.01rem 0.01rem rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.01rem 0.01rem rgba(0, 0, 0, 0.05);
}

.page-my-learning-words .my-learning-words__check {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.06rem;
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 500;
  color: #4b5563;
  cursor: pointer;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.page-my-learning-words .my-learning-words__checkbox {
  width: 0.2rem;
  height: 0.2rem;
  margin: 0;
  border: 1px solid #d1d5db;
  border-radius: 0.04rem;
  background-color: var(--color-white);
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-my-learning-words .my-learning-words__checkbox:checked {
  border-color: #165dff;
  background-color: #165dff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5.2L4.2 8.4L11 1.6' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.1rem 0.08rem;
}

.page-my-learning-words .my-learning-words__start {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.08rem;
  margin-left: 0.08rem;
  padding: 0.08rem 0.2rem;
  border: none;
  border-radius: 0.08rem;
  background-color: #165dff;
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 500;
  color: var(--color-white);
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: opacity 0.15s;
  -o-transition: opacity 0.15s;
  transition: opacity 0.15s;
}

.page-my-learning-words .my-learning-words__start:hover {
  opacity: 0.92;
}

.page-my-learning-words .my-learning-words__start img {
  display: block;
  width: 0.15rem;
  height: 0.15rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-my-learning-words .my-learning-words__remove {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-left: auto;
  padding: 0.08rem 0.16rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.08rem;
  background-color: var(--color-white);
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 500;
  color: #4b5563;
  cursor: pointer;
  -webkit-transition: border-color 0.15s, color 0.15s;
  -o-transition: border-color 0.15s, color 0.15s;
  transition: border-color 0.15s, color 0.15s;
}

.page-my-learning-words .my-learning-words__remove:hover {
  border-color: #d1d5db;
  color: #1f2937;
}

.page-my-learning-words .my-learning-words__error-tag--vocab {
  border-color: #dae8ff;
  background-color: #f0f6ff;
  color: #2772ff;
}

.page-my-learning-words .my-learning-words__empty[hidden],
.page-my-learning-words #word-list[hidden],
.page-my-learning-words #word-toolbar[hidden] {
  display: none !important;
}

.page-my-learning-words .my-learning-words__empty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  width: 100%;
  max-width: 5.76rem;
  margin: 0.48rem auto 0;
  padding: 0 0.32rem 0.4rem;
}

.page-my-learning-words .my-learning-review__empty-icon {
  display: block;
  width: 0.64rem;
  height: 0.64rem;
  margin-bottom: 0.24rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-my-learning-words .my-learning-review__empty-message {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.12rem;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  margin-bottom: 0.4rem;
  text-align: center;
}

.page-my-learning-words .my-learning-review__empty-title {
  margin: 0;
  font-size: 0.24rem;
  line-height: 0.32rem;
  font-weight: 500;
  color: #1f2937;
}

.page-my-learning-words .my-learning-review__empty-desc {
  margin: 0;
  font-size: 0.16rem;
  line-height: 0.24rem;
  font-weight: 500;
  color: #6b7280;
}

.page-my-learning-words a.my-learning-review__cta {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.08rem;
  padding: 0.1rem 0.24rem;
  border-radius: 0.08rem;
  background: -webkit-gradient(linear, left top, right top, from(#5aa9ff), to(#2672ff));
  background: -o-linear-gradient(left, #5aa9ff 0%, #2672ff 100%);
  background: linear-gradient(90deg, #5aa9ff 0%, #2672ff 100%);
  font-size: 0.14rem;
  line-height: 0.22rem;
  font-weight: 500;
  color: var(--color-white);
  text-decoration: none;
}

.page-my-learning-words .my-learning-review__link-arrow {
  display: block;
  width: 0.08rem;
  height: 0.03rem;
}

.page-my-learning-words .my-learning-words__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.16rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-my-learning-words .my-learning-words__card {
  display: grid;
  grid-template-columns: 0.36rem minmax(0, 1fr) 1.14rem;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.16rem;
  min-height: 0.82rem;
  padding: 0.17rem;
  border: 1px solid #f3f4f6;
  border-radius: 0.08rem;
  background-color: var(--color-white);
  -webkit-box-shadow: 0 0.01rem 0.015rem rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.01rem 0.015rem rgba(0, 0, 0, 0.05);
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}

.page-my-learning-words .my-learning-words__card-check {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding-right: 0.16rem;
  cursor: pointer;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.page-my-learning-words .my-learning-words__card-body {
  min-width: 0;
}

.page-my-learning-words .my-learning-words__word-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 0.04rem;
}

.page-my-learning-words .my-learning-words__word {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.18rem;
  line-height: 0.28rem;
  font-weight: 700;
  color: #1f2937;
}

.page-my-learning-words .my-learning-words__speaker {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-left: 0.08rem;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  opacity: 0.85;
  -webkit-transition: opacity 0.15s;
  -o-transition: opacity 0.15s;
  transition: opacity 0.15s;
}

.page-my-learning-words .my-learning-words__speaker:hover {
  opacity: 1;
}

.page-my-learning-words .my-learning-words__speaker img {
  display: block;
  width: 0.16rem;
  height: 0.16rem;
}

.page-my-learning-words .my-learning-words__meaning {
  margin: 0;
  font-size: 0.12rem;
  line-height: 0.16rem;
  font-weight: 500;
  color: #165dff;
}

.page-my-learning-words .my-learning-words__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  gap: 0.08rem;
}

.page-my-learning-words .my-learning-words__error-tag {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.04rem;
  padding: 0.03rem 0.09rem;
  border: 1px solid #ffa39e;
  border-radius: 0.04rem;
  background-color: #fff1f0;
  font-size: 0.12rem;
  line-height: 0.16rem;
  font-weight: 500;
  color: #ff4d4f;
  white-space: nowrap;
}

.page-my-learning-words .my-learning-words__error-tag img {
  display: block;
  width: 0.12rem;
  height: 0.12rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-my-learning-words .my-learning-words__date {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.1rem;
  line-height: 0.15rem;
  font-weight: 400;
  color: #8c8c8c;
}

.page-my-learning-words .my-learning-words__pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 0.08rem;
  margin-top: 0.16rem;
  padding-bottom: 0.08rem;
}

.page-my-learning-words .my-learning-words__page-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  min-width: 0.4rem;
  height: 0.4rem;
  padding: 0.111rem 0;
  border: none;
  border-radius: 0.08rem;
  background-color: #f3f2ff;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.12rem;
  line-height: 0.168rem;
  font-weight: 500;
  letter-spacing: 0.006rem;
  color: #434656;
  cursor: pointer;
  -webkit-transition: background-color 0.15s, color 0.15s;
  -o-transition: background-color 0.15s, color 0.15s;
  transition: background-color 0.15s, color 0.15s;
}

.page-my-learning-words .my-learning-words__page-btn--arrow {
  background-color: #e7e7f4;
}

.page-my-learning-words .my-learning-words__page-btn--arrow:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-my-learning-words .my-learning-words__page-btn--active {
  background-color: #165dff;
  color: var(--color-white);
  -webkit-box-shadow: 0 0.02rem 0.04rem rgba(22, 93, 255, 0.25);
  box-shadow: 0 0.02rem 0.04rem rgba(22, 93, 255, 0.25);
}

.page-my-learning-words .my-learning-words__page-btn img {
  display: block;
  width: 0.074rem;
  height: 0.12rem;
}

.page-my-learning-words .my-learning-words__page-ellipsis {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 0.4rem;
  height: 0.4rem;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.12rem;
  line-height: 0.168rem;
  font-weight: 500;
  letter-spacing: 0.006rem;
  color: #737688;
}

@media (max-width: 1024px) {
  .page-my-learning-words .my-learning-words {
    padding: 12px 16px 32px;
    gap: 12px;
  }

  .page-my-learning-words a.my-learning-words__tab {
    font-size: 14px;
    line-height: 22px;
    padding: 6px 18px;
  }

  .page-my-learning-words .my-learning-words__tab--active,
  .page-my-learning-words a.my-learning-words__tab.my-learning-words__tab--active {
    padding: 5px 16px;
  }

  .page-my-learning-words .my-learning-words__subnav {
    gap: 0.32rem;
    padding: 0.1rem 0.16rem;
  }

  .page-my-learning-words a.my-learning-words__subtab {
    font-size: 14px;
    line-height: 22px;
  }

  .page-my-learning-words .my-learning-words__toolbar {
    gap: 12px 16px;
    padding: 12px;
  }

  .page-my-learning-words .my-learning-words__start {
    margin-left: 0;
  }

  .page-my-learning-words .my-learning-words__card {
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-rows: auto auto;
  }

  .page-my-learning-words .my-learning-words__meta {
    grid-column: 1 / -1;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    padding-top: 8px;
    border-top: 1px solid #f3f4f6;
  }

  .page-my-learning-words .my-learning-words__word {
    font-size: 16px;
    line-height: 24px;
  }
}

/* ========== 错词本开始练习弹窗（Figma 1:6382） ========== */

.page-my-learning-words .review-start-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0.16rem;
}

.page-my-learning-words .review-start-modal[hidden] {
  display: none;
}

.page-my-learning-words .review-start-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.41);
}

.page-my-learning-words .review-start-modal__panel {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  max-width: 3.84rem;
  padding: 0.32rem;
  border-radius: 0.12rem;
  background-color: var(--color-white);
  -webkit-box-shadow: 0 0.25rem 0.5rem -0.12rem rgba(0, 0, 0, 0.25);
  box-shadow: 0 0.25rem 0.5rem -0.12rem rgba(0, 0, 0, 0.25);
}

.page-my-learning-words .review-start-modal__title {
  width: 100%;
  margin: 0.24rem 0 0;
  padding: 0;
  font-size: 0.18rem;
  line-height: 0.27rem;
  font-weight: 500;
  color: #1f2937;
  text-align: center;
}

.page-my-learning-words a.review-start-modal__primary,
.page-my-learning-words button.review-start-modal__primary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  margin-top: 0.24rem;
  padding: 0.12rem 0.24rem;
  border-radius: 0.08rem;
  background-color: #165dff;
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 500;
  color: var(--color-white);
  text-align: center;
  text-decoration: none;
  -webkit-transition: opacity 0.15s;
  -o-transition: opacity 0.15s;
  transition: opacity 0.15s;
}

.page-my-learning-words button.review-start-modal__primary {
  border: none;
  cursor: pointer;
}

.page-my-learning-words a.review-start-modal__primary:hover,
.page-my-learning-words button.review-start-modal__primary:hover {
  opacity: 0.92;
}

.page-my-learning-words .review-start-modal__cancel {
  margin-top: 0.24rem;
  padding: 0;
  border: none;
  background: none;
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  -webkit-transition: color 0.15s;
  -o-transition: color 0.15s;
  transition: color 0.15s;
}

.page-my-learning-words .review-start-modal__cancel:hover {
  color: #4b5563;
}

@media (max-width: 1024px) {
  .page-my-learning-words .review-start-modal__panel {
    max-width: 100%;
    padding: 24px;
  }

  .page-my-learning-words .review-start-modal__title {
    margin-top: 16px;
    font-size: 16px;
    line-height: 24px;
  }

  .page-my-learning-words a.review-start-modal__primary,
  .page-my-learning-words button.review-start-modal__primary,
  .page-my-learning-words .review-start-modal__cancel {
    margin-top: 16px;
    font-size: 14px;
    line-height: 20px;
  }
}

/* ========== 练习重置确认弹窗 ========== */

.page-practice .practice-reset-modal {
  position: fixed;
  inset: 0;
  z-index: 520;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.16rem;
}

.page-practice .practice-reset-modal[hidden] {
  display: none;
}

.page-practice .practice-reset-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
}

.page-practice .practice-reset-modal__panel {
  position: relative;
  width: 100%;
  max-width: 3.84rem;
  padding: 0.32rem 0.28rem 0.28rem;
  border-radius: 0.16rem;
  background-color: #fff;
  box-shadow: 0 0.24rem 0.64rem rgba(15, 23, 42, 0.16);
  text-align: center;
}

.page-practice .practice-reset-modal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.56rem;
  height: 0.56rem;
  margin: 0 auto;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff7e8 0%, #ffedd5 100%);
}

.page-practice .practice-reset-modal__icon img {
  display: block;
  width: 0.24rem;
  height: 0.24rem;
}

.page-practice .practice-reset-modal__title {
  margin: 0.2rem 0 0;
  font-size: 0.18rem;
  line-height: 0.26rem;
  font-weight: 700;
  color: #191b24;
}

.page-practice .practice-reset-modal__desc {
  margin: 0.1rem 0 0;
  font-size: 0.13rem;
  line-height: 0.2rem;
  color: #86909c;
}

.page-practice .practice-reset-modal__actions {
  display: flex;
  gap: 0.12rem;
  margin-top: 0.24rem;
}

.page-practice .practice-reset-modal__btn {
  flex: 1;
  min-height: 0.4rem;
  padding: 0.1rem 0.16rem;
  border-radius: 0.08rem;
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.page-practice .practice-reset-modal__btn--light {
  border: 1px solid #e5e6eb;
  background-color: #fff;
  color: #4e5969;
}

.page-practice .practice-reset-modal__btn--light:hover {
  background-color: #f7f8fa;
}

.page-practice .practice-reset-modal__btn--primary {
  border: 1px solid #165dff;
  background-color: #165dff;
  color: #fff;
  box-shadow: 0 0.04rem 0.12rem rgba(22, 93, 255, 0.24);
}

.page-practice .practice-reset-modal__btn--primary:hover {
  background-color: #0e42d2;
  border-color: #0e42d2;
}

@media (max-width: 1024px) {
  .page-practice .practice-reset-modal__panel {
    max-width: calc(100vw - 0.32rem);
    padding: 24px 20px 20px;
  }

  .page-practice .practice-reset-modal__title {
    font-size: 18px;
    line-height: 26px;
  }

  .page-practice .practice-reset-modal__desc {
    font-size: 14px;
    line-height: 22px;
  }

  .page-practice .practice-reset-modal__btn {
    min-height: 40px;
    font-size: 14px;
  }
}

/* ========== 练习结算弹窗 ========== */

.page-practice .practice-summary-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.16rem;
}

.page-practice .practice-summary-modal[hidden] {
  display: none;
}

.page-practice .practice-summary-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
}

.page-practice .practice-summary-modal__panel {
  position: relative;
  width: 5.6rem;
  max-width: calc(100vw - 0.48rem);
  max-height: calc(100dvh - 0.32rem);
  overflow: hidden;
  border-radius: 0.32rem;
  background-color: #fff;
  box-shadow: 0 0.24rem 0.64rem rgba(15, 23, 42, 0.16);
}

.page-practice .practice-summary-modal__toolbar {
  display: flex;
  align-items: center;
  padding: 0.14rem 0.18rem;
  border-bottom: 1px solid #eef2f7;
  background: #fff;
  flex-shrink: 0;
}

.page-practice .practice-summary-modal__back {
  display: inline-flex;
  align-items: center;
  gap: 0.04rem;
  padding: 0.08rem 0.14rem 0.08rem 0.1rem;
  border: 1px solid #d1d5db;
  border-radius: 0.12rem;
  background: #f9fafb;
  font-size: 0.15rem;
  line-height: 0.22rem;
  font-weight: 600;
  color: #111827;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.page-practice .practice-summary-modal__back:hover {
  border-color: #9ca3af;
  background: #f3f4f6;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08);
}

.page-practice .practice-summary-modal__back:active {
  transform: scale(0.98);
}

.page-practice .practice-summary-modal__back-icon {
  display: block;
  flex-shrink: 0;
}

.page-practice .practice-summary-modal__body {
  padding: 0.28rem 0.36rem 0.36rem;
  overflow-y: auto;
  text-align: center;
}

.page-practice .practice-summary-modal__top {
  margin-bottom: 0.2rem;
}

.page-practice .practice-summary-modal__grade {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #f472b6;
}

.page-practice .practice-summary-modal__hero {
  margin: 0;
  font-size: 0.44rem;
  line-height: 1.1;
  font-weight: 800;
  color: #f472b6;
}

.page-practice .practice-summary-modal__subtitle {
  margin: 0.12rem 0 0;
  font-size: 0.16rem;
  line-height: 0.24rem;
  font-weight: 500;
  color: #6b7280;
}

.page-practice .practice-summary-modal__stars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  min-height: 0.42rem;
  margin-bottom: 0.28rem;
}

.page-practice .practice-summary-modal__star {
  display: inline-flex;
  line-height: 0;
}

.page-practice .practice-summary-modal__star svg {
  width: 0.36rem;
  height: 0.36rem;
  display: block;
  fill: #d1d5db;
  filter: drop-shadow(0 1px 0 #b8c0cc);
}

.page-practice .practice-summary-modal__star.is-on svg {
  fill: #f5c518;
  filter: drop-shadow(0 2px 0 #d4a80f) drop-shadow(0 4px 8px rgba(212, 168, 15, 0.28));
}

.page-practice .practice-summary-modal__metrics {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.2rem;
  margin-bottom: 0.32rem;
}

.page-practice .practice-summary-metric {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
}

.page-practice .practice-summary-metric__ring {
  width: 1.18rem;
  height: 1.18rem;
  border-radius: 50%;
  border: 0.1rem solid #cbd5e1;
  background: #fff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.04rem;
}

.page-practice .practice-summary-metric--acc .practice-summary-metric__ring {
  border-color: #4ade80;
  box-shadow: 0 0 0 0.04rem rgba(74, 222, 128, 0.12);
}

.page-practice .practice-summary-metric--time .practice-summary-metric__ring {
  border-color: #818cf8;
  box-shadow: 0 0 0.16rem rgba(129, 140, 248, 0.35);
}

.page-practice .practice-summary-metric--score .practice-summary-metric__ring {
  border-color: #fb923c;
  box-shadow: 0 0 0 0.04rem rgba(251, 146, 60, 0.12);
}

.page-practice .practice-summary-metric__val {
  font-size: 0.2rem;
  line-height: 1.1;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.page-practice .practice-summary-metric--time .practice-summary-metric__val {
  font-size: 0.17rem;
}

.page-practice .practice-summary-metric__label {
  font-size: 0.13rem;
  line-height: 0.2rem;
  font-weight: 500;
  color: #6b7280;
  white-space: nowrap;
}

.page-practice .practice-summary-modal__actions {
  display: flex;
  justify-content: center;
  gap: 0.12rem;
  flex-wrap: wrap;
}

.page-practice .practice-summary-modal__actions--row {
  align-items: stretch;
}

.page-practice .practice-summary-modal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.06rem;
  min-height: 0.48rem;
  padding: 0.1rem 0.16rem;
  border-radius: 0.16rem;
  font-size: 0.15rem;
  line-height: 0.22rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s, background 0.15s;
}

.page-practice .practice-summary-modal__btn:active {
  transform: scale(0.98);
}

.page-practice .practice-summary-modal__btn-icon {
  display: block;
  flex-shrink: 0;
}

.page-practice .practice-summary-modal__btn--light {
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #374151;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.page-practice .practice-summary-modal__btn--light:hover {
  border-color: #d1d5db;
  background: #f9fafb;
}

.page-practice .practice-summary-modal__btn--light:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.page-practice .practice-summary-modal__btn--next {
  flex: 1 1 0;
  min-width: 0;
  border: none;
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 55%, #4f46e5 100%);
  color: #fff;
  box-shadow: 0 0.1rem 0.24rem rgba(99, 102, 241, 0.38);
}

.page-practice .practice-summary-modal__btn--next:hover {
  box-shadow: 0 0.12rem 0.28rem rgba(99, 102, 241, 0.46);
}

@media (max-width: 1024px) {
  .page-practice .practice-summary-modal__panel {
    width: 100%;
    border-radius: 24px;
  }

  .page-practice .practice-summary-modal__back {
    font-size: 15px;
    padding: 8px 14px 8px 10px;
  }

  .page-practice .practice-summary-modal__grade {
    font-size: 72px;
  }

  .page-practice .practice-summary-modal__hero {
    font-size: 36px;
  }

  .page-practice .practice-summary-modal__star svg {
    width: 32px;
    height: 32px;
  }

  .page-practice .practice-summary-metric__ring {
    width: 96px;
    height: 96px;
    border-width: 8px;
  }

  .page-practice .practice-summary-metric__val {
    font-size: 18px;
  }

  .page-practice .practice-summary-metric--time .practice-summary-metric__val {
    font-size: 15px;
  }

  .page-practice .practice-summary-modal__btn {
    min-height: 44px;
    font-size: 14px;
    border-radius: 14px;
  }

  .page-practice .practice-summary-modal__actions--row {
    flex-direction: column;
  }
}

/* ========== 注册页（Figma 1:2245） ========== */

.page-register {
  min-height: 100vh;
  min-height: 100dvh;
  line-height: 1.25;
  background-color: #f3f4f8;
}

.page-register .register {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
}

.page-register .register__visual {
  position: relative;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 49.48%;
  flex: 0 0 49.48%;
  max-width: 49.48%;
  background-color: rgba(83, 135, 217, 0.09);
  overflow: hidden;
}

.page-register .register__illustration {
  position: absolute;
  left: 12.08%;
  top: 16.57%;
  width: 73.47%;
  max-width: 6.98rem;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
  pointer-events: none;
}

.page-register .register__main {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  min-width: 0;
  padding: 0.4rem 0.64rem 0.4rem 0.32rem;
  background-color: var(--color-white);
}

.page-register a.register__close {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 0.32rem;
  height: 0.32rem;
  opacity: 0.7;
  -webkit-transition: opacity 0.15s;
  -o-transition: opacity 0.15s;
  transition: opacity 0.15s;
}

.page-register a.register__close:hover {
  opacity: 1;
}

.page-register .register__close img {
  display: block;
  width: 0.14rem;
  height: 0.14rem;
}

.page-register .register__card {
  width: 100%;
  max-width: 4.4rem;
  padding: 0.32rem;
  border-radius: 0.12rem;
  background-color: var(--color-white);
  -webkit-box-shadow: 0 0.02rem 0.06rem rgba(0, 0, 0, 0.06);
  box-shadow: 0 0.02rem 0.06rem rgba(0, 0, 0, 0.06);
}

.page-register .register__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 0.32rem;
  text-align: center;
}

.page-register .register__logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 0.08rem;
  background-color: #165dff;
}

.page-register .register__logo img {
  display: block;
  width: 0.275rem;
  height: auto;
}

.page-register .register__title {
  margin: 0.08rem 0 0;
  font-size: 0.16rem;
  line-height: 0.22rem;
  font-weight: 500;
  color: #000;
}

.page-register .register__subtitle {
  margin: 0.08rem 0 0;
  font-size: 0.14rem;
  line-height: 0.18rem;
  font-weight: 500;
  color: #434656;
}

.page-register .register__form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.16rem;
  margin-bottom: 0.16rem;
}

.page-register .register__field {
  position: relative;
  font-size: 0;
}

.page-register .register__field--grow {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
}

.page-register .register__field-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.08rem;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

.page-register .register__field-icon {
  position: absolute;
  left: 0.12rem;
  top: 50%;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  pointer-events: none;
}

.page-register .register__field-icon img {
  display: block;
  max-width: 100%;
  height: auto;
}

.page-register .register__input {
  width: 100%;
  height: 0.48rem;
  padding: 0 0.13rem 0 0.41rem;
  border: 1px solid #e5e6eb;
  border-radius: 0.04rem;
  background-color: var(--color-white);
  font-family: inherit;
  font-size: 0.16rem;
  line-height: 0.2rem;
  font-weight: 500;
  color: #1f2937;
  outline: none;
  -webkit-transition: border-color 0.15s, -webkit-box-shadow 0.15s;
  -o-transition: border-color 0.15s, box-shadow 0.15s;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.page-register .register__input--password {
  padding-right: 0.44rem;
}

.page-register .register__input::-webkit-input-placeholder {
  color: #6b7280;
}

.page-register .register__input::-moz-placeholder {
  color: #6b7280;
}

.page-register .register__input:-ms-input-placeholder {
  color: #6b7280;
}

.page-register .register__input::placeholder {
  color: #6b7280;
}

.page-register .register__input:focus {
  border-color: #165dff;
  -webkit-box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.12);
  box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.12);
}

.page-register .register__toggle-pwd {
  position: absolute;
  top: 50%;
  right: 0.12rem;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  opacity: 0.75;
  -webkit-transition: opacity 0.15s;
  -o-transition: opacity 0.15s;
  transition: opacity 0.15s;
}

.page-register .register__toggle-pwd:hover {
  opacity: 1;
}

.page-register .register__toggle-pwd img {
  display: block;
  width: 0.183rem;
  height: auto;
}

.page-register .register__code-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  height: 0.48rem;
  padding: 0 0.17rem;
  border: 1px solid rgba(22, 93, 255, 0.2);
  border-radius: 0.04rem;
  background-color: var(--color-white);
  font-family: inherit;
  font-size: 0.14rem;
  line-height: 0.18rem;
  font-weight: 500;
  color: #165dff;
  white-space: nowrap;
  cursor: pointer;
  -webkit-transition: background-color 0.15s, border-color 0.15s;
  -o-transition: background-color 0.15s, border-color 0.15s;
  transition: background-color 0.15s, border-color 0.15s;
}

.page-register .register__code-btn:hover {
  background-color: rgba(22, 93, 255, 0.04);
}

.page-register .register__submit {
  width: 100%;
  margin-top: 0;
  padding: 0.1rem 0.24rem;
  border: none;
  border-radius: 0.08rem;
  background-color: #165dff;
  font-family: inherit;
  font-size: 0.18rem;
  line-height: 0.24rem;
  font-weight: 500;
  color: var(--color-white);
  cursor: pointer;
  -webkit-box-shadow: 0 0.1rem 0.15rem -0.03rem rgba(22, 93, 255, 0.2), 0 0.04rem 0.06rem -0.04rem rgba(22, 93, 255, 0.2);
  box-shadow: 0 0.1rem 0.15rem -0.03rem rgba(22, 93, 255, 0.2), 0 0.04rem 0.06rem -0.04rem rgba(22, 93, 255, 0.2);
  -webkit-transition: opacity 0.15s;
  -o-transition: opacity 0.15s;
  transition: opacity 0.15s;
}

.page-register .register__submit:hover {
  opacity: 0.92;
}

.page-register .register__login {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 0.04rem;
  margin: 0.24rem 0 0;
  font-size: 0.14rem;
  line-height: 0.18rem;
  font-weight: 500;
  color: #434656;
}

.page-register .register__login a {
  color: #165dff;
  text-decoration: none;
}

.page-register .register__login a:hover {
  text-decoration: underline;
}

.page-register .register__agreement {
  margin: 0.31rem 0 0;
  font-size: 0.11rem;
  line-height: 0.15rem;
  font-weight: 500;
  color: #e5e6eb;
  text-align: center;
}

.page-register .register__agreement a {
  color: #434656;
  text-decoration: underline;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
}

.page-register .register__agreement a:hover {
  color: #165dff;
}

@media (max-width: 1024px) {
  .page-register .register {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .page-register .register__visual {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    max-width: none;
    min-height: 240px;
  }

  .page-register .register__illustration {
    position: relative;
    left: auto;
    top: auto;
    display: block;
    width: min(320px, 80%);
    margin: 24px auto;
  }

  .page-register .register__main {
    padding: 24px 16px 40px;
  }

  .page-register a.register__close {
    top: 16px;
    right: 16px;
  }

  .page-register .register__card {
    max-width: 100%;
    padding: 24px 20px;
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  .page-register .register__field-row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .page-register .register__code-btn {
    width: 100%;
  }

  .page-register .register__input {
    height: 44px;
    font-size: 16px;
    line-height: 20px;
  }

  .page-register .register__code-btn {
    height: 44px;
    line-height: 18px;
  }

  .page-register .register__submit {
    font-size: 16px;
    line-height: 22px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* ========== 登录页（Figma 1:2319） ========== */

.page-login {
  min-height: 100vh;
  min-height: 100dvh;
  line-height: 1.25;
  background-color: #f3f4f8;
}

.page-login .login {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
}

.page-login .login__visual {
  position: relative;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 49.48%;
  flex: 0 0 49.48%;
  max-width: 49.48%;
  background-color: rgba(83, 135, 217, 0.09);
  overflow: hidden;
}

.page-login .login__illustration {
  position: absolute;
  left: 13.26%;
  top: 18.52%;
  width: 73.47%;
  max-width: 6.98rem;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
  pointer-events: none;
}

.page-login .login__stage {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  min-width: 0;
  padding: 0.4rem;
}

.page-login a.login__close {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 0.32rem;
  height: 0.32rem;
  opacity: 0.7;
  -webkit-transition: opacity 0.15s;
  -o-transition: opacity 0.15s;
  transition: opacity 0.15s;
}

.page-login a.login__close:hover {
  opacity: 1;
}

.page-login .login__close img {
  display: block;
  width: 0.14rem;
  height: 0.14rem;
}

.page-login .login__card {
  width: 100%;
  max-width: 3.92rem;
  padding: 0.41rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.12rem;
  background-color: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  -webkit-box-shadow: 0 0.08rem 0.32rem rgba(31, 38, 135, 0.1);
  box-shadow: 0 0.08rem 0.32rem rgba(31, 38, 135, 0.1);
}

.page-login .login__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 0.24rem;
  text-align: center;
}

.page-login .login__brand {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 0.56rem;
  height: 0.56rem;
  margin-bottom: 0.16rem;
  border: 1px solid #f3f4f6;
  border-radius: 0.12rem;
  background-color: var(--color-white);
  -webkit-box-shadow: 0 0.01rem 0.01rem rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.01rem 0.01rem rgba(0, 0, 0, 0.05);
}

.page-login .login__brand img {
  display: block;
  width: 0.28rem;
  height: 0.28rem;
}

.page-login .login__title {
  margin: 0;
  font-size: 0.2rem;
  line-height: 0.28rem;
  font-weight: 700;
  color: #1f2937;
}

.page-login .login__tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 0.32rem;
  margin-bottom: 0.32rem;
  padding-bottom: 0.09rem;
  border-bottom: 1px solid rgba(243, 244, 246, 0.5);
}

.page-login .login__tab {
  position: relative;
  padding: 0;
  border: none;
  background: none;
  font-size: 0.15rem;
  line-height: 0.2rem;
  font-weight: 500;
  color: #86909c;
  cursor: pointer;
}

.page-login .login__tab--active {
  color: #165dff;
}

.page-login .login__tab--active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.09rem;
  width: 0.2rem;
  height: 0.02rem;
  border-radius: 0.02rem;
  background-color: #165dff;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.page-login .login__form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.16rem;
}

.page-login .login__field {
  position: relative;
  font-size: 0;
}

.page-login .login__field-icon {
  position: absolute;
  left: 0.16rem;
  top: 50%;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 0.2rem;
  height: 0.2rem;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  pointer-events: none;
}

.page-login .login__field-icon img {
  display: block;
  width: 0.2rem;
  height: 0.2rem;
}

.page-login .login__input {
  width: 100%;
  height: 0.48rem;
  padding: 0 0.4rem 0 0.44rem;
  border: none;
  border-radius: 0.08rem;
  background-color: #f2f3f5;
  font-family: inherit;
  font-size: 0.16rem;
  line-height: 0.2rem;
  font-weight: 400;
  color: #374151;
  outline: none;
  -webkit-transition: -webkit-box-shadow 0.15s;
  -o-transition: box-shadow 0.15s;
  transition: box-shadow 0.15s;
}

.page-login .login__input--password {
  padding-right: 0.44rem;
}

.page-login .login__input::-webkit-input-placeholder {
  color: #9ca3af;
}

.page-login .login__input::-moz-placeholder {
  color: #9ca3af;
}

.page-login .login__input:-ms-input-placeholder {
  color: #9ca3af;
}

.page-login .login__input::placeholder {
  color: #9ca3af;
}

.page-login .login__input:focus {
  -webkit-box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.15);
  box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.15);
}

.page-login .login__clear,
.page-login .login__toggle-pwd {
  position: absolute;
  top: 50%;
  right: 0.16rem;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  opacity: 0.75;
  -webkit-transition: opacity 0.15s;
  -o-transition: opacity 0.15s;
  transition: opacity 0.15s;
}

.page-login .login__clear:hover,
.page-login .login__toggle-pwd:hover {
  opacity: 1;
}

.page-login .login__clear img,
.page-login .login__toggle-pwd img {
  display: block;
  width: 0.16rem;
  height: 0.16rem;
}

.page-login .login__links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0.04rem 0;
}

.page-login a.login__link {
  font-size: 0.13rem;
  line-height: 0.18rem;
  font-weight: 400;
  color: #86909c;
  text-decoration: none;
}

.page-login a.login__link--primary {
  font-weight: 500;
  color: #165dff;
}

.page-login a.login__link:hover {
  opacity: 0.85;
}

.page-login .login__submit {
  width: 100%;
  height: 0.48rem;
  margin-top: 0.075rem;
  border: none;
  border-radius: 0.08rem;
  background-color: #165dff;
  font-family: inherit;
  font-size: 0.16rem;
  line-height: 0.22rem;
  font-weight: 500;
  color: var(--color-white);
  cursor: pointer;
  -webkit-box-shadow: 0 0.1rem 0.15rem -0.03rem rgba(22, 93, 255, 0.2), 0 0.04rem 0.06rem -0.04rem rgba(22, 93, 255, 0.2);
  box-shadow: 0 0.1rem 0.15rem -0.03rem rgba(22, 93, 255, 0.2), 0 0.04rem 0.06rem -0.04rem rgba(22, 93, 255, 0.2);
  -webkit-transition: opacity 0.15s;
  -o-transition: opacity 0.15s;
  transition: opacity 0.15s;
}

.page-login .login__submit:hover {
  opacity: 0.92;
}

.page-login .login__register {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 0.04rem;
  margin: 0.235rem 0 0;
  font-size: 0.13rem;
  line-height: 0.18rem;
  font-weight: 400;
  color: #86909c;
}

.page-login .login__register a {
  font-weight: 500;
  color: #165dff;
  text-decoration: none;
}

.page-login .login__register a:hover {
  text-decoration: underline;
}

.page-login .login__divider {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.16rem;
  margin: 0.235rem 0;
}

.page-login .login__divider::before,
.page-login .login__divider::after {
  content: "";
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 0;
  border-top: 1px dashed #e5e7eb;
}

.page-login .login__divider span {
  font-size: 0.12rem;
  line-height: 0.16rem;
  font-weight: 400;
  color: #9ca3af;
  white-space: nowrap;
}

.page-login .login__wechat {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 0.08rem;
  width: 100%;
  height: 0.4rem;
  padding: 0 0.12rem;
  border: 1px solid #f3f4f6;
  border-radius: 0.08rem;
  background-color: var(--color-white);
  font-family: inherit;
  font-size: 0.13rem;
  line-height: 0.18rem;
  font-weight: 500;
  color: #4b5563;
  cursor: pointer;
  -webkit-box-shadow: 0 0.01rem 0.01rem rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.01rem 0.01rem rgba(0, 0, 0, 0.05);
  -webkit-transition: background-color 0.15s;
  -o-transition: background-color 0.15s;
  transition: background-color 0.15s;
}

.page-login .login__wechat:hover {
  background-color: #f9fafb;
}

.page-login .login__wechat img {
  display: block;
  width: 0.16rem;
  height: 0.16rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-login .login__qrcode-placeholder {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  min-height: 2.4rem;
  border-radius: 0.08rem;
  background-color: #f2f3f5;
}

.page-login .login__qrcode-placeholder p {
  margin: 0;
  font-size: 0.14rem;
  line-height: 0.2rem;
  color: #86909c;
}

@media (max-width: 1024px) {
  .page-login .login {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .page-login .login__visual {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    max-width: none;
    min-height: 220px;
  }

  .page-login .login__illustration {
    position: relative;
    left: auto;
    top: auto;
    display: block;
    width: min(300px, 75%);
    margin: 20px auto;
  }

  .page-login .login__stage {
    padding: 24px 16px 40px;
  }

  .page-login a.login__close {
    top: 16px;
    right: 16px;
  }

  .page-login .login__card {
    max-width: 100%;
    padding: 28px 24px;
  }

  .page-login .login__title {
    font-size: 18px;
    line-height: 26px;
  }

  .page-login .login__input {
    height: 44px;
    font-size: 16px;
  }

  .page-login .login__submit {
    height: 44px;
    font-size: 16px;
  }
}

/* ========== 星推官计划页（Figma 1:5810） ========== */

.page-promoter .dash-header__tools.dash-toolbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  gap: 0.08rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.page-promoter .dash-header__tools.dash-toolbar::-webkit-scrollbar {
  display: none;
}

.page-promoter .dash-tool-pill {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.04rem;
  padding: 0.04rem 0.12rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  border: 1px solid #e3e9f1;
  border-radius: 9999px;
  background-color: var(--color-white);
  font-size: 0.12rem;
  line-height: 0.16rem;
  font-weight: 500;
  color: #475569;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.page-promoter .dash-tool-pill--active {
  border-color: #5387d9;
}

.page-promoter .dash-tool-pill img {
  display: block;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  max-width: none;
}

.page-promoter .dash-tool-pill__arrow {
  width: 0.08rem;
  height: 0.08rem;
}

.page-promoter .dash-tool-pill__toggle {
  width: 0.16rem;
  height: 0.16rem;
}

.page-promoter .dash-main--promoter {
  padding: 0;
  overflow-x: hidden;
}

.page-promoter .promoter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  background-color: #ffffff;
}

.page-promoter .promoter__tabs,
.page-promoter-earnings .promoter__tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.12rem;
  padding: 0.16rem 0.24rem 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.page-promoter .promoter__tabs::-webkit-scrollbar,
.page-promoter-earnings .promoter__tabs::-webkit-scrollbar {
  display: none;
}

.page-promoter a.promoter__tab,
.page-promoter .promoter__tab,
.page-promoter-earnings a.promoter__tab,
.page-promoter-earnings .promoter__tab {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 0.07rem 0.21rem;
  border: 1px solid #dae8ff;
  border-radius: 9999px;
  background-color: var(--color-white);
  font-size: 0.14rem;
  line-height: 0.22rem;
  font-weight: 500;
  color: #474555;
  text-decoration: none;
  white-space: nowrap;
}

.page-promoter .promoter__tab--active,
.page-promoter-earnings .promoter__tab--active {
  padding: 0.06rem 0.2rem;
  border-color: #2772ff;
  background-color: #2772ff;
  color: var(--color-white);
  -webkit-box-shadow: 0 0.01rem 0.01rem rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.01rem 0.01rem rgba(0, 0, 0, 0.05);
}

.page-promoter .promoter__hero {
  margin-top: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.24rem;
  width: 100%;
  padding: 0.8rem clamp(0.24rem, 10vw, 1.92rem);
  background-color: #ffffff;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 1653 418' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Crect width='100%25' height='100%25' fill='url(%23grad)'/%3E%3Cdefs%3E%3CradialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(177.09 0 0 116.5 1653 0)'%3E%3Cstop stop-color='rgba(22,93,255,0.05)' offset='0'/%3E%3Cstop stop-color='rgba(22,93,255,0)' offset='1'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 1653 418' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Crect width='100%25' height='100%25' fill='url(%23grad)'/%3E%3Cdefs%3E%3CradialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(177.09 0 0 116.5 0 418)'%3E%3Cstop stop-color='rgba(255,125,0,0.03)' offset='0'/%3E%3Cstop stop-color='rgba(255,125,0,0)' offset='1'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.page-promoter .promoter__badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0.07rem 0.17rem;
  border: 1px solid #dbeafe;
  border-radius: 9999px;
  background-color: #eff6ff;
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 500;
  color: #165dff;
}

.page-promoter .promoter__hero-title {
  margin: 0;
  max-width: 8.96rem;
  font-size: clamp(0.28rem, 2.5vw, 0.48rem);
  line-height: 1.25;
  font-weight: 500;
  text-align: center;
  color: #111827;
}

.page-promoter .promoter__hero-highlight {
  display: block;
  font-weight: 700;
  color: #165dff;
}

.page-promoter .promoter__hero-desc {
  margin: 0;
  max-width: 6.72rem;
  font-size: clamp(0.14rem, 0.94vw, 0.18rem);
  line-height: 1.56;
  font-weight: 500;
  text-align: center;
  color: #6b7280;
}

.page-promoter .promoter__section {
  padding: 0.8rem clamp(0.16rem, 1.2vw, 0.16rem);
  background-color: var(--color-white);
}

.page-promoter .promoter__section-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.16rem;
  margin-bottom: 0.64rem;
}

.page-promoter .promoter__section-title {
  margin: 0;
  font-size: clamp(0.22rem, 1.56vw, 0.3rem);
  line-height: 1.2;
  font-weight: 500;
  text-align: center;
  color: #1f2937;
}

.page-promoter .promoter__section-title--left {
  text-align: left;
}

.page-promoter .promoter__section-subtitle {
  margin: 0;
  font-size: 0.16rem;
  line-height: 0.24rem;
  font-weight: 500;
  text-align: center;
  color: #6b7280;
}

.page-promoter .promoter__table-wrap {
  max-width: 12.8rem;
  margin: 0 auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #f3f4f6;
  border-radius: 0.12rem;
  -webkit-box-shadow: 0 0.01rem 0.02rem rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.01rem 0.02rem rgba(0, 0, 0, 0.05);
}

.page-promoter .promoter__table {
  width: 100%;
  min-width: 10rem;
  border-collapse: collapse;
  table-layout: fixed;
}

.page-promoter .promoter__table thead {
  background-color: #1c1f2b;
}

.page-promoter .promoter__table th {
  padding: 0.17rem 0.16rem;
  border-right: 1px solid #374151;
  font-size: 0.16rem;
  line-height: normal;
  font-weight: 500;
  text-align: center;
  color: var(--color-white);
  vertical-align: middle;
}

.page-promoter .promoter__table th:first-child {
  text-align: center;
}

.page-promoter .promoter__table th:last-child {
  border-right: none;
}

.page-promoter .promoter__table th span {
  display: block;
}

.page-promoter .promoter__table th small {
  display: block;
  margin-top: 0.03rem;
  font-size: 0.12rem;
  line-height: 0.16rem;
  font-weight: 400;
  opacity: 0.7;
}

.page-promoter .promoter__table td {
  padding: 0.21rem 0.16rem;
  border-right: 1px solid #f3f4f6;
  border-bottom: 1px solid #f3f4f6;
  font-size: 0.16rem;
  line-height: normal;
  text-align: center;
  color: #374151;
  vertical-align: middle;
}

.page-promoter .promoter__table td:first-child {
  text-align: center;
}

.page-promoter .promoter__table td:last-child {
  border-right: none;
}

.page-promoter .promoter__table tbody tr:last-child td {
  border-bottom: none;
}

.page-promoter .promoter__table-row--highlight {
  background-color: rgba(239, 246, 255, 0.5);
}

.page-promoter .promoter__table-name {
  display: block;
  font-weight: 500;
}

.page-promoter .promoter__table-tag {
  display: inline-block;
  margin-top: 0.04rem;
  padding: 0.02rem 0.06rem;
  border-radius: 0.04rem;
  background-color: #ff7d00;
  font-size: 0.1rem;
  line-height: normal;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--color-white);
}

.page-promoter .promoter__table-rate {
  font-weight: 700;
  color: #ff7d00;
}

.page-promoter .promoter__section--why {
  padding: 0.8rem clamp(0.24rem, 2vw, 0.64rem);
  background-color: #F9FAFB;
}

.page-promoter .promoter__why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.32rem, 4vw, 0.64rem);
  max-width: 12.8rem;
  margin: 0 auto;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.page-promoter .promoter__why-copy {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.24rem;
}

.page-promoter .promoter__why-text {
  margin: 0;
  font-size: 0.16rem;
  line-height: 0.26rem;
  font-weight: 500;
  color: #6b7280;
}

.page-promoter .promoter__checklist {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.12rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-promoter .promoter__checklist li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 0.12rem;
  font-size: 0.16rem;
  line-height: 0.24rem;
  font-weight: 500;
  color: #374151;
}

.page-promoter .promoter__checklist img {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 0.24rem;
  height: 0.24rem;
}

.page-promoter .promoter__feature-stack {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.24rem;
  padding: 0.32rem;
  border-radius: 0.32rem;
  background-color: var(--color-white);
  -webkit-box-shadow: 0 0.04rem 0.1rem rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.04rem 0.1rem rgba(0, 0, 0, 0.05);
}

.page-promoter .promoter__feature-stack::before {
  content: "";
  position: absolute;
  inset: -0.11rem;
  border-radius: 0.32rem;
  background-color: rgba(22, 93, 255, 0.1);
  -webkit-transform: rotate(2.11deg) skewX(-2.14deg);
  -ms-transform: rotate(2.11deg) skewX(-2.14deg);
  transform: rotate(2.11deg) skewX(-2.14deg);
  z-index: -1;
}

.page-promoter .promoter__feature-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.16rem;
  padding: 0.16rem;
  border-radius: 0.12rem;
}

.page-promoter .promoter__feature-card--blue {
  background-color: #eff6ff;
}

.page-promoter .promoter__feature-card--orange {
  background-color: #fff7ed;
}

.page-promoter .promoter__feature-card--purple {
  background-color: #faf5ff;
}

.page-promoter .promoter__feature-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 0.08rem;
  font-size: 0.16rem;
  line-height: 0.24rem;
}

.page-promoter .promoter__feature-icon--blue {
  background-color: #165dff;
}

.page-promoter .promoter__feature-icon--orange {
  background-color: #ff7d00;
}

.page-promoter .promoter__feature-img {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 0.4rem;
  height: 0.4rem;
}

.page-promoter .promoter__feature-title {
  margin: 0;
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 500;
  color: #1f2937;
}

.page-promoter .promoter__feature-desc {
  margin: 0;
  font-size: 0.12rem;
  line-height: 0.16rem;
  font-weight: 500;
  color: #6b7280;
}

.page-promoter .promoter__cta {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.24rem;
  max-width: 8.96rem;
  margin: 0.96rem auto 0.8rem;
  padding: 0.64rem clamp(0.24rem, 4vw, 0.64rem);
  border-radius: 0.24rem;
  background-color: #165dff;
  overflow: hidden;
  -webkit-box-shadow: 0 0.25rem 0.5rem -0.12rem rgba(0, 0, 0, 0.25);
  box-shadow: 0 0.25rem 0.5rem -0.12rem rgba(0, 0, 0, 0.25);
}

.page-promoter .promoter__cta::before,
.page-promoter .promoter__cta::after {
  content: "";
  position: absolute;
  width: 2.56rem;
  height: 2.56rem;
  border-radius: 9999px;
  pointer-events: none;
}

.page-promoter .promoter__cta::before {
  top: -0.96rem;
  left: -0.96rem;
  background-color: rgba(255, 255, 255, 0.1);
  -webkit-filter: blur(0.32rem);
  filter: blur(0.32rem);
}

.page-promoter .promoter__cta::after {
  right: -0.96rem;
  bottom: -0.96rem;
  background-color: rgba(251, 146, 60, 0.2);
  -webkit-filter: blur(0.32rem);
  filter: blur(0.32rem);
}

.page-promoter .promoter__cta-title,
.page-promoter .promoter__cta-desc,
.page-promoter .promoter__cta-btn,
.page-promoter .promoter__cta-note {
  position: relative;
  z-index: 1;
}

.page-promoter .promoter__cta-title {
  margin: 0;
  font-size: clamp(0.22rem, 1.88vw, 0.36rem);
  line-height: 1.11;
  font-weight: 500;
  text-align: center;
  color: var(--color-white);
}

.page-promoter .promoter__cta-desc {
  margin: 0;
  padding-bottom: 0.16rem;
  font-size: clamp(0.14rem, 0.94vw, 0.18rem);
  line-height: 1.56;
  font-weight: 500;
  text-align: center;
  color: #dbeafe;
}

.page-promoter a.promoter__cta-btn,
.page-promoter .promoter__cta-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0.2rem 0.48rem;
  border-radius: 0.16rem;
  background-color: var(--color-white);
  font-size: clamp(0.16rem, 1.04vw, 0.2rem);
  line-height: 1.4;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  color: #165dff;
  -webkit-box-shadow: 0 0.2rem 0.25rem -0.05rem rgba(0, 0, 0, 0.1), 0 0.08rem 0.1rem -0.06rem rgba(0, 0, 0, 0.1);
  box-shadow: 0 0.2rem 0.25rem -0.05rem rgba(0, 0, 0, 0.1), 0 0.08rem 0.1rem -0.06rem rgba(0, 0, 0, 0.1);
}

.page-promoter .promoter__cta-note {
  margin: 0;
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 500;
  text-align: center;
  color: #bfdbfe;
}

.page-promoter .promoter__section--faq {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.4rem;
  padding: 0.8rem clamp(0.24rem, 13.33vw, 2.56rem) 0.8rem;
}

.page-promoter .promoter__faq-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.24rem;
  width: 100%;
  max-width: 7.68rem;
}

.page-promoter .promoter__faq-item {
  padding: 0.32rem;
  border-radius: 0.16rem;
  background-color: #f5f7fa;
}

.page-promoter .promoter__faq-q {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.16rem;
  margin: 0 0 0.15rem;
  font-size: 0.18rem;
  line-height: 0.28rem;
  font-weight: 500;
  color: #111827;
}

.page-promoter .promoter__faq-mark {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 0.32rem;
  height: 0.32rem;
  border: 2px solid #e5e7eb;
  border-radius: 9999px;
  font-size: 0.14rem;
  line-height: 0.2rem;
  color: #165dff;
}

.page-promoter .promoter__faq-a {
  margin: 0;
  padding-left: 0.48rem;
  font-size: 0.14rem;
  line-height: 1.625;
  font-weight: 500;
  color: #6b7280;
}

.page-promoter a.promoter__faq-contact,
.page-promoter .promoter__faq-contact {
  padding-top: 0.08rem;
  font-size: 0.16rem;
  line-height: 0.24rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  color: #165dff;
}

@media (max-width: 1024px) {
  .page-promoter .promoter__why-grid {
    grid-template-columns: 1fr;
  }

  .page-promoter .promoter__section-title--left {
    text-align: center;
  }

  .page-promoter .promoter__why-copy {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
  }

  .page-promoter .promoter__checklist li {
    text-align: left;
  }
}

@media (max-width: 768px) {
  .page-promoter .promoter__hero {
    padding-top: 0.48rem;
    padding-bottom: 0.48rem;
  }

  .page-promoter .promoter__section {
    padding-top: 0.48rem;
    padding-bottom: 0.48rem;
  }

  .page-promoter .promoter__section-head {
    margin-bottom: 0.32rem;
  }

  .page-promoter .promoter__cta {
    margin-left: 0.16rem;
    margin-right: 0.16rem;
    padding: 0.4rem 0.24rem;
  }

  .page-promoter .promoter__faq-a {
    padding-left: 0;
  }
}

/* ========== 申请提现页（Figma 1:1283） ========== */

.page-promoter-withdraw .dash-pill__accent {
  color: #356eec;
}

.page-promoter-withdraw .dash-main--withdraw {
  padding: 0;
  background-color: #ffffff;
}

.page-promoter-withdraw .withdraw {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.16rem;
  min-width: 0;
  padding: 0.16rem clamp(0.16rem, 2vw, 0.24rem) 0.4rem;
}

.page-promoter-withdraw a.withdraw__back,
.page-promoter-withdraw .withdraw__back {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.08rem;
  -ms-flex-item-align: start;
  align-self: flex-start;
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 500;
  text-decoration: none;
  color: #434656;
}

.page-promoter-withdraw .withdraw__back img {
  display: block;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-promoter-withdraw .withdraw__panel {
  width: 100%;
  max-width: 10.24rem;
  margin: 0 auto;
  padding: 0.4rem clamp(0.24rem, 6.25vw, 1.2rem) 1.2rem;
  border-radius: 0;
  background-color: #ffffff;
}

.page-promoter-withdraw .withdraw__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.16rem;
  margin-bottom: 0.32rem;
}

.page-promoter-withdraw a.withdraw__head-back,
.page-promoter-withdraw .withdraw__head-back {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 0.12rem;
  text-decoration: none;
}

.page-promoter-withdraw .withdraw__head-back img {
  display: block;
}

.page-promoter-withdraw .withdraw__title {
  margin: 0;
  font-size: clamp(0.2rem, 1.25vw, 0.24rem);
  line-height: 0.32rem;
  font-weight: 500;
  color: #191b24;
}

.page-promoter-withdraw .withdraw__balance {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.16rem;
  margin-bottom: 0.32rem;
  padding: 0.33rem;
  border: 1px solid #e1e1ef;
  border-radius: 0.12rem;
  background-color: #f5f7fa;
  -webkit-box-shadow: 0 0.02rem 0.06rem rgba(0, 0, 0, 0.06);
  box-shadow: 0 0.02rem 0.06rem rgba(0, 0, 0, 0.06);
}

.page-promoter-withdraw .withdraw__balance-label {
  margin: 0;
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 500;
  color: #434656;
}

.page-promoter-withdraw .withdraw__balance-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  gap: 0.08rem;
  margin: 0;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.page-promoter-withdraw .withdraw__balance-amount {
  font-size: clamp(0.28rem, 1.88vw, 0.36rem);
  line-height: 0.4rem;
  font-weight: 800;
  color: #ff7700;
}

.page-promoter-withdraw .withdraw__balance-note {
  font-size: 0.12rem;
  line-height: 0.16rem;
  font-weight: 400;
  color: #434656;
  opacity: 0.6;
}

.page-promoter-withdraw .withdraw__form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.24rem;
  max-width: 8rem;
}

.page-promoter-withdraw .withdraw__field {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.12rem;
  margin: 0;
  padding: 0;
  border: none;
}

.page-promoter-withdraw .withdraw__field-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 0.12rem;
}

.page-promoter-withdraw .withdraw__label,
.page-promoter-withdraw .withdraw__methods legend {
  margin: 0;
  padding: 0;
  font-size: 0.16rem;
  line-height: 0.24rem;
  font-weight: 500;
  color: #191b24;
}

.page-promoter-withdraw .withdraw__link-btn {
  border: none;
  background: none;
  padding: 0;
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 500;
  color: #165dff;
  cursor: pointer;
}

.page-promoter-withdraw .withdraw__amount-wrap {
  position: relative;
}

.page-promoter-withdraw .withdraw__currency {
  position: absolute;
  left: 0.16rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 0.24rem;
  line-height: 0.32rem;
  font-weight: 400;
  color: #191b24;
  pointer-events: none;
}

.page-promoter-withdraw .withdraw__amount-input {
  display: block;
  width: 100%;
  height: 0.75rem;
  padding: 0.22rem 0.17rem 0.21rem 0.41rem;
  border: 1px solid #e5e6eb;
  border-radius: 0.08rem;
  background-color: #ffffff;
  font-family: inherit;
  font-size: clamp(0.16rem, 1.04vw, 0.2rem);
  line-height: normal;
  font-weight: 500;
  color: #191b24;
}

.page-promoter-withdraw .withdraw__amount-input::-webkit-input-placeholder {
  color: #6b7280;
}

.page-promoter-withdraw .withdraw__amount-input::-moz-placeholder {
  color: #6b7280;
}

.page-promoter-withdraw .withdraw__amount-input:-ms-input-placeholder {
  color: #6b7280;
}

.page-promoter-withdraw .withdraw__amount-input::placeholder {
  color: #6b7280;
}

.page-promoter-withdraw .withdraw__amount-input:focus {
  outline: none;
  border-color: #165dff;
}

.page-promoter-withdraw .withdraw__hint {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.04rem;
  margin: 0;
  font-size: 0.12rem;
  line-height: 0.16rem;
  font-weight: 500;
  color: #434656;
}

.page-promoter-withdraw .withdraw__hint img {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-promoter-withdraw .withdraw__methods {
  gap: 0.16rem;
}

.page-promoter-withdraw .withdraw__method-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.16rem;
}

.page-promoter-withdraw .withdraw__method {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.16rem;
  min-height: 0.84rem;
  padding: 0.17rem;
  border: 1px solid #e5e6eb;
  border-radius: 0.12rem;
  background-color: #ffffff;
  cursor: pointer;
}

.page-promoter-withdraw .withdraw__method--active {
  padding: 0.18rem;
  border: 2px solid #165dff;
}

.page-promoter-withdraw .withdraw__method-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.page-promoter-withdraw .withdraw__method-icon {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 0.48rem;
  height: 0.48rem;
  -o-object-fit: contain;
  object-fit: contain;
}

.page-promoter-withdraw .withdraw__method-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.page-promoter-withdraw .withdraw__method-text strong {
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 700;
  color: #191b24;
}

.page-promoter-withdraw .withdraw__method-text small {
  font-size: 0.12rem;
  line-height: 0.16rem;
  font-weight: 500;
  color: #434656;
}

.page-promoter-withdraw .withdraw__method-check {
  display: none;
  position: absolute;
  top: -0.08rem;
  right: -0.08rem;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 0.24rem;
  height: 0.24rem;
  border-radius: 0.12rem;
  background-color: #165dff;
}

.page-promoter-withdraw .withdraw__method--active .withdraw__method-check {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.page-promoter-withdraw .withdraw__method-check img {
  display: block;
}

.page-promoter-withdraw .withdraw__add-bank {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 0.08rem;
  width: 100%;
  padding: 0.22rem;
  border: 2px dashed #c3c5d9;
  border-radius: 0.12rem;
  background-color: #f5f7fa;
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 500;
  color: #434656;
  cursor: pointer;
}

.page-promoter-withdraw .withdraw__add-bank-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 0.12rem;
  background-color: #ffffff;
}

.page-promoter-withdraw .withdraw__add-bank-icon img {
  display: block;
}

.page-promoter-withdraw .withdraw__notice {
  padding: 0.25rem;
  border: 1px solid rgba(195, 197, 217, 0.3);
  border-radius: 0.12rem;
  background-color: #ffffff;
}

.page-promoter-withdraw .withdraw__notice-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.08rem;
  margin: 0 0 0.12rem;
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 500;
  color: #434656;
}

.page-promoter-withdraw .withdraw__notice-title img {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-promoter-withdraw .withdraw__notice-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.08rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-promoter-withdraw .withdraw__notice-list li {
  position: relative;
  padding-left: 0.14rem;
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 500;
  color: #434656;
}

.page-promoter-withdraw .withdraw__notice-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.08rem;
  width: 0.06rem;
  height: 0.06rem;
  border-radius: 0.12rem;
  background-color: #0047cf;
}

.page-promoter-withdraw .withdraw__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.16rem;
  padding-top: 0.32rem;
}

.page-promoter-withdraw .withdraw__submit {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  padding: 0.16rem 0.24rem 0.18rem;
  border: none;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.08rem;
  background-color: #165dff;
  font-family: inherit;
  font-size: clamp(0.16rem, 0.94vw, 0.18rem);
  line-height: 0.28rem;
  font-weight: 500;
  color: #ffffff;
  cursor: pointer;
}

.page-promoter-withdraw a.withdraw__cancel,
.page-promoter-withdraw .withdraw__cancel {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 0.17rem 0.41rem;
  border: 1px solid #e5e6eb;
  border-radius: 0.08rem;
  background-color: #ffffff;
  font-size: 0.16rem;
  line-height: 0.24rem;
  font-weight: 500;
  text-decoration: none;
  color: #434656;
}

@media (max-width: 768px) {
  .page-promoter-withdraw .withdraw__panel {
    padding: 0.24rem 0.16rem 0.48rem;
  }

  .page-promoter-withdraw .withdraw__method-grid {
    grid-template-columns: 1fr;
  }

  .page-promoter-withdraw .withdraw__actions {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .page-promoter-withdraw .withdraw__submit,
  .page-promoter-withdraw .withdraw__cancel {
    width: 100%;
  }
}

/* ========== 添加银行卡弹窗（Figma 1:6852） ========== */

.page-promoter-withdraw .bank-modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0.16rem;
}

.page-promoter-withdraw .bank-modal[hidden] {
  display: none;
}

.page-promoter-withdraw .bank-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.45);
}

.page-promoter-withdraw .bank-modal__panel {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 5.6rem;
  max-width: 100%;
  max-height: calc(100vh - 0.32rem);
  border-radius: 0.12rem;
  background-color: #ffffff;
  overflow: hidden;
  -webkit-box-shadow: 0 0.02rem 0.12rem rgba(0, 0, 0, 0.06);
  box-shadow: 0 0.02rem 0.12rem rgba(0, 0, 0, 0.06);
}

.page-promoter-withdraw .bank-modal__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 0.32rem 0.32rem 0.16rem;
}

.page-promoter-withdraw .bank-modal__title {
  margin: 0;
  font-size: clamp(0.2rem, 1.25vw, 0.24rem);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.0024rem;
  color: #191b24;
}

.page-promoter-withdraw .bank-modal__close {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0.04rem;
  border: none;
  border-radius: 0.12rem;
  background: none;
  cursor: pointer;
}

.page-promoter-withdraw .bank-modal__close img {
  display: block;
  width: 0.14rem;
  height: 0.14rem;
}

.page-promoter-withdraw .bank-modal__form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 0;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.page-promoter-withdraw .bank-modal__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.16rem 0.32rem;
  overflow-y: auto;
}

.page-promoter-withdraw .bank-modal__field {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.04rem;
}

.page-promoter-withdraw .bank-modal__label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.04rem;
  font-size: 0.12rem;
  line-height: 0.168rem;
  font-weight: 500;
  letter-spacing: 0.006rem;
  color: #434656;
}

.page-promoter-withdraw .bank-modal__required {
  color: #ba1a1a;
}

.page-promoter-withdraw .bank-modal__input {
  display: block;
  width: 100%;
  padding: 0.13rem 0.17rem;
  border: 1px solid #c3c5d9;
  border-radius: 0.08rem;
  background-color: #ffffff;
  font-family: inherit;
  font-size: 0.16rem;
  line-height: normal;
  font-weight: 500;
  color: #191b24;
}

.page-promoter-withdraw .bank-modal__input::-webkit-input-placeholder {
  color: #737688;
}

.page-promoter-withdraw .bank-modal__input::-moz-placeholder {
  color: #737688;
}

.page-promoter-withdraw .bank-modal__input:-ms-input-placeholder {
  color: #737688;
}

.page-promoter-withdraw .bank-modal__input::placeholder {
  color: #737688;
}

.page-promoter-withdraw .bank-modal__input:focus {
  outline: none;
  border-color: #165dff;
}

.page-promoter-withdraw .bank-modal__input-wrap {
  position: relative;
}

.page-promoter-withdraw .bank-modal__input-wrap--card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0;
  padding-left: 0.17rem;
  border: 1px solid #c3c5d9;
  border-radius: 0.08rem;
  background-color: #ffffff;
}

.page-promoter-withdraw .bank-modal__input-wrap--card:focus-within {
  border-color: #165dff;
}

.page-promoter-withdraw .bank-modal__card-icon {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 0.32rem;
  height: 0.16rem;
}

.page-promoter-withdraw .bank-modal__input--card {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  border: none;
  padding-left: 0;
}

.page-promoter-withdraw .bank-modal__input--card:focus {
  border: none;
  outline: none;
}

.page-promoter-withdraw .bank-modal__select-wrap {
  position: relative;
}

.page-promoter-withdraw .bank-modal__select {
  display: block;
  width: 100%;
  padding: 0.13rem 0.49rem 0.13rem 0.17rem;
  border: 1px solid #c3c5d9;
  border-radius: 0.08rem;
  background-color: #ffffff;
  font-family: inherit;
  font-size: 0.16rem;
  line-height: 1.6;
  font-weight: 500;
  color: #191b24;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

.page-promoter-withdraw .bank-modal__select:invalid,
.page-promoter-withdraw .bank-modal__select option[value=""][disabled] {
  color: #737688;
}

.page-promoter-withdraw .bank-modal__select:focus {
  outline: none;
  border-color: #165dff;
}

.page-promoter-withdraw .bank-modal__select-arrow {
  position: absolute;
  top: 50%;
  right: 0.16rem;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 0.24rem;
  height: 0.24rem;
  pointer-events: none;
}

.page-promoter-withdraw .bank-modal__footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 0.16rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 0.16rem 0.32rem;
}

.page-promoter-withdraw .bank-modal__btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  min-height: 0.5rem;
  border-radius: 0.08rem;
  font-family: inherit;
  font-size: 0.16rem;
  line-height: 0.24rem;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
}

.page-promoter-withdraw .bank-modal__btn--outline {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 1.8267rem;
  max-width: 36%;
  padding: 0.13rem 0.33rem;
  border: 1px solid #165dff;
  background-color: #ffffff;
  color: #165dff;
}

.page-promoter-withdraw .bank-modal__btn--primary {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  padding: 0.125rem 0.32rem 0.135rem;
  border: none;
  background-color: #165dff;
  color: #ffffff;
  -webkit-box-shadow: 0 0.01rem 0.01rem rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.01rem 0.01rem rgba(0, 0, 0, 0.05);
}

body.bank-modal-open {
  overflow: hidden;
}

@media (max-width: 768px) {
  .page-promoter-withdraw .bank-modal__panel {
    width: 100%;
  }

  .page-promoter-withdraw .bank-modal__header,
  .page-promoter-withdraw .bank-modal__body,
  .page-promoter-withdraw .bank-modal__footer {
    padding-left: 0.2rem;
    padding-right: 0.2rem;
  }

  .page-promoter-withdraw .bank-modal__footer {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .page-promoter-withdraw .bank-modal__btn--outline,
  .page-promoter-withdraw .bank-modal__btn--primary {
    width: 100%;
    max-width: none;
  }
}

/* ========== 收益明细页（Figma 1:1492） ========== */

.page-promoter-earnings .dash-pill__accent {
  color: #356eec;
}

.page-promoter-earnings .dash-main--earnings {
  padding: 0;
  background-color: #f5f7fa;
}

.page-promoter-earnings .earnings {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.16rem;
  min-width: 0;
  padding: 0.16rem clamp(0.16rem, 2vw, 0.24rem) 0.4rem;
}

.page-promoter-earnings .earnings__tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.12rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.page-promoter-earnings .earnings__tabs::-webkit-scrollbar {
  display: none;
}

.page-promoter-earnings a.earnings__tab,
.page-promoter-earnings .earnings__tab {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 0.07rem 0.21rem;
  border: 1px solid #dae8ff;
  border-radius: 9999px;
  background-color: #ffffff;
  font-size: 0.14rem;
  line-height: 0.22rem;
  font-weight: 500;
  color: #474555;
  text-decoration: none;
  white-space: nowrap;
}

.page-promoter-earnings .earnings__tab--active {
  padding: 0.06rem 0.2rem;
  border-color: #2772ff;
  background-color: #2772ff;
  color: #ffffff;
  -webkit-box-shadow: 0 0.01rem 0.01rem rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.01rem 0.01rem rgba(0, 0, 0, 0.05);
}

.page-promoter-earnings a.earnings__back,
.page-promoter-earnings .earnings__back {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.08rem;
  -ms-flex-item-align: start;
  align-self: flex-start;
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 500;
  text-decoration: none;
  color: #434656;
}

.page-promoter-earnings .earnings__back img {
  display: block;
}

.page-promoter-earnings .earnings__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.24rem;
}

.page-promoter-earnings .earnings__stat-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.08rem;
  padding: 0.25rem;
  border: 1px solid #e5e6eb;
  border-radius: 0.12rem;
  background-color: #ffffff;
  -webkit-box-shadow: 0 0.01rem 0.02rem rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.01rem 0.02rem rgba(0, 0, 0, 0.05);
}

.page-promoter-earnings .earnings__stat-card--primary {
  gap: 0.16rem;
  border-color: transparent;
  background-color: #165dff;
  -webkit-box-shadow: 0 0.1rem 0.15rem -0.03rem rgba(0, 0, 0, 0.1), 0 0.04rem 0.06rem -0.04rem rgba(0, 0, 0, 0.1);
  box-shadow: 0 0.1rem 0.15rem -0.03rem rgba(0, 0, 0, 0.1), 0 0.04rem 0.06rem -0.04rem rgba(0, 0, 0, 0.1);
}

.page-promoter-earnings .earnings__stat-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 0.12rem;
}

.page-promoter-earnings .earnings__stat-label {
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 500;
  color: #4e5969;
}

.page-promoter-earnings .earnings__stat-label--light {
  color: rgba(255, 255, 255, 0.8);
}

.page-promoter-earnings .earnings__stat-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 0.08rem;
}

.page-promoter-earnings .earnings__stat-icon--blue {
  background-color: #e8f3ff;
}

.page-promoter-earnings .earnings__stat-icon--orange {
  background-color: #fff7e8;
}

.page-promoter-earnings .earnings__stat-icon--white {
  background-color: rgba(255, 255, 255, 0.2);
}

.page-promoter-earnings .earnings__stat-icon img {
  display: block;
}

.page-promoter-earnings .earnings__stat-value {
  margin: 0;
  padding-top: 0.08rem;
  font-size: clamp(0.24rem, 1.67vw, 0.32rem);
  line-height: 1.5;
  font-weight: 700;
  color: #1d2129;
}

.page-promoter-earnings .earnings__stat-value--light {
  color: #ffffff;
}

.page-promoter-earnings .earnings__stat-trend {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.04rem;
  margin: 0;
  font-size: 0.12rem;
  line-height: 0.18rem;
  color: #00b42a;
}

.page-promoter-earnings .earnings__stat-trend img {
  display: block;
}

.page-promoter-earnings .earnings__stat-note {
  margin: 0;
  font-size: 0.12rem;
  line-height: 0.18rem;
  font-weight: 500;
  color: #86909c;
}

.page-promoter-earnings a.earnings__withdraw-btn,
.page-promoter-earnings .earnings__withdraw-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-item-align: start;
  align-self: flex-start;
  padding: 0.08rem 0.24rem;
  border-radius: 0.08rem;
  background-color: #ffffff;
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 500;
  text-decoration: none;
  color: #165dff;
}

.page-promoter-earnings .earnings__middle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.24rem;
}

.page-promoter-earnings .earnings__panel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 0.24rem;
  min-height: 3.88rem;
  padding: 0.33rem;
  border: 1px solid #e5e6eb;
  border-radius: 0.12rem;
  background-color: #ffffff;
  -webkit-box-shadow: 0 0.01rem 0.01rem rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.01rem 0.01rem rgba(0, 0, 0, 0.05);
}

.page-promoter-earnings .earnings__panel-title {
  margin: 0;
  font-size: 0.18rem;
  line-height: 0.28rem;
  font-weight: 500;
  color: #1d2129;
}

.page-promoter-earnings .earnings__invite-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.08rem;
}

.page-promoter-earnings .earnings__field-label {
  margin: 0;
  font-size: 0.12rem;
  line-height: 0.18rem;
  font-weight: 500;
  color: #86909c;
}

.page-promoter-earnings .earnings__field-hint {
  margin: 0;
  font-size: 0.12rem;
  line-height: 0.18rem;
  font-weight: 500;
  color: #86909c;
}

.page-promoter-earnings .earnings__code-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  gap: 0.08rem;
}

.page-promoter-earnings .earnings__code-value {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  padding: 0.13rem 0.17rem;
  border: 1px solid #e5e6eb;
  border-radius: 0.08rem;
  background-color: #ffffff;
  font-size: 0.2rem;
  line-height: 0.28rem;
  font-weight: 700;
  letter-spacing: 0.02rem;
  text-align: center;
  color: #1d2129;
}

.page-promoter-earnings .earnings__copy-btn {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 0.165rem 0.17rem;
  border: 1px solid #e5e6eb;
  border-radius: 0.08rem;
  background-color: #ffffff;
  font-family: inherit;
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 500;
  color: #1d2129;
  cursor: pointer;
}

.page-promoter-earnings .earnings__link-box {
  padding: 0.13rem 0.17rem;
  border: 1px solid #e5e6eb;
  border-radius: 0.08rem;
  background-color: #ffffff;
  font-size: 0.14rem;
  line-height: 0.2rem;
  color: #4e5969;
  word-break: break-all;
}

.page-promoter-earnings .earnings__primary-btn {
  width: 100%;
  margin-top: 0.24rem;
  padding: 0.12rem;
  border: none;
  border-radius: 0.08rem;
  background-color: #165dff;
  font-family: inherit;
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 500;
  color: #ffffff;
  cursor: pointer;
}

.page-promoter-earnings .earnings__rules {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.16rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-promoter-earnings .earnings__rules li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 0.12rem;
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 500;
  color: #4e5969;
}

.page-promoter-earnings .earnings__rules img {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 0.2rem;
  height: 0.2rem;
  margin-top: 0.04rem;
}

.page-promoter-earnings .earnings__outline-btn {
  width: 100%;
  margin-top: 0.24rem;
  padding: 0.11rem;
  border: 1px solid #165dff;
  border-radius: 0.08rem;
  background-color: #ffffff;
  font-family: inherit;
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 500;
  color: #165dff;
  cursor: pointer;
}

.page-promoter-earnings .earnings__table-card {
  border: 1px solid #e5e6eb;
  border-radius: 0.12rem;
  background-color: #ffffff;
  overflow: hidden;
  -webkit-box-shadow: 0 0.01rem 0.02rem rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.01rem 0.02rem rgba(0, 0, 0, 0.05);
}

.page-promoter-earnings .earnings__filters {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 0.12rem;
  padding: 0.24rem;
  border-bottom: 1px solid #f2f3f5;
}

.page-promoter-earnings .earnings__filter {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.08rem;
  min-height: 0.36rem;
  padding: 0.08rem 0.16rem;
  border-radius: 0.08rem;
  background-color: #f2f3f5;
}

.page-promoter-earnings .earnings__filter--date input {
  border: none;
  background: none;
  font-family: inherit;
  font-size: 0.14rem;
  line-height: 0.2rem;
  color: #1d2129;
  min-width: 1.8rem;
}

.page-promoter-earnings .earnings__filter--date input:focus {
  outline: none;
}

.page-promoter-earnings .earnings__filter--select select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  background: none;
  padding-right: 0.24rem;
  font-family: inherit;
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 500;
  color: #1d2129;
  cursor: pointer;
}

.page-promoter-earnings .earnings__filter--select select:focus {
  outline: none;
}

.page-promoter-earnings .earnings__filter-arrow {
  position: absolute;
  right: 0.12rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 0.16rem;
  height: 0.16rem;
  pointer-events: none;
}

.page-promoter-earnings .earnings__filter-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.08rem;
  margin-left: auto;
  padding: 0.08rem 0.24rem;
  border: none;
  border-radius: 0.08rem;
  background-color: #568efb;
  font-family: inherit;
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 500;
  color: #ffffff;
  cursor: pointer;
}

.page-promoter-earnings .earnings__filter-btn img {
  display: block;
}

.page-promoter-earnings .earnings__table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.page-promoter-earnings .earnings__table {
  width: 100%;
  min-width: 9rem;
  border-collapse: collapse;
}

.page-promoter-earnings .earnings__table thead {
  background-color: #f7f8fa;
}

.page-promoter-earnings .earnings__table th {
  padding: 0.16rem 0.24rem 0.18rem;
  font-size: 0.12rem;
  line-height: normal;
  font-weight: 500;
  text-align: left;
  text-transform: uppercase;
  color: #86909c;
  white-space: nowrap;
}

.page-promoter-earnings .earnings__table td {
  padding: 0.2rem 0.24rem;
  border-top: 1px solid #f2f3f5;
  font-size: 0.14rem;
  line-height: 0.2rem;
  color: #4e5969;
  white-space: nowrap;
}

.page-promoter-earnings .earnings__table tbody tr:first-child td {
  border-top: none;
}

.page-promoter-earnings .earnings__table tbody tr + tr td {
  border-top: 1px solid #f2f3f5;
}

.page-promoter-earnings .earnings__tag {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 0.18rem;
  padding: 0 0.08rem;
  border-radius: 0.04rem;
  font-size: 0.11rem;
  line-height: 0.2rem;
  font-weight: 500;
}

.page-promoter-earnings .earnings__tag--year {
  background-color: #fff7e8;
  color: #ff7d00;
}

.page-promoter-earnings .earnings__tag--month {
  background-color: #e8f3ff;
  color: #165dff;
}

.page-promoter-earnings .earnings__tag--life {
  background-color: #f2f3f5;
  color: #4e5969;
}

.page-promoter-earnings .earnings__rate {
  color: #165dff;
  font-weight: 500;
}

.page-promoter-earnings .earnings__reward {
  color: #1d2129;
  font-weight: 700;
}

.page-promoter-earnings .earnings__status {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.06rem;
  padding: 0.02rem 0.08rem;
  border-radius: 9999px;
  font-size: 0.11rem;
  line-height: 0.2rem;
  font-weight: 500;
}

.page-promoter-earnings .earnings__status i {
  display: block;
  width: 0.06rem;
  height: 0.06rem;
  border-radius: 9999px;
}

.page-promoter-earnings .earnings__status--pending {
  background-color: #fff0ed;
  color: #f53f3f;
}

.page-promoter-earnings .earnings__status--pending i {
  background-color: #f53f3f;
}

.page-promoter-earnings .earnings__status--done {
  background-color: #e8ffea;
  color: #00b42a;
}

.page-promoter-earnings .earnings__status--done i {
  background-color: #00b42a;
}

.page-promoter-earnings .earnings__pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 0.16rem;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 0.25rem 0.24rem 0.24rem;
  border-top: 1px solid #f2f3f5;
}

.page-promoter-earnings .earnings__pagination-total {
  margin: 0;
  font-size: 0.14rem;
  line-height: 0.2rem;
  color: #86909c;
}

.page-promoter-earnings .earnings__pagination-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.08rem;
}

.page-promoter-earnings .earnings__page-btn,
.page-promoter-earnings .earnings__page-num {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  min-width: 0.32rem;
  height: 0.32rem;
  padding: 0;
  border: none;
  border-radius: 0.04rem;
  background: none;
  font-family: inherit;
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 500;
  color: #4e5969;
  cursor: pointer;
}

.page-promoter-earnings .earnings__page-btn {
  padding: 0.08rem;
}

.page-promoter-earnings .earnings__page-btn img {
  display: block;
}

.page-promoter-earnings .earnings__page-num--active {
  background-color: #165dff;
  color: #ffffff;
}

.page-promoter-earnings .earnings__page-ellipsis {
  padding: 0 0.04rem;
  font-size: 0.14rem;
  line-height: 0.2rem;
  color: #c9cdd4;
}

@media (max-width: 1200px) {
  .page-promoter-earnings .earnings__stats {
    grid-template-columns: 1fr;
  }

  .page-promoter-earnings .earnings__middle {
    grid-template-columns: 1fr;
  }

  .page-promoter-earnings .earnings__panel {
    min-height: auto;
  }
}

@media (max-width: 768px) {
  .page-promoter-earnings .earnings__filters {
    padding: 0.16rem;
  }

  .page-promoter-earnings .earnings__filter-btn {
    margin-left: 0;
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .page-promoter-earnings .earnings__pagination {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
}

/* ========== 开通会员页（Figma 1:3215） ========== */

.page-vip .dash-main--vip {
  padding: 0;
  background-color: #fff;
}

.page-vip .vip {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.48rem;
  min-width: 0;
  padding: 0.16rem 0.24rem 0.4rem;
}

.page-vip .vip__intro {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 0.16rem;
  min-height: 0.82rem;
  padding: 0.24rem 0.16rem;
  background-color: var(--color-white);
  border-radius: 0.1rem;
}

.page-vip .vip__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.08rem;
  margin: 0;
  font-size: 0.32rem;
  line-height: 0.384rem;
  font-weight: 500;
  color: #191b24;
  letter-spacing: -0.0064rem;
  text-align: center;
}

.page-vip .vip__title em {
  font-style: normal;
  color: #0047cf;
}

.page-vip .vip__title-line {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 0.48rem;
  height: 0.04rem;
  border-radius: 0.12rem;
  background-color: rgba(0, 71, 207, 0.2);
}

.page-vip .vip__subtitle {
  margin: 0;
  max-width: 6.72rem;
  font-size: 0.18rem;
  line-height: 0.288rem;
  font-weight: 500;
  color: #434656;
  text-align: center;
}

.page-vip .vip__plans {
  --vip-plan-cols: 5;
  --vip-plan-gap: 0.16rem;
  --vip-plan-width: calc((100% - (var(--vip-plan-cols) - 1) * var(--vip-plan-gap)) / var(--vip-plan-cols));
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: var(--vip-plan-gap);
  width: 100%;
  min-width: 0;
  margin: 0 auto;
}

.page-vip .vip-plan {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -ms-flex: 0 0 var(--vip-plan-width);
  flex: 0 0 var(--vip-plan-width);
  width: var(--vip-plan-width);
  max-width: var(--vip-plan-width);
  min-width: 0;
  padding: 0.18rem;
  background-color: var(--color-white);
  border: 1px solid #e5e7eb;
  border-radius: 0.14rem;
}

.page-vip .vip-plan--featured {
  padding: 0.19rem;
  border: 2px solid #165dff;
  -webkit-box-shadow: 0 0 0 0.04rem rgba(22, 93, 255, 0.05);
  box-shadow: 0 0 0 0.04rem rgba(22, 93, 255, 0.05);
}

.page-vip .vip-plan__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.08rem;
  margin-bottom: 0.16rem;
}

.page-vip .vip-plan__icon,
.page-vip .vip-plan__check,
.page-vip .vip-plan__notice img {
  display: block;
  max-width: none;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -o-object-fit: contain;
  object-fit: contain;
}

.page-vip .vip-plan__icon {
  width: 0.2rem;
  height: 0.18rem;
}

.page-vip .vip-plan__name {
  margin: 0;
  font-size: 0.16rem;
  line-height: 0.24rem;
  font-weight: 500;
  color: #111827;
}

.page-vip .vip-plan__price {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 0.04rem 0.08rem;
  margin: 0 0 0.04rem;
}

.page-vip .vip-plan__price-original {
  font-size: 0.12rem;
  line-height: 0.18rem;
  font-weight: 500;
  color: #9ca3af;
  text-decoration: line-through;
}

.page-vip .vip-plan__price-original .vip-plan__price-unit {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  color: inherit;
}

.page-vip .vip-plan__price-current {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  gap: 0.04rem;
}

.page-vip .vip-plan__price strong {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 0.26rem;
  line-height: 0.32rem;
  font-weight: 700;
  color: #111827;
}

.page-vip .vip-plan__price-unit {
  font-size: 0.12rem;
  line-height: 0.18rem;
  font-weight: 500;
  color: #4b5563;
}

.page-vip .vip__plans-empty {
  width: 100%;
  text-align: center;
}

.page-vip .vip-plan__tagline {
  margin: 0 0 0.24rem;
  font-size: 0.12rem;
  line-height: 0.16rem;
  font-weight: 500;
  color: #4b5563;
}

.page-vip .vip-plan__tagline--accent {
  color: #165dff;
}

.page-vip .vip-plan__buy {
  width: 100%;
  margin-bottom: 0.32rem;
  padding: 0.12rem;
  border: none;
  border-radius: 0.04rem;
  background-color: #165dff;
  font-size: 0.16rem;
  line-height: 0.24rem;
  font-weight: 500;
  color: var(--color-white);
  cursor: pointer;
  -webkit-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.page-vip .vip-plan__buy:hover {
  opacity: 0.92;
}

.page-vip .vip-plan__buy--gradient {
  background: -webkit-linear-gradient(303deg, #165dff 0%, #0047cf 100%);
  background: -o-linear-gradient(303deg, #165dff 0%, #0047cf 100%);
  background: linear-gradient(147deg, #165dff 0%, #0047cf 100%);
  -webkit-box-shadow: 0 0.04rem 0.06rem -0.01rem rgba(22, 93, 255, 0.1), 0 0.02rem 0.04rem -0.02rem rgba(22, 93, 255, 0.1);
  box-shadow: 0 0.04rem 0.06rem -0.01rem rgba(22, 93, 255, 0.1), 0 0.02rem 0.04rem -0.02rem rgba(22, 93, 255, 0.1);
}

.page-vip .vip-plan__features {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.16rem;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 0 0 0.32rem;
  padding: 0;
  list-style: none;
}

.page-vip .vip-plan__features li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.08rem;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  min-width: 0;
}

.page-vip .vip-plan__features li > div {
  min-width: 0;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.page-vip .vip-plan__check {
  width: 0.12225rem;
  height: 0.09019rem;
  margin-top: 0.0525rem;
}

.page-vip .vip-plan__features strong {
  display: block;
  font-size: 0.13rem;
  line-height: 0.195rem;
  font-weight: 500;
  color: #111827;
}

.page-vip .vip-plan__features p {
  margin: 0.0325rem 0 0;
  font-size: 0.13rem;
  line-height: 0.1625rem;
  font-weight: 500;
  color: #4b5563;
}

.page-vip .vip-plan__badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-left: 0.04rem;
  padding: 0.02rem 0.06rem;
  border-radius: 0.02rem;
  background-color: rgba(22, 93, 255, 0.1);
  font-size: 0.1rem;
  line-height: 0.15rem;
  font-weight: 500;
  color: #165dff;
  vertical-align: middle;
}

.page-vip .vip-plan__badge--soon {
  background-color: rgba(22, 93, 255, 0.1);
  color: #165dff;
}

.page-vip .vip-plan__hl {
  color: #165dff;
}

.page-vip .vip-plan__hl-num {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-weight: 700;
  color: #165dff;
}

.page-vip .vip-plan__notice {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 0.04rem;
  margin: 0;
  margin-top: auto;
  font-size: 0.11rem;
  line-height: 0.165rem;
  font-weight: 500;
  color: #dc2626;
  text-align: center;
}

.page-vip .vip-plan__notice img {
  width: 0.105rem;
  height: 0.105rem;
}

@media (max-width: 1600px) {
  .page-vip .vip__plans {
    --vip-plan-cols: 4;
  }
}

@media (max-width: 1280px) {
  .page-vip .vip__plans {
    --vip-plan-cols: 3;
  }
}

@media (max-width: 992px) {
  .page-vip .vip__plans {
    --vip-plan-cols: 2;
  }
}

@media (max-width: 768px) {
  .page-vip .vip {
    padding: 0.12rem 0.16rem 0.32rem;
    gap: 0.32rem;
  }

  .page-vip .vip__intro {
    padding: 0.2rem 0.12rem;
  }

  .page-vip .vip__title {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 0.12rem;
  }

  .page-vip .vip__plans {
    --vip-plan-cols: 1;
  }

  .page-vip .vip-plan {
    padding: 0.2rem;
  }

  .page-vip .vip-plan--featured {
    padding: 0.21rem;
  }
}

/* ===== 用户头像弹框 ===== */
.page-home .dash-header__user-wrap {
  position: relative;
  margin-left: 0.16rem;
  padding-left: 0.09rem;
  border-left: 1px solid #c9c4d7;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-home .dash-header__user--btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.08rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
  line-height: normal;
  text-align: left;
  white-space: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  max-width: 100%;
}

.page-home .dash-header__user--btn .dash-header__avatar-wrap {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--color-avatar-bg);
}

.page-home .dash-header__user--btn .dash-header__avatar-wrap .dash-header__avatar {
  width: 100%;
  height: 100%;
  max-width: none;
  min-width: 0;
  min-height: 0;
  border-radius: 0;
  -o-object-fit: cover;
  object-fit: cover;
}

.page-home .dash-header__user--btn .dash-header__avatar {
  display: block;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.page-home .dash-header__user--btn .dash-header__user-info {
  min-width: 0;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  text-align: left;
}

.page-home .dash-header__user--btn:hover .dash-header__user-info strong {
  color: var(--color-blue);
}

.page-home .dash-header__user-chevron {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  opacity: 0.5;
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  -o-transition: transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
}

.page-home .dash-header__user--btn[aria-expanded="true"] .dash-header__user-chevron {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.page-home .dash-header__user-login {
  color: var(--color-blue);
  font-size: 0.14rem;
  line-height: 0.2rem;
  text-decoration: none;
  font-weight: 500;
}

.page-home .dash-header__user-login:hover {
  opacity: 0.85;
}

.page-home .dash-header__user-wrap .dash-header__user {
  margin-left: 0;
  padding-left: 0;
  border-left: none;
}

.page-home .dash-header__user-wrap--guest {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.page-home .user-panel {
  position: absolute;
  top: calc(100% + 0.1rem);
  right: 0;
  z-index: 300;
  width: 2.4rem;
  padding: 0.16rem;
  border: 1px solid rgba(243, 244, 246, 0.9);
  border-radius: 0.16rem;
  background-color: var(--color-white);
  -webkit-box-shadow: 0 0.12rem 0.32rem rgba(15, 23, 42, 0.12);
  box-shadow: 0 0.12rem 0.32rem rgba(15, 23, 42, 0.12);
}

.page-home .user-panel[hidden] {
  display: none;
}

.page-home .user-panel__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  gap: 0.12rem;
  width: 100%;
  padding: 0 0 0.12rem;
  border-bottom: 1px solid #f0f1f5;
}

.page-home .user-panel__avatar-wrap {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 0.48rem;
  flex: 0 0 0.48rem;
  width: 0.48rem;
  height: 0.48rem;
  min-width: 0.48rem;
  max-width: 0.48rem;
  min-height: 0.48rem;
  max-height: 0.48rem;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--color-avatar-bg);
}

.page-home .user-panel__userinfo {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0;
  flex: 1 1 0;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 0.04rem;
}

.page-home .user-panel__avatar-wrap .user-panel__avatar,
.page-home .user-panel__avatar {
  width: 100%;
  height: 100%;
  max-width: none;
  min-width: 0;
  min-height: 0;
  border-radius: 0;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
}

.page-home .user-panel__name {
  margin: 0;
  width: 100%;
  font-size: 0.14rem;
  line-height: 0.2rem;
  font-weight: 700;
  color: #181c23;
  text-align: left;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-home .user-panel__badge {
  display: inline-block;
  margin: 0;
  padding: 0.02rem 0.08rem;
  border-radius: 9999px;
  background-color: #e5deff;
  color: var(--color-blue);
  font-size: 0.1rem;
  line-height: 0.15rem;
}

.page-home .user-panel__menu {
  list-style: none;
  margin: 0.06rem 0 0;
  padding: 0;
}

.page-home .user-panel__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.1rem;
  padding: 0.08rem 0.06rem;
  border-radius: 0.08rem;
  font-size: 0.13rem;
  line-height: 0.18rem;
  color: #434656;
  text-decoration: none;
  -webkit-transition: background-color 0.2s;
  -o-transition: background-color 0.2s;
  transition: background-color 0.2s;
}

.page-home .user-panel__item:hover {
  background-color: #f5f7fb;
}

.page-home .user-panel__item > img:first-child {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  opacity: 0.85;
}

.page-home .user-panel__item > span {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.page-home .user-panel__arrow {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  opacity: 0.35;
}

.page-home .user-panel__footer {
  margin-top: 0.08rem;
  padding-top: 0.1rem;
  border-top: 1px solid #f0f1f5;
}

.page-home .user-panel__logout {
  display: block;
  width: 100%;
  padding: 0.1rem 0.08rem;
  border-radius: 0.08rem;
  font-size: 0.13rem;
  line-height: 0.18rem;
  color: #f53f3f;
  text-align: center;
  text-decoration: none;
  -webkit-transition: background-color 0.2s;
  -o-transition: background-color 0.2s;
  transition: background-color 0.2s;
}

.page-home .user-panel__logout:hover {
  background-color: #fff1f0;
}

@media (max-width: 768px) {
  .page-home .user-panel {
    right: -0.08rem;
    width: 2.2rem;
  }

  .page-home .dash-header__user-info {
    display: none;
  }

  .page-home .dash-header__user-chevron {
    display: none;
  }
}

/* ===== 个人设置页 ===== */
.page-profile .dash-main--profile {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0.22rem 0.24rem 0.4rem;
  background-color: var(--color-bg);
}

.page-profile .profile-settings {
  width: 100%;
  max-width: 4.4rem;
  margin: 0 auto;
}

.page-profile .profile-form {
  border: 1px solid var(--color-border);
  border-radius: 0.08rem;
  background-color: var(--color-white);
  -webkit-box-shadow: 0 0.01rem 0.02rem rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.01rem 0.02rem rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.page-profile .profile-form__head {
  padding: 0.14rem 0.2rem;
  border-bottom: 1px solid #f0f1f5;
  font-size: 0.15rem;
  line-height: 0.22rem;
  font-weight: 600;
  color: #181c23;
}

.page-profile .profile-form__body {
  padding: 0.16rem 0.2rem 0.18rem;
}

.page-profile .profile-form__avatar-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  gap: 0.12rem;
  margin-bottom: 0.16rem;
  padding-bottom: 0.16rem;
  border-bottom: 1px solid #f0f1f5;
}

.page-profile .profile-form__avatar-wrap {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 0.56rem;
  flex: 0 0 0.56rem;
  width: 0.56rem;
  height: 0.56rem;
  min-width: 0.56rem;
  max-width: 0.56rem;
  min-height: 0.56rem;
  max-height: 0.56rem;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--color-avatar-bg);
}

.page-profile .profile-form__avatar-wrap img {
  width: 100%;
  height: 100%;
  max-width: none;
  min-width: 0;
  min-height: 0;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
}

.page-profile .profile-form__upload {
  display: inline-block;
  margin: 0;
  padding: 0.05rem 0.12rem;
  border: 1px solid var(--color-blue);
  border-radius: 0.04rem;
  font-size: 0.12rem;
  line-height: 0.18rem;
  color: var(--color-blue);
  cursor: pointer;
  white-space: nowrap;
}

.page-profile .profile-form__upload:hover {
  background-color: #f0f5ff;
}

.page-profile .profile-form__field {
  margin-bottom: 0.12rem;
}

.page-profile .profile-form__field:last-child {
  margin-bottom: 0;
}

.page-profile .profile-form__field > label {
  display: block;
  margin-bottom: 0.04rem;
  font-size: 0.14rem;
  line-height: 0.2rem;
  color: #434656;
}

.page-profile .profile-form__input {
  display: block;
  width: 100%;
  height: 0.36rem;
  padding: 0 0.1rem;
  border: 1px solid #e5e6eb;
  border-radius: 0.04rem;
  font-family: inherit;
  font-size: 0.14rem;
  line-height: 0.2rem;
  color: #181c23;
  background-color: var(--color-white);
  outline: none;
  -webkit-transition: border-color 0.15s;
  -o-transition: border-color 0.15s;
  transition: border-color 0.15s;
}

.page-profile .profile-form__input:focus {
  border-color: var(--color-blue);
}

.page-profile .profile-form__input--disabled,
.page-profile .profile-form__input:disabled {
  background-color: #f5f7fa;
  color: #86909c;
  cursor: not-allowed;
}

.page-profile .profile-form__hint {
  margin: 0.04rem 0 0;
  font-size: 0.11rem;
  line-height: 0.16rem;
  color: #86909c;
}

.page-profile .profile-form__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.1rem;
  padding: 0.14rem 0.2rem 0.18rem;
  border-top: 1px solid #f0f1f5;
}

.page-profile .profile-form__btn {
  min-width: 0.88rem;
  height: 0.36rem;
  padding: 0 0.16rem;
  border-radius: 0.04rem;
  font-size: 0.14rem;
  line-height: 0.36rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}

.page-profile .profile-form__btn--primary {
  background-color: var(--color-blue-dark);
  color: var(--color-white);
}

.page-profile .profile-form__btn--ghost {
  background-color: var(--color-white);
  color: #4e5969;
  border: 1px solid #e5e6eb;
  line-height: 0.34rem;
}

.page-profile .profile-form__btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.page-profile .profile-form__btn:hover:not(:disabled) {
  opacity: 0.9;
}