/* ==========================================================================
   拼读星球 · 设计令牌与基础层
   --------------------------------------------------------------------------
   视觉语言取自「新东方比邻成长体系」的公开页面配色体系（仅提取设计规律，
   不使用其任何原始素材）：紫色品牌主色 + 深靛标题 + 极浅紫底 + 圆角卡片。
   在此基础上叠加一层「儿童友好」变体：更大的圆角、更明显的状态反馈、
   为音标与单词单独准备的几何字体族。
   ========================================================================== */

:root {
  /* ---- 品牌紫（主色 #7A55FF） ----
     这条色阶同时承担三种角色，改值时必须对号入座：
       · 50–300  浅色底：浅底区块、选中态、图标底板
       · 400–600 填充与点缀：按钮底、图标、环形进度、渐变端点
       · 700–900 浅底上的文字色
     深色主题只翻转「50/100/200（底色转深）」和「700/800/900（文字转亮）」，
     400–600 两套主题共用 —— 因此凡是「白字压紫底」的填充一律不能用 700。
     主色由 #6236FF 整体调浅到 #7A55FF：色相不动，只把明度抬上去，
     白字对比度仍有 4.6:1（AA 达标），但整块视觉重量明显变轻。 */
  --brand-50: #f8f6ff;
  --brand-100: #f2eeff;
  --brand-200: #e4dcff;
  --brand-300: #cfc2ff;
  --brand-400: #a98cff;
  --brand-500: #7a55ff;
  --brand-600: #6a45f0;
  --brand-700: #5b36dd;
  --brand-800: #4a2aba;
  --brand-900: #37218f;

  /* 固定填充紫：永远承载白字/白色图标，不随主题变亮（深色主题里被钉死） */
  --brand-fill: var(--brand-500);
  --brand-fill-2: var(--brand-700);

  /* 主视觉渐变的三个停靠点。最亮的一点也必须与白字保持 ≥4.4:1，
     所以它比 --brand-400 深、比原来的 #6F45FF 浅。 */
  --hero-a: #7d5aff;
  --hero-b: #6d47f2;
  --hero-c: #5b36dd;

  /* ---- 文字 / 墨色 ---- */
  --ink: #1a1a2e;
  --ink-2: #111224;
  /* 主文字色的别名。--text-2/3/4 都在，单缺 --text-1 会让 var(--text-1) 静默失效，
     所以这里显式接上；别名指向 --ink，深色主题覆盖 --ink 时它会跟着变。 */
  --text-1: var(--ink);
  --text-2: #484456;
  --text-3: #5d6578;
  --text-4: #8b88a3;

  /* ---- 语义色 ---- */
  --orange: #ff6700;
  --orange-600: #e55c00;
  --orange-50: #fff3ea;
  --teal: #14e0b5;
  --teal-600: #0fb894;
  --teal-50: #e6fdf7;
  --green: #16a34a;
  --green-50: #eaf7ee;
  --blue: #2563eb;
  --blue-50: #eaf1fe;
  --red: #e24b4a;
  --red-50: #fdeceb;
  --amber: #ffb020;
  --amber-50: #fff7e6;
  --pink: #e8618c;
  --pink-50: #fdeef4;

  /* ---- 面 / 线 ---- */
  --bg: #ffffff;
  --bg-soft: #f8f6ff;
  --bg-sunk: #f4f0ff;
  --surface: #ffffff;
  --surface-2: #fbf9ff;
  --line: #eae5fb;
  --line-strong: #d9d2f7;

  /* ---- 圆角（比参考站更大，照顾儿童界面的“软”感） ---- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-full: 999px;

  /* ---- 阴影（带品牌色的柔和投影，而非中性灰） ---- */
  --sh-xs: 0 1px 2px rgba(26, 26, 46, 0.06);
  --sh-sm: 0 2px 8px rgba(122, 85, 255, 0.08);
  --sh-md: 0 6px 20px rgba(122, 85, 255, 0.11);
  --sh-lg: 0 14px 40px rgba(122, 85, 255, 0.15);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ---- 间距 ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-9: 40px;
  --sp-10: 48px;
  --sp-11: 64px;
  --sp-12: 80px;

  /* ---- 字号 ---- */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 34px;
  --fs-4xl: 44px;
  --fs-5xl: 56px;

  /* ---- 字体 ---- */
  --font-sans: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Hiragino Sans GB",
    "Helvetica Neue", Arial, sans-serif;
  /* 英文单词 / 音标：优先几何圆体，中文系统上多数可命中 */
  --font-en: "Century Gothic", "Futura", "Trebuchet MS", "Verdana", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Courier New", monospace;

  /* ---- 布局尺度 ---- */
  --header-h: 60px;
  --tabbar-h: 62px;
  --sidebar-w: 244px;
  --maxw: 1160px;
  --maxw-narrow: 820px;

  /* ---- 安全区（刘海屏） ---- */
  --sa-t: env(safe-area-inset-top, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-l: env(safe-area-inset-left, 0px);
  --sa-r: env(safe-area-inset-right, 0px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ========================== 深色主题 ==========================
   紫色在深色下的规则与亮色**正好相反**：
     · 50/100/200 是「底」，要跟着背景一起变深（否则浅紫块在暗夜里刺眼）；
     · 700/800/900 是「字」，必须变亮 —— 原来的深紫 #4900E5 压在 #12102A 上
       对比度只有 2.1:1，等于看不见（这是本次一并修掉的隐性缺陷）；
     · 400–600 是「填充」，浅深两套沿用同一组值，保证白字始终压得住。
   另外把 --brand-fill / --hero-* 显式钉死：它们要承载白字，
   一旦跟着 700 变亮就会变成白字压浅紫，直接糊掉。 */
html[data-theme="dark"] {
  --ink: #f2f0ff;
  --ink-2: #ffffff;
  --text-2: #c3bfd8;
  --text-3: #9b96b5;
  --text-4: #7d7896;

  --brand-50: #221b4d;
  --brand-100: #2b2260;
  --brand-200: #3a2e7d;
  --brand-700: #b9a3ff;
  --brand-800: #cfc0ff;
  --brand-900: #e6ddff;

  /* 填充与主视觉不随主题变亮：要压白字 */
  --brand-fill: #7a55ff;
  --brand-fill-2: #5b36dd;
  --hero-a: #7d5aff;
  --hero-b: #6d47f2;
  --hero-c: #5b36dd;

  --bg: #16132e;
  --bg-soft: #1c1839;
  --bg-sunk: #131028;
  --surface: #201c42;
  --surface-2: #262150;
  --line: #352f63;
  --line-strong: #47407e;

  --orange-50: #3a1e0c;
  --teal-50: #0c3329;
  --green-50: #0e2a19;
  --blue-50: #101f3d;
  --red-50: #3a1616;
  --amber-50: #3a2c0d;
  --pink-50: #3a1524;

  --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --sh-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --sh-md: 0 6px 20px rgba(0, 0, 0, 0.4);
  --sh-lg: 0 14px 40px rgba(0, 0, 0, 0.5);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ========================== 重置 ========================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg-soft);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overscroll-behavior-y: none;
}

/* 可点元素统一走「单击」语义：去掉双击缩放等待与 300ms 点击延迟。
   这是「像应用而不像网页」最省事的一步，对触屏点击手感影响很明显。 */
a,
button,
label,
select,
summary,
input[type="button"],
input[type="submit"],
input[type="reset"],
[role="button"],
[role="tab"],
[role="switch"] {
  touch-action: manipulation;
}

h1,
h2,
h3,
h4,
h5,
p,
figure,
blockquote {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5 {
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -0.01em;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: var(--brand-600);
  text-decoration: none;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::selection {
  background: var(--brand-200);
  color: var(--brand-900);
}

/* 滚动条（桌面端） */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: var(--r-full);
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--brand-300);
  background-clip: content-box;
}

/* ========================== 工具类 ========================== */
.row {
  display: flex;
  align-items: center;
}
.col {
  display: flex;
  flex-direction: column;
}
.center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.grow {
  flex: 1 1 auto;
  min-width: 0;
}
.wrap {
  flex-wrap: wrap;
}
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-5 { gap: var(--sp-5); }
.gap-6 { gap: var(--sp-6); }
.gap-8 { gap: var(--sp-8); }

.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mt-10 { margin-top: var(--sp-10); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.mt-auto { margin-top: auto; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

.t-xs { font-size: var(--fs-xs); }
.t-sm { font-size: var(--fs-sm); }
.t-base { font-size: var(--fs-base); }
.t-md { font-size: var(--fs-md); }
.t-lg { font-size: var(--fs-lg); }
.t-xl { font-size: var(--fs-xl); }
.t-2xl { font-size: var(--fs-2xl); }
.t-3xl { font-size: var(--fs-3xl); }
.t-4xl { font-size: var(--fs-4xl); }

.t-2 { color: var(--text-2); }
.t-3 { color: var(--text-3); }
.t-4 { color: var(--text-4); }
.t-brand { color: var(--brand-600); }
.t-orange { color: var(--orange-600); }
.t-teal { color: var(--teal-600); }
.t-green { color: var(--green); }
.t-red { color: var(--red); }
.t-amber { color: var(--orange-600); }

.w-400 { font-weight: 400; }
.w-500 { font-weight: 500; }
.w-600 { font-weight: 600; }
.w-700 { font-weight: 700; }

.mono { font-family: var(--font-mono); }
.en { font-family: var(--font-en); }
.upper { text-transform: uppercase; }
.track { letter-spacing: 0.06em; }
.tabnum { font-variant-numeric: tabular-nums; }

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.text-c { text-align: center; }
.text-r { text-align: right; }
.nowrap { white-space: nowrap; }

.hidden { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.scroll-x::-webkit-scrollbar {
  display: none;
}

.divider {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: var(--sp-5) 0;
}

/* ========================== 动效 ========================== */
@keyframes lhx-fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes lhx-pop {
  0% {
    transform: scale(0.82);
    opacity: 0;
  }
  60% {
    transform: scale(1.04);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

@keyframes lhx-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.55;
    transform: scale(1.18);
  }
}

@keyframes lhx-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(122, 85, 255, 0.35);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(122, 85, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(122, 85, 255, 0);
  }
}

@keyframes lhx-shimmer {
  from {
    background-position: -200% 0;
  }
  to {
    background-position: 200% 0;
  }
}

@keyframes lhx-spin {
  to {
    transform: rotate(360deg);
  }
}

/* 发音波纹（点读时的视觉反馈） */
@keyframes lhx-soundwave {
  0% {
    transform: scale(0.6);
    opacity: 0.55;
  }
  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}

.anim-up {
  animation: lhx-fade-up 0.42s var(--ease) both;
}
.anim-pop {
  animation: lhx-pop 0.36s var(--ease-bounce) both;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}