@charset "UTF-8";

/* ===== 设计令牌 =====
   两种表面：浅色「阅读面」承载正文、卡片与文档；深色「舞台」用于页头、首屏、子页页头、发布清单、下载横幅与页脚。
   舞台取 logo 的深海蓝作底、天蓝 #4fbcf7 作信号色；舞台内重新赋值同一组变量，组件不必各写一份深色版本。
   对比度：浅色 --muted #52627a 对白 6.0:1、--link #1e66cc 5.5:1、白字对 --blue 4.55:1；
   舞台 --muted #93a3b9 对 --night 7.3:1、--sky 9.2:1、深色字 #04121f 对 --sky 按钮约 9:1。 */
:root {
  color-scheme: light;
  --ink: #22201d;
  --ink-2: #4f483f;
  --muted: #6e675e;
  --blue: #d63223;
  --blue-hover: #b32a1d;
  --link: #c32d20;
  --focus: #c32d20;
  --paper: #fffcf6;
  --wash: #f6efe1;
  --line: #ebe1cf;
  --line-strong: #ddd0b8;
  --green: #2f6f5a;
  --amber: #7a5a2a;
  --sel-bg: #f4ebda;
  --sel-ink: #3f3932;
  --night: #0f0e0d;
  --night-1: #181614;
  --night-2: #211f1d;
  --sky: #e56c61;
  --sky-hover: #ec9087;
  --sky-soft: #f1e6d0;
  --deep: #ca372a;
  --ok: #45d39b;
  --bad: #ff7b72;
  --scar: #f2c38a;
  --radius: 18px;
  --radius-s: 10px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --shadow: 0 1px 2px #2e2a260a, 0 14px 32px -18px #2e2a2633, 0 36px 72px -48px #2e2a264d;
  --grid-lines: linear-gradient(#c9baa914 1px, transparent 1px), linear-gradient(90deg, #c9baa914 1px, transparent 1px);
  --font: "Segoe UI Variable Text", "Segoe UI", "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  --display: "Segoe UI Variable Display", "Segoe UI", "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  --mono: "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;
  --z-sticky: 30;
  --z-toast: 60;
  --z-skip: 100;
  font-family: var(--font);
  color: var(--ink);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.stage, .site-header, .hero, .page-hero, .release-manifest, .cta-banner, .plan-pro, .site-footer, .toast {
  color-scheme: dark;
  --ink: #faf7f0;
  --ink-2: #d9d3cd;
  --muted: #aea79e;
  --link: #ee9b93;
  --focus: #ee9b93;
  --paper: var(--night-1);
  --wash: var(--night-2);
  --line: #c9baa924;
  --line-strong: #c9baa93d;
  --green: var(--ok);
  --amber: #f0bd6e;
  --sel-bg: #e56c6159;
  --sel-ink: #ffffff;
  color: var(--ink);
}

/* ===== 基础 ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; background: var(--night); }
body { margin: 0; background: linear-gradient(var(--night) 0 80px, var(--paper) 80px); font-size: 15px; line-height: 1.75; }
button, input { font: inherit; }
button, a, input, summary { -webkit-tap-highlight-color: transparent; }
button, a, summary { touch-action: manipulation; }
button { color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
button:disabled { cursor: not-allowed; }
a { color: inherit; text-decoration: none; }
img, svg, canvas { vertical-align: middle; }
img { max-width: 100%; height: auto; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 680; letter-spacing: -.02em; line-height: 1.32; color: var(--ink); text-wrap: balance; }
p { text-wrap: pretty; }
[hidden] { display: none !important; }
::selection { background: var(--sel-bg); color: var(--sel-ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
code, kbd, pre { font-family: var(--mono); }
code { font-size: .92em; background: #f8f5ef; color: #5c4f41; padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
pre { margin: 12px 0; padding: 14px 16px; border-radius: 10px; background: #f9f7f2; border: 1px solid var(--line); line-height: 1.7; overflow-x: auto; font-size: 13px; }
pre code { background: none; padding: 0; color: var(--ink-2); font-size: inherit; }
kbd { display: inline-block; font-size: .85em; border: 1px solid #e6ddcc; border-bottom-width: 2px; background: #fff; border-radius: 5px; padding: 0 6px; color: var(--ink-2); line-height: 1.6; }
mark { background: #fff0c6; color: #6b5220; padding: 0 2px; border-radius: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.container { width: min(1200px, calc(100% - 96px)); margin-inline: auto; }
.section { padding-block: 96px; }
.section-wash { background: var(--wash); border-block: 1px solid var(--line); }
.section-wash + .section-wash { border-top: 0; }
.skip-link { position: fixed; left: 18px; top: -80px; z-index: var(--z-skip); padding: 10px 20px; background: var(--sky); color: #151310; font-weight: 600; border-radius: 8px; }
.skip-link:focus { top: 15px; }
.eyebrow { display: inline-block; font-size: 13px; font-weight: 600; color: var(--link); }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 44px; }
.section-heading h2 { font-size: clamp(28px, 3.3vw, 44px); line-height: 1.22; letter-spacing: -.03em; }
.section-heading .eyebrow + h2 { margin-top: 10px; }
.section-heading > p { font-size: 15px; line-height: 1.85; color: var(--muted); max-width: 420px; }
.section-heading > p .text-link { display: flex; width: fit-content; margin-top: 8px; }
.note { font-size: 13px; color: var(--muted); line-height: 1.8; }
.callout { margin: 18px 0; padding: 14px 18px; border-radius: 10px; background: #fff6e4; border: 1px solid #f0dcb4; color: #6b4d1c; font-size: 14px; line-height: 1.8; }
.callout strong { color: #5b3f12; margin-right: 6px; }
.callout code { background: #fff; }
.mono { font-family: var(--mono); }

/* 舞台材质：刻度网格（各区用遮罩控制显现范围）+ 胶片颗粒 */
.hero, .page-hero, .release-manifest, .cta-banner, .site-footer { position: relative; isolation: isolate; }
.hero::before, .page-hero::before, .cta-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grid-lines); background-size: 48px 48px; pointer-events: none; }
.hero::after, .page-hero::after, .release-manifest::after, .cta-banner::after, .site-footer::after { content: ""; position: absolute; inset: 0; z-index: -1; background: url(/assets/grain.svg) 0 0 / 220px 220px; opacity: .16; mix-blend-mode: soft-light; pointer-events: none; }

/* ===== 按钮与链接 ===== */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 12px 22px; border-radius: var(--radius-s); font-weight: 650; font-size: 14px; line-height: 1.4; white-space: nowrap; transition: background-color .2s, box-shadow .2s, transform .25s var(--ease); }
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(1px); }
.button-primary { background: var(--blue); color: #fff; box-shadow: inset 0 1px 0 #ffffff33, 0 1px 2px #3b352e33, 0 10px 24px -12px #d6322399; }
.button-primary:hover { background: var(--blue-hover); }
.button-signal { background: var(--sky); color: #151310; box-shadow: inset 0 1px 0 #ffffff8c, inset 0 -1px 0 #2e292340, 0 0 0 1px #e56c6159, 0 12px 32px -12px #e56c61a6; }
.button-signal:hover { background: var(--sky-hover); box-shadow: inset 0 1px 0 #ffffff8c, inset 0 -1px 0 #2e292340, 0 0 0 1px #e56c6180, 0 16px 40px -12px #e56c61cc; }
.button-dark { background: var(--ink); color: #fff; }
.button-dark:hover { background: #494137; }
.button-white { background: #fff; color: #39332c; }
.button-white:hover { background: #faf6ef; }
.button-small { min-height: 40px; padding: 8px 16px; font-size: 13px; border-radius: 8px; }
.button-small .icon { width: 16px; height: 16px; }
.button-large { min-height: 56px; padding-inline: 28px; font-size: 15px; width: 100%; }
.trailing-icon { margin-left: 6px; width: 18px; }
.icon-button { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; }
.icon-button:hover { background: #f6f3ed; }
.text-link, .feature-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--link); }
.text-link .icon, .feature-link .icon { transition: transform .25s var(--ease); width: 17px; height: 17px; }
.text-link:hover .icon, .feature-link:hover .icon { transform: translateX(4px); }
.text-link:hover, .feature-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.text-button { display: inline-flex; align-items: center; gap: 10px; padding: 5px 0; min-height: 44px; font-size: 14px; font-weight: 550; color: var(--ink-2); transition: color .2s; }
.text-button:hover { color: var(--link); }
.play-outline { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid #857e75; border-radius: 50%; transition: border-color .2s, box-shadow .2s; }
.play-outline .icon { width: 11px; height: 11px; margin-left: 1px; }
.hero .play-outline { border-color: #c9baa973; }
.hero .text-button:hover .play-outline { border-color: var(--sky); box-shadow: 0 0 0 4px #e56c611f; }
.tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 5px; font-size: 11px; font-weight: 600; letter-spacing: .02em; line-height: 1.6; white-space: nowrap; }
.tag-blue { background: #f8f3e8; color: #97251a; }
.tag-green { background: #e6f2ec; color: #2f6f5a; }
.tag-premium { background: #f5eee3; color: #7a5a2a; border: 1px solid #e6d8c2; font-weight: 500; }
.plan-pro .tag-premium { background: #f0bd6e1a; color: #f3c985; border-color: #f0bd6e4d; }

/* ===== 页头（深色） ===== */
.site-header { height: 72px; position: sticky; top: 0; z-index: var(--z-sticky); background: #0f0e0df5; border-bottom: 1px solid #c9baa91f; backdrop-filter: saturate(150%) blur(14px); }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 680; letter-spacing: -.01em; white-space: nowrap; color: var(--ink); }
.brand img { border-radius: 9px; box-shadow: 0 0 0 1px #ffffff14, 0 6px 18px -6px #e56c6180; }
.desktop-nav { display: flex; align-items: center; gap: 28px; margin-left: 40px; margin-right: auto; }
.desktop-nav a { position: relative; font-size: 14px; color: var(--muted); padding: 10px 0; transition: color .2s; }
.desktop-nav a:hover { color: var(--ink); }
.desktop-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.desktop-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px; background: var(--sky); box-shadow: 0 0 10px #e56c6180; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.nav-drawer { display: none; }
.nav-drawer > summary { list-style: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; cursor: pointer; color: var(--ink); }
.nav-drawer > summary::-webkit-details-marker { display: none; }
.nav-drawer > summary:hover, .nav-drawer[open] > summary { background: #ffffff12; }
.nav-drawer .icon-close, .nav-drawer[open] .icon-menu { display: none; }
.nav-drawer[open] .icon-close { display: block; }
.mobile-nav { position: absolute; left: 0; right: 0; top: 100%; padding: 8px 24px 18px; background: var(--night-1); border-bottom: 1px solid var(--line); box-shadow: 0 30px 60px #000000a6; display: grid; }
.mobile-nav a { display: flex; justify-content: space-between; align-items: center; padding: 13px 4px; font-size: 15px; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.mobile-nav a[aria-current="page"] { color: var(--link); font-weight: 600; }
.mobile-nav a .icon { width: 16px; height: 16px; color: var(--muted); }

/* ===== 首页首屏：传输仪表 ===== */
.hero { overflow: clip; background: radial-gradient(56% 60% at 76% 6%, #ca372a38, transparent 70%), radial-gradient(38% 42% at 4% 96%, #b1291d24, transparent 72%), linear-gradient(180deg, var(--night), #151311); }
.hero::before { background-position: calc(50% + 24px) 0; -webkit-mask-image: radial-gradient(72% 70% at 70% 36%, #000 18%, transparent 76%); mask-image: radial-gradient(72% 70% at 70% 36%, #000 18%, transparent 76%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.2fr); gap: 56px; align-items: center; padding-block: 48px 40px; }
.hero-copy { position: relative; z-index: 2; }
.release-pill { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 14px; font-size: 12px; color: var(--muted); background: #ffffff08; margin-bottom: 30px; transition: border-color .2s, color .2s; }
.release-pill:hover { border-color: #e56c6199; color: var(--sky-soft); }
.release-pill .icon { width: 13px; height: 13px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 3px #e56c612e, 0 0 10px #e56c61cc; }
.pill-divider { width: 1px; height: 11px; background: var(--line-strong); }
.hero h1 { font-size: clamp(42px, 4.9vw, 66px); font-weight: 760; line-height: 1.16; letter-spacing: -.035em; margin-bottom: 24px; color: #fcfaf5; }
.hero-line { display: block; }
.hero h1 em { font-style: normal; color: var(--sky); }
.hero-description { font-size: 16px; line-height: 1.9; color: #c6bfb8; max-width: 29em; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 34px; }
.hero-note { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; margin-top: 22px; }
.hero-note .icon { width: 14px; height: 14px; color: var(--ok); }
.hero-note > span { color: #797168; }
.hero-visual { position: relative; min-width: 0; }
.demo-overline { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--muted); padding: 0 4px 10px; text-align: right; }

/* 演示窗口：照客户端默认的「黑科技」深色皮肤（tel/src/app/globals.css 的 data-skin="tech"）拼装，
   颜色、圆角与布局取自客户端实际渲染结果；桌面三栏：导航 · 会话列表 · 聊天，窄窗口收起会话列表。 */
.app-window, .ax {
  --muted: #6e675e; /* 客户端「墨夜」皮肤的辅助文字色，与官网的 --muted 分开 */
  --tg-bg: #0a0909; --tg-nav: #080807; --tg-side: #121110; --tg-input: #0c0c0b; --tg-line: #282624;
  --tg-text: #f5f0e6; --tg-muted: #b3aca4; --tg-faint: #9b938a; --tg-accent: #e67268; --tg-accent-dim: #e672681c;
  --tg-on-accent: #12100e; --tg-bubble: #191817; --tg-ghost: #1c1b19; --tg-ok: #3ee8a0;
}
.app-window {
  position: relative; border: 1px solid #c9baa92e; border-radius: 14px; background: var(--tg-bg); color: var(--tg-text);
  box-shadow: inset 0 1px 0 #ffffff0f, 0 0 0 1px #00000066, 0 40px 80px -32px #000000cc, 0 0 90px -34px #ca372a66;
  overflow: hidden; transform-origin: 50% 100%; container-type: inline-size;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
}
.window-bar { height: 34px; display: flex; align-items: center; gap: 9px; padding: 0 14px; border-bottom: 1px solid var(--tg-line); background: var(--tg-nav); }
.window-brand { display: flex; align-items: center; gap: 7px; color: var(--tg-muted); font-size: 11px; }
.demo-tag { background: #c9baa91f; color: var(--tg-muted); border-radius: 4px; padding: 1px 7px; font-size: 10px; letter-spacing: .04em; }
.window-controls { margin-left: auto; color: #888077; font-size: 15px; display: flex; gap: 16px; line-height: 1; }
.window-controls span { font-size: 10px; padding-top: 2px; }

.tg-body { display: grid; grid-template-columns: 52px 188px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: 404px; }
.tg-body .icon { stroke-width: 1.65; }

/* 主导航：常驻会话、收藏夹、评论、下载，其余收进「更多」，底部只留设置 */
.tg-nav { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px 8px; background: var(--tg-nav); border-right: 1px solid var(--tg-line); }
.tg-mark { color: var(--tg-accent); width: 24px; height: 24px; margin-bottom: 8px; }
.tg-mark svg { width: 100%; height: 100%; display: block; }
.tg-nav-item { width: 44px; min-height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 12px; font-size: 10px; color: var(--tg-muted); transition: background-color .15s, color .15s; }
.tg-nav-item .icon { width: 17px; height: 17px; }
button.tg-nav-item:hover { background: #ffffff0a; color: var(--tg-text); }
.tg-nav-item[aria-current] { color: var(--tg-accent); font-weight: 650; background: linear-gradient(#e6726829, #e672680f); box-shadow: inset 0 0 0 1px #e6726847, 0 8px 20px -10px #e672686b; }
.tg-nav-bottom { margin-top: auto; }

/* 会话列表 */
.tg-side { display: flex; flex-direction: column; min-width: 0; background: var(--tg-side); border-right: 1px solid var(--tg-line); }
.tg-me { display: flex; align-items: center; gap: 8px; padding: 10px 10px 8px; font-size: 12px; }
.tg-avatar { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 600; }
.tg-avatar .icon { width: 14px; height: 14px; }
.tg-avatar-lg { width: 32px; height: 32px; font-size: 13px; }
.av-green { background: #527c66; }
.av-saved { background: #ca3123; }
.av-teal { background: #71675c; }
.av-violet { background: #8c8276; }
.av-rose { background: #8b5975; }
.av-amber { background: #78694d; }
.tg-filter { display: flex; align-items: center; gap: 6px; margin: 0 10px; height: 30px; padding: 0 9px; border: 1px solid var(--tg-line); border-radius: 9px; background: var(--tg-input); color: var(--tg-muted); }
.tg-filter:focus-within { border-color: var(--tg-accent); }
.tg-filter .icon { width: 14px; height: 14px; }
.tg-filter input { width: 100%; min-width: 0; border: 0; outline: 0; padding: 0; background: transparent; color: var(--tg-text); font: inherit; font-size: 11.5px; }
.tg-filter input::placeholder { color: var(--tg-faint); }
.tg-scopes { display: flex; gap: 4px; padding: 8px 10px 4px; font-size: 10.5px; color: var(--tg-muted); white-space: nowrap; }
.tg-scopes span { padding: 1px 6px; border-radius: 999px; border: 1px solid transparent; }
.tg-scopes .is-on { background: var(--tg-accent-dim); color: var(--tg-accent); border-color: #e6726859; }
.tg-dialogs { list-style: none; margin: 0; padding: 2px 5px 6px; flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #3d3a38 transparent; }
.tg-group { font-size: 10.5px; color: var(--tg-muted); padding: 7px 7px 3px; }
.tg-group span { color: var(--tg-faint); padding-left: 2px; }
.tg-dialog { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 8px; }
.tg-dialog.is-active { background: var(--tg-accent-dim); }
.tg-dialog.is-active b { color: var(--tg-accent); }
.tg-dialog-body { flex: 1; min-width: 0; display: grid; gap: 1px; }
.tg-line { display: flex; align-items: center; gap: 5px; min-width: 0; }
.tg-line b { flex: 1; min-width: 0; font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-line time { font-size: 10px; color: var(--tg-muted); }
.tg-line small { flex: 1; min-width: 0; font-size: 11px; color: var(--tg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-lock { width: 11px; height: 11px; color: var(--tg-muted); }
.tg-unread { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--tg-accent); color: var(--tg-on-accent); font-size: 10px; font-weight: 700; display: inline-grid; place-items: center; line-height: 1; }
.tg-filter-empty { font-size: 11px; color: var(--tg-muted); text-align: center; padding: 16px 10px; }
.tg-side-foot { display: flex; justify-content: space-between; padding: 8px 10px; border-top: 1px solid var(--tg-line); font-size: 10px; color: var(--tg-faint); }

/* 聊天区 */
.tg-main { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--tg-bg); }
.tg-head { display: flex; align-items: center; gap: 8px; height: 50px; flex: none; padding: 0 12px; border-bottom: 1px solid var(--tg-line); }
.tg-head-copy { min-width: 0; display: grid; }
.tg-head-copy b { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.tg-head-copy small { font-size: 11px; color: var(--tg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-seg { margin-left: auto; display: flex; flex: none; padding: 3px; border: 1px solid var(--tg-line); border-radius: 9px; background: var(--tg-input); }
.tg-seg button { font-size: 11.5px; padding: 3px 9px; border-radius: 8px; color: var(--tg-muted); }
.tg-seg button[aria-pressed="true"] { background: #242220; color: var(--tg-accent); }
.tg-primary { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 6px 10px; border-radius: 9px; background: linear-gradient(#ec958d, #de4032); color: var(--tg-on-accent); font-size: 12px; font-weight: 600; transition: filter .15s; }
.tg-primary .icon { width: 14px; height: 14px; stroke-width: 2; }
.tg-primary:hover { filter: brightness(1.1); }
.tg-primary:disabled { background: #2b2a28; color: var(--tg-faint); filter: none; }
.tg-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 30px; flex: none; padding: 0 12px; border-bottom: 1px solid var(--tg-line); background: #121110eb; font-size: 11px; color: var(--tg-muted); white-space: nowrap; }
.tg-toolbar b { color: var(--tg-text); font-weight: 600; }
.tg-hint { color: var(--tg-faint); overflow: hidden; text-overflow: ellipsis; }
.tg-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 8px 14px 16px; scrollbar-width: thin; scrollbar-color: #3d3a38 transparent; }
.tg-scroll:focus-visible { outline: 2px solid var(--tg-accent); outline-offset: -2px; }
.tg-day { text-align: center; margin: 2px 0 4px; }
.tg-day span { display: inline-block; font-size: 10.5px; font-weight: 500; color: var(--tg-muted); padding: 1px 10px; border: 1px solid var(--tg-line); border-radius: 20px; background: #121110eb; }
.tg-msg { display: flex; margin-top: 8px; }
.tg-bubble { max-width: min(300px, 88%); padding: 7px 11px 5px; border: 1px solid #ffffff0a; border-radius: 14px 14px 14px 5px; background: var(--tg-bubble); box-shadow: inset 0 1px 0 #ffffff0b, 0 6px 16px -12px #000000cc; }
.tg-bubble-wide { width: min(300px, 88%); }
.tg-sender { display: block; font-size: 11px; font-weight: 650; color: #7fb094; }
.tg-text { font-size: 13px; line-height: 1.6; margin-top: 3px; overflow-wrap: anywhere; }
.tg-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 3px; font-size: 10.5px; color: var(--tg-muted); }
.tg-meta time { color: var(--tg-faint); }

/* 媒体块：勾选框沿用 .media-item 约定，下载管理模拟从这里读文件名、大小与目录 */
.tg-media { position: relative; margin-top: 5px; }
.media-item { position: relative; display: block; cursor: pointer; }
.media-item input { position: absolute; width: 1px; height: 1px; opacity: 0; top: 8px; right: 8px; }
.tg-check { position: absolute; top: 6px; right: 6px; z-index: 1; width: 18px; height: 18px; border: 1.5px solid #ffffffb3; border-radius: 50%; background: #00000066; color: transparent; display: grid; place-items: center; transition: background-color .15s, border-color .15s; }
.tg-check .icon { width: 11px; height: 11px; stroke-width: 2.8; }
.media-item input:checked + .tg-check { background: var(--tg-accent); border-color: var(--tg-accent); color: var(--tg-on-accent); }
.media-item input:focus-visible + .tg-check { outline: 2px solid var(--tg-accent); outline-offset: 2px; }
.tg-tile { overflow: hidden; border-radius: 10px; background: var(--tg-ghost); }
.tg-tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; transition: box-shadow .15s; }
.tg-tile:has(input:checked)::after { box-shadow: inset 0 0 0 2px var(--tg-accent); }
.tg-tile img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.tg-album { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
.tg-album .tg-media { margin-top: 0; }
.tg-album .tg-tile img { aspect-ratio: 4 / 3; }
.tg-bubble > .tg-album { margin-top: 5px; }
.tg-duration { position: absolute; top: 6px; left: 6px; padding: 1px 5px; border-radius: 4px; background: #0000009e; color: #fff; font-size: 10px; }
.tg-play { position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: #0000008c; color: #fff; display: grid; place-items: center; }
.tg-play .icon { width: 14px; height: 14px; margin-left: 2px; }
.tg-tile-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 8px 6px; background: linear-gradient(transparent, #00000099); color: #fff; font-size: 10.5px; }
.tg-tile .media-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tg-file { display: flex; align-items: center; gap: 8px; padding: 7px 64px 7px 8px; border-radius: 10px; background: #1c1b1999; }
.tg-file .tg-check { position: static; flex: none; order: -1; }
.tg-file-icon { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--tg-accent); color: var(--tg-on-accent); display: grid; place-items: center; }
.tg-file-icon .icon { width: 16px; height: 16px; }
.tg-file-copy { min-width: 0; display: grid; }
.tg-file .media-name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-file-meta { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--tg-muted); }
.tg-kind { font-size: 9.5px; padding: 0 5px; border-radius: 4px; background: var(--tg-ghost); }
.tg-dl { position: absolute; right: 7px; bottom: 6px; z-index: 1; min-width: 40px; padding: 2px 8px; border-radius: 20px; background: var(--tg-accent); color: var(--tg-on-accent); font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; transition: background-color .15s, color .15s; }
.tg-media:has(.tg-file) > .tg-dl { bottom: auto; top: 50%; transform: translateY(-50%); right: 9px; }
.tg-dl:hover { filter: brightness(1.1); }
.tg-dl.is-busy { background: #ffffff26; color: #fff; }
.tg-dl.is-done { background: var(--tg-ok); color: var(--tg-on-accent); }

/* 「媒体」视图：只留带文件的消息，按网格排 */
.tg-scroll.is-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; align-content: start; }
.is-media .tg-day, .is-media .tg-msg:not(:has(.media-item)), .is-media .tg-sender, .is-media .tg-text, .is-media .tg-meta { display: none; }
.is-media .tg-msg, .is-media .tg-bubble, .is-media .tg-album { display: contents; }
.is-media .tg-media { margin: 0; }
.is-media .tg-media:has(.tg-file) { grid-column: 1 / -1; }
.is-media .tg-tile img { aspect-ratio: 4 / 3; }

.tg-composer { display: flex; align-items: center; gap: 10px; height: 46px; flex: none; padding: 0 12px; border-top: 1px solid var(--tg-line); background: var(--tg-side); color: var(--tg-muted); }
.tg-composer .icon { width: 17px; height: 17px; }
.tg-composer .tg-accent { color: var(--tg-accent); }
.tg-input { flex: 1; min-width: 0; height: 30px; display: flex; align-items: center; padding: 0 12px; border: 1px solid #50483f; border-radius: 22px; background: var(--tg-side); font-size: 12px; color: var(--tg-faint); }
.tg-queue { position: absolute; right: 12px; bottom: 56px; z-index: 2; padding: 5px 12px; border-radius: 999px; background: var(--tg-side); color: var(--tg-text); font-size: 11px; box-shadow: inset 0 1px 0 #ffffff0d, 0 0 0 1px #e672682e, 0 12px 30px -8px #000000cc; }
.tg-queue b { color: var(--tg-accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.tg-queue:hover { box-shadow: inset 0 1px 0 #ffffff0d, 0 0 0 1px #e6726873, 0 12px 30px -8px #000000cc; }

@container (max-width: 600px) {
  .tg-body { grid-template-columns: 52px minmax(0, 1fr); }
  .tg-side { display: none; }
}
@container (max-width: 420px) {
  .tg-body { grid-template-columns: 46px minmax(0, 1fr); height: 440px; }
  .tg-nav-item { width: 40px; }
  .tg-head { padding: 0 10px; }
  .tg-head .tg-avatar-lg, .tg-hint { display: none; }
  .tg-scroll { padding-inline: 10px; }
  .tg-bubble, .tg-bubble-wide { max-width: 94%; }
  .tg-bubble-wide { width: 94%; }
}

/* 下载管理：分块图由 app.js 画在 canvas 上；没有 JS 时 .fill-* 用 CSS 画一条静态分段进度 */
.transfer-dock { --dock-shadow: inset 0 1px 0 #ffffff12, 0 0 0 1px #00000073, 0 36px 70px -30px #000000e6; position: relative; margin: 16px 28px 0 -28px; padding: 0 16px; border: 1px solid #c9baa92e; border-radius: 14px; background: linear-gradient(180deg, #23211e, #1a1816); box-shadow: var(--dock-shadow); }
.dock-head { display: flex; align-items: center; gap: 10px; min-height: 42px; border-bottom: 1px solid #c9baa91a; }
.dock-head h2 { font-size: 13px; font-weight: 650; letter-spacing: 0; }
.dock-spec { font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
.dock-chip { margin-left: auto; font-size: 11px; color: var(--sky-soft); border: 1px solid #e56c6140; background: #e56c6114; border-radius: 999px; padding: 1px 10px; white-space: nowrap; }
.dock-chip.is-done { color: #b8f2d8; border-color: #45d39b59; background: #45d39b14; }
.dock-replay { width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: 8px; color: var(--ink-2); transition: background-color .2s, color .2s; }
.dock-replay:hover { background: #ffffff12; color: var(--ink); }
.dock-replay .icon { width: 15px; height: 15px; }
.net-banner { position: absolute; left: 50%; top: 0; translate: -50% -50%; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; background: #2b1316; color: #ffc4bf; border: 1px solid #ff7b7266; box-shadow: 0 10px 28px -10px #ff7b7280; animation: banner-in .35s var(--ease); }
.net-banner.is-ok { background: #0e2a20; color: #b8f2d8; border-color: #45d39b66; box-shadow: 0 10px 28px -10px #45d39b66; }
.net-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 8px var(--bad); }
.net-banner.is-ok .net-dot { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.transfer-list { list-style: none; margin: 0; padding: 2px 0; display: grid; }
.transfer-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid #c9baa914; }
.transfer-row:last-child { border-bottom: 0; }
.tr-icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; background: #e56c6114; color: var(--sky-soft); transition: background-color .3s, color .3s; }
.tr-icon .icon { width: 14px; height: 14px; }
.transfer-row.is-done .tr-icon { background: #45d39b1a; color: #8fe6c0; }
.tr-main { min-width: 0; display: grid; gap: 7px; }
.tr-name { display: flex; align-items: baseline; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.tr-base { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-part { flex-shrink: 0; display: inline-block; max-width: 5ch; overflow: hidden; font-family: var(--mono); font-size: 11.5px; font-weight: 400; color: var(--muted); transition: max-width .5s var(--ease), opacity .3s; }
.transfer-row.is-done .tr-part { max-width: 0; opacity: 0; }
.tr-map { display: block; width: 100%; height: 5px; }
.tr-map.fill-64, .tr-map.fill-100 { -webkit-mask: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 7px); mask: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 7px); }
.tr-map.fill-64 { background: linear-gradient(90deg, var(--sky) 64%, #c9baa924 64%); }
.tr-map.fill-100 { background: var(--deep); }
.tr-meta { font-family: var(--mono); font-size: 11px; color: var(--muted); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-meta b { font-weight: 400; color: var(--scar); }
.tr-side { display: grid; justify-items: end; gap: 4px; }
.tr-status { font-size: 11px; line-height: 1.6; padding: 0 8px; border-radius: 999px; border: 1px solid #c9baa933; color: var(--ink-2); white-space: nowrap; transition: color .3s, border-color .3s, background-color .3s; }
.tr-pct { font-family: var(--mono); font-size: 12px; color: var(--ink); font-variant-numeric: tabular-nums; }
.transfer-row.is-active .tr-status { color: var(--sky-soft); border-color: #e56c6166; background: #e56c6114; }
.transfer-row.is-stalled .tr-status { color: #ffc4bf; border-color: #ff7b7266; background: #ff7b7214; }
.transfer-row.is-done .tr-status { color: #b8f2d8; border-color: #45d39b59; background: #45d39b14; }
.transfer-row.is-queued .tr-name { color: var(--ink-2); }
.dock-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; border-top: 1px solid #c9baa91a; }
.dock-total { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dock-total b { font-family: var(--mono); font-weight: 500; color: var(--ink); }
.throughput-wrap { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.throughput { display: block; width: 96px; height: 22px; }
.dock-attention { animation: dock-attention 1.2s var(--ease); }
.demo-caption { font-size: 12px; color: var(--muted); text-align: center; margin-top: 14px; }

/* 首屏底部：下载机制的规格刻度 */
.spec-strip { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-block: 0; padding-bottom: 48px; border-top: 1px solid #c9baa929; }
.spec-strip::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: linear-gradient(90deg, #c9baa966 1px, transparent 1px) 0 0 / 96px 12px repeat-x, linear-gradient(90deg, #c9baa92e 1px, transparent 1px) 0 0 / 12px 5px repeat-x; pointer-events: none; }
.spec-strip > div { padding: 30px 24px 0 0; }
.spec-strip > div + div { padding-left: 24px; border-left: 1px solid #c9baa91a; }
.spec-strip dt { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--muted); }
.spec-strip dd { margin-top: 6px; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.spec-strip dd b { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--sky-soft); }

/* ===== 首页功能：主次分明的格局 ===== */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.bento-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 22px; padding: 32px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, #ffffff, #fcfbf9); box-shadow: inset 0 1px 0 #fff, var(--shadow); }
.bento-lead { grid-column: span 7; background: linear-gradient(180deg, #fcfaf6, #f8f4ec); }
.bento-search, .bento-saved { grid-column: span 5; }
.bento-flow { grid-column: span 7; }
.bento-flow .automation-illustration { margin-top: auto; }
.bento-card h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 22px; line-height: 1.35; margin-bottom: 10px; }
.bento-lead h3 { font-size: clamp(24px, 2.4vw, 30px); }
.bento-card p { color: var(--muted); font-size: 14.5px; line-height: 1.85; }
.bento-copy .feature-link { margin-top: 16px; }
.bento-card > .feature-link { margin-top: auto; }

/* ===== 发布清单（深色） ===== */
.release-manifest { background: radial-gradient(50% 70% at 0% 0%, #ca372a2e, transparent 70%), var(--night); padding-block: 104px; }
.manifest-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: 64px; align-items: start; }
.manifest-head { position: sticky; top: 112px; }
.manifest-version { font-family: var(--mono); font-size: clamp(44px, 5vw, 64px); font-weight: 600; letter-spacing: -.04em; line-height: 1; color: var(--sky); }
.manifest-head h2 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.25; letter-spacing: -.03em; margin-top: 22px; }
.manifest-date { font-family: var(--mono); font-size: 12px; color: var(--muted); margin: 10px 0 22px; }
.manifest-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
.manifest-list li { padding: 24px 0 28px; border-top: 1px solid var(--line); }
.manifest-list h3 { display: flex; align-items: center; gap: 10px; font-size: 17px; margin-bottom: 8px; }
.manifest-list h3 .icon { width: 18px; height: 18px; color: var(--sky); }
.manifest-list p { font-size: 14px; line-height: 1.85; color: var(--muted); }

/* ===== 步骤、方案、下载横幅 ===== */
.pipeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.step { position: relative; padding-top: 68px; }
.step-number { position: absolute; top: 0; left: 0; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--blue); background: #fff; border: 1px solid var(--line-strong); box-shadow: inset 0 1px 0 #fff, 0 10px 24px -14px #2e2a2659; }
.pipeline .step:not(:last-child)::after { content: ""; position: absolute; top: 22px; left: 60px; right: -24px; height: 1px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 11px); }
.step h3 { font-size: 18px; margin-bottom: 10px; }
.step p { color: var(--muted); font-size: 14px; line-height: 1.9; }
.step-detail { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--wash); color: var(--ink-2); font-size: 12px; }
.step-detail .icon { width: 14px; height: 14px; }
.plans { display: grid; grid-template-columns: .85fr 1.4fr; gap: 64px; align-items: center; }
.plan-intro h2 { font-size: clamp(28px, 3.3vw, 44px); line-height: 1.22; letter-spacing: -.03em; }
.plan-intro .eyebrow + h2 { margin-top: 10px; }
.plan-intro p { color: var(--muted); font-size: 15px; line-height: 1.9; margin-top: 18px; }
.plan-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.plan { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 28px 30px; box-shadow: inset 0 1px 0 #fff, var(--shadow); }
.plan-pro { position: relative; overflow: hidden; background: radial-gradient(90% 70% at 100% 0%, #ca372a42, transparent 70%), linear-gradient(180deg, #211f1d, #181614); border-color: #c9baa92e; box-shadow: inset 0 1px 0 #ffffff14, 0 24px 48px -28px #18161499; }
.plan-title { display: flex; gap: 12px; align-items: center; }
.plan-title h3 { font-size: 20px; }
.plan > p { color: var(--muted); font-size: 13px; margin-top: 6px; }
.plan ul { list-style: none; padding: 0; margin: 20px 0; }
.plan li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--ink-2); padding-block: 5px; line-height: 1.6; }
.plan li .icon { width: 15px; height: 15px; color: var(--green); margin-top: 4px; }
.plan-pro li .icon { color: var(--amber); }
.plan-footnote { font-size: 12px; color: var(--muted); }
.cta-banner { overflow: hidden; border-radius: 24px; min-height: 340px; display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 56px 64px; background: radial-gradient(60% 90% at 86% 50%, #ca372a5c, transparent 70%), linear-gradient(135deg, #1e1c19, var(--night)); border: 1px solid #c9baa924; box-shadow: inset 0 1px 0 #ffffff12, 0 32px 64px -40px #23201d80; }
.cta-banner::before { -webkit-mask-image: radial-gradient(55% 100% at 86% 50%, #000 10%, transparent 76%); mask-image: radial-gradient(55% 100% at 86% 50%, #000 10%, transparent 76%); }
.cta-copy { position: relative; z-index: 1; max-width: 560px; }
.cta-copy .eyebrow { color: var(--link); }
.cta-copy h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.22; letter-spacing: -.03em; margin-bottom: 14px; }
.cta-copy > p { color: #c6bfb8; font-size: 15px; margin-bottom: 28px; line-height: 1.8; }
.cta-copy > p a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.cta-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.cta-meta > * + *::before { content: "·"; display: inline-block; margin-right: 12px; color: #797168; }
.cta-meta a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.cta-meta a:hover { color: var(--ink); }
.cta-art { flex-shrink: 0; position: relative; margin-right: 24px; }
.cta-art img { position: relative; width: 196px; height: 196px; transform: rotate(-8deg); filter: drop-shadow(0 30px 40px #000000a6) drop-shadow(0 0 60px #ca372a66); }
.cta-art::before, .cta-art::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.cta-art::before { inset: -40px; border: 1px solid #c9baa92e; }
.cta-art::after { inset: -84px; border: 1px dashed #c9baa91f; }
.cta-compact { min-height: 0; padding: 40px 48px; }
.cta-compact h2 { font-size: 26px; margin-bottom: 8px; }
.cta-compact > p, .cta-compact .cta-copy > p { margin-bottom: 0; }

/* ===== FAQ ===== */
.faq-teaser { display: grid; grid-template-columns: .8fr 1.4fr; gap: 80px; padding-top: 32px; }
.faq-intro h2 { font-size: clamp(28px, 3.3vw, 44px); line-height: 1.22; letter-spacing: -.03em; }
.faq-intro > p { color: var(--muted); font-size: 15px; margin-top: 12px; }
.faq-intro .text-link { margin-top: 20px; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-of-type, .faq-group details:first-of-type { border-top: 1px solid var(--line); }
.faq-list summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; list-style: none; padding: 19px 2px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary h3 { font-size: 15.5px; font-weight: 600; letter-spacing: 0; line-height: 1.5; transition: color .2s; }
.faq-list summary:hover h3 { color: var(--link); }
.faq-list summary .icon { color: var(--muted); width: 18px; height: 18px; transition: transform .3s var(--ease); }
.faq-list details[open] summary .icon { transform: rotate(180deg); }
.faq-answer { padding: 0 28px 22px 2px; font-size: 14px; line-height: 1.9; color: var(--ink-2); }
.faq-answer a { text-decoration: underline; text-underline-offset: 3px; color: var(--link); }
.faq-search { position: relative; max-width: 640px; margin-top: 28px; }
.faq-search label { position: absolute; left: 15px; top: 16px; color: var(--muted); }
.faq-search input { width: 100%; min-height: 54px; padding: 12px 16px 12px 46px; border: 1px solid var(--line-strong); border-radius: 12px; font-size: 15px; color: var(--ink); background: var(--paper); box-shadow: inset 0 1px 0 #ffffff0a; }
.faq-search input::placeholder { color: #999188; }
.faq-search input:focus { outline: 3px solid #e56c6166; outline-offset: 2px; border-color: var(--sky); }
.faq-search-status { font-size: 13px; color: var(--muted); margin-top: 8px; min-height: 20px; }
.faq-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 60px; align-items: start; padding-top: 48px; }
.faq-toc { position: sticky; top: 96px; }
.faq-toc h2 { font-size: 12px; letter-spacing: .08em; color: var(--muted); font-weight: 500; margin-bottom: 10px; }
.faq-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.faq-toc a { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 8px; font-size: 14px; color: var(--ink-2); }
.faq-toc a span { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.faq-toc a:hover { background: var(--wash); color: var(--link); }
.faq-group { margin-bottom: 44px; }
.faq-group h2 { font-size: 20px; margin-bottom: 10px; }
.faq-empty { padding: 40px 0; color: var(--muted); font-size: 15px; }
.faq-empty a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }

/* ===== 子页面：深色页头、锚点导航、正文 ===== */
.page-hero { overflow: clip; background: radial-gradient(48% 130% at 88% 0%, #ca372a33, transparent 70%), var(--night); padding: 60px 0 56px; border-bottom: 1px solid #c9baa91f; }
.page-hero::before { -webkit-mask-image: linear-gradient(90deg, transparent 15%, #000 80%); mask-image: linear-gradient(90deg, transparent 15%, #000 80%); }
.breadcrumb { display: flex; gap: 10px; font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.breadcrumb a:hover { color: var(--ink); }
.page-hero h1 { font-size: clamp(32px, 4vw, 48px); line-height: 1.2; letter-spacing: -.035em; }
.lead { font-size: 16px; line-height: 1.9; color: var(--muted); margin-top: 16px; max-width: 760px; }
.page-hero .lead { color: #c6bfb8; }
.lead .text-link { margin-left: 8px; font-size: 14px; }
.anchor-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.anchor-nav a { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: #ffffff08; font-size: 13px; color: var(--ink-2); transition: border-color .2s, color .2s, background-color .2s; }
.anchor-nav a:hover { border-color: #e56c6199; color: var(--ink); background: #e56c6114; }
.check-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.check-list li { position: relative; padding-left: 26px; font-size: 14px; line-height: 1.8; color: var(--ink-2); }
.check-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 14px; border-radius: 50%; background: #e6f2ec; }
.check-list li::after { content: ""; position: absolute; left: 4px; top: 11px; width: 6px; height: 3px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }
.check-list.small li { font-size: 13px; }
.check-list.highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; margin-bottom: 40px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.two-col h2 { font-size: clamp(24px, 2.6vw, 32px); margin-top: 10px; margin-bottom: 14px; }
.two-col > div > p { color: var(--muted); line-height: 1.9; }
.guide-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 64px; align-items: start; padding-block: 56px 88px; }
.guide-side { position: sticky; top: 96px; display: grid; gap: 16px; }
.prose { max-width: 760px; }
.prose section + section { margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--line); }
.prose h2 { font-size: 24px; margin-bottom: 16px; }
.prose p { line-height: 1.9; color: var(--ink-2); margin-bottom: 12px; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 12px; color: var(--ink-2); line-height: 1.9; }
.prose li { margin-block: 6px; padding-left: 4px; }
.prose li pre { margin-top: 8px; }
.prose a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.prose.compact p { margin-bottom: 10px; }
.table-wrap { overflow-x: auto; margin: 12px 0 16px; border: 1px solid var(--line); border-radius: 12px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.7; }
th { background: var(--wash); font-weight: 600; color: var(--ink-2); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
.side-card { background: linear-gradient(180deg, #fff, #fdfcfa); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; display: grid; gap: 10px; align-content: start; box-shadow: inset 0 1px 0 #fff, 0 14px 32px -24px #2e2a264d; }
.side-card h2 { font-size: 16px; margin-bottom: 4px; }
.side-card p { font-size: 14px; color: var(--ink-2); line-height: 1.8; }
.side-card pre { margin: 4px 0; }
.side-card a:not(.text-link) { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.side-card .text-link { font-size: 14px; }
.side-muted { background: var(--wash); box-shadow: none; }
.kbd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; color: var(--ink-2); }
.card { background: linear-gradient(180deg, #fff, #fdfcfa); border: 1px solid var(--line); border-radius: 16px; padding: 24px; box-shadow: inset 0 1px 0 #fff, 0 14px 32px -24px #2e2a264d; }
.card h3 { font-size: 17px; margin-bottom: 10px; }
.card p { font-size: 14px; color: var(--ink-2); line-height: 1.8; margin-bottom: 8px; }
.card a:not(.text-link) { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.deploy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

/* ===== 功能详解：左右交替 + CSS 拼装的界面示意 ===== */
.feature-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding-block: 64px; border-bottom: 1px solid var(--line); }
.feature-row.row-reverse .feature-text { order: 2; }
.feature-text h2 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.25; letter-spacing: -.025em; margin-block: 10px 14px; }
.feature-text > p { color: var(--muted); line-height: 1.9; }
.feature-text .note { margin-top: 16px; }
.feature-text a:not(.text-link) { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.shot { background: #fff; border: 1px solid #ece4d5; border-radius: 16px; box-shadow: inset 0 1px 0 #fff, var(--shadow); padding: 14px 16px 16px; display: grid; gap: 10px; font-size: 12px; color: var(--ink-2); }
.shot-bar { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.shot-bar.dark { background: var(--night-2); color: #faf7f0; margin: -14px -16px 0; padding: 12px 16px; border-radius: 15px 15px 0 0; font-family: var(--mono); font-weight: 500; border-bottom: 0; }
.shot-bar.dark .shot-pill { background: #c9baa92e; color: #faf7f0; }
.shot-pill { font-size: 10px; padding: 2px 8px; border-radius: 10px; background: #f8f5ef; color: var(--ink-2); font-weight: 500; }
.shot-pill.on { background: #e6f2ec; color: var(--green); }
.shot-row { display: flex; align-items: center; gap: 12px; }
.shot-row > div { flex: 1; min-width: 0; }
.shot-row b { display: block; font-weight: 600; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shot-row small { display: block; color: var(--muted); font-size: 11px; }
.shot-thumb { width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0; }
.thumb-video { background: linear-gradient(135deg, #ea857c, #99342b); }
.thumb-doc { background: linear-gradient(135deg, #f0d9b6, #c69b5b); }
.bar { display: block; height: 5px; background: #f2ede2; margin-top: 6px; overflow: hidden; -webkit-mask: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 6px); mask: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 6px); }
.bar-fill { display: block; height: 100%; background: var(--blue); }
.w20 { width: 20%; } .w35 { width: 35%; } .w62 { width: 62%; } .w65 { width: 65%; } .w80 { width: 80%; } .w100 { width: 100%; }
.shot-status { font-size: 11px; color: var(--muted); white-space: nowrap; }
.shot-status.ok { color: var(--green); font-weight: 600; }
.shot-foot i, .shot-url i { font-style: normal; font-size: 11px; padding: 3px 10px; border-radius: 6px; background: #f8f5ef; color: #97251a; font-weight: 600; }

/* 功能页界面示意：照客户端对应面板的实际渲染拼装（默认「黑科技」深色皮肤），共用首页演示窗口的颜色变量 */
.shot.ax { display: block; padding: 0; gap: 0; overflow: hidden; border: 1px solid #c9baa92e; border-radius: 14px; background: var(--tg-side); color: var(--tg-text); font-size: 12px; box-shadow: inset 0 1px 0 #ffffff0f, 0 0 0 1px #00000066, 0 30px 60px -30px #000000b3; container-type: inline-size; }
.ax .icon { stroke-width: 1.65; }
.ax-muted { color: var(--tg-muted); }
.ax-faint { color: var(--tg-faint); font-size: 11px; white-space: nowrap; }
.ax-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px 12px; border-bottom: 1px solid var(--tg-line); }
.ax-title { min-width: 0; display: grid; gap: 2px; }
.ax-title b { font-size: 15px; font-weight: 700; }
.ax-title small { font-size: 11.5px; color: var(--tg-muted); line-height: 1.5; }
.ax-x { color: var(--tg-muted); font-size: 13px; padding: 4px; }
.ax-btn { display: inline-flex; align-items: center; flex: none; padding: 4px 10px; border: 1px solid #3d3a38; border-radius: 9px; background: var(--tg-ghost); color: var(--tg-text); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.ax-btn.primary { border-color: transparent; background: linear-gradient(#ec958d, #de4032); color: var(--tg-on-accent); }
.ax-btn.is-busy { opacity: .65; }
.ax-pad { display: grid; gap: 10px; padding: 12px 16px 14px; }
.ax-foot { display: flex; align-items: center; gap: 8px; padding: 10px 16px 12px; border-top: 1px solid var(--tg-line); }
.ax-foot .ax-muted { flex: 1; font-size: 11px; }
.ax-box { position: relative; flex: none; width: 14px; height: 14px; border: 1.5px solid #524b44; border-radius: 4px; }
.ax-box.on { background: var(--tg-accent); border-color: var(--tg-accent); }
.ax-box.on::after { content: ""; position: absolute; left: 3.5px; top: .5px; width: 4px; height: 8px; border: solid var(--tg-on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ax-radio { position: relative; flex: none; width: 15px; height: 15px; border: 1.5px solid #524b44; border-radius: 50%; }
.ax-radio.on { border-color: var(--tg-accent); }
.ax-radio.on::after { content: ""; position: absolute; inset: 2.5px; border-radius: 50%; background: var(--tg-accent); }
.ax-check { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.ax-label { font-size: 12px; font-weight: 500; }
.ax-input { display: flex; align-items: center; flex: 1; min-width: 0; height: 34px; padding: 0 12px; border: 1px solid #50483f; border-radius: 10px; background: var(--tg-input); font-size: 12.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ax-seg { display: inline-flex; flex: none; padding: 3px; border: 1px solid var(--tg-line); border-radius: 9px; background: var(--tg-input); }
.ax-seg i { font-style: normal; font-size: 11px; padding: 3px 8px; border-radius: 6px; color: var(--tg-muted); white-space: nowrap; }
.ax-seg i.on { border-radius: 8px; background: #242220; color: var(--tg-accent); }
.ax-seg em { font-style: normal; font-size: 10px; color: var(--tg-accent); background: var(--tg-accent-dim); border-radius: 999px; padding: 0 5px; margin-left: 4px; }
.ax-tabs { display: flex; gap: 16px; border-bottom: 1px solid var(--tg-line); overflow: hidden; }
.ax-tabs i { font-style: normal; font-size: 12px; color: var(--tg-muted); padding: 7px 0 6px; border-bottom: 2px solid transparent; white-space: nowrap; }
.ax-tabs i.on { color: var(--tg-text); font-weight: 700; border-bottom-color: var(--tg-text); }
.ax-tabs-bar { padding: 0 16px; }
.ax-pill { font-size: 10px; padding: 1px 7px; border-radius: 999px; background: var(--tg-accent-dim); color: var(--tg-accent); white-space: nowrap; }
.ax-pill.ok { background: #3ee8a024; color: var(--tg-ok); }
.ax-pill.muted { background: var(--tg-ghost); color: var(--tg-muted); }
.ax-bar { display: block; height: 5px; border-radius: 3px; background: var(--tg-ghost); overflow: hidden; }
.ax-bar i { display: block; height: 100%; border-radius: 3px; background: var(--tg-accent); }
.ax-bar .p31 { width: 31%; }
.ax-bar .p64 { width: 64%; }
.ax-bar .p65 { width: 65%; }
.ax-avatar { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 600; }
.av-slate { background: #7f776e; }
.ax-kind { font-size: 9.5px; padding: 0 5px; border: 1px solid var(--tg-line); border-radius: 4px; color: var(--tg-muted); }
.ax mark { background: var(--tg-ghost); color: var(--tg-text); font-weight: 700; border-radius: 3px; padding: 0 2px; }

/* 下载管理 */
.shot.ax-dl { background: var(--tg-bg); }
.ax-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--tg-line); }
.ax-dl-list { display: grid; gap: 8px; padding: 12px 16px 16px; }
.ax-dl-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--tg-line); border-radius: 10px; background: var(--tg-side); }
.ax-dl-main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.ax-dl-main > b { font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-dl-main > small { font-size: 10.5px; color: var(--tg-faint); }
.ax-dl-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--tg-muted); white-space: nowrap; }

/* 一键搜索 */
.shot.ax-search { background: var(--tg-bg); }
.ax-search .ax-head { background: linear-gradient(#171614, #121110); }
.ax-search .ax-pad { background: var(--tg-side); border-bottom: 1px solid var(--tg-line); }
.ax-search-form { display: flex; gap: 8px; }
.ax-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ax-chips i { font-style: normal; font-size: 11.5px; padding: 3px 10px; border: 1px solid transparent; border-radius: 10px; color: var(--tg-muted); }
.ax-chips i.on { border-color: #3d3a38; background: var(--tg-ghost); color: var(--tg-text); font-weight: 700; }
.ax-search-batch { display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-bottom: 1px solid var(--tg-line); font-size: 11.5px; }
.ax-search-batch .ax-muted { flex: 1; }
.ax-hit { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--tg-line); }
.ax-hit:last-child { border-bottom: 0; }
.ax-hit > .ax-box { margin-top: 13px; }
.ax-thumb { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--tg-ghost); color: var(--tg-muted); display: grid; place-items: center; }
.ax-thumb .icon { width: 18px; height: 18px; }
.ax-hit-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ax-hit-top { display: flex; justify-content: space-between; gap: 8px; }
.ax-hit-top b { font-size: 12.5px; font-weight: 700; }
.ax-hit-top time { font-size: 10px; color: var(--tg-muted); white-space: nowrap; }
.ax-hit-body > small { font-size: 11px; color: var(--tg-muted); }
.ax-hit-file { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; }
.ax-hit-text { font-size: 12.5px; line-height: 1.6; }

/* 聊天：选择消息与转发副本 */
.shot.ax-chat { background: var(--tg-bg); }
.ax-chat-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--tg-line); }
.ax-chat-head .ax-title b { font-size: 13.5px; font-weight: 600; }
.ax-chat-head .ax-title small { font-size: 11px; }
.ax-chat-head .ax-seg { margin-left: auto; }
.ax-lock { width: 12px; height: 12px; color: var(--tg-muted); vertical-align: -1px; }
.ax-select-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 10px 14px; border-bottom: 1px solid var(--tg-line); background: #121110eb; font-size: 12px; }
.ax-select-bar b { font-weight: 700; }
.ax-select-bar small { flex-basis: 100%; font-size: 10.5px; color: var(--tg-muted); }
.ax-chat-body { display: grid; gap: 4px; padding: 10px 10px 14px; }
.ax-msg { display: flex; align-items: flex-end; gap: 8px; padding: 6px 8px; border-radius: 10px; }
.ax-msg.selected { background: var(--tg-accent-dim); }
.ax-msg > .ax-box { align-self: center; }
.ax-bubble { min-width: 0; max-width: 84%; padding: 7px 11px 5px; border: 1px solid #ffffff0a; border-radius: 14px 14px 14px 5px; background: var(--tg-bubble); box-shadow: inset 0 1px 0 #ffffff0b, 0 6px 16px -12px #000000cc; }
.ax-bubble > p { font-size: 12.5px; line-height: 1.6; margin-top: 2px; }
.ax-sender { display: block; font-size: 11px; font-weight: 650; }
.s-green { color: #7fb094; }
.s-violet { color: #c8beb2; }
.ax-file { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 7px 8px; border-radius: 10px; background: #1c1b1999; }
.ax-file > span:nth-child(2) { min-width: 0; display: grid; }
.ax-file b { font-size: 12px; font-weight: 400; }
.ax-file small { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--tg-muted); }
.ax-file-icon { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--tg-accent); color: var(--tg-on-accent); }
.ax-file-icon .icon { width: 15px; height: 15px; }
.ax-pill-dl { margin-left: auto; padding: 2px 8px; border-radius: 20px; background: var(--tg-accent); color: var(--tg-on-accent); font-size: 10.5px; font-weight: 600; }
.ax-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 3px; font-size: 10.5px; color: var(--tg-muted); }
.ax-meta time { color: var(--tg-faint); }

/* 收藏夹备份与迁移 */
.ax-form { gap: 9px; }
.ax-progress { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--tg-line); border-radius: 10px; background: var(--tg-ghost); }
.ax-progress-head { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; }
.ax-progress small { font-size: 10.5px; color: var(--tg-muted); }

/* 播放器 */
.shot.ax-viewer { background: #000; color: #fff; }
.ax-viewer-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 12px; }
.ax-viewer-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-counter { flex: none; padding: 1px 8px; border-radius: 999px; background: #ffffff1a; font-size: 11px; }
.ax-dim { flex: 1; color: #ffffff99; font-size: 11px; white-space: nowrap; }
.ax-ghost { flex: none; padding: 3px 8px; border: 1px solid #ffffff45; border-radius: 6px; background: #ffffff12; font-size: 11px; white-space: nowrap; }
.ax-close { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #ffffff1f; display: grid; place-items: center; font-size: 11px; }
.ax-viewer-note { display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: #121110; color: #f0e8d9; font-size: 11.5px; }
.ax-viewer-stage { position: relative; }
.ax-viewer-stage img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.ax-nav { position: absolute; top: 50%; width: 26px; height: 44px; margin-top: -22px; border-radius: 8px; background: #0000006b; display: grid; place-items: center; font-size: 22px; line-height: 1; }
.ax-nav.prev { left: 8px; }
.ax-nav.next { right: 8px; }
.ax-controls { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 18px 12px 8px; background: linear-gradient(transparent, #000000a6); font-size: 11px; font-variant-numeric: tabular-nums; }
.ax-controls .icon { width: 13px; height: 13px; }
.ax-track { flex: 1; height: 3px; border-radius: 2px; background: #ffffff4d; overflow: hidden; }
.ax-track i { display: block; width: 69%; height: 100%; background: #fff; }
.ax-strip { display: flex; justify-content: center; gap: 6px; padding: 8px 0 10px; }
.ax-strip > span { position: relative; width: 60px; height: 42px; border: 2px solid transparent; border-radius: 7px; overflow: hidden; background: #ffffff10; }
.ax-strip > span.on { border-color: #fff; }
.ax-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ax-strip i { position: absolute; right: 2px; bottom: 2px; padding: 0 3px; border-radius: 3px; background: #0000008c; font-size: 9px; font-style: normal; }

/* 工单 */
.ax-ticket { gap: 7px; }
.ax-back { justify-self: start; }
.ax-ticket-title { font-size: 13.5px; font-weight: 700; margin-top: 2px; }
.ax-ticket-title code { font-size: 10.5px; color: var(--tg-faint); margin-left: 4px; }
.ax-ticket > small { font-size: 11px; }
.ax-thread { display: flex; flex-direction: column; gap: 8px; margin-block: 4px; }
.ax-note { max-width: 88%; padding: 8px 11px; border-radius: 10px; background: var(--tg-bubble); font-size: 12px; }
.ax-note > span { display: block; font-size: 10.5px; color: var(--tg-muted); margin-bottom: 3px; }
.ax-note p { line-height: 1.65; }
.ax-note.user { align-self: flex-end; }
.ax-note.owner { align-self: flex-start; background: var(--tg-accent-dim); }
.ax-textarea { height: 52px; align-items: flex-start; padding-top: 8px; color: var(--tg-faint); }
.ax-end { justify-self: end; }

/* 群组运营 */
.ax-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ax-stats > div { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--tg-line); border-radius: 10px; background: var(--tg-ghost); }
.ax-stats span { font-size: 11px; color: var(--tg-muted); }
.ax-stats strong { font-size: 18px; font-weight: 650; }
.ax-stats small { font-size: 10.5px; color: var(--tg-faint); }
.ax-section { font-size: 13px; font-weight: 650; margin-top: 2px; }
.ax-plan { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--tg-line); border-radius: 10px; }
.ax-plan-top { display: flex; align-items: center; gap: 8px; }
.ax-plan-top b { font-size: 12.5px; font-weight: 700; }
.ax-plan small { font-size: 11px; color: var(--tg-muted); }
.ax-plan .ax-faint { font-size: 10.5px; }

/* 连接代理 */
.ax-settings-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--tg-line); }
.ax-settings-head b { font-size: 15px; font-weight: 600; }
.ax-back-icon { color: var(--tg-muted); font-size: 20px; line-height: 1; }
.ax-proxy-head { display: flex; justify-content: space-between; align-items: center; }
.ax-proxy-head b { font-size: 14px; font-weight: 600; }
.ax-status { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--tg-muted); }
.ax-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--tg-ok); }
.ax-radios { display: grid; }
.ax-radios > span { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; font-size: 12.5px; }
.ax-proxy-list { border-top: 1px solid var(--tg-line); }
.ax-proxy-item { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--tg-line); }
.ax-proxy-main { flex: 1; min-width: 0; display: grid; gap: 1px; font-size: 12.5px; }
.ax-proxy-main b { font-weight: 600; }
.ax-proxy-main small { font-size: 11px; }
.ax-proxy-item .icon { width: 16px; height: 16px; color: var(--tg-muted); }
.ax-ok { color: var(--tg-ok); }
.ax-bad { color: #ff6fa0; }
.ax-link { justify-self: end; color: var(--tg-accent); font-size: 12.5px; font-weight: 600; }

@container (max-width: 440px) {
  .ax-hide-narrow { display: none; }
  .ax-head { padding-inline: 14px; }
  .ax-pad, .ax-dl-list { padding-inline: 14px; }
  .ax-toolbar { flex-wrap: wrap; }
  .ax-tabs { gap: 12px; }
}

/* 首页功能卡插图：客户端面板的局部（下载管理、一键搜索、收藏夹导出、规则工作台），沿用上面的 .ax 组件 */
.ax-mini { overflow: hidden; border: 1px solid #c9baa92e; border-radius: 12px; background: var(--tg-side); color: var(--tg-text); font-size: 12px; box-shadow: 0 24px 48px -28px #24211da6; container-type: inline-size; }
.download-illustration { margin: auto -33px -33px 40px; border-right: 0; border-bottom: 0; border-radius: 14px 0 0 0; background: var(--tg-bg); }
.download-illustration .ax-dl-list { padding-bottom: 22px; }
.search-illustration .ax-pad { border-bottom: 1px solid var(--tg-line); }
.bento-search .ax-mini, .bento-saved .ax-mini { margin-block: auto; }
.ax-status-line { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--tg-line); font-size: 11px; color: var(--tg-muted); white-space: nowrap; }
.ax-status-line .ax-faint { overflow: hidden; text-overflow: ellipsis; }
.ax-dot { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--tg-accent); }
.ax-tasks { display: grid; gap: 8px; padding: 12px 14px 14px; background: var(--tg-bg); }
.ax-task { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--tg-line); border-radius: 6px; background: var(--tg-side); }
.ax-task-main { display: flex; align-items: center; gap: 10px; }
.ax-kind-icon { flex: none; width: 32px; height: 32px; border: 1px solid var(--tg-line); border-radius: 6px; background: var(--tg-bg); display: grid; place-items: center; }
.ax-kind-icon .icon { width: 17px; height: 17px; }
.ax-task-copy { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ax-task-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; }
.ax-task-title b { font-size: 13px; font-weight: 600; }
.ax-task-title small { font-size: 10px; color: var(--tg-muted); }
.ax-task-copy > small { font-size: 11.5px; color: var(--tg-muted); }
.ax-switch { position: relative; flex: none; width: 33px; height: 20px; border: 1px solid var(--tg-line); border-radius: 20px; background: var(--tg-ghost); }
.ax-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--tg-muted); }
.ax-switch.on { border-color: var(--tg-text); background: var(--tg-text); }
.ax-switch.on::after { left: 15px; background: var(--tg-side); }
.ax-task-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 11px; color: var(--tg-muted); }
.ax-done { color: var(--tg-text); }
.shot-foot { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--muted); padding-top: 6px; border-top: 1px solid var(--line); }
.shot-url { display: flex; align-items: center; gap: 10px; border: 1px solid #e7decd; border-radius: 8px; padding: 8px 12px; font-family: var(--mono); font-size: 12px; }
.shot-url span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shot-url i { background: var(--blue); color: #fff; font-family: var(--font); }

/* ===== 下载页 ===== */
.download-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: start; padding-top: 56px; }
.download-card { border: 1px solid var(--line); border-radius: 20px; padding: 32px 36px; background: linear-gradient(180deg, #fff, #fdfcfa); box-shadow: inset 0 1px 0 #fff, var(--shadow); }
.download-card h2 { font-size: 26px; }
.download-file { display: flex; align-items: center; gap: 8px; color: var(--muted); font-family: var(--mono); font-size: 13px; margin: 8px 0 22px; }
.download-file .icon { width: 16px; height: 16px; }
.spec-list { display: grid; gap: 0; margin-top: 26px; border-top: 1px solid var(--line); }
.spec-list > div { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.7; }
.spec-list dt { color: var(--muted); }
.spec-list dd { color: var(--ink-2); }
.spec-list a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.checksum { margin-top: 24px; }
.checksum h3 { font-size: 15px; margin-bottom: 6px; }
.checksum p { font-size: 13px; color: var(--muted); line-height: 1.8; }
.checksum pre { font-size: 12px; overflow-wrap: anywhere; white-space: pre-wrap; }
.checksum a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.checksum a .icon { width: 14px; height: 14px; }
.download-card .note { margin-top: 20px; }
.download-side { display: grid; gap: 18px; }
.steps-compact { padding-left: 22px; margin: 4px 0 8px; display: grid; gap: 10px; font-size: 14px; color: var(--ink-2); line-height: 1.8; }
.steps-compact li { padding-left: 4px; }
.steps-compact pre { margin: 8px 0 4px; }
.history-heading { font-size: 18px; margin-bottom: 14px; }
.release-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.release-list a { display: grid; grid-template-columns: 90px 1fr auto; gap: 16px; align-items: center; padding: 12px 6px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-2); transition: background-color .2s, color .2s; }
.release-list a:hover { background: #fff; color: var(--link); }
.release-list .mono { color: var(--ink); font-weight: 600; }
.release-list time { color: var(--muted); font-size: 12px; font-family: var(--mono); }
.section-wash .note { margin-top: 16px; }
.section-wash .note a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }

/* ===== 更新日志 ===== */
.timeline { display: grid; gap: 0; max-width: 900px; }
.release { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 32px; padding: 32px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 96px; }
.release-side { display: grid; gap: 6px; align-content: start; justify-items: start; }
.release-version { font-family: var(--mono); font-size: 18px; font-weight: 650; color: var(--ink); }
.release-side time { font-size: 13px; color: var(--muted); font-family: var(--mono); }
.release-body h2 { font-size: 20px; margin-bottom: 12px; }
.release-body ul { margin: 0; padding-left: 20px; color: var(--ink-2); line-height: 1.8; font-size: 14px; display: grid; gap: 6px; }
.release-latest { background: var(--wash); margin-inline: -24px; padding-inline: 24px; border-radius: 16px; border-bottom: 0; margin-bottom: 8px; }
.release-latest .release-version { color: var(--link); }

/* ===== 页脚与提示（深色） ===== */
.site-footer { background: var(--night); border-top: 1px solid #c9baa91f; margin-top: 64px; }
.footer-main { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-block: 56px 40px; }
.footer-brand p { font-size: 13px; color: var(--muted); margin-top: 16px; max-width: 320px; line-height: 1.8; }
.footer-links { display: grid; gap: 8px; align-content: start; }
.footer-links h2 { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--muted); font-weight: 500; margin-bottom: 4px; }
.footer-links a { font-size: 14px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; transition: color .2s; }
.footer-links a:hover { color: var(--ink); }
.footer-links .icon { width: 13px; height: 13px; }
.footer-bottom { border-top: 1px solid var(--line); padding-block: 20px; font-size: 12px; color: var(--muted); display: flex; gap: 24px; align-items: center; }
.footer-bottom > a { margin-left: auto; white-space: nowrap; }
.footer-bottom > a:hover { color: var(--ink); }
.toast { position: fixed; bottom: 24px; right: 24px; z-index: var(--z-toast); display: flex; align-items: center; gap: 12px; background: #211f1df5; border: 1px solid #c9baa933; box-shadow: inset 0 1px 0 #ffffff12, 0 24px 48px -16px #000000b3; border-radius: 12px; padding: 14px 10px 14px 16px; width: min(410px, calc(100% - 32px)); animation: toast-in .35s var(--ease); }
.toast-icon { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; color: var(--ok); background: #45d39b1f; }
.toast-icon .icon { width: 16px; height: 16px; }
.toast strong { font-size: 13px; font-weight: 600; }
.toast p { font-size: 12px; color: var(--muted); margin-top: 3px; }
.toast > .icon-button { margin-left: auto; flex-shrink: 0; }
.toast > .icon-button:hover { background: #ffffff12; }
.toast > .icon-button .icon { width: 16px; height: 16px; color: var(--muted); }

/* ===== 动效：首屏只编排一次入场，其余交给下载演示本身 ===== */
@keyframes toast-in { from { transform: translateY(12px); opacity: 0; } }
@keyframes banner-in { from { opacity: 0; transform: translateY(6px) scale(.96); } }
@keyframes dock-attention { 40% { box-shadow: 0 0 0 4px #e56c6159, var(--dock-shadow); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes line-in { from { opacity: 0; transform: translateY(.35em); clip-path: inset(0 0 100% 0); } to { clip-path: inset(-20% -4% -20% -4%); } }
@keyframes window-in { from { opacity: 0; transform: perspective(1600px) rotateX(10deg) translateY(28px) scale(.97); } }
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > :not(h1) { animation: rise .8s var(--ease) backwards; }
  .hero-copy > .hero-description { animation-delay: .16s; }
  .hero-copy > .hero-actions { animation-delay: .24s; }
  .hero-copy > .hero-note { animation-delay: .3s; }
  .hero-line { animation: line-in .9s var(--ease) .04s backwards; }
  .hero-line + .hero-line { animation-delay: .12s; }
  .demo-overline { animation: rise .8s var(--ease) .1s backwards; }
  .app-window { animation: window-in 1.1s var(--ease) .12s backwards; }
  .transfer-dock { animation: rise 1s var(--ease) .34s backwards; }
}

/* ===== 响应式 ===== */
@media (max-width: 1100px) {
  .container { width: calc(100% - 64px); }
  .hero-grid { gap: 36px; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
  .transfer-dock { margin-inline: -16px 16px; }
  .desktop-nav { margin-left: 24px; gap: 20px; }
  .section { padding-block: 80px; }
  .spec-strip > div { padding-right: 16px; }
  .spec-strip > div + div { padding-left: 16px; }
  .feature-row { gap: 36px; }
  .plans { gap: 36px; }
  .manifest-grid { gap: 40px; }
  .manifest-list { column-gap: 32px; }
  .faq-teaser { gap: 48px; }
  .guide-layout { gap: 40px; grid-template-columns: minmax(0, 1fr) 240px; }
}
@media (max-width: 900px) {
  html { scroll-padding-top: 80px; }
  .site-header { height: 64px; }
  .desktop-nav { display: none; }
  .nav-drawer { display: block; }
  .hero-grid { grid-template-columns: 1fr; padding-top: 44px; gap: 40px; }
  .hero-copy { text-align: center; }
  .hero-description { margin-inline: auto; }
  .hero-actions, .hero-note { justify-content: center; }
  .hero-visual { width: min(680px, 100%); margin-inline: auto; }
  .demo-overline { text-align: center; }
  .transfer-dock { margin: 14px 0 0; }
  .spec-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec-strip > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .section-heading { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 32px; }
  .bento-lead, .bento-flow { grid-column: 1 / -1; }
  .bento-search, .bento-saved { grid-column: span 6; }
  .download-illustration { margin-left: 8px; }
  .manifest-grid { grid-template-columns: 1fr; }
  .manifest-head { position: static; }
  .pipeline { grid-template-columns: 1fr; gap: 32px; }
  .step { padding-top: 0; padding-left: 64px; }
  .pipeline .step:not(:last-child)::after { top: 52px; bottom: -24px; left: 22px; right: auto; width: 1px; height: auto; background: repeating-linear-gradient(180deg, var(--line-strong) 0 6px, transparent 6px 11px); }
  .plans { grid-template-columns: 1fr; }
  .plan-comparison { grid-template-columns: 1fr; }
  .cta-banner { flex-direction: column; align-items: flex-start; padding: 40px 32px; }
  .cta-art { align-self: flex-end; margin: -48px 24px 0 0; }
  .cta-art img { width: 120px; height: 120px; }
  .cta-art::before { inset: -26px; }
  .cta-art::after { inset: -52px; }
  .cta-compact { align-items: flex-start; }
  .faq-teaser { grid-template-columns: 1fr; gap: 24px; }
  .faq-layout { grid-template-columns: 1fr; gap: 24px; }
  .faq-toc { position: static; }
  .faq-toc ul { display: flex; flex-wrap: wrap; gap: 6px; }
  .faq-toc a { border: 1px solid var(--line); border-radius: 20px; gap: 6px; padding: 5px 12px; font-size: 13px; }
  .feature-row { grid-template-columns: 1fr; gap: 28px; padding-block: 48px; }
  .feature-row.row-reverse .feature-text { order: 0; }
  .two-col { grid-template-columns: 1fr; gap: 28px; }
  .deploy-grid { grid-template-columns: 1fr; }
  .guide-layout { grid-template-columns: 1fr; }
  .guide-side { position: static; }
  .download-layout { grid-template-columns: 1fr; }
  .check-list.highlights { grid-template-columns: 1fr; }
  .release { grid-template-columns: 1fr; gap: 10px; }
  .release-latest { margin-inline: 0; padding-inline: 20px; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-wrap: wrap; gap: 8px 20px; }
  .footer-bottom > span:nth-child(2) { order: 3; width: 100%; }
}
@media (max-width: 560px) {
  .container { width: calc(100% - 36px); }
  body { font-size: 14px; }
  .brand { font-size: 15px; }
  .brand img { width: 28px; height: 28px; }
  .button-small { font-size: 12px; min-height: 36px; padding: 8px 10px; }
  .hero h1 { font-size: clamp(34px, 10vw, 46px); }
  .hero-description { font-size: 14px; }
  .hero-actions { gap: 12px; }
  .hero-actions .button { font-size: 13px; min-height: 46px; padding-inline: 16px; }
  .transfer-dock { padding-inline: 12px; }
  .dock-spec { display: none; }
  .transfer-row { grid-template-columns: minmax(0, 1fr) auto; }
  .tr-icon { display: none; }
  .spec-strip { grid-template-columns: 1fr; padding-bottom: 36px; }
  .spec-strip > div, .spec-strip > div + div { padding: 18px 0 0; border-left: 0; }
  .section { padding-block: 60px; }
  .bento { gap: 16px; }
  .bento-search, .bento-saved { grid-column: 1 / -1; }
  .bento-card { padding: 24px 22px; }
  .bento-card h3 { font-size: 20px; }
  .download-illustration { margin: auto -23px -25px 0; }
  .manifest-list { grid-template-columns: 1fr; }
  .release-manifest { padding-block: 72px; }
  .plan { padding: 22px; }
  .cta-banner { padding: 32px 24px; border-radius: 18px; }
  .cta-copy h2 { font-size: 26px; }
  .cta-art { display: none; }
  .page-hero { padding: 36px 0 34px; }
  .download-card { padding: 24px 20px; }
  .spec-list > div { grid-template-columns: 1fr; gap: 2px; }
  .release-list a { grid-template-columns: 1fr; gap: 2px; }
  .footer-main { grid-template-columns: 1fr; }
  .toast { right: 16px; bottom: 16px; }
  .prose h2 { font-size: 21px; }
  .prose ul, .prose ol { padding-left: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .button:hover, .text-link:hover .icon, .feature-link:hover .icon { transform: none; }
}

/* 套餐价格（数字以客户端「软件会员」为准，调价时同步改首页） */
.plan > .plan-price { display: flex; align-items: baseline; gap: 6px; margin-top: 16px; color: var(--ink); font-size: 14px; }
.plan-price strong { font-size: 32px; font-weight: 650; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.plan-price span { color: var(--muted); }
.plan > .plan-terms { margin-top: 8px; font-size: 12.5px; line-height: 1.7; color: var(--ink-2); }