/* DayFlow · 官网 · 全站样式
   ---------------------------------------
   设计原则：
   - 极简 · 大量留白 · 深色主色调 (#0A1744) 与品牌 App 一致
   - 无 JS 依赖也能读，任何浏览器都能开
   - 响应式：<640px 单栏，≥640px 三栏

   ⛔ 主题化铁律（改样式前必读）：
   1. 颜色一律走 var(--*)，禁止再写裸色值 —— 否则深色模式下必然出现
      「浅底 + 浅字」或「深底 + 深字」。
   2. ⛔⛔ --primary 只用于**前景**（标题、链接文字）。凡是「实心色块 +
      白字」的场景必须用 --fill-strong / --on-fill 这一对。
      原因：深色模式下前景要变亮、实心底要保持深色，两者方向相反，
      共用一个令牌就没法同时满足。
   3. 深色覆盖统一写在文件末尾的 [data-theme="dark"] 段落里，不要散落。
*/

:root {
  color-scheme: light;

  --primary: #0A1744;
  --primary-2: #1E293B;
  --accent: #2563EB;
  --ink: #0F172A;
  --ink2: #334155;
  --muted: #64748B;
  --divider: #E2E8F0;
  --surface: #FFFFFF;
  --bg: #F8FAFC;
  --bg2: #EEF2F7;
  --danger: #DC2626;
  --success: #059669;

  /* 实心色块（品牌底 + 反色字）—— ⛔ 与 --primary 不可混用，见文件头铁律 2 */
  --fill-strong: #0A1744;
  --on-fill: #FFFFFF;
  --on-fill-dim: rgba(255, 255, 255, 0.95);
  --on-fill-check: #4ADE80;

  /* 强调色的各级淡底 */
  --tint: rgba(37, 99, 235, 0.08);
  --tint-soft: rgba(37, 99, 235, 0.06);
  --ring: rgba(37, 99, 235, 0.12);
  --dot-idle: rgba(10, 23, 68, 0.2);

  /* 截图卡片 */
  --img-bd: rgba(15, 23, 42, 0.08);
  --img-bd-hover: rgba(76, 111, 255, 0.35);

  /* 状态徽标（hub.css 的 .hub-status 用） */
  --badge-warn-bg: #FEF3C7;
  --badge-warn-fg: #92400E;
  --badge-ok-bg: #D1FAE5;
  --badge-ok-fg: #065F46;

  /* 开发日志的平台徽标 */
  --tag-ios: #0F172A;
  --tag-android: #059669;
  --tag-macos: #2563EB;
  --tag-windows: #7C3AED;
  --tag-site: #B45309;
  --tag-core: #475569;
  --tag-bd: #CBD5E1;

  --radius: 12px;
  --radius-lg: 20px;
  --shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 8px 32px rgba(15, 23, 42, 0.12);
  --shadow-card: 0 12px 40px rgba(15, 23, 42, 0.16);
  --shadow-card-hover: 0 20px 60px rgba(15, 23, 42, 0.28);
  --shadow-btn: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-btn-hover: 0 6px 18px rgba(15, 23, 42, 0.16);
  --max-w: 1100px;
}


* { box-sizing: border-box; margin: 0; padding: 0; }

/* ⛔ 不能写 `html { scroll-behavior: smooth }`：它会让浏览器在「跨页面导航
   的滚动位置恢复」时也平滑动画 —— 新页面加载时先恢复到旧滚动位、再平滑滚回
   顶部，叠加 JS 挂载主题按钮/TOC 网格的布局偏移，就会出现「跳过去又跳回来」
   的抖动。:focus-within 模式只在用户点击/聚焦时平滑，页面加载与程序化滚动
   保持即时，是兼顾锚点平滑与无抖动导航的标准做法。 */
html:focus-within { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

/* ─── Header ─────────────────────────── */
header {
  background: var(--surface);
  border-bottom: 1px solid var(--divider);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: saturate(180%) blur(10px);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 18px;
  color: var(--primary);
  text-decoration: none;
}
.brand-mark {
  width: 32px;
  height: 32px;
  background: var(--fill-strong);
  color: var(--on-fill);
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 18px;
}
.nav-links {
  display: flex;
  align-items: center;   /* 所有项垂直居中，避免胶囊/分隔线/EN 按钮错位 */
  gap: 8px;              /* 参照首页 .badges 的紧凑间距 */
  font-size: 14px;
  /* 主题开关由 site.js 在 DOM 就绪后注入。预留固定槽位并禁止换行，
     避免可见性面板增加「全部作品」后，切换主题时导航重新排版跳动。 */
  min-width: 0;
  flex: 1 1 auto;
  justify-content: flex-end;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  /* Reserve one slot for the language pill. The theme toggle is absolutely
     positioned immediately before it, so the visual order stays theme → language. */
  padding-right: 56px;
  position: relative;
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
  color: var(--ink2);
  text-decoration: none;
}
.nav-links a:hover {
  color: var(--primary);
}
.nav-links a.lang-switch {
  padding: 6px 12px;     /* 与普通 tab 等高，垂直对齐 */
  border: 1px solid var(--divider);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.5px;
}
.nav-links a.lang-switch:hover {
  background: var(--fill-strong);
  color: var(--on-fill);
  text-decoration: none;
  border-color: var(--primary);
}
/* 返回作品集：固定在导航最左，与站内锚点/页面链接视觉区分 */
.nav-links a.nav-back {
  padding: 6px 14px 6px 0;  /* 与普通 tab 等高，垂直对齐 */
  border-right: 1px solid var(--divider);
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}
.nav-links a.nav-back:hover {
  color: var(--primary);
}

/* 移动端汉堡菜单按钮（JS 注入，桌面端隐藏） */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--divider);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.nav-toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ─── Hero ─────────────────────────── */
.hero {
  padding: 80px 0 60px;
  text-align: center;
}
.hero h1 {
  font-size: 44px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 18px;
  line-height: 1.2;
}
.hero .sub {
  font-size: 18px;
  color: var(--ink2);
  margin-bottom: 32px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.hero .badges {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 100px;
  font-size: 13px;
  color: var(--ink2);
}

.cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
  border: none;
  cursor: pointer;
}
.btn-primary {
  background: var(--fill-strong);
  color: var(--on-fill);
}
.btn-primary:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}
.btn-outline {
  background: var(--surface);
  color: var(--primary);
  border: 1.5px solid var(--divider);
}
.btn-outline:hover {
  text-decoration: none;
  border-color: var(--primary);
}

/* ─── Screenshots Section · Carousel ─────────────────────────── */
.screens {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  overflow: hidden;
}
.carousel {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  /* 上下预留足够内边距：卡片 hover 放大到 scale(1.18) 时，上下溢出部分落在
     这个 padding 区内而不是被 overflow:hidden 裁掉（左右仍裁，保证横向位移不撑破）。 */
  padding: 56px 60px 48px;
  overflow: hidden;                       /* 让 transform 横向位移不撑破 */
  touch-action: pan-y;                    /* 关键：横向手势交给 JS，纵向浏览器滚 */
  -webkit-user-select: none;
  user-select: none;
}
.carousel-track {
  display: flex;
  gap: 24px;
  padding: 8px 0;
  will-change: transform;
  /* transform / transition 由 JS 控制 */
}
.carousel-track::-webkit-scrollbar { display: none; }
.screen-card {
  flex: 0 0 auto;
  width: 260px;
  text-align: center;
  margin: 0;
  cursor: pointer;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
  opacity: 0.55;
}
.screen-card.is-active {
  transform: scale(1.05);
  opacity: 1;
}
.screen-card:hover {
  opacity: 1;
  transform: scale(1.12);
  z-index: 3;
}
.screen-card.is-active:hover {
  transform: scale(1.18);
}
.screen-card img {
  width: 100%;
  aspect-ratio: 9 / 19.5;
  object-fit: cover;
  object-position: top;
  border-radius: 28px;
  border: 1px solid var(--img-bd);
  box-shadow: var(--shadow-card);
  background: var(--surface);
  display: block;
  transition: box-shadow 0.28s ease, border-color 0.28s ease;
}
.screen-card:hover img {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--img-bd-hover);
}
.screen-card figcaption {
  margin-top: 14px;
  font-size: 14px;
  color: var(--ink2);
  font-weight: 500;
}
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--divider);
  background: var(--surface);
  color: var(--primary);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 600;
  box-shadow: var(--shadow-btn);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  z-index: 2;
  user-select: none;
}
.carousel-btn:hover {
  background: var(--fill-strong);
  color: var(--on-fill);
  transform: translateY(-50%) scale(1.05);
  box-shadow: var(--shadow-btn-hover);
}
.carousel-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: translateY(-50%);
  background: var(--surface);
  color: var(--primary);
}
.carousel-prev { left: 8px; }
.carousel-next { right: 8px; }
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}
.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--dot-idle);
  cursor: pointer;
  transition: background 0.15s, transform 0.15s, width 0.2s;
}
.carousel-dot.is-active {
  background: var(--accent);
  width: 22px;
  border-radius: 4px;
}
@media (max-width: 900px) {
  .carousel { padding: 44px 44px 36px; }
  .screen-card { width: 220px; }
}
@media (max-width: 640px) {
  .carousel { padding: 8px 12px 4px; }      /* 移动端不 hover 放大，无需大留白 */
  .carousel-btn { display: none; }  /* 手机端隐藏箭头，用手指滑 */
  .screen-card {
    width: 74vw;
    max-width: 300px;
    opacity: 1;              /* 移动端所有卡都清晰 */
  }
  .screen-card.is-active { transform: none; }
  .screen-card:hover,
  .screen-card.is-active:hover { transform: none; }   /* 移动端触摸不放大 */
  .screen-card img { border-radius: 22px; }
  .screen-card figcaption { font-size: 13px; margin-top: 10px; }
  .carousel-track { gap: 14px; padding-left: 8px; padding-right: 8px; }
}

/* ─── Features Section ─────────────────────────── */
.section {
  padding: 60px 0;
}
.section h2 {
  font-size: 28px;
  font-weight: 700;
  color: var(--primary);
  text-align: center;
  margin-bottom: 12px;
}
.section .lead {
  font-size: 15px;
  color: var(--muted);
  text-align: center;
  margin-bottom: 48px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 800px) {
  .grid-3 { grid-template-columns: 1fr; }
}

.card {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.card-icon {
  width: 44px;
  height: 44px;
  background: var(--tint);
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 22px;
  margin-bottom: 14px;
}
.card h3 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--ink);
}
.card p {
  font-size: 14px;
  color: var(--ink2);
  line-height: 1.6;
}

/* ─── Privacy Promise ─────────────────────────── */
.promise {
  background: var(--fill-strong);
  color: var(--on-fill);
  padding: 60px 0;
  margin: 40px 0;
}
.promise h2 {
  color: var(--on-fill);
  font-size: 28px;
  margin-bottom: 32px;
  text-align: center;
}
.promise-list {
  max-width: 640px;
  margin: 0 auto;
  list-style: none;
}
.promise-list li {
  position: relative;
  padding: 10px 0 10px 28px;
  font-size: 15px;
  color: var(--on-fill-dim);
}
.promise-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 10px;
  color: var(--on-fill-check);
  font-weight: 700;
}
/* 承诺区是深底（fill-strong），全局 a 的 accent 蓝压上去对比度不足，
   这里单独用亮色链接，hover 变白，下划线轻一点。
   ⛔ li 不能用 display:flex——会把行内 <a> 块级化成独立 flex 项并压成一字宽，
   导致「隐私政策第六节」逐字竖排。用 block + 绝对定位勾号，链接保持行内。 */
.promise-list a,
.promise-list a:visited {
  color: #9DB4FF;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.promise-list a:hover {
  color: #FFFFFF;
}

/* ─── Footer ─────────────────────────── */
footer {
  background: var(--surface);
  border-top: 1px solid var(--divider);
  padding: 32px 0;
  margin-top: 60px;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13px;
  color: var(--muted);
}
.footer-inner a {
  color: var(--muted);
  margin: 0 8px;
}
.footer-inner a:hover {
  color: var(--primary);
}

/* ─── Legal / Manual Page ─────────────────────────── */
.doc {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 48px 32px;
  margin: 40px 0;
  box-shadow: var(--shadow);
  line-height: 1.75;
}
.doc h1 {
  color: var(--primary);
  font-size: 32px;
  margin-bottom: 8px;
}
.doc .meta {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--divider);
}
.doc h2 {
  color: var(--primary);
  font-size: 20px;
  margin: 32px 0 12px;
  padding-top: 12px;
}
.doc h3 {
  color: var(--ink);
  font-size: 16px;
  margin: 20px 0 8px;
  font-weight: 600;
}
.doc p {
  color: var(--ink2);
  margin-bottom: 12px;
}
.doc ul {
  color: var(--ink2);
  padding-left: 20px;
  margin-bottom: 12px;
}
.doc ul li { margin: 4px 0; }
.doc .callout {
  background: var(--tint-soft);
  border-left: 3px solid var(--accent);
  padding: 12px 16px;
  border-radius: 6px;
  color: var(--ink2);
  margin: 16px 0;
}
.doc hr {
  border: 0;
  border-top: 1px solid var(--divider);
  margin: 24px 0;
}
.doc .anchor-nav {
  background: var(--bg);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 24px;
  font-size: 13px;
}
.doc .anchor-nav a {
  display: inline-block;
  margin-right: 12px;
  color: var(--ink2);
}

/* ─── Code blocks & tables (AI setup guide) ─────────── */
.doc pre {
  background: var(--bg);
  border: 1px solid var(--divider);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 12px 0;
  overflow-x: auto;
}
.doc pre code {
  font-family: "SF Mono", "Fira Code", "Menlo", "Consolas", monospace;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.6;
  white-space: pre;
}
.doc .table-wrap {
  overflow-x: auto;
  margin: 12px 0;
  border-radius: 8px;
  border: 1px solid var(--divider);
}
.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.doc table th {
  background: var(--bg);
  color: var(--ink);
  font-weight: 600;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--divider);
  white-space: nowrap;
}
.doc table td {
  color: var(--ink2);
  padding: 8px 14px;
  border-bottom: 1px solid var(--divider);
}
.doc table tr:last-child td {
  border-bottom: none;
}
.doc table tbody tr:nth-child(even) {
  background: var(--bg);
}

/* ─── Timeline · 开发日志时间轴 ─────────────────────────── */
/* 结构：.timeline > .tl-item > (.tl-dot + .tl-body)
   竖线由 .timeline::before 一整条画出，不是每个 item 各画一段，
   这样 item 间距变化时线不会断开。 */
.timeline {
  position: relative;
  margin: 24px 0 8px;
  padding-left: 28px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--divider);
}
.tl-item {
  position: relative;
  padding-bottom: 28px;
}
.tl-item:last-child { padding-bottom: 4px; }
.tl-dot {
  position: absolute;
  left: -28px;
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--muted);
  box-sizing: border-box;
}
/* 里程碑（大版本 / 关键节点）：实心主色 + 光圈 */
.tl-item.is-major .tl-dot {
  width: 14px;
  height: 14px;
  left: -29px;
  top: 4px;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--ring);
}
/* 尚未发生 / 待定：虚线空心点 */
.tl-item.is-pending .tl-dot {
  border-style: dashed;
  background: var(--bg);
}
.tl-date {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}
.tl-item.is-major .tl-date { color: var(--accent); }
.tl-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 6px;
  line-height: 1.45;
}
.tl-item.is-major .tl-title { color: var(--primary); font-size: 17px; }
.timeline .tl-body p {
  color: var(--ink2);
  font-size: 14px;
  margin: 0 0 6px;
}
.timeline .tl-body ul {
  color: var(--ink2);
  font-size: 14px;
  padding-left: 18px;
  margin: 4px 0 0;
}
.timeline .tl-body ul li { margin: 3px 0; }
/* 平台标签：这次改动落在哪些端 */
.tl-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
}
.tl-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--divider);
  letter-spacing: 0.2px;
}
.tl-tag.ios     { color: var(--tag-ios);     border-color: var(--tag-bd); }
.tl-tag.android { color: var(--tag-android); border-color: currentColor; }
.tl-tag.macos   { color: var(--tag-macos);   border-color: currentColor; }
.tl-tag.windows { color: var(--tag-windows); border-color: currentColor; }
.tl-tag.site    { color: var(--tag-site);    border-color: currentColor; }
.tl-tag.core    { color: var(--tag-core);    border-color: var(--tag-bd); }

/* 阶段分组标题：把 3 个月的节点切成几段，避免一长串读不下去 */
.tl-phase {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 36px 0 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--divider);
}
.tl-phase h2 {
  font-size: 18px !important;
  color: var(--primary);
  margin: 0 !important;
  padding: 0 !important;
}
.tl-phase .tl-phase-range {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

/* 顶部统计条 */
.tl-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 8px;
}
.tl-stat {
  flex: 1 1 120px;
  background: var(--bg);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.tl-stat .n {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.2;
}
.tl-stat .l {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* ─── Small tweaks ─────────────────────────── */
@media (max-width: 640px) {
  .container { padding: 0 16px; }

  /* Header - 汉堡菜单 */
  header { position: sticky; }
  .nav {
    padding: 10px 0;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    position: relative;
  }
  .brand { font-size: 15px; gap: 8px; white-space: nowrap; }
  .brand-mark { width: 26px; height: 26px; font-size: 14px; border-radius: 6px; }
  .nav-toggle { display: flex; margin-left: auto; }
  .nav-links {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: 100%;
    font-size: 15px;
    padding: 10px 0 4px;
    border-top: 1px solid var(--divider);
    margin-top: 10px;
    flex: 0 0 100%;
    padding-right: 0;
    overflow: visible;
    white-space: normal;
    justify-content: initial;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    white-space: nowrap;
    text-align: left;
  }
  .nav-links a.nav-back {
    padding: 10px 12px;
    border-right: none;
    border-bottom: 1px solid var(--divider);
    border-radius: 0;
    margin-bottom: 4px;
  }
  .nav-links a.lang-switch {
    text-align: center;
    margin-top: 4px;
    padding: 10px 12px;
  }
  /* 覆盖 site.css 里的胶囊 hover 样式，移动端用整行块。
     ⛔ 必须用更高选择器优先级：site.css 的 .nav-links a:not(...):not(...) 是 (0,3,0)，
        这里用 .nav .nav-links a 提升到 (0,2,1) ≈ 不够，得用 (0,4,0) 才压得住。 */
  .nav .nav-links a:not(.lang-switch):not(.nav-back) {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    text-align: left;
  }
  .nav .nav-links a[aria-current="page"] {
    border-radius: 8px;
  }

  /* Hero */
  .hero { padding: 40px 0 32px; }
  .hero h1 { font-size: 28px; line-height: 1.25; }
  .hero .sub { font-size: 15px; margin-bottom: 22px; padding: 0 4px; }
  .hero .badges { gap: 8px; margin-bottom: 28px; }
  .badge { font-size: 12px; padding: 5px 10px; }
  .cta { gap: 10px; }
  .btn { padding: 11px 18px; font-size: 14px; width: 100%; justify-content: center; }
  .cta .btn { flex: 1 1 100%; }

  /* Section */
  .section { padding: 40px 0; }
  .section h2 { font-size: 22px; }
  .section .lead { font-size: 14px; margin-bottom: 28px; }
  .grid-3 { gap: 14px; }
  .card { padding: 20px; border-radius: 16px; }
  .card h3 { font-size: 16px; }
  .card p { font-size: 13.5px; }

  /* Promise */
  .promise { padding: 40px 0; margin: 24px 0; }
  .promise h2 { font-size: 22px; margin-bottom: 20px; }
  .promise-list li { font-size: 14px; }

  /* Footer */
  footer { padding: 24px 0; margin-top: 40px; }
  .footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    font-size: 12px;
  }
  .footer-inner a { margin: 0 6px; }

  /* Doc pages（隐私 / 手册 / 支持 / 条款） */
  .doc { padding: 24px 18px; margin: 20px 0; border-radius: 14px; }
  .doc h1 { font-size: 24px; }
  .doc h2 { font-size: 17px; margin: 24px 0 10px; }
  .doc h3 { font-size: 15px; }
  .doc p, .doc ul { font-size: 14px; }
  .doc .anchor-nav { font-size: 12px; padding: 10px 14px; }
  .doc .anchor-nav a { margin-right: 10px; margin-bottom: 4px; }
  .doc .callout { font-size: 13px; padding: 10px 14px; }
  .doc pre { padding: 10px 12px; }
  .doc pre code { font-size: 12px; }
  .doc table { font-size: 12px; }
  .doc table th, .doc table td { padding: 6px 10px; }

  /* Timeline */
  .timeline { padding-left: 22px; }
  .timeline::before { left: 4px; }
  .tl-dot { left: -22px; width: 10px; height: 10px; }
  .tl-item.is-major .tl-dot { left: -23px; width: 12px; height: 12px; }
  .tl-item { padding-bottom: 22px; }
  .tl-title { font-size: 15px; }
  .tl-item.is-major .tl-title { font-size: 16px; }
  .timeline .tl-body p, .timeline .tl-body ul { font-size: 13px; }
  .tl-phase { margin: 28px 0 4px; flex-direction: column; gap: 2px; }
  .tl-phase h2 { font-size: 16px !important; }
  .tl-stat { flex: 1 1 calc(50% - 5px); padding: 10px 12px; }
  .tl-stat .n { font-size: 19px; }
  .tl-tag { font-size: 10px; padding: 2px 7px; }
}

/* iOS 小屏 (iPhone SE 375px 及以下) */
@media (max-width: 380px) {
  .hero h1 { font-size: 24px; }
  .brand { font-size: 14px; }
  .nav-links { font-size: 14px; }
}


/* ═══════════════════════════════════════════════════════════
   深色模式 · 令牌覆盖
   ───────────────────────────────────────────────────────────
   两条生效路径，⛔ 必须都留着：
   1. html[data-theme="dark"]           —— 用户手动拨了开关
   2. prefers-color-scheme + :not([data-theme])
                                        —— 用户没拨过，跟随系统
   ⭐ 所有覆盖只改 :root 里的令牌值，不碰任何组件选择器 ——
      组件已经全部走 var()，改令牌即全站生效。
   ⛔ 新增令牌时必须两处同步，漏一处就会「手动切没事、跟随系统翻车」。
   ═══════════════════════════════════════════════════════════ */

html[data-theme="dark"] {
  color-scheme: dark;

  /* 前景：深色下要提亮，与 --fill-strong 走反方向 */
  --primary: #A8C0FF;
  --primary-2: #CBD5E1;
  --accent: #7F9AF5;
  --ink: #F2F2F7;
  --ink2: #C7C7CC;
  --muted: #98989F;
  --divider: #38383C;
  --surface: #1C1C1F;
  --bg: #000000;
  --bg2: #121215;
  --danger: #FF6B6B;
  --success: #34D399;

  /* 实心色块：深色下继续保持深底白字（品牌区块不反色） */
  --fill-strong: #16213E;
  --on-fill: #F2F2F7;
  --on-fill-dim: rgba(242, 242, 247, 0.92);
  --on-fill-check: #34D399;

  --tint: rgba(127, 154, 245, 0.14);
  --tint-soft: rgba(127, 154, 245, 0.10);
  --ring: rgba(127, 154, 245, 0.22);
  --dot-idle: rgba(242, 242, 247, 0.24);

  --img-bd: rgba(242, 242, 247, 0.10);
  --img-bd-hover: rgba(127, 154, 245, 0.45);

  --badge-warn-bg: rgba(251, 191, 36, 0.16);
  --badge-warn-fg: #FBBF24;
  --badge-ok-bg: rgba(52, 211, 153, 0.16);
  --badge-ok-fg: #34D399;

  --tag-ios: #E5E7EB;
  --tag-android: #34D399;
  --tag-macos: #7F9AF5;
  --tag-windows: #C4A5FF;
  --tag-site: #FBBF24;
  --tag-core: #A1A1AA;
  --tag-bd: #4B4B50;

  /* 深色下阴影要更重，否则卡片与背景分不开 */
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-card: 0 12px 40px rgba(0, 0, 0, 0.55);
  --shadow-card-hover: 0 20px 60px rgba(0, 0, 0, 0.7);
  --shadow-btn: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-btn-hover: 0 6px 18px rgba(0, 0, 0, 0.6);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    color-scheme: dark;

    --primary: #A8C0FF;
    --primary-2: #CBD5E1;
    --accent: #7F9AF5;
    --ink: #F2F2F7;
    --ink2: #C7C7CC;
    --muted: #98989F;
    --divider: #38383C;
    --surface: #1C1C1F;
    --bg: #000000;
    --bg2: #121215;
    --danger: #FF6B6B;
    --success: #34D399;

    --fill-strong: #16213E;
    --on-fill: #F2F2F7;
    --on-fill-dim: rgba(242, 242, 247, 0.92);
    --on-fill-check: #34D399;

    --tint: rgba(127, 154, 245, 0.14);
    --tint-soft: rgba(127, 154, 245, 0.10);
    --ring: rgba(127, 154, 245, 0.22);
    --dot-idle: rgba(242, 242, 247, 0.24);

    --img-bd: rgba(242, 242, 247, 0.10);
    --img-bd-hover: rgba(127, 154, 245, 0.45);

    --badge-warn-bg: rgba(251, 191, 36, 0.16);
    --badge-warn-fg: #FBBF24;
    --badge-ok-bg: rgba(52, 211, 153, 0.16);
    --badge-ok-fg: #34D399;

    --tag-ios: #E5E7EB;
    --tag-android: #34D399;
    --tag-macos: #7F9AF5;
    --tag-windows: #C4A5FF;
    --tag-site: #FBBF24;
    --tag-core: #A1A1AA;
    --tag-bd: #4B4B50;

    --shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
    --shadow-card: 0 12px 40px rgba(0, 0, 0, 0.55);
    --shadow-card-hover: 0 20px 60px rgba(0, 0, 0, 0.7);
    --shadow-btn: 0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-btn-hover: 0 6px 18px rgba(0, 0, 0, 0.6);
  }
}

/* 主题切换时整页做一次柔和过渡（不含 transform，避免影响动画组件） */
body,
header,
footer,
.doc,
.card,
.hub-card,
.screen-card img {
  transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}