/* ============================================================
   Spacely 官网 · 共用样式
   设计语言来源：docs/DESIGN-Spacely.md §1（深色 token 全量映射）
   零构建 / 零依赖 / 零第三方请求（不引 CDN、不引 Google Fonts）
   ============================================================ */

/* ---------- 1. Design tokens（对齐 DESIGN-Spacely.md §1.1–§1.3 深色主题） ---------- */
:root {
  /* 背景与面板 */
  --bg:        #0B0F14;                                   /* color.bg.screen */
  --panel:     #121A24;                                   /* color.bg.panel  */
  --panel-2:   #0E141C;                                   /* hero 渐变末端    */
  --hero:      linear-gradient(160deg, #141C26, #0E141C); /* color.bg.hero   */
  --chip:      rgba(255,255,255,.04);                     /* color.bg.chip   */
  --track:     #1E2A38;                                   /* color.bg.track  */

  /* 描边 */
  --bd1: rgba(255,255,255,.06);                           /* color.border.1 */
  --bd2: rgba(255,255,255,.10);                           /* color.border.2 */

  /* 文本 */
  --t1: #E6EDF3;   /* color.text.1 主文本 */
  --t2: #7A8794;   /* color.text.2 次文本（对比度 ≈5.0:1，正文可用） */
  --t3: #5A6B78;   /* color.text.3 弱文本（≈3.4:1，仅用于非关键微型信息） */

  /* 强调色（颜色即语义：cyan=清理/主动作，blue=信息只读，good=成功） */
  --cyan: #22D3EE;
  --blue: #3B82F6;
  --soft: rgba(34,211,238,.12);
  --on-accent: #04141A;
  --good: #4ADE80;
  --warn: #FBBF24;
  --danger: #F87171;

  /* 圆角 */
  --r-chip: 8px;  --r-card: 15px;  --r-hero: 22px;  --r-btn: 14px;  --r-pill: 999px;

  /* 间距 */
  --s-xs: 4px; --s-s: 8px; --s-m: 12px; --s-l: 18px; --s-xl: 22px;

  /* 版式 */
  --pad: 22px;
  --maxw: 1120px;

  /* 字族：优先本地安装的品牌字体（Chivo / JetBrains Mono），否则系统栈兜底。
     刻意不引 Google Fonts —— 一个宣称"零网络、零第三方"的产品，
     其官网也不应把访客 IP 送给第三方字体服务。 */
  --font-sans: "Chivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
               Consolas, "Liberation Mono", "Courier New", monospace;
}

/* ---------- 2. Reset / 基础 ---------- */
* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--t1);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

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

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

/* 联系邮箱的处理方式，以及一条踩过的坑。

   托管前置的 Cloudflare 开着 Scrape Shield 的 Email Obfuscation，会把邮箱改写成
   /cdn-cgi/l/email-protection、可见文本换成 "[email protected]"，真实地址要执行 JS
   才还原。隐私政策的联系方式**必须无 JS 可见**——审核员或爬虫不跑 JS 时那一栏就是空的。

   ❌ 2026-08-19 第一次修错了：当时判断"CF 只改写 mailto:"，于是把 19 处 mailto: 锚点
      改成纯文本。上线后实测**照样被包装**——CF 是扫描页面里的邮箱字面量，与是不是
      mailto: 无关。纯文本救不了。

   ✅ 正确做法：用 Cloudflare 文档化的豁免标记把邮箱包起来：
      <!--email_off--><span class="email">…</span><!--email_on-->
      标记之间的内容 CF 不再改写。

   ⚠️ 改这几处时**务必连 email_off/email_on 一起保留**，去掉任一侧邮箱就会重新变成
      [email protected]。改完必须线上实测：
      curl -s https://spacelyzone.com/privacy.html | grep -c "__cf_email__"   # 须为 0 */
.email {
  color: var(--cyan);
  user-select: all;          /* 点一下即可整段选中，弥补不能直接唤起邮件客户端 */
  overflow-wrap: anywhere;   /* 窄屏下允许断行，避免撑破容器 */
}

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3, h4 { margin: 0; font-weight: 900; letter-spacing: -.4px; line-height: 1.12; }

p { margin: 0 0 var(--s-m); }

hr { border: 0; border-top: 1px solid var(--bd1); margin: 44px 0; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

/* 等宽技术标签（HUD 签名）：大写 + 字距 */
.mono {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--t3);
}
.mono--cyan { color: var(--cyan); }

/* 「即将上架」态的下载按钮。
   条目还没在 Play Console 建出来，就没有真实 listing URL。此前这里是
   <a href="#">Get it on Google Play</a>——一个看起来能点、点了什么也不发生的按钮，
   等于对访客承诺一个不存在的下载页。改成非链接的 <span> + 明说「即将上架」。

   ⚠️ 拿到真实 listing URL 后要做三件事，缺一不可：
     ① 换回 <a href="真实URL">；② 文案改回 Get it on / 下载自；
     ③ 删掉 data-placeholder="google-play-url" 属性——README §4 的自检 grep 靠它
        判断"是否还没回填"，留着会一直误报。 */
.btn.is-pending {
  opacity: .62;
  cursor: default;
  filter: saturate(.7);
}
.btn.is-pending:hover { text-decoration: none; }

/* 图注里的诚实补注（例如"此图摄于 1.3.0 版本"）。
   比正文弱一档，但必须可读——它存在的意义就是不让人误以为看到的是当前界面。 */
.shot__note {
  display: block;
  margin-top: .4em;
  font-style: normal;
  font-size: .92em;
  color: var(--t3, #5A6B78);
}

.num { font-family: var(--font-mono); font-weight: 700; letter-spacing: -.5px; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--cyan); color: var(--on-accent);
  padding: 10px 16px; border-radius: 0 0 var(--r-chip) 0; z-index: 99;
  font-weight: 800;
}
.skip-link:focus { left: 0; }

/* ---------- 3. 品牌 logo（青蓝渐变方砖 + 白色圆头 S） ---------- */
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--t1); }
.logo:hover { text-decoration: none; }
.logo svg { width: 30px; height: 30px; flex: none; display: block; }
.logo__word {
  font-size: 19px; font-weight: 900; letter-spacing: -.3px; line-height: 1;
}

/* ---------- 4. 顶栏 ---------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(11,15,20,.86);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--bd1);
}
.nav__in {
  display: flex; align-items: center; gap: var(--s-l);
  height: 60px;
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad);
}
.nav__links { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.nav__links a {
  color: var(--t2); font-size: 13px; font-weight: 700;
}
.nav__links a:hover { color: var(--t1); text-decoration: none; }
.nav__links a.is-active { color: var(--cyan); }
.nav__lang {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  border: 1px solid var(--bd2); border-radius: var(--r-pill);
  padding: 5px 11px; color: var(--t2) !important;
}
.nav__lang:hover { border-color: var(--cyan); color: var(--cyan) !important; }

@media (max-width: 620px) {
  .nav__links { gap: 12px; }
  .nav__links a[data-opt="1"] { display: none; }
}

/* ---------- 5. 通用区块 ---------- */
.section { padding: 68px 0; }
.section--tight { padding: 48px 0; }
.section__head { max-width: 660px; margin-bottom: 30px; }
.section__head h2 { font-size: clamp(24px, 4.4vw, 32px); margin: var(--s-s) 0 var(--s-m); }
.section__head p { color: var(--t2); margin: 0; }
.section--panel { background: var(--panel-2); border-block: 1px solid var(--bd1); }

/* 方块积木条（品牌差异化签名：不用圆环仪表） */
.brickbar { display: flex; align-items: flex-end; gap: 3px; height: 26px; }
.brickbar i {
  display: block; width: 9px; border-radius: 2px;
  background: linear-gradient(180deg, var(--cyan), var(--blue));
}
.brickbar i:nth-child(1) { height: 26%; }
.brickbar i:nth-child(2) { height: 52%; }
.brickbar i:nth-child(3) { height: 38%; }
.brickbar i:nth-child(4) { height: 78%; }
.brickbar i:nth-child(5) { height: 60%; }
.brickbar i:nth-child(6) { height: 100%; }
.brickbar i:nth-child(7) { height: 44%; }
.brickbar i:nth-child(8) { height: 68%; opacity: .55; }
.brickbar i:nth-child(9) { height: 30%; opacity: .35; }

/* ---------- 6. Hero ---------- */
.hero { padding: 54px 0 12px; }
.hero__grid { display: grid; gap: 38px; align-items: center; }
.hero h1 {
  font-size: clamp(32px, 7.4vw, 54px);
  letter-spacing: -1.4px;
  margin: var(--s-m) 0 var(--s-l);
}
.hero h1 em { font-style: normal; color: var(--cyan); }
.hero__sub { color: var(--t2); font-size: clamp(15px, 2.2vw, 17px); max-width: 40em; }

.badges { display: flex; flex-wrap: wrap; gap: var(--s-s); margin: var(--s-xl) 0; padding: 0; list-style: none; }
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--soft); border: 1px solid rgba(34,211,238,.22);
  color: var(--cyan);
  border-radius: var(--r-chip);
  padding: 7px 12px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase;
}
.badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 2px;
  background: var(--cyan); flex: none;
}

.cta-row { display: flex; flex-wrap: wrap; gap: var(--s-m); align-items: center; }

.btn {
  display: inline-flex; align-items: center; gap: 11px;
  border-radius: var(--r-btn);
  padding: 14px 22px;
  font-size: 15px; font-weight: 800;
  border: 1px solid transparent;
  cursor: pointer;
  min-height: 50px;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--cyan); color: var(--on-accent); }
.btn--primary:hover { filter: brightness(1.08); }
.btn--primary svg { width: 20px; height: 20px; flex: none; fill: currentColor; }
.btn--ghost { background: transparent; border-color: var(--bd2); color: var(--t1); }
.btn--ghost:hover { border-color: var(--cyan); color: var(--cyan); }
.btn__stack { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.btn__stack small {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; opacity: .72;
}

/* 上线前必须清掉的占位提示（醒目但克制） */
.todo {
  display: inline-block;
  margin-top: var(--s-m);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  color: var(--warn); letter-spacing: .4px;
}

/* Hero 右侧真机截图 */
.device {
  position: relative;
  border-radius: 26px;
  border: 1px solid var(--bd2);
  background: var(--panel-2);
  padding: 8px;
  box-shadow: 0 30px 60px -34px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.03);
  max-width: 320px;
  margin: 0 auto;
}
.device__screen {
  border-radius: 19px;
  overflow: hidden;
  background: var(--bg);
  aspect-ratio: 1272 / 2261;
}
.device__screen img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 900px) {
  .hero { padding: 76px 0 20px; }
  .hero__grid { grid-template-columns: 1.15fr .85fr; gap: 56px; }
}

/* ---------- 7. 事实条（真实可核对的数字） ---------- */
.stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px;
  list-style: none; margin: 0; padding: 0;
}
.stat {
  background: var(--panel); border: 1px solid var(--bd1);
  border-radius: var(--r-card); padding: var(--s-l);
}
.stat b {
  display: block;
  font-family: var(--font-mono); font-size: 30px; font-weight: 700;
  letter-spacing: -1px; line-height: 1;
  color: var(--cyan); margin-bottom: 7px;
}
.stat span { color: var(--t2); font-size: 13px; }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } }

/* ---------- 8. 功能 bento ---------- */
.bento { display: grid; gap: 9px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .bento { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--panel); border: 1px solid var(--bd1);
  border-radius: var(--r-card); padding: var(--s-xl);
}
.card__icon {
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--chip); border: 1px solid var(--bd1);
  display: grid; place-items: center; margin-bottom: var(--s-l);
}
.card__icon svg { width: 21px; height: 21px; stroke: var(--cyan); fill: none; stroke-width: 2; }
.card__icon--blue svg { stroke: var(--blue); }
.card h3 { font-size: 16px; font-weight: 800; margin-bottom: var(--s-s); letter-spacing: -.2px; }
.card p { color: var(--t2); font-size: 13.5px; margin: 0; }
.card .note {
  display: block; margin-top: var(--s-m);
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .9px; text-transform: uppercase; color: var(--t3);
}

/* ---------- 9. 隐私区（技术不可能性） ---------- */
.proof { display: grid; gap: var(--s-xl); align-items: start; }
@media (min-width: 900px) { .proof { grid-template-columns: 1fr 1fr; gap: 44px; } }

.proof h2 { font-size: clamp(24px, 4.4vw, 32px); margin: var(--s-s) 0 var(--s-m); }
.proof__lead { color: var(--t2); }

.codecard {
  background: var(--panel-2); border: 1px solid var(--bd2);
  border-radius: var(--r-card); overflow: hidden;
}
.codecard__bar {
  display: flex; align-items: center; gap: var(--s-s);
  padding: 11px var(--s-l);
  border-bottom: 1px solid var(--bd1);
  background: var(--chip);
}
.codecard__bar span {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--t3);
}
.codecard pre {
  margin: 0; padding: var(--s-l);
  overflow-x: auto;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.75;
  color: var(--t2);
}
.codecard pre b { color: var(--cyan); font-weight: 700; }
.codecard pre i { color: var(--t3); font-style: normal; }
.codecard__foot {
  padding: var(--s-m) var(--s-l);
  border-top: 1px solid var(--bd1);
  color: var(--t3); font-size: 12px;
}

.checklist { list-style: none; margin: var(--s-l) 0 0; padding: 0; }
.checklist li {
  position: relative; padding-left: 30px; margin-bottom: var(--s-m);
  color: var(--t2); font-size: 14px;
}
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 5px;
  width: 16px; height: 16px; border-radius: 5px;
  background: var(--soft); border: 1px solid rgba(34,211,238,.35);
}
.checklist li::after {
  content: ""; position: absolute; left: 5px; top: 9px;
  width: 5px; height: 8px;
  border: solid var(--cyan); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.checklist li b { color: var(--t1); font-weight: 800; }

/* ---------- 10. 截图画廊 ---------- */
.shots {
  display: grid; gap: var(--s-l);
  grid-template-columns: repeat(2, 1fr);
  list-style: none; margin: 0; padding: 0;
}
@media (min-width: 860px) { .shots { grid-template-columns: repeat(4, 1fr); } }

.shot__frame {
  border-radius: 18px; border: 1px solid var(--bd1);
  background: var(--panel-2); padding: 6px; overflow: hidden;
}
.shot__frame > div {
  border-radius: 13px; overflow: hidden; background: var(--bg);
  aspect-ratio: 1272 / 2261;
}
.shot__frame img { width: 100%; height: 100%; object-fit: cover; }
.shot figcaption { margin-top: var(--s-m); color: var(--t2); font-size: 12.5px; }
.shot figcaption b {
  display: block; color: var(--t1); font-weight: 800; font-size: 13.5px;
  margin-bottom: 2px;
}

/* ---------- 11. 语言 ---------- */
.langs { display: flex; flex-wrap: wrap; gap: var(--s-s); list-style: none; margin: 0; padding: 0; }
.langs li {
  background: var(--chip); border: 1px solid var(--bd1);
  border-radius: var(--r-chip); padding: 8px 13px;
  font-size: 13px; color: var(--t1); font-weight: 700;
}
.langs li small {
  display: block;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--t3);
}

/* ---------- 12. 结尾 CTA ---------- */
.endcta {
  background: var(--hero);
  border: 1px solid var(--bd2);
  border-radius: var(--r-hero);
  padding: 40px var(--s-xl);
  text-align: center;
}
.endcta h2 { font-size: clamp(23px, 4.4vw, 30px); margin: var(--s-m) 0; }
.endcta p { color: var(--t2); max-width: 40em; margin: 0 auto var(--s-xl); }
.endcta .cta-row { justify-content: center; }
.endcta .brickbar { justify-content: center; margin: 0 auto; }

/* ---------- 13. 页脚 ---------- */
.site-footer {
  border-top: 1px solid var(--bd1);
  background: var(--panel-2);
  padding: 40px 0 46px;
  margin-top: 60px;
}
.footer__grid { display: grid; gap: var(--s-xl); }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer__grid h4 {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--t3);
  margin-bottom: var(--s-m);
}
.footer__grid ul { list-style: none; margin: 0; padding: 0; }
.footer__grid li { margin-bottom: var(--s-s); }
.footer__grid a { color: var(--t2); font-size: 13.5px; }
.footer__grid a:hover { color: var(--cyan); }
.footer__note { color: var(--t3); font-size: 12px; margin: var(--s-m) 0 0; max-width: 34em; }
.footer__bar {
  margin-top: 34px; padding-top: var(--s-l); border-top: 1px solid var(--bd1);
  display: flex; flex-wrap: wrap; gap: var(--s-m); justify-content: space-between;
  color: var(--t3); font-size: 12px;
}
.footer__bar .mono { color: var(--t3); }

/* ---------- 14. 长文页（隐私政策 / 支持） ---------- */
.doc-head { padding: 46px 0 var(--s-xl); border-bottom: 1px solid var(--bd1); }
.doc-head h1 { font-size: clamp(28px, 5.4vw, 40px); margin: var(--s-s) 0 var(--s-m); }
.doc-head p { color: var(--t2); margin: 0; }

.doc { max-width: 760px; padding: 38px 0 20px; }
.doc h2 {
  font-size: 20px; margin: 40px 0 var(--s-m);
  padding-top: var(--s-l); border-top: 1px solid var(--bd1);
}
.doc h2:first-of-type { border-top: 0; padding-top: 0; margin-top: var(--s-l); }
.doc h3 { font-size: 15px; margin: var(--s-xl) 0 var(--s-s); }
.doc p, .doc li { color: var(--t2); font-size: 14.5px; }
.doc strong { color: var(--t1); font-weight: 800; }
.doc ul, .doc ol { padding-left: 20px; margin: 0 0 var(--s-m); }
.doc li { margin-bottom: var(--s-s); }
.doc code {
  font-family: var(--font-mono); font-size: 12.5px;
  background: var(--chip); border: 1px solid var(--bd1);
  border-radius: 5px; padding: 1px 6px; color: var(--t1);
}

.meta {
  background: var(--panel); border: 1px solid var(--bd1);
  border-radius: var(--r-card); padding: var(--s-l) var(--s-xl);
  margin-bottom: var(--s-xl);
}
.meta dl { margin: 0; display: grid; gap: var(--s-s); }
@media (min-width: 620px) { .meta dl { grid-template-columns: max-content 1fr; column-gap: var(--s-l); } }
.meta dt {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--t3);
  padding-top: 3px;
}
.meta dd { margin: 0; color: var(--t1); font-size: 14px; }

.callout {
  background: var(--soft); border: 1px solid rgba(34,211,238,.22);
  border-radius: var(--r-card); padding: var(--s-l) var(--s-xl);
  margin: var(--s-xl) 0;
}
.callout p { color: var(--cyan); margin: 0; font-size: 14px; }
.callout p + p { margin-top: var(--s-s); }

.table-scroll { overflow-x: auto; margin: var(--s-l) 0 var(--s-xl); }
table.perm {
  width: 100%; min-width: 560px; border-collapse: collapse;
  background: var(--panel); border: 1px solid var(--bd1);
  border-radius: var(--r-card); overflow: hidden;
}
table.perm th, table.perm td {
  text-align: left; padding: var(--s-m) var(--s-l);
  border-bottom: 1px solid var(--bd1); font-size: 13.5px;
  vertical-align: top;
}
table.perm th {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--t3);
  background: var(--chip);
}
table.perm td { color: var(--t2); }
table.perm td:first-child { color: var(--t1); font-weight: 700; }
table.perm tr:last-child td { border-bottom: 0; }

/* FAQ */
.faq { max-width: 760px; padding: 10px 0 20px; }
.faq__item {
  background: var(--panel); border: 1px solid var(--bd1);
  border-radius: var(--r-card); padding: var(--s-l) var(--s-xl);
  margin-bottom: var(--s-m);
}
.faq__item h3 { font-size: 15.5px; margin-bottom: var(--s-s); }
.faq__item p { color: var(--t2); font-size: 14px; margin: 0; }
.faq__item p + p { margin-top: var(--s-s); }

/* 占位符（上线前必须替换） */
.ph { color: var(--warn); font-family: var(--font-mono); font-size: .92em; font-weight: 700; }

/* ---------- 15. 无障碍：尊重"减弱动态效果" ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* ---------- 16. 打印（隐私政策留档友好） ---------- */
@media print {
  .nav, .site-footer, .todo, .cta-row { display: none !important; }
  body { background: #fff; color: #000; }
  .doc p, .doc li, .meta dd { color: #222; }
  .email { color: #000; }
  .callout { border: 1px solid #999; background: #f4f4f4; }
  .callout p { color: #000; }
}