/* ============================================================================
   迅码创客 · 设计系统 (XM Design System)
   明亮 · 圆润 · 游戏化 · 低门槛 · 有探索感，但不幼稚
   ---------------------------------------------------------------------------
   分层：1) 令牌  2) 基础重置  3) 排版  4) 布局  5) 组件  6) 动效  7) 无障碍
   只用 CSS 变量，禁止在页面里硬编码 hex。
   ========================================================================== */

/* ═══ 1. 设计令牌 ═══════════════════════════════════════════════════════════ */
:root {
  /* -- 品牌色：天空蓝（科技 + 信任） -- */
  /* 品牌色来自迅码创客 logo (#2E54A1) 与吉祥物披风 (#2555B4) */
  --xm-primary:        #2E54A1;
  --xm-primary-bright: #3D7BE0;   /* 交互/悬停的亮蓝，与主色同源 */
  --xm-primary-600:    #274A8F;
  --xm-primary-700:    #1E3A73;
  --xm-primary-soft:   #E7EEFA;
  --xm-primary-soft-2: #D3E0F4;
  --xm-on-primary:     #FFFFFF;

  /* -- 辅助色：活力 / 成长 / 创造（高饱和但柔和） -- */
  --xm-orange:      #FFB347;   /* 暖橙 · 活力 */
  --xm-orange-deep: #8A4F0B;   /* 小字胶囊用：对 --xm-orange-soft 达 5.4:1 */
  --xm-orange-soft: #FFF2DF;
  --xm-green:       #7ED321;   /* 草绿 · 成长 */
  --xm-green-deep:  #3A6B0B;   /* 徽章小字用：浅绿底 5.91:1 */
  --xm-green-soft:  #EFFAE0;
  --xm-purple:      #9B59B6;   /* 紫 · 探索 */
  --xm-purple-deep: #6B3682;   /* 徽章小字用 */
  --xm-purple-soft: #F5ECF9;
  --xm-pink:        #FF7A9C;   /* 珊瑚粉 · 鼓励 */
  --xm-pink-deep:   #A83C59;   /* 徽章小字用 */
  --xm-pink-soft:   #FFEDF2;
  --xm-yellow:      #FFD93D;   /* 柠檬黄 · 奖励 */
  --xm-yellow-deep: #7A5A00;   /* 小字胶囊用：对 --xm-yellow-soft 达 5.6:1 */
  --xm-yellow-soft: #FFF9E0;

  /* -- 中性色：偏蓝的灰，避免死板 -- */
  --xm-bg:          #E6EEF9;   /* 冷调浅蓝灰：与白色卡片层级明显区分 */
  --xm-bg-deep:     #D6E3F4;
  /* 供主题覆盖的别名（暗色主题会替换这些） */
  --xm-surface-var: #FFFFFF;
  --xm-page-tint:   #E6EEF9;
  --xm-surface:     #FFFFFF;
  --xm-surface-2:   #F4F7FB;
  --xm-border:      #E4EBF5;
  --xm-border-strong:#CFDBEB;

  --xm-text:        #2C3E50;
  --xm-text-soft:   #4E6072;
  --xm-text-muted:  #586778;   /* 弱化文字：在新底色 #E6EEF9 上仍达 AA */

  /* -- 语义色 -- */
  --xm-success:      #2FAE6B;
  --xm-success-soft: #E6F7EF;
  --xm-warning:      #E8912B;
  --xm-warning-soft: #FFF4E5;
  --xm-error:        #E05252;
  --xm-error-soft:   #FDECEC;
  --xm-info-soft:    #E8F1FD;

  /* -- C++ / IDE 深色科技面板 -- */
  --xm-ink:        #0F1B2D;
  --xm-ink-2:      #17263F;
  --xm-ink-3:      #22354F;
  --xm-ink-line:   #2C4568;
  --xm-code-bg:    #0D1524;
  --xm-code-text:  #D7E3F4;
  --xm-code-key:   #7CC5FF;
  --xm-code-str:   #9BE58A;
  --xm-code-num:   #FFB347;
  --xm-code-com:   #6C809B;

  /* -- 渐变 -- */
  --xm-grad-primary: linear-gradient(135deg, #3D7BE0 0%, #2E54A1 60%, #274A8F 100%);
  /* 页面头/横幅用：明亮下是品牌渐变，深色下自动变深，避免成了发光大白块 */
  --xm-grad-header:  linear-gradient(135deg, #3D7BE0 0%, #2E54A1 60%, #274A8F 100%);
  --xm-grad-orange:  linear-gradient(135deg, #FFD08A 0%, #FFB347 100%);
  --xm-grad-ink:     linear-gradient(150deg, #1B2C48 0%, #0F1B2D 100%);
  --xm-grad-glow:    radial-gradient(1200px 540px at 8% 2%, rgba(61,123,224,.09), transparent 70%),
                     radial-gradient(900px 460px at 96% 22%, rgba(126,211,33,.06), transparent 68%),
                     radial-gradient(900px 620px at 50% 104%, rgba(255,179,71,.08), transparent 70%),
                     linear-gradient(180deg, #E8F0FA 0%, #E6EEF9 55%, #E9F1FA 100%);

  /* -- 圆角：圆润但不夸张 -- */
  --xm-r-xs: 8px;
  --xm-r-sm: 12px;
  --xm-r-md: 16px;
  --xm-r-lg: 20px;
  --xm-r-xl: 28px;
  --xm-r-pill: 999px;

  /* -- 阴影：分层、柔和，不用纯黑 -- */
  --xm-sh-xs: 0 1px 2px rgba(28, 50, 82, .06);
  --xm-sh-sm: 0 2px 8px rgba(28, 50, 82, .07);
  --xm-sh-md: 0 6px 18px rgba(28, 50, 82, .09);
  --xm-sh-lg: 0 14px 34px rgba(28, 50, 82, .13);
  --xm-sh-primary: 0 10px 24px rgba(46, 84, 161, .30);
  --xm-sh-inset: inset 0 1px 0 rgba(255,255,255,.7);

  /* -- 间距刻度 4/8 节奏 -- */
  --xm-s-1: 4px;  --xm-s-2: 8px;  --xm-s-3: 12px; --xm-s-4: 16px;
  --xm-s-5: 20px; --xm-s-6: 24px; --xm-s-8: 32px; --xm-s-10: 40px;
  --xm-s-12: 48px; --xm-s-16: 64px;

  /* -- 字体 -- */
  --xm-font: "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC",
             "Noto Sans SC", "Alibaba PuHuiTi", "Microsoft YaHei", system-ui,
             -apple-system, "Segoe UI", Roboto, sans-serif;
  --xm-font-round: "PingFang SC", "HarmonyOS Sans SC", "Noto Sans SC",
                   "Alibaba PuHuiTi", "Microsoft YaHei", system-ui, sans-serif;
  --xm-font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", "SF Mono",
                  "Consolas", "Liberation Mono", monospace;

  /* -- 字号：正文 16 起，儿童端 18 起 -- */
  --xm-fs-xs: 12px; --xm-fs-sm: 13px; --xm-fs-base: 16px;
  --xm-fs-lg: 18px; --xm-fs-xl: 22px; --xm-fs-2xl: 28px;
  --xm-fs-3xl: 36px; --xm-fs-4xl: 46px;
  --xm-lh-tight: 1.25; --xm-lh-base: 1.7; --xm-lh-loose: 1.85;

  /* -- 层级 -- */
  --xm-z-base: 1; --xm-z-sticky: 100; --xm-z-fab: 900;
  --xm-z-overlay: 1000; --xm-z-modal: 1010; --xm-z-toast: 1200;

  /* -- 动效 -- */
  --xm-ease: cubic-bezier(.22, .61, .36, 1);
  --xm-ease-out: cubic-bezier(.16, 1, .3, 1);
  --xm-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --xm-t-fast: 150ms;
  --xm-t-base: 220ms;
  --xm-t-slow: 300ms;
}

/* 深色科技区（C++ / IDE）作用域：只切令牌，组件自动跟随 */
.xm-scope-ink {
  --xm-bg: #0F1B2D;
  background-color: var(--xm-bg);
  --xm-bg-deep: #0B1421;
  --xm-surface: #17263F;
  --xm-surface-2: #1D2E49;
  --xm-border: #2A3E5C;
  --xm-border-strong: #375070;
  --xm-text: #EAF2FC;
  --xm-text-soft: #B7C7DC;
  --xm-text-muted: #93A9C4;
  --xm-primary-soft: #1B2E48;
  --xm-primary-soft-2: #21395A;
  --xm-sh-sm: 0 2px 10px rgba(0, 0, 0, .35);
  --xm-sh-md: 0 8px 24px rgba(0, 0, 0, .42);
  --xm-sh-lg: 0 18px 44px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

/* ═══ 2. 基础重置 ═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

html.xm-html { background-color: var(--xm-bg); }

body.xm-body {
  margin: 0;
  font-family: var(--xm-font);
  font-size: var(--xm-fs-base);
  line-height: var(--xm-lh-base);
  color: var(--xm-text);
  /* 注意：不要用 background 简写去混合「颜色变量 + 多层渐变变量」，
     浏览器会整条丢弃，导致背景变白。分开写 longhand 最稳。 */
  background-color: var(--xm-bg);
  background-image: var(--xm-grad-glow);
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

body.xm-body :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) { margin: 0; }
body.xm-body :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
body.xm-body :where(img, svg, video, canvas) { max-width: 100%; display: block; }

/* 链接基础样式：用 :where() 把特异性降到 0，
   避免全局 a 规则抢掉 .xm-btn-primary / .xm-nav-link 等组件的文字色 */
.xm-body :where(a) { color: var(--xm-primary-600); text-decoration: none; transition: color var(--xm-t-fast) var(--xm-ease); }
.xm-body :where(a):hover { color: var(--xm-primary-700); }

.xm-body :where(button, input, select, textarea) { font: inherit; color: inherit; }

/* 可见焦点环：键盘可达（无障碍底线） */
.xm-body :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--xm-primary-bright);
  outline-offset: 2px;
  border-radius: var(--xm-r-xs);
}

/* 屏幕阅读器专用文本 */
.xm-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 跳转到主内容（键盘用户） */
.xm-skip {
  position: absolute; left: 12px; top: -60px; z-index: var(--xm-z-toast);
  background: var(--xm-primary); color: #fff; padding: 10px 18px;
  border-radius: var(--xm-r-sm); font-weight: 700; transition: top var(--xm-t-fast);
}
.xm-skip:focus { top: 12px; color: #fff; }

/* 自定义滚动条（轻盈，不抢戏） */
.xm-body ::-webkit-scrollbar { width: 10px; height: 10px; }
.xm-body ::-webkit-scrollbar-track { background: transparent; }
.xm-body ::-webkit-scrollbar-thumb {
  background: var(--xm-border-strong); border-radius: var(--xm-r-pill);
  border: 3px solid transparent; background-clip: content-box;
}
.xm-body ::-webkit-scrollbar-thumb:hover { background: var(--xm-text-muted); background-clip: content-box; }

/* ═══ 3. 排版 ═══════════════════════════════════════════════════════════════ */
.xm-h1, .xm-h2, .xm-h3, .xm-h4 {
  font-family: var(--xm-font-round);
  color: var(--xm-text);
  line-height: var(--xm-lh-tight);
  letter-spacing: -.2px;
  font-weight: 800;
}
.xm-h1 { font-size: clamp(28px, 4.2vw, var(--xm-fs-4xl)); }
.xm-h2 { font-size: clamp(22px, 2.6vw, var(--xm-fs-2xl)); }
.xm-h3 { font-size: var(--xm-fs-xl); }
.xm-h4 { font-size: var(--xm-fs-lg); font-weight: 700; }

.xm-lead { font-size: var(--xm-fs-lg); color: var(--xm-text-soft); line-height: var(--xm-lh-loose); }
.xm-text-soft { color: var(--xm-text-soft); }
.xm-text-muted { color: var(--xm-text-muted); }
.xm-text-sm { font-size: var(--xm-fs-sm); }
.xm-text-xs { font-size: var(--xm-fs-xs); }
.xm-mono { font-family: var(--xm-font-mono); font-variant-ligatures: contextual; }

/* 渐变强调文字（只用于大标题的少量词） */
.xm-grad-text {
  background: linear-gradient(100deg, #2E54A1 0%, #3D7BE0 45%, #9B59B6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ═══ 4. 布局 ═══════════════════════════════════════════════════════════════ */
.xm-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--xm-s-6); }
.xm-wrap-wide { max-width: 1360px; }
.xm-wrap-narrow { max-width: 880px; }
.xm-page { padding: var(--xm-s-8) 0 var(--xm-s-16); }

.xm-section { margin-top: var(--xm-s-12); }
.xm-section:first-child { margin-top: 0; }

.xm-section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--xm-s-4); margin-bottom: var(--xm-s-6); flex-wrap: wrap;
}
.xm-section-head .xm-section-sub { color: var(--xm-text-muted); font-size: var(--xm-fs-base); margin-top: var(--xm-s-1); }

.xm-grid { display: grid; gap: var(--xm-s-6); }
.xm-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.xm-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.xm-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.xm-grid-auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.xm-grid-auto-lg { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
/* 固定 3 列（适合 6 个卡片 = 3×2，避免出现落单的 4+2） */
.xm-grid-auto-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.xm-stack { display: flex; flex-direction: column; gap: var(--xm-s-4); }
.xm-row { display: flex; align-items: center; gap: var(--xm-s-3); }
.xm-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--xm-s-4); }
.xm-row-wrap { flex-wrap: wrap; }
.xm-spacer { flex: 1 1 auto; }

/* ═══ 5. 组件 ═══════════════════════════════════════════════════════════════ */

/* -- 5.1 顶部导航 -- */
.xm-topbar {
  position: sticky; top: 0; z-index: var(--xm-z-sticky);
  /* 毛玻璃：透明度压低 + 模糊加大，内容滚过时才看得出玻璃感 */
  background: rgba(255, 255, 255, .58);
  -webkit-backdrop-filter: saturate(2) blur(24px);
  backdrop-filter: saturate(2) blur(24px);
  border-bottom: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 1px 0 rgba(46, 84, 161, .08), 0 10px 28px rgba(28, 50, 82, .07);
  isolation: isolate;
  /* ⚠️ 这里不能用 overflow: hidden 来裁粒子——下拉菜单是画在顶栏外的绝对定位元素，
     会被一起裁掉导致「菜单点不开」。改为只裁装饰层本身（见下面的 clip-path）。 */
}
/* 玻璃边缘高光：顶部一条渐变亮线，避免“一条死白” */
.xm-topbar::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  clip-path: inset(0);
  background: linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.25) 42%, rgba(255,255,255,0) 100%);
}
/* 极淡的粒子层：两层小点 + 慢速漂移，玻璃模糊会把它柔化 */
/* 极光扫光：两团品牌色的大面积柔光在栏内缓慢漂移。
   比"随机彩点"更整体、有方向感，也不与导航文字抢注意力。 */
.xm-topbar::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  clip-path: inset(0);   /* 只裁光晕自己，不裁顶栏里的下拉菜单 */
  background-image:
    /* ① 极光：连续光带，负责整体层次与方向感 */
    radial-gradient(48% 150% at 18% 50%, rgba(61,123,224,.38), rgba(61,123,224,0) 72%),
    radial-gradient(42% 150% at 62% 50%, rgba(126,211,33,.20), rgba(126,211,33,0) 72%),
    radial-gradient(38% 150% at 88% 50%, rgba(155,89,182,.24), rgba(155,89,182,0) 72%),
    /* ② 星尘：极稀疏、单色、低对比，只作为细节层次 */
    radial-gradient(rgba(120,175,240,.45) 1px, rgba(120,175,240,0) 1.6px);
  background-repeat: no-repeat;
  background-size: 68% 100%, 58% 100%, 52% 100%, 132px 132px;
  background-position: -22% 50%, 48% 50%, 118% 50%, 12px 40px;
  animation: xm-aurora 26s ease-in-out infinite alternate;
}
@keyframes xm-aurora {
  /* 只让极光漂移，星尘保持静止（免得又变回"飘动的沙子"） */
  from { background-position: -22% 50%, 48% 50%, 118% 50%, 12px 40px; }
  to   { background-position: 8% 50%, 72% 50%, 92% 50%, 12px 40px; }
}
.xm-topbar-inner { position: relative; z-index: 1; }

/* 不支持 backdrop-filter 的浏览器：退回较实的底，保证文字可读 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .xm-topbar { background: rgba(255, 255, 255, .94); }
  .xm-topbar::before { display: none; }
}
.xm-topbar-inner {
  display: flex; align-items: center; gap: var(--xm-s-4);
  min-height: 68px; padding: var(--xm-s-2) 0;
}
.xm-brand { display: flex; align-items: center; gap: var(--xm-s-3); flex: none; }
.xm-brand-logo {
  width: 42px; height: 42px; border-radius: 13px; flex: none;
  display: grid; place-items: center;
  background: var(--xm-grad-primary); color: #fff;
  box-shadow: var(--xm-sh-primary);
}
.xm-brand-logo svg { width: 24px; height: 24px; }
/* 真实品牌图形标（PNG，自带透明底） */
.xm-brand-logo-img {
  width: 40px; height: 40px; flex: none; object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(46, 84, 161, .22));
}
.xm-brand-name { font-weight: 900; font-size: var(--xm-fs-lg); color: var(--xm-text); line-height: 1.15; letter-spacing: -.3px; }
.xm-brand-tag { font-size: var(--xm-fs-xs); color: var(--xm-text-muted); line-height: 1.3; }

.xm-nav { display: flex; align-items: center; gap: var(--xm-s-1); flex-wrap: wrap; }
.xm-nav-link {
  display: inline-flex; align-items: center; gap: var(--xm-s-2);
  padding: 9px 14px; min-height: 44px;
  border-radius: var(--xm-r-sm);
  color: var(--xm-text-soft); font-size: var(--xm-fs-base); font-weight: 600;
  transition: background var(--xm-t-fast) var(--xm-ease), color var(--xm-t-fast) var(--xm-ease);
}
.xm-nav-link:hover { background: var(--xm-primary-soft); color: var(--xm-primary-700); }
.xm-nav-link.is-active { background: var(--xm-primary); color: #fff; box-shadow: 0 6px 14px rgba(46,84,161,.3); }
.xm-nav-link svg { width: 20px; height: 20px; flex: none; }

/* -- 5.2 按钮 -- */
.xm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--xm-s-2);
  min-height: 46px; padding: 11px 22px;
  border: 1px solid transparent; border-radius: var(--xm-r-sm);
  font-family: var(--xm-font); font-size: var(--xm-fs-base); font-weight: 700;
  cursor: pointer; text-align: center; white-space: nowrap;
  transition: transform var(--xm-t-fast) var(--xm-ease),
              box-shadow var(--xm-t-fast) var(--xm-ease),
              background var(--xm-t-fast) var(--xm-ease),
              border-color var(--xm-t-fast) var(--xm-ease),
              color var(--xm-t-fast) var(--xm-ease);
}
.xm-btn svg { width: 20px; height: 20px; flex: none; }
.xm-btn:disabled, .xm-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

.xm-btn-primary { background: var(--xm-grad-primary); color: #fff; box-shadow: var(--xm-sh-primary); }
.xm-btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(46,84,161,.36); }
.xm-btn-primary:active { transform: translateY(0); }

.xm-btn-ghost { background: var(--xm-surface); color: var(--xm-text); border-color: var(--xm-border-strong); box-shadow: var(--xm-sh-xs); }
.xm-btn-ghost:hover { color: var(--xm-primary-700); border-color: var(--xm-primary); background: var(--xm-primary-soft); transform: translateY(-2px); }

.xm-btn-soft { background: var(--xm-primary-soft); color: var(--xm-primary-700); }
.xm-btn-soft:hover { background: var(--xm-primary-soft-2); color: var(--xm-primary-700); transform: translateY(-2px); }

.xm-btn-success { background: linear-gradient(135deg, #8FDC3C, #6FBF15); color: #123300; box-shadow: 0 10px 22px rgba(126,211,33,.32); }
.xm-btn-success:hover { color: #123300; transform: translateY(-2px); }

.xm-btn-warm { background: linear-gradient(135deg, #FFC46B, #FFA726); color: #4A2A00; box-shadow: 0 10px 22px rgba(255,179,71,.34); }
.xm-btn-warm:hover { color: #4A2A00; transform: translateY(-2px); }

.xm-btn-danger { background: var(--xm-error-soft); color: #B23B3B; border-color: #F6CFCF; }
.xm-btn-danger:hover { color: #962F2F; background: #FBDCDC; }

.xm-btn-sm { min-height: 38px; padding: 7px 14px; font-size: var(--xm-fs-sm); border-radius: var(--xm-r-xs); }
.xm-btn-lg { min-height: 56px; padding: 15px 32px; font-size: var(--xm-fs-lg); border-radius: var(--xm-r-md); }
.xm-btn-block { width: 100%; }
.xm-btn-icon { padding: 10px; min-width: 44px; }

/* -- 5.3 卡片 -- */
.xm-card {
  position: relative;
  background: var(--xm-surface);
  border: 1px solid var(--xm-border);
  border-radius: var(--xm-r-lg);
  box-shadow: var(--xm-sh-sm);
  padding: var(--xm-s-6);
  transition: transform var(--xm-t-base) var(--xm-ease),
              box-shadow var(--xm-t-base) var(--xm-ease),
              border-color var(--xm-t-base) var(--xm-ease);
}
.xm-card-pad-lg { padding: var(--xm-s-8); }
.xm-card-flush { padding: 0; overflow: hidden; }

a.xm-card, .xm-card-link { display: block; color: inherit; }
a.xm-card:hover, .xm-card-link:hover {
  color: inherit; transform: translateY(-4px);
  box-shadow: var(--xm-sh-lg); border-color: var(--xm-primary-soft-2);
}
a.xm-card:active { transform: translateY(-1px); }

/* 卡片顶部彩色条：只加在「有强调色」的卡片上，并为其预留内边距，避免压到标题 */
.xm-card-accent { padding-top: calc(var(--xm-s-6) + 6px); }
.xm-card-accent.xm-card-pad-lg { padding-top: calc(var(--xm-s-8) + 6px); }
.xm-card-accent::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  border-radius: var(--xm-r-lg) var(--xm-r-lg) 0 0;
  background: var(--xm-accent, var(--xm-primary)); opacity: .92;
}
.xm-card-flush.xm-card-accent { padding-top: 0; }
.xm-card-flush.xm-card-accent::after { border-radius: var(--xm-r-lg) var(--xm-r-lg) 0 0; }
.xm-accent-blue   { --xm-accent: var(--xm-primary); }
.xm-accent-orange { --xm-accent: var(--xm-orange); }
.xm-accent-green  { --xm-accent: var(--xm-green); }
.xm-accent-purple { --xm-accent: var(--xm-purple); }
.xm-accent-pink   { --xm-accent: var(--xm-pink); }
.xm-accent-yellow { --xm-accent: var(--xm-yellow); }

/* -- 5.4 图标胶囊（圆润线性图标容器，替代 emoji 图标） -- */
.xm-ico {
  width: 52px; height: 52px; flex: none;
  border-radius: 16px; display: grid; place-items: center;
  background: var(--xm-primary-soft); color: var(--xm-primary-700);
  transition: transform var(--xm-t-base) var(--xm-ease-spring);
}
.xm-ico svg { width: 26px; height: 26px; }
.xm-ico-sm { width: 40px; height: 40px; border-radius: 12px; }
.xm-ico-sm svg { width: 20px; height: 20px; }
.xm-ico-lg { width: 64px; height: 64px; border-radius: 20px; }
.xm-ico-lg svg { width: 32px; height: 32px; }
.xm-ico-blue   { background: var(--xm-primary-soft); color: var(--xm-primary-700); }
.xm-ico-orange { background: var(--xm-orange-soft); color: var(--xm-orange-deep); }
.xm-ico-green  { background: var(--xm-green-soft);  color: var(--xm-green-deep); }
.xm-ico-purple { background: var(--xm-purple-soft); color: var(--xm-purple-deep); }
.xm-ico-pink   { background: var(--xm-pink-soft);   color: var(--xm-pink-deep); }
.xm-ico-yellow { background: var(--xm-yellow-soft); color: var(--xm-yellow-deep); }
.xm-ico-ink    { background: rgba(46,84,161,.16);  color: #8CC4FF; }
a.xm-card:hover .xm-ico, .xm-feature:hover .xm-ico { transform: scale(1.08) rotate(-3deg); }

/* -- 5.5 徽章 / 标签 -- */
.xm-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--xm-r-pill);
  font-size: var(--xm-fs-xs); font-weight: 800; line-height: 1.5;
  background: var(--xm-primary-soft); color: var(--xm-primary-700);
}
.xm-badge svg { width: 14px; height: 14px; }
.xm-badge-orange { background: var(--xm-orange-soft); color: var(--xm-orange-deep); }
.xm-badge-green  { background: var(--xm-green-soft);  color: var(--xm-green-deep); }
.xm-badge-purple { background: var(--xm-purple-soft); color: var(--xm-purple-deep); }
.xm-badge-pink   { background: var(--xm-pink-soft);   color: var(--xm-pink-deep); }
.xm-badge-yellow { background: var(--xm-yellow-soft); color: var(--xm-yellow-deep); }
.xm-badge-soft   { background: var(--xm-surface-2);   color: var(--xm-text-soft); }
.xm-badge-outline { background: transparent; border: 1px solid var(--xm-border-strong); color: var(--xm-text-soft); }

.xm-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--xm-r-xs);
  font-size: var(--xm-fs-xs); font-weight: 700;
  background: var(--xm-surface-2); color: var(--xm-text-soft);
}

/* -- 5.6 进度条 -- */
.xm-progress {
  position: relative; width: 100%; height: 12px;
  background: var(--xm-bg-deep); border-radius: var(--xm-r-pill); overflow: hidden;
}
.xm-progress-bar {
  height: 100%; border-radius: var(--xm-r-pill);
  background: var(--xm-grad-primary); width: 0;
  transition: width 600ms var(--xm-ease-out);
}
.xm-progress-bar.is-green  { background: linear-gradient(90deg, #9BE58A, #6FBF15); }
.xm-progress-bar.is-orange { background: linear-gradient(90deg, #FFD08A, #FFA726); }
.xm-progress-bar.is-purple { background: linear-gradient(90deg, #C89BDB, #9B59B6); }
.xm-progress-lg { height: 16px; }
.xm-progress-sm { height: 8px; }
.xm-progress-text { font-size: var(--xm-fs-xs); font-weight: 700; color: var(--xm-text-soft); }

/* 环形进度（用于总览） */
.xm-ring { --p: 0; --sz: 84px; width: var(--sz); height: var(--sz); position: relative; flex: none; }
.xm-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.xm-ring circle { fill: none; stroke-width: 4; stroke-linecap: round; }
.xm-ring .track { stroke: var(--xm-bg-deep); }
.xm-ring .value {
  stroke: var(--xm-primary-bright);
  stroke-dasharray: 125.66;
  stroke-dashoffset: calc(125.66 - (125.66 * var(--p) / 100));
  transition: stroke-dashoffset 700ms var(--xm-ease-out);
}
.xm-ring.is-green .value { stroke: var(--xm-success); }
.xm-ring.is-orange .value { stroke: var(--xm-warning); }
.xm-ring.is-purple .value { stroke: var(--xm-purple); }
.xm-ring-label {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-weight: 900; font-size: var(--xm-fs-base); color: var(--xm-text);
}

/* -- 5.7 统计块 -- */
.xm-stat { display: flex; align-items: center; gap: var(--xm-s-3); }
.xm-stat-num { font-size: var(--xm-fs-xl); font-weight: 900; color: var(--xm-text); line-height: 1.1; }
.xm-stat-label { font-size: var(--xm-fs-xs); color: var(--xm-text-muted); font-weight: 600; }

/* -- 5.8 闯关地图 -- */
.xm-map { position: relative; padding: var(--xm-s-2) 0 var(--xm-s-4); }
.xm-map::before {
  content: ""; position: absolute; left: 50%; top: 24px; bottom: 24px;
  width: 4px; transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, var(--xm-border-strong) 0 12px, transparent 12px 24px);
  border-radius: var(--xm-r-pill);
}
.xm-map-list { position: relative; display: flex; flex-direction: column; gap: var(--xm-s-6); }
.xm-map-row { display: flex; align-items: center; gap: var(--xm-s-4); }
.xm-map-row.is-right { flex-direction: row-reverse; text-align: right; }
.xm-map-row.is-right .xm-node-card { align-items: flex-end; }
.xm-map-row.is-right .xm-node-meta { flex-direction: row-reverse; }
.xm-map-side { flex: 1 1 0; min-width: 0; }
.xm-map-node {
  position: relative; z-index: 1; flex: none;
  width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--xm-surface); border: 4px solid var(--xm-border-strong);
  box-shadow: var(--xm-sh-sm);
  font-weight: 900; font-size: var(--xm-fs-lg); color: var(--xm-text-muted);
  transition: transform var(--xm-t-base) var(--xm-ease-spring), box-shadow var(--xm-t-base) var(--xm-ease), border-color var(--xm-t-base) var(--xm-ease);
}
.xm-map-node svg { width: 34px; height: 34px; }
.xm-map-node small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .5px; }
.xm-map-row:hover .xm-map-node { transform: scale(1.06); }

/* 已完成 */
.xm-map-row.is-done .xm-map-node {
  background: linear-gradient(140deg, #9BE58A, #6FBF15);
  border-color: #B8EC7E; color: #143300;
  box-shadow: 0 10px 22px rgba(126, 211, 33, .34);
}
/* 当前（高亮 + 呼吸） */
.xm-map-row.is-current .xm-map-node {
  background: var(--xm-grad-primary); border-color: #BFDCFF; color: #fff;
  box-shadow: 0 0 0 0 rgba(46, 84, 161, .5), var(--xm-sh-primary);
  animation: xm-pulse 2.4s var(--xm-ease) infinite;
}
/* 未解锁（上锁） */
.xm-map-row.is-locked .xm-map-node {
  background: var(--xm-surface-2); border-color: var(--xm-border); color: var(--xm-text-muted);
}
.xm-map-row.is-locked .xm-node-card { opacity: .78; }
.xm-node-card {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--xm-surface); border: 1px solid var(--xm-border);
  border-radius: var(--xm-r-md); padding: var(--xm-s-4) var(--xm-s-5);
  box-shadow: var(--xm-sh-xs); min-width: 0;
  transition: box-shadow var(--xm-t-base) var(--xm-ease), transform var(--xm-t-base) var(--xm-ease), border-color var(--xm-t-base) var(--xm-ease);
}
.xm-map-row:not(.is-locked) .xm-node-card:hover { box-shadow: var(--xm-sh-md); transform: translateY(-2px); border-color: var(--xm-primary-soft-2); }
.xm-node-title { font-weight: 800; font-size: var(--xm-fs-base); color: var(--xm-text); }
.xm-node-desc { font-size: var(--xm-fs-sm); color: var(--xm-text-muted); line-height: 1.6; }
.xm-node-meta { display: flex; align-items: center; gap: var(--xm-s-2); flex-wrap: wrap; }

/* @keyframes 定义在文件末尾统一位置 */

/* -- 5.9 步骤 / 关卡小卡（横向） -- */
.xm-level-chip {
  display: flex; align-items: center; gap: var(--xm-s-3);
  padding: var(--xm-s-3) var(--xm-s-4);
  border: 1px solid var(--xm-border); border-radius: var(--xm-r-md);
  background: var(--xm-surface); color: inherit;
  transition: transform var(--xm-t-fast) var(--xm-ease), box-shadow var(--xm-t-fast) var(--xm-ease), border-color var(--xm-t-fast) var(--xm-ease);
}
.xm-level-chip:hover { transform: translateX(3px); box-shadow: var(--xm-sh-sm); border-color: var(--xm-primary-soft-2); color: inherit; }
.xm-level-chip.is-done { border-color: #CDEBA6; background: linear-gradient(90deg, var(--xm-green-soft), var(--xm-surface) 55%); }
.xm-level-chip.is-current { border-color: var(--xm-primary); background: linear-gradient(90deg, var(--xm-primary-soft), var(--xm-surface) 60%); box-shadow: var(--xm-sh-sm); }
.xm-level-chip.is-locked { opacity: .62; }

/* -- 5.10 表单 -- */
.xm-field { display: flex; flex-direction: column; gap: var(--xm-s-2); }
.xm-label { font-size: var(--xm-fs-sm); font-weight: 700; color: var(--xm-text-soft); }
.xm-input, .xm-select, .xm-textarea {
  width: 100%; min-height: 48px; padding: 11px 14px;
  background: var(--xm-surface); color: var(--xm-text);
  border: 1.5px solid var(--xm-border-strong); border-radius: var(--xm-r-sm);
  font-size: var(--xm-fs-base); line-height: 1.5;
  transition: border-color var(--xm-t-fast) var(--xm-ease), box-shadow var(--xm-t-fast) var(--xm-ease);
}
.xm-textarea { min-height: 110px; resize: vertical; }
.xm-input::placeholder, .xm-textarea::placeholder { color: var(--xm-text-muted); }
.xm-input:focus, .xm-select:focus, .xm-textarea:focus {
  outline: none; border-color: var(--xm-primary);
  box-shadow: 0 0 0 4px var(--xm-primary-soft);
}
.xm-select {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A99AC' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
}
.xm-input-error { border-color: var(--xm-error); }
.xm-help { font-size: var(--xm-fs-xs); color: var(--xm-text-muted); }
.xm-error-text { font-size: var(--xm-fs-xs); color: var(--xm-error); font-weight: 600; }

/* -- 5.11 提示条 -- */
.xm-note {
  display: flex; align-items: flex-start; gap: var(--xm-s-3);
  padding: var(--xm-s-4) var(--xm-s-5);
  border-radius: var(--xm-r-md); font-size: var(--xm-fs-base); line-height: 1.7;
  background: var(--xm-primary-soft); color: var(--xm-text);
  border: 1px solid var(--xm-primary-soft-2);
}
.xm-note svg { width: 22px; height: 22px; flex: none; margin-top: 2px; color: var(--xm-primary-700); }
.xm-note-warn { background: var(--xm-warning-soft); border-color: #F7DFBE; }
.xm-note-warn svg { color: var(--xm-warning); }
.xm-note-error { background: var(--xm-error-soft); border-color: #F6CFCF; }
.xm-note-error svg { color: var(--xm-error); }
.xm-note-success { background: var(--xm-success-soft); border-color: #C6EBD9; }
.xm-note-success svg { color: var(--xm-success); }

/* -- 5.12 空状态 / 加载状态 -- */
.xm-empty { text-align: center; padding: var(--xm-s-12) var(--xm-s-6); color: var(--xm-text-muted); }
.xm-empty-art { width: 112px; height: 112px; margin: 0 auto var(--xm-s-4); opacity: .95; }
.xm-empty-art img, .xm-empty-art svg { width: 100%; height: 100%; }
/* 吉祥物统一圆形裁切：图本身自带品牌蓝描边 */
.xm-mascot-round { border-radius: 50%; object-fit: cover; }
.xm-empty-title { font-size: var(--xm-fs-lg); font-weight: 800; color: var(--xm-text); margin-bottom: 6px; }
.xm-empty-desc { font-size: var(--xm-fs-sm); color: var(--xm-text-muted); line-height: 1.7; }

/* 吉祥物加载动画（替代转圈） */
.xm-loading { display: flex; flex-direction: column; align-items: center; gap: var(--xm-s-3); padding: var(--xm-s-8) var(--xm-s-4); }
.xm-loading-mascot { width: 68px; height: 68px; animation: xm-bob 1.4s var(--xm-ease) infinite; }
.xm-loading-text { font-size: var(--xm-fs-sm); font-weight: 700; color: var(--xm-text-muted); }

/* 骨架屏 */
.xm-skel {
  background: linear-gradient(100deg, var(--xm-bg-deep) 30%, #F7FAFF 50%, var(--xm-bg-deep) 70%);
  background-size: 220% 100%; animation: xm-shimmer 1.4s linear infinite;
  border-radius: var(--xm-r-sm); min-height: 16px;
}

/* -- 5.13 弹窗 -- */
.xm-overlay {
  position: fixed; inset: 0; z-index: var(--xm-z-overlay);
  display: grid; place-items: center; padding: var(--xm-s-4);
  background: rgba(20, 35, 58, .48);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity var(--xm-t-base) var(--xm-ease), visibility var(--xm-t-base);
}
.xm-overlay.is-open { opacity: 1; visibility: visible; }
.xm-modal {
  width: 100%; max-width: 520px; max-height: 88vh; overflow: auto;
  background: var(--xm-surface); border-radius: var(--xm-r-xl);
  box-shadow: var(--xm-sh-lg); padding: var(--xm-s-8);
  transform: translateY(14px) scale(.97); transition: transform var(--xm-t-slow) var(--xm-ease-spring);
}
.xm-overlay.is-open .xm-modal { transform: translateY(0) scale(1); }
.xm-modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--xm-s-4); margin-bottom: var(--xm-s-5); }
.xm-modal-close {
  width: 40px; height: 40px; flex: none; border: none; cursor: pointer;
  border-radius: var(--xm-r-sm); background: var(--xm-surface-2); color: var(--xm-text-soft);
  display: grid; place-items: center; transition: background var(--xm-t-fast), color var(--xm-t-fast);
}
.xm-modal-close:hover { background: var(--xm-error-soft); color: var(--xm-error); }

/* -- 5.14 下拉菜单 -- */
.xm-dropdown {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: var(--xm-z-sticky);
  min-width: 220px; padding: var(--xm-s-2);
  background: var(--xm-surface); border: 1px solid var(--xm-border);
  border-radius: var(--xm-r-md); box-shadow: var(--xm-sh-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--xm-t-fast) var(--xm-ease), transform var(--xm-t-fast) var(--xm-ease), visibility var(--xm-t-fast);
}
.xm-dropdown.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.xm-dropdown a {
  display: flex; align-items: center; gap: var(--xm-s-3);
  min-height: 44px; padding: 9px 12px; border-radius: var(--xm-r-xs);
  color: var(--xm-text); font-size: var(--xm-fs-sm); font-weight: 600;
  transition: background var(--xm-t-fast), color var(--xm-t-fast);
}
.xm-dropdown a:hover { background: var(--xm-primary-soft); color: var(--xm-primary-700); }
.xm-dropdown a svg { width: 18px; height: 18px; color: var(--xm-text-muted); flex: none; }
.xm-dropdown a:hover svg { color: var(--xm-primary); }
.xm-dropdown hr { border: none; border-top: 1px solid var(--xm-border); margin: var(--xm-s-2) 0; }

/* 用户信息胶囊 */
.xm-user-chip {
  display: flex; align-items: center; gap: var(--xm-s-3);
  min-height: 48px; padding: 5px 14px 5px 6px; cursor: pointer;
  background: var(--xm-surface); border: 1px solid var(--xm-border);
  border-radius: var(--xm-r-pill); box-shadow: var(--xm-sh-xs);
  transition: box-shadow var(--xm-t-fast) var(--xm-ease), transform var(--xm-t-fast) var(--xm-ease);
}
.xm-user-chip:hover { box-shadow: var(--xm-sh-md); transform: translateY(-1px); }
.xm-avatar {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none;
  border: 2px solid var(--xm-surface); box-shadow: var(--xm-sh-xs); background: var(--xm-bg-deep);
}
.xm-avatar-fallback {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 900; color: #fff;
  background: var(--xm-grad-primary); font-size: var(--xm-fs-base);
}
.xm-user-name { font-size: var(--xm-fs-sm); font-weight: 800; color: var(--xm-text); line-height: 1.25; }
.xm-user-sub { font-size: var(--xm-fs-xs); color: var(--xm-text-muted); line-height: 1.25; }

/* -- 5.15 英雄区 -- */
.xm-hero {
  position: relative; overflow: hidden;
  border-radius: var(--xm-r-xl); padding: var(--xm-s-12) var(--xm-s-8);
  background: linear-gradient(150deg, #FFFFFF 0%, #F1F7FF 52%, #EAF1FD 100%);
  border: 1px solid var(--xm-border);
  box-shadow: var(--xm-sh-sm);
}
.xm-hero::before {
  content: ""; position: absolute; width: 420px; height: 420px; right: -120px; top: -170px;
  border-radius: 50%; background: radial-gradient(circle, rgba(46,84,161,.22), transparent 66%);
}
.xm-hero::after {
  content: ""; position: absolute; width: 300px; height: 300px; left: -110px; bottom: -150px;
  border-radius: 50%; background: radial-gradient(circle, rgba(155,89,182,.16), transparent 66%);
}
.xm-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .95fr); gap: var(--xm-s-8); align-items: center; }
.xm-hero-title { font-size: clamp(28px, 3.6vw, 42px); font-weight: 900; line-height: 1.2; letter-spacing: -.6px; }
.xm-hero-desc { margin-top: var(--xm-s-4); font-size: var(--xm-fs-lg); color: var(--xm-text-soft); line-height: var(--xm-lh-loose); max-width: 54ch; }
.xm-hero-actions { margin-top: var(--xm-s-6); display: flex; flex-wrap: wrap; gap: var(--xm-s-3); }
.xm-hero-art { display: grid; place-items: center; }
.xm-hero-art img, .xm-hero-art svg { width: 100%; max-width: 230px; height: auto; filter: drop-shadow(0 16px 30px rgba(46,84,161,.20)); }

/* 深色科技英雄区（C++ 场景） */
.xm-hero-ink {
  background: var(--xm-grad-ink);
  border-color: #24395A;
  color: #EAF2FC;
}
.xm-hero-ink::before { background: radial-gradient(circle, rgba(46,84,161,.4), transparent 68%); }
.xm-hero-ink::after  { background: radial-gradient(circle, rgba(126,211,33,.2), transparent 68%); }
.xm-hero-ink .xm-hero-desc { color: #B7C7DC; }
.xm-hero-ink .xm-hero-title { color: #fff; }
/* 网格底纹：科技感但不喧闹 */
.xm-grid-tex::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(ellipse at 30% 20%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse at 30% 20%, #000 20%, transparent 78%);
}

/* -- 5.16 代码块 -- */
.xm-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.xm-code {
  position: relative; background: var(--xm-code-bg); color: var(--xm-code-text);
  border-radius: var(--xm-r-md); padding: var(--xm-s-5) var(--xm-s-5) var(--xm-s-5) 62px;
  font-family: var(--xm-font-mono); font-size: 14.5px; line-height: 1.75;
  overflow: auto; border: 1px solid #1E2C42;
}
.xm-code code { font-family: inherit; white-space: pre; }
.xm-code .k { color: var(--xm-code-key); }
.xm-code .s { color: var(--xm-code-str); }
.xm-code .n { color: var(--xm-code-num); }
.xm-code .c { color: var(--xm-code-com); font-style: italic; }
.xm-code-lines {
  position: absolute; left: 0; top: var(--xm-s-5); width: 44px;
  text-align: right; padding-right: 12px; color: #4E6484; user-select: none;
}
.xm-inline-code {
  font-family: var(--xm-font-mono); font-size: .92em;
  background: var(--xm-primary-soft); color: var(--xm-primary-700);
  padding: 2px 6px; border-radius: 6px;
}

/* -- 5.17 排行榜 -- */
.xm-rank-list { display: flex; flex-direction: column; }
.xm-rank-row {
  display: flex; align-items: center; gap: var(--xm-s-3);
  padding: var(--xm-s-3) var(--xm-s-4); border-radius: var(--xm-r-md);
  transition: background var(--xm-t-fast) var(--xm-ease);
}
.xm-rank-row:hover { background: var(--xm-surface-2); }
.xm-rank-row + .xm-rank-row { border-top: 1px solid var(--xm-border); }
.xm-rank-no {
  width: 44px; height: 44px; flex: none; border-radius: 14px; white-space: nowrap;
  display: grid; place-items: center; font-weight: 900; font-size: var(--xm-fs-base);
  background: var(--xm-surface-2); color: var(--xm-text-soft);
}
.xm-rank-row.is-top1 .xm-rank-no { background: linear-gradient(140deg, #FFE38A, #F5B301); color: #5A3D00; box-shadow: 0 6px 14px rgba(245,179,1,.32); }
.xm-rank-row.is-top2 .xm-rank-no { background: linear-gradient(140deg, #E7EEF7, #B8C7DA); color: #3E4E63; }
.xm-rank-row.is-top3 .xm-rank-no { background: linear-gradient(140deg, #FFD3B0, #E39A5F); color: #5A2E00; }
.xm-rank-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.xm-rank-name { font-weight: 800; font-size: var(--xm-fs-base); color: var(--xm-text); line-height: 1.3; }
.xm-rank-sub { font-size: var(--xm-fs-xs); color: var(--xm-text-muted); line-height: 1.3; }
.xm-rank-score { margin-left: auto; font-weight: 900; color: var(--xm-primary-700); font-size: var(--xm-fs-lg); white-space: nowrap; }

/* -- 5.18 页脚 -- */
.xm-footer {
  margin-top: var(--xm-s-16); padding: var(--xm-s-8) 0 var(--xm-s-6);
  border-top: 1px solid var(--xm-border);
  background: linear-gradient(180deg, transparent, rgba(46,84,161,.045));
}
.xm-footer-links { display: flex; flex-wrap: wrap; gap: var(--xm-s-3) var(--xm-s-6); }
.xm-footer-links a { color: var(--xm-text-soft); font-size: var(--xm-fs-sm); font-weight: 600; }
.xm-footer-links a:hover { color: var(--xm-primary-700); }
.xm-footer-bottom { margin-top: var(--xm-s-5); font-size: var(--xm-fs-xs); color: var(--xm-text-muted); }

/* -- 5.19 提示气泡 / Toast -- */
.xm-toast {
  position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 20px);
  z-index: var(--xm-z-toast);
  display: flex; align-items: center; gap: var(--xm-s-3);
  padding: 14px 22px; border-radius: var(--xm-r-pill);
  background: var(--xm-ink); color: #fff; font-weight: 700; font-size: var(--xm-fs-sm);
  box-shadow: var(--xm-sh-lg); opacity: 0; visibility: hidden;
  transition: opacity var(--xm-t-base) var(--xm-ease), transform var(--xm-t-base) var(--xm-ease-spring), visibility var(--xm-t-base);
}
.xm-toast.is-open { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.xm-toast svg { width: 20px; height: 20px; }
.xm-toast-success { background: #1F7A4D; }
.xm-toast-error { background: #A83A3A; }

/* -- 5.20 工具类 -- */
.xm-mt-0{margin-top:0}.xm-mt-2{margin-top:var(--xm-s-2)}.xm-mt-4{margin-top:var(--xm-s-4)}
.xm-mt-6{margin-top:var(--xm-s-6)}.xm-mt-8{margin-top:var(--xm-s-8)}.xm-mt-12{margin-top:var(--xm-s-12)}
.xm-mb-0{margin-bottom:0}.xm-mb-2{margin-bottom:var(--xm-s-2)}.xm-mb-4{margin-bottom:var(--xm-s-4)}
.xm-mb-6{margin-bottom:var(--xm-s-6)}.xm-mb-8{margin-bottom:var(--xm-s-8)}
.xm-hidden{display:none !important}
.xm-center{text-align:center}
.xm-nowrap{white-space:nowrap}
.xm-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ═══ 6. 动效 ═══════════════════════════════════════════════════════════════ */
@keyframes xm-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(46,84,161,.45), var(--xm-sh-primary); }
  70%  { box-shadow: 0 0 0 16px rgba(46,84,161,0), var(--xm-sh-primary); }
  100% { box-shadow: 0 0 0 0 rgba(46,84,161,0), var(--xm-sh-primary); }
}
@keyframes xm-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-9px) rotate(2deg); }
}
@keyframes xm-shimmer {
  0%   { background-position: 130% 0; }
  100% { background-position: -130% 0; }
}
@keyframes xm-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes xm-pop-in {
  0%   { opacity: 0; transform: scale(.8); }
  60%  { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes xm-confetti-fall {
  0%   { transform: translateY(-12vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(102vh) rotate(620deg); opacity: 0; }
}
@keyframes xm-star-pop {
  0%   { opacity: 0; transform: scale(.4) rotate(-25deg); }
  45%  { opacity: 1; transform: scale(1.15) rotate(6deg); }
  100% { opacity: 0; transform: scale(.9) rotate(20deg); }
}

/* 页面进入：轻微上滑淡入（200–300ms） */
.xm-enter { animation: xm-fade-up var(--xm-t-slow) var(--xm-ease-out) both; }
.xm-enter-d1 { animation-delay: 60ms; }
.xm-enter-d2 { animation-delay: 120ms; }
.xm-enter-d3 { animation-delay: 180ms; }
.xm-enter-d4 { animation-delay: 240ms; }

/* 奖励：撒花 + 徽章弹出 */
.xm-confetti { position: fixed; inset: 0; pointer-events: none; z-index: var(--xm-z-toast); overflow: hidden; }
.xm-confetti i {
  position: absolute; top: 0; width: 10px; height: 16px; border-radius: 2px;
  animation: xm-confetti-fall linear forwards;
}
.xm-badge-pop { animation: xm-pop-in 520ms var(--xm-ease-spring) both; }
.xm-star-pop { animation: xm-star-pop 900ms var(--xm-ease-out) both; }

/* 数字滚动强调 */
.xm-countup { font-variant-numeric: tabular-nums; }

/* ═══ 7. 响应式 ═════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .xm-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xm-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xm-grid-auto-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xm-hero-inner { grid-template-columns: 1fr; }
  .xm-hero-art { order: -1; }
  .xm-hero-art img, .xm-hero-art svg { max-width: 220px; }
}
@media (max-width: 780px) {
  :root { --xm-fs-base: 16px; --xm-fs-lg: 17px; }
  .xm-wrap { padding: 0 var(--xm-s-4); }
  .xm-page { padding: var(--xm-s-6) 0 var(--xm-s-12); }
  .xm-grid-2, .xm-grid-3, .xm-grid-4, .xm-grid-auto, .xm-grid-auto-lg, .xm-grid-auto-3 { grid-template-columns: 1fr; }
  .xm-grid { gap: var(--xm-s-4); }
  .xm-card { padding: var(--xm-s-5); border-radius: var(--xm-r-md); }
  .xm-card-pad-lg { padding: var(--xm-s-5); }
  .xm-hero { padding: var(--xm-s-8) var(--xm-s-5); border-radius: var(--xm-r-lg); }
  .xm-brand-tag { display: none; }

  /* 移动端：顶栏允许横向滚动，导航绝不竖排换行 */
  .xm-topbar-inner { min-height: 60px; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; scrollbar-width: none; }
  .xm-topbar::before { background-size: 80% 100%, 70% 100%, 60% 100%; opacity: .85; }
  .xm-topbar-inner::-webkit-scrollbar { display: none; }
  .xm-brand { flex: none; }
  .xm-nav { flex-wrap: nowrap; flex: none; }
  .xm-nav-link { white-space: nowrap; padding: 8px 12px; }
  .xm-spacer { min-width: 8px; }
  .xm-hero-actions .xm-btn { width: 100%; }

  /* 地图改为单列，节点在左 */
  .xm-map::before { left: 34px; transform: none; }
  .xm-map-row, .xm-map-row.is-right { flex-direction: row; text-align: left; }
  .xm-map-row.is-right .xm-node-card { align-items: flex-start; }
  .xm-map-row.is-right .xm-node-meta { flex-direction: row; }
  .xm-map-node { width: 64px; height: 64px; }
  .xm-map-node svg { width: 26px; height: 26px; }
  .xm-map-node small { font-size: 10px; }

  .xm-modal { padding: var(--xm-s-5); border-radius: var(--xm-r-lg); }
  .xm-modal-close { width: 44px; height: 44px; }
}

/* ═══ 8. 无障碍与偏好 ═══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  /* 顶栏粒子在“减少动态效果”下彻底停住（全局规则已把时长压到 0.001ms，这里显式关掉更明确） */
  .xm-topbar::before { animation: none !important; }   /* 减少动态：光晕静止，仍保留层次 */
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}
@media (prefers-contrast: more) {
  :root { --xm-text-soft: #3B4C60; --xm-text-muted: #5A6B7F; --xm-border: #C3D2E4; }
}
@media print {
  .xm-topbar, .xm-footer, .xm-fab, .xm-confetti { display: none !important; }
  body.xm-body { background: #fff; }
}


/* ══════════════════════════════════════════════════════════════════════════
   主题系统：明亮（默认） / 深色科技
   切换方式：<html data-theme="dark">  —— 由顶部栏切换器写入，localStorage 记忆
   所有组件都走令牌，所以这里只需重定义令牌，全站自动生效。
   ══════════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  color-scheme: dark;

  /* -- 底色：与 /cpp/ hero 同一套墨色语言 -- */
  --xm-bg:        #0B1421;
  --xm-bg-deep:   #0A111C;
  --xm-surface:   #141F33;
  --xm-surface-2: #1B2740;
  --xm-border:    #26354F;
  --xm-border-strong: #34486B;

  /* -- 文字：深底上的三级灰 -- */
  --xm-text:       #E9F0FA;   /* 13.6:1 @ 深底 */
  --xm-text-soft:  #B4C4DA;   /*  8.4:1 */
  --xm-text-muted: #8FA3BE;   /*  5.6:1 —— 仍达 AA */

  /* -- 主色：深色下用亮一档的蓝，保证按钮与链接对比度 -- */
  --xm-primary:        #3D7BE0;
  --xm-primary-600:    #5A93EA;
  --xm-primary-700:    #7FB0F2;
  --xm-primary-bright: #6BA5F0;
  --xm-primary-soft:   #17263F;
  --xm-primary-soft-2: #1E3355;

  /* -- 浅色底彩色胶囊在深色下改为「彩色描边 + 亮字」，避免浅色块刺眼 -- */
  --xm-orange-soft: rgba(255, 179, 71, .16);
  --xm-green-soft:  rgba(126, 211, 33, .16);
  --xm-purple-soft: rgba(155, 89, 182, .18);
  --xm-pink-soft:   rgba(255, 122, 156, .16);
  --xm-yellow-soft: rgba(255, 217, 61, .16);
  --xm-error-soft:  rgba(224, 82, 82, .16);
  --xm-success-soft: rgba(47, 174, 107, .16);
  --xm-warning-soft: rgba(232, 145, 43, .16);

  /* 这些「-deep」在浅色下是深字配浅底；深色下要反过来配亮字 */
  --xm-orange-deep: #FFC46B;
  --xm-green-deep:  #A8E063;
  --xm-purple-deep: #C89BDB;
  --xm-pink-deep:   #FF9BB4;
  --xm-yellow-deep: #FFD93D;
  --xm-success:     #4FD08A;
  --xm-warning:     #F0A94B;
  --xm-error:       #FF7A7A;

  /* -- 阴影：深色下靠描边和更深的投影 -- */
  --xm-sh-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --xm-sh-sm: 0 2px 10px rgba(0, 0, 0, .45);
  --xm-sh-md: 0 8px 24px rgba(0, 0, 0, .5);
  --xm-sh-lg: 0 18px 44px rgba(0, 0, 0, .6);
  --xm-sh-primary: 0 10px 24px rgba(61, 123, 224, .38);

  /* -- 页面底色光晕：深色下用更弱的亮度 -- */
  --xm-grad-glow: radial-gradient(1100px 520px at 8% 0%, rgba(61,123,224,.14), transparent 68%),
                  radial-gradient(900px 460px at 96% 18%, rgba(126,211,33,.06), transparent 66%),
                  radial-gradient(900px 620px at 50% 106%, rgba(155,89,182,.10), transparent 68%),
                  linear-gradient(180deg, #0C1626 0%, #0B1421 55%, #0C1626 100%);
  --xm-page-tint: #0B1421;

  /* 代码块在深色下与 hero 一致 */
  --xm-code-bg: #0D1524;
}
/* 深色下 hero 的浅色版本改为深色，避免大白块 */
html[data-theme="dark"] {
  --xm-grad-header: linear-gradient(135deg, #1E3355 0%, #16253D 60%, #131F33 100%);
}
html[data-theme="dark"] .xm-hero {
  background: linear-gradient(150deg, #16233A 0%, #131F33 55%, #16233A 100%);
  border-color: #26354F;
}
html[data-theme="dark"] .xm-hero-title { color: #fff; }
html[data-theme="dark"] .xm-hero-desc { color: var(--xm-text-soft); }
html[data-theme="dark"] .xm-topbar {
  background: rgba(16, 26, 43, .72);
  border-bottom-color: rgba(255, 255, 255, .08);
}
html[data-theme="dark"] .xm-topbar::after {
  background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 100%);
}
html[data-theme="dark"] .xm-modal,
html[data-theme="dark"] .xm-dropdown { background: var(--xm-surface); }

/* 主题切换按钮 */
.xm-theme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none; cursor: pointer;
  border: 1px solid var(--xm-border); border-radius: var(--xm-r-sm);
  background: var(--xm-surface); color: var(--xm-text-soft);
  transition: background var(--xm-t-fast) var(--xm-ease), color var(--xm-t-fast), border-color var(--xm-t-fast);
}
.xm-theme-btn:hover { background: var(--xm-primary-soft); color: var(--xm-primary-700); border-color: var(--xm-primary); }
.xm-theme-btn svg { width: 20px; height: 20px; }