/*
  静态站（落地页 / 用户协议 / 隐私政策）的样式。

  ⚠️ 配色不是另配的一套：所有色值都取自应用内的 Palette.kt（阳光橙，M3 色调板按
  CIELAB/LCh 生成），逐位相同。改配色要两边一起改，否则从落地页点进应用会闪一下色。
  底色 #100E0B / #EAE8E6 与开屏那层（jsMain/resources/index.html）、Android 的
  values/colors.xml、iOS 的 LaunchBackground 也是同一块。

  这份文件**不能引任何外部资源**：字体走系统栈，图形走内联 SVG。
  应用那 16MB 的中文字体是给画布渲染用的，落地页绝不能碰——它要能在两秒内打开。
*/

:root {
    color-scheme: light dark;

    --bg: #eae8e6;
    --bg-panel: #f6f3f1;
    --bg-card: #ffffff;
    --border: #cac6c2;
    --border-soft: #ded9d5;
    --accent: #895100;
    --text: #1d1b1a;
    --text-dim: #494643;
    --text-faint: #7a7673;

    /* 涨跌色。⚠️ 只用在 K 线上——这套配色里红=涨=赚钱，拿它标别的东西会读反 */
    --up: #e5484d;
    --down: #3fa57a;

    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

    --wrap: 1060px;
    --measure: 36em;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #100e0b;
        --bg-panel: #1d1b1a;
        --bg-card: #211f1e;
        --border: #494643;
        --border-soft: #35322f;
        --accent: #ffb86d;
        --accent-ctn: #683d00;
        --text: #e4e2e0;
        --text-dim: #cac6c2;
        --text-faint: #94908d;
    }
}

/* 站内的亮暗切换与应用共用 localStorage 的 themeMode，由各页顶部那段脚本盖到根节点上。
   写在媒体查询之后，两个方向都要压得住 */
:root[data-theme="light"] {
    --bg: #eae8e6;
    --bg-panel: #f6f3f1;
    --bg-card: #ffffff;
    --border: #cac6c2;
    --border-soft: #ded9d5;
    --accent: #895100;
    --text: #1d1b1a;
    --text-dim: #494643;
    --text-faint: #7a7673;
}

:root[data-theme="dark"] {
    --bg: #100e0b;
    --bg-panel: #1d1b1a;
    --bg-card: #211f1e;
    --border: #494643;
    --border-soft: #35322f;
    --accent: #ffb86d;
    --text: #e4e2e0;
    --text-dim: #cac6c2;
    --text-faint: #94908d;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.5;
    /* 中文在中低字重下更清楚，别让 macOS 的次像素渲染把它糊成一团 */
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

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

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

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 24px;
}

/* ---- 顶栏 ---------------------------------------------------------- */
/* 高度、品牌标尺寸、字距都对齐应用内的 AppTopBar（56dp / 15dp / 3sp），
   两边看着才像同一个产品的两张脸 */
.top {
    position: sticky;
    top: 0;
    z-index: 10;
    height: 56px;
    /* 先给一份不透明的兜底：color-mix 不认识的浏览器会丢弃整条声明，
       没有兜底的话吸顶栏就是全透明的，滚动时标题会和正文叠在一起 */
    background: var(--bg);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border-soft);
}

.top .wrap {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    text-decoration: none;
}

.brand svg { display: block; }

/* 字标「起落 FLUX」。与应用里的 BrandWordmark 同一套比例:
   拉丁那半 68% 字号、同字距、压淡一档 —— 备案登记的名字是「起落」,
   FLUX 只是随行的英文名,两半同重就成了两个并列的名字。
   baseline 对齐而不是居中:两半字号差三分之一,按盒子居中会让拉丁那半浮在中文的腰上 */
.brand b {
    display: inline-flex;
    align-items: baseline;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2.6px;
    white-space: nowrap;
}

.brand b i {
    margin-left: 3px;
    font-size: 9px;
    font-style: normal;
    color: var(--text-dim);
}

.top nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 13px;
}

/* ⚠️ 必须排除 .btn。`.top nav a` 的特指度(0,2,1)高过 `.btn`(0,1,0),不排除的话
   顶栏里那颗实心按钮的字色会被这条改成 --text-dim,变成浅灰压在强调色底上,几乎读不出来。
   同一份样式在首屏里(不在 nav 下)却是正常的——只有顶栏那颗坏,极难一眼看出是层叠打架 */
.top nav a:not(.btn) {
    color: var(--text-dim);
    text-decoration: none;
}

.top nav a:not(.btn):hover { color: var(--text); }

/* ---- 按钮 ---------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 18px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: var(--accent);
    /* 强调色在亮暗两态分别是 tone(40) 与 tone(80)，其上的可读色相应是白与近黑 */
    color: var(--bg);
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 90ms ease, filter 140ms ease;
}

.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(0.97); }

.btn.ghost {
    background: transparent;
    color: var(--text-dim);
    border-color: var(--border);
}

.btn.ghost:hover {
    color: var(--text);
    border-color: var(--accent);
    filter: none;
}

/* ---- 排版 ---------------------------------------------------------- */
.eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
}

h1 {
    margin: 14px 0 0;
    font-size: clamp(1.9rem, 4.6vw, 3rem);
    line-height: 1.22;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

h2 {
    margin: 0;
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: -0.005em;
    text-wrap: balance;
}

h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

p { margin: 0; }

.lede,
.prose p,
.prose li {
    color: var(--text-dim);
    line-height: 1.85;
}

.lede {
    margin-top: 20px;
    max-width: var(--measure);
    font-size: clamp(0.98rem, 1.5vw, 1.08rem);
}

section {
    padding: 76px 0;
    border-top: 1px solid var(--border-soft);
}

section:first-of-type { border-top: 0; }

.sec-head {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: var(--measure);
    margin-bottom: 40px;
}

/* ---- 首屏 ---------------------------------------------------------- */
.hero {
    padding: clamp(56px, 9vw, 104px) 0 0;
}

.hero .cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
}

/* figure 自带 1em 40px 的默认外边距，左右那 40px 会把图表从容器里推歪，必须清掉 */
.chart {
    margin: clamp(48px, 7vw, 76px) 0 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.chart svg {
    display: block;
    width: 100%;
    height: auto;
}

.chart .u { fill: var(--up); stroke: var(--up); }
.chart .d { fill: var(--down); stroke: var(--down); }
.chart line { stroke-width: 1.6; }

.caption {
    max-width: var(--measure);
    font-size: 13px;
    line-height: 1.75;
    color: var(--text-faint);
}

/* ---- 卡片栅格 ------------------------------------------------------- */
.grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px;
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    background: var(--bg-card);
}

.card p {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-dim);
}

/* 步骤：这里的序号是真的序列（一轮从开局走到复盘），不是装饰 */
.steps {
    display: grid;
    gap: 2px;
    counter-reset: step;
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    overflow: hidden;
    background: var(--border-soft);
}

.steps li {
    counter-increment: step;
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 18px;
    align-items: start;
    padding: 22px 24px;
    background: var(--bg-panel);
}

.steps li::before {
    content: counter(step, decimal-leading-zero);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    padding-top: 2px;
}

.steps h3 { margin-bottom: 6px; }

.steps p {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-dim);
}

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

.feats {
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    overflow: hidden;
    background: var(--border-soft);
}

.feats li {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 22px;
    background: var(--bg-panel);
    font-size: 14px;
    line-height: 1.75;
    color: var(--text-dim);
}

.feats b {
    color: var(--text);
    font-size: 14.5px;
    font-weight: 600;
}

.feats i {
    font-style: normal;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--accent);
}

/* ---- 风险声明 ------------------------------------------------------- */
.notice {
    padding: 26px 28px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--bg-panel);
}

.notice p {
    max-width: 60em;
    font-size: 13.5px;
    line-height: 1.9;
    color: var(--text-dim);
}

.notice strong { color: var(--text); font-weight: 600; }

/* ---- 正文页（协议 / 隐私） ------------------------------------------ */
.doc {
    padding: clamp(48px, 7vw, 80px) 0 0;
    max-width: 46em;
}

.doc .updated {
    margin-top: 16px;
    font-size: 13px;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

/* 正文块也挂 .doc（要它那份 46em 宽度），所以必须把 .doc 的上内边距压回 0——
   否则标题区和正文之间是 80px 内边距 + 48px 外边距叠出来的一大片空白。
   写成 padding 简写而不是 padding-bottom，靠的是它排在 .doc 之后、同特指度后来居上 */
.prose {
    display: flex;
    flex-direction: column;
    gap: 34px;
    margin-top: 48px;
    padding: 0 0 64px;
}

.prose section {
    padding: 0;
    border: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.prose h2 {
    font-size: 1.05rem;
    display: flex;
    gap: 12px;
}

.prose h2 span {
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.prose p, .prose li { font-size: 15px; }

.prose ul {
    margin: 0;
    padding-left: 1.2em;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.prose li::marker { color: var(--text-faint); }

.prose code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
}

.prose .tbl-wrap { overflow-x: auto; }

.prose table {
    border-collapse: collapse;
    width: 100%;
    min-width: 460px;
    font-size: 13.5px;
}

.prose th, .prose td {
    text-align: left;
    vertical-align: top;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border-soft);
    line-height: 1.7;
}

.prose th {
    color: var(--text);
    font-weight: 600;
    white-space: nowrap;
    border-bottom-color: var(--border);
}

.prose td { color: var(--text-dim); }

/* ---- 页脚 ---------------------------------------------------------- */
/* 备案号必须在**首页底部**且链接到工信部——这是《互联网信息服务管理办法》的公示义务，
   不是可选的装饰。三个页面都带一份 */
footer {
    border-top: 1px solid var(--border-soft);
    padding: 44px 0 56px;
}

footer .wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 40px;
    align-items: flex-start;
}

footer .col {
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-size: 13px;
    color: var(--text-faint);
    line-height: 1.7;
}

footer .col.links {
    margin-left: auto;
    align-items: flex-end;
    text-align: right;
}

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

/* 顶栏在窄屏放不下：品牌字标 + 两个锚点 + 按钮，横向约 410px。
   放不下时 flex 是把锚点的字**竖着折行**，56px 的条子里塞不下就溢出上下——
   看着像坏掉了。让锚点先退场：它们只是页内跳转的便利，页脚里都有；
   「进入应用」是这页存在的目的，任何宽度都不能省 */
@media (max-width: 460px) {
    .top nav a:not(.btn) { display: none; }
}

@media (max-width: 640px) {
    section { padding: 56px 0; }
    .steps li { grid-template-columns: 34px 1fr; gap: 12px; padding: 20px; }
    footer .col.links { margin-left: 0; align-items: flex-start; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition-duration: 1ms !important; }
}

/* ── 应用内嵌入（?embed=1，见各页 head 里那段脚本） ──────────────────────────
   这几份文档在应用里是由系统 WebView 打开的，人此刻的心智是「我在设置页看协议」，
   而不是「我在浏览器里逛这个站」。所以要藏掉一切把他送出这份文档的入口：

     · 顶栏整条 —— 它左边是品牌标（链到 /index）、右边是「进入应用」按钮。
       在一个已经身处应用之中的 WebView 里摆一颗「进入应用」，指向的是网页版；
       点下去会跳出应用、开一个浏览器，而他多半以为自己还在设置页里。
     · 页脚里指向首页与应用的那两个链接 —— 同一件事，只是位置不同。
       藏顶栏而留着它们等于换个地方留了同一个后门。

   ⚠️ 协议之间互跳（/terms ↔ /privacy ↔ /sdk）与备案号链接**保留**：
   那是同一份文档的组成部分，不是出站。站内跳转怎么把 embed 带过去，见 head 里那段。 */
.embed .top { display: none; }
.embed footer .links a[href="/index"],
.embed footer .links a[href="/"] { display: none; }