/* ============================================================
   PactMe 官网 · 样式
   配色与尺寸取自 design/ui_v2/shared/pact-theme.css，那是整套的唯一
   出处，app 侧对位 ui/theme/PactPalette.kt 与 PactColors.kt。
   官网不另立一套：用户在这里看到的绿、圆角、留白，要和他装上之后
   看到的是同一个东西。

   原来这里是一套鼠尾草绿（#4A7A60 一带）加两档暖金，那是 ui_v2
   之前的配色，app 早就换到柠檬绿 + 近黑主角卡了 —— 官网留在旧版
   等于把两个产品摆在一起。

   跟随系统明暗，不给手动开关：官网是一次性浏览，顶栏已经有中英
   切换，再加一个主题胶囊只是把两个开关挤在一起。
   ============================================================ */

/* ── 调色板（绝对色值只在这里出现）───────────────────── */
:root {
    --p-brand-50:  #F7FCE8;
    --p-brand-100: #EFF9CC;
    --p-brand-200: #E2F4A4;
    --p-brand-300: #D3EF72;
    --p-brand-400: #C8F04A;   /* 强调本体：按钮底、选中态 */
    --p-brand-500: #A6D92B;
    --p-brand-600: #7DAE1B;
    --p-brand-700: #567C15;   /* 文字档 */
    --p-brand-800: #3C5711;

    /* 中性：暖黄绿灰，和柠檬同源。n-900 同时是正文色和亮绿上的墨色 */
    --p-n-900: #14170E;
    --p-n-800: #232719;
    --p-n-700: #414736;
    --p-n-600: #5E6551;
    --p-n-500: #888F7A;
    --p-n-400: #B6BCA8;
    --p-n-300: #CCD1BF;
    --p-n-200: #DFE3D5;
    --p-n-100: #EAEDE2;
    --p-n-75:  #F2F4EC;
    --p-n-50:  #F7F9F2;
    --p-n-bg:  #F1F3EA;
    --p-white: #FFFFFF;

    /* 缓停：雾蓝。缓停是守约的一种，不是出错，所以不用橙/金 */
    --p-calm-50:  #EEF5FA;
    --p-calm-100: #DAEAF4;
    --p-calm-300: #9BC8E3;
    --p-calm-400: #6FAED6;
    --p-calm-600: #2D77A3;
    --p-calm-700: #235D7E;

    /* 违约：陶红 */
    --p-bad-50:  #FCEEEB;
    --p-bad-100: #F8DAD4;
    --p-bad-300: #EFA79E;
    --p-bad-500: #DD554B;
    --p-bad-700: #A23027;

    /* 主角卡：近黑。明暗两套都是黑底白字，不反相 */
    --p-ink-a: #1E2216;
    --p-ink-b: #101309;

    /* 暗色底。不用纯黑：没有层级空间 */
    --p-d-bg:      #101208;
    --p-d-surface: #1B1E15;
    --p-d-raised:  #262A1F;
    --p-d-fill:    #21251A;
    --p-d-line:    #353A2C;
    --p-d-stroke:  #464C3C;
    --p-d-t1: #EDF0E5;
    --p-d-t2: #A9AF9C;
    --p-d-t3: #8C9281;
    --p-d-t4: #565C4C;

    --dk-brand-surface: #1F2D12;
    --dk-calm-surface:  #142B38;
    --dk-bad-surface:   #2B1A17;
    --dk-hero-a: #0B0D05;
    --dk-hero-b: #060803;

    /* ── 尺寸。两套主题共用 ───────────────────────── */
    --rad-xs:   8px;
    --rad-sm:   12px;
    --rad-md:   20px;
    --rad-lg:   28px;
    --rad-full: 999px;

    --maxw: 1080px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
}

/* ── 语义层 · 亮色（主场）─────────────────────────────── */
:root,
[data-theme="light"] {
    color-scheme: light;

    --bg-page:   var(--p-n-bg);
    --bg-card:   var(--p-white);
    --bg-fill:   var(--p-n-50);
    --bg-inset:  var(--p-n-100);

    --text-primary:   var(--p-n-900);
    --text-secondary: var(--p-n-700);
    --text-tertiary:  var(--p-n-600);
    --text-disabled:  var(--p-n-500);

    --line-soft:   rgba(20,23,14,.08);
    --line-strong: var(--p-n-300);
    --divider:     var(--p-n-100);
    --track:       var(--p-n-300);

    --brand-text:    var(--p-brand-700);
    --brand-solid:   var(--p-brand-600);
    --brand-surface: var(--p-brand-50);
    --brand-fade:    var(--p-brand-100);
    --brand-line:    var(--p-brand-300);
    --brand-ground:  var(--p-brand-400);
    --brand-graph:   var(--p-brand-500);

    --calm-text:    var(--p-calm-700);
    --calm-solid:   var(--p-calm-600);
    --calm-surface: var(--p-calm-50);
    --calm-dim:     var(--p-calm-300);

    --bad-text:    var(--p-bad-700);
    --bad-solid:   var(--p-bad-500);
    --bad-surface: var(--p-bad-50);
    --bad-dim:     var(--p-bad-300);

    --grad-a:  var(--p-ink-a);
    --grad-b:  var(--p-ink-b);
    --on-grad: var(--p-white);

    --on-brand: var(--p-n-900);
    --on-vivid: var(--p-white);

    --shadow-sm: 0 1px 2px rgba(20,23,14,.04), 0 0 0 1px rgba(20,23,14,.055);
    --shadow-md: 0 4px 14px rgba(20,23,14,.06), 0 0 0 1px rgba(20,23,14,.055);
    --shadow-lg: 0 18px 50px rgba(20,23,14,.14), 0 0 0 1px rgba(20,23,14,.07);
    --scrim: rgba(20,23,14,.50);

    /* 主角卡的描边。亮色下不需要 —— 近黑压浅底边界自己就在 */
    --hero-ring: transparent;

    /* 顶栏的半透明底，跟着页底色走 */
    --header-veil: rgba(241,243,234,.86);
}

/* ── 语义层 · 暗色 ───────────────────────────────────────
   不是把亮色反过来。刻意的不对称：
   1) fill 往亮里走，不是往深里走 —— 它是「卡面上垫一层」
   2) 强调色全部提亮，brand-700 压在近黑上完全不可读
   3) 主角卡换值 —— 亮色靠「近黑压浅底」立起来，暗色里同一块黑比
      页底还亮，规则失效。暗色下它是全页最深的一块加一圈柠檬发丝边

   只认 data-theme="dark" 这一个开关，不再写 prefers-color-scheme ——
   跟随系统这件事交给 theme.js：它在首屏之前就把 data-theme 写好。
   媒体查询和属性选择器两套并存就得把这五十行令牌抄两遍，
   一处改漏另一处就是两套主题对不上
   ───────────────────────────────────────────────────── */
:root[data-theme="dark"] {
    color-scheme: dark;

    --bg-page:   var(--p-d-bg);
    --bg-card:   var(--p-d-surface);
    --bg-fill:   var(--p-d-fill);
    --bg-inset:  var(--p-d-raised);

    --text-primary:   var(--p-d-t1);
    --text-secondary: var(--p-d-t2);
    --text-tertiary:  var(--p-d-t3);
    --text-disabled:  var(--p-d-t4);

    --line-soft:   rgba(237,240,229,.10);
    --line-strong: var(--p-d-stroke);
    --divider:     var(--p-d-line);
    --track:       var(--p-d-line);

    --brand-text:    var(--p-brand-300);
    --brand-solid:   var(--p-brand-400);
    --brand-surface: var(--dk-brand-surface);
    --brand-fade:    var(--dk-brand-surface);
    --brand-line:    var(--p-brand-600);
    /* 和亮色同一个值：主操作在两套主题下是同一块颜色 */
    --brand-ground:  var(--p-brand-400);
    --brand-graph:   var(--p-brand-600);

    --calm-text:    var(--p-calm-300);
    --calm-solid:   var(--p-calm-400);
    --calm-surface: var(--dk-calm-surface);
    --calm-dim:     var(--p-calm-300);

    --bad-text:    var(--p-bad-300);
    --bad-solid:   var(--p-bad-500);
    --bad-surface: var(--dk-bad-surface);
    --bad-dim:     #C9736A;

    --grad-a:  var(--dk-hero-a);
    --grad-b:  var(--dk-hero-b);
    --on-grad: var(--p-white);

    --on-brand: var(--p-n-900);
    --on-vivid: var(--p-white);

    --shadow-sm: 0 0 0 1px rgba(237,240,229,.06);
    --shadow-md: 0 2px 12px rgba(0,0,0,.42), 0 0 0 1px rgba(237,240,229,.06);
    --shadow-lg: 0 18px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(237,240,229,.09);
    --scrim: rgba(4,5,3,.68);

    --hero-ring: rgba(200,240,74,.22);
    --header-veil: rgba(16,18,8,.86);
}

/* ── 基础 ─────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    font-family: var(--font);
    background: var(--bg-page);
    color: var(--text-primary);
    line-height: 1.65;
    font-size: 16px;
}

/* ── Material Symbols Rounded ────────────────────────────
   和 app、design/ui_v2 同一套图标字体。原来这里是 emoji ——
   emoji 在 Win/Mac/Android 上是三套完全不同的画风，而且和 app 里
   的图标不是一个体系，官网摆 🧊、app 里摆 Material 图标，两边
   看着不像一个产品。 */
.ms {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    direction: ltr;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    -webkit-font-smoothing: antialiased;
    user-select: none;
    flex: none;
}

.ms.fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.ms-14 { font-size: 14px; }
.ms-16 { font-size: 16px; }
.ms-18 { font-size: 18px; }
.ms-20 { font-size: 20px; }
.ms-24 { font-size: 24px; }

/* ── 语言切换：未匹配当前语言的区块直接不渲染 ───────────── */
[data-lang] {
    display: none;
}

html[data-locale="en"] [data-lang="en"],
html[data-locale="zh"] [data-lang="zh"] {
    display: revert;
}

/* 行内语言片段需要保持 inline，避免撑开成块级 */
span[data-lang],
a[data-lang] {
    display: none;
}

html[data-locale="en"] span[data-lang="en"],
html[data-locale="zh"] span[data-lang="zh"],
html[data-locale="en"] a[data-lang="en"],
html[data-locale="zh"] a[data-lang="zh"] {
    display: inline;
}

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

/* ── 顶栏 ─────────────────────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--header-veil);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line-soft);
}

.site-header .wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 64px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 17px;
    color: var(--text-primary);
    text-decoration: none;
    letter-spacing: -0.01em;
}

.brand-mark {
    width: 30px;
    height: 30px;
    flex: none;
}

.site-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 2px;
}

.site-nav a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    padding: 8px 12px;
    border-radius: var(--rad-xs);
    transition: color .15s, background .15s;
}

.site-nav a:hover {
    color: var(--brand-text);
    background: var(--brand-surface);
}

.lang-toggle {
    display: flex;
    background: var(--bg-fill);
    box-shadow: inset 0 0 0 1px var(--line-soft);
    border-radius: var(--rad-full);
    padding: 3px;
    margin-left: 8px;
}

.lang-toggle button {
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 13px;
    color: var(--text-tertiary);
    padding: 4px 13px;
    border-radius: var(--rad-full);
    cursor: pointer;
    transition: background .15s, color .15s;
}

/* 选中档走卡面 + 墨字，不走柠檬底 —— 柠檬是主操作那一档，
   语言切换不是主操作，占了那个色就会和 CTA 抢 */
.lang-toggle button[aria-pressed="true"] {
    background: var(--bg-card);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

/* 主题开关。做成一颗圆钮而不是像语言那样两格：
   两格要塞「亮/暗」两个词，620px 以下顶栏换行后和语言挤在一排太满。
   图标走内联 svg 不走图标字体 —— 隐私政策和服务条款那两页
   没有加载 Material Symbols，用字体这里会先空一块再跳出来 */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: none;
    margin-left: 6px;
    padding: 0;
    border: 0;
    border-radius: var(--rad-full);
    background: var(--bg-fill);
    box-shadow: inset 0 0 0 1px var(--line-soft);
    color: var(--text-tertiary);
    cursor: pointer;
    transition: background .15s, color .15s;
}

.theme-toggle:hover {
    color: var(--brand-text);
    background: var(--brand-surface);
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* 显示的是「当前是哪套」，不是「点了会变成哪套」 */
.theme-toggle .ico-moon,
:root[data-theme="dark"] .theme-toggle .ico-sun {
    display: none;
}

:root[data-theme="dark"] .theme-toggle .ico-moon {
    display: block;
}

/* ── Hero ─────────────────────────────────────────────────
   两栏：左边说话，右边给看。原来是居中单栏纯文字 —— 讲的是
   「打开应用前的那一个停顿」，却没有一处让人看到那个停顿长什么样。
   窄屏下塌回单栏，mock 落到文案下面。 */
.hero {
    padding: 72px 0 76px;
}

.hero .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: 56px;
    align-items: center;
}

.hero-copy {
    max-width: 560px;
}

.hero h1 {
    font-size: clamp(34px, 4.6vw, 52px);
    line-height: 1.16;
    margin: 0 0 18px;
    letter-spacing: -0.025em;
}

/* 强调走文字档（深绿），不走柠檬本体 —— 柠檬是当底用的那一档，
   拿它写 52px 的标题在浅页底上只有 1.4 的对比度 */
.hero h1 .accent {
    color: var(--brand-text);
}

.hero .lede {
    font-size: clamp(16px, 1.6vw, 19px);
    color: var(--text-secondary);
    margin: 0 0 32px;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--brand-surface);
    color: var(--brand-text);
    box-shadow: inset 0 0 0 1px var(--brand-line);
    border-radius: var(--rad-full);
    padding: 7px 15px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 24px;
}

.cta-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: var(--rad-full);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: transform .12s, box-shadow .12s, background .15s;
}

.btn:active { transform: scale(.98); }

/* 主按钮底走柠檬本体、字走墨色 —— 两套主题下是同一块颜色，
   用户切系统明暗时不用重新学「哪个是主操作」。
   不要写死白当前景：底是亮绿，白字压不住 */
.btn-primary {
    background: var(--brand-ground);
    color: var(--on-brand);
}

.btn-primary:hover {
    background: var(--p-brand-300);
    box-shadow: 0 6px 18px rgba(124,174,27,.28);
    transform: translateY(-1px);
}

.btn-ghost {
    background: var(--bg-card);
    color: var(--text-secondary);
    box-shadow: inset 0 0 0 1px var(--line-strong);
}

.btn-ghost:hover {
    color: var(--brand-text);
    box-shadow: inset 0 0 0 1.5px var(--brand-line);
}

/* ── 通用区块 ─────────────────────────────────────────── */
section.band {
    padding: 72px 0;
}

section.band.alt {
    background: var(--bg-card);
    border-block: 1px solid var(--line-soft);
}

.section-title {
    font-size: clamp(25px, 2.8vw, 33px);
    margin: 0 0 10px;
    text-align: center;
    letter-spacing: -0.022em;
}

.section-sub {
    text-align: center;
    color: var(--text-tertiary);
    margin: 0 auto 48px;
    max-width: 580px;
    font-size: 15px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));
    gap: 18px;
}

/* 卡片走 20px 圆角 + 一圈极淡描边，和 app 里的 .card 同一个物件。
   不靠深浅对撞分开卡和页底，靠那圈描边 —— 见 pact-theme 文件头 */
.card {
    background: var(--bg-card);
    border-radius: var(--rad-md);
    padding: 26px 24px;
    box-shadow: var(--shadow-sm);
}

/* 白区里的卡反过来垫一层浅填充，否则白卡压白区看不出边界 */
section.band.alt .card {
    background: var(--bg-fill);
}

/* 图标底：圆角方块 + 品牌浅底，和 app 里 .row-icon / .perm-sheet-ico
   同一个处理。原来这里是 27px 的 emoji 裸排 */
.card-ico {
    width: 40px;
    height: 40px;
    border-radius: var(--rad-sm);
    display: grid;
    place-items: center;
    background: var(--brand-surface);
    color: var(--brand-text);
    margin-bottom: 15px;
}

.card h3 {
    margin: 0 0 8px;
    font-size: 17px;
    letter-spacing: -0.01em;
}

.card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14.5px;
}

/* ── 三步流程 ─────────────────────────────────────────────
   每步配一张小 mock。原来三张卡只有标题和一段话，「设置大约一分钟」
   这句话得让人看到那一分钟里会看到什么。 */
.steps {
    counter-reset: step;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 20px;
}

.step {
    background: var(--bg-card);
    border-radius: var(--rad-md);
    box-shadow: var(--shadow-sm);
    padding: 24px 22px 22px;
    display: flex;
    flex-direction: column;
}

section.band.alt .step {
    background: var(--bg-fill);
}

.step-num {
    counter-increment: step;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brand-ground);
    color: var(--on-brand);
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 14px;
}

.step-num::before {
    content: counter(step);
}

.step h3 {
    margin: 0 0 7px;
    font-size: 17px;
    letter-spacing: -0.01em;
}

.step p {
    margin: 0 0 20px;
    color: var(--text-secondary);
    font-size: 14.5px;
}

/* mock 钉在卡底，三张卡的 mock 因此横向对齐，
   不会因为上面文案长短不同而高低错开 */
.step-shot {
    margin-top: auto;
}

/* ════════════════════════════════════════════════════════
   界面 mock
   全部纯 HTML/CSS 画，不用截图：截图要跟着 app 每次改版重拍，
   而且在 2x 屏上要么糊要么是几百 KB。这些 mock 直接引同一套语义
   令牌，app 改色官网跟着改，而且自动有暗色版本。

   数据照 design/ui_v2 原型里的那几组（NGA 29m、DeepSeek 2/3 守约、
   85% 守约率），不编新的 —— 官网和原型对不上会很难查。
   ════════════════════════════════════════════════════════ */

/* ── 手机外壳 ─────────────────────────────────────────── */
.phone {
    position: relative;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    aspect-ratio: 9 / 18.6;
    background: var(--bg-page);
    border-radius: 38px;
    box-shadow: var(--shadow-lg);
    /* 机身那圈。走 line-strong 而不是写死灰：暗色下要提亮，
       亮色下要压暗，方向相反 */
    outline: 1px solid var(--line-strong);
    outline-offset: -1px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 状态栏。时间写死 8:23，和原型一致 */
.ph-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    flex: none;
}

.ph-bar-icons {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-secondary);
}

/* ── 底层：被监管的那个应用 ───────────────────────────────
   骨架灰条，不画具体某个 app —— 画成抖音或微博是用别人的商标，
   而这里要表达的只是「你正在刷的那个东西」。 */
.ph-host {
    flex: 1;
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    opacity: .5;
}

.ph-host-tabs {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: var(--text-disabled);
}

.ph-host-tabs .on {
    color: var(--text-primary);
    font-weight: 600;
}

.ph-post {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ph-post-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ph-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bg-inset);
    flex: none;
}

.ph-line {
    height: 8px;
    border-radius: 4px;
    background: var(--bg-inset);
}

.ph-thumb {
    height: 78px;
    border-radius: var(--rad-sm);
    background: var(--bg-inset);
}

/* 底层应用的底栏。host 整块 opacity .5，这里不用再压一次 */
.ph-host-nav {
    margin-top: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 8px 0 2px;
    color: var(--text-disabled);
}

/* ── 遮罩 + 底部弹层 ─────────────────────────────────────
   这是整个 app 的核心瞬间：你点开应用，它插进来问一句。
   首屏给看的就是这个。 */
.ph-scrim {
    position: absolute;
    inset: 0;
    background: var(--scrim);
}

.ph-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-card);
    border-radius: var(--rad-lg) var(--rad-lg) 0 0;
    padding: 10px 18px 20px;
    box-shadow: 0 -2px 28px rgba(0,0,0,.18);
}

.ph-grip {
    width: 34px;
    height: 4px;
    border-radius: 2px;
    background: var(--line-strong);
    margin: 0 auto 14px;
}

.ph-sheet-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

/* 图标走中性档：这一层的亮绿留给「今天第几次」那个角标和确认按钮，
   一张卡上只点两处 —— 同 design/ui_v2/guard-overlay.html */
.ph-sheet-ico {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--bg-fill);
    color: var(--text-secondary);
    flex: none;
}

/* 先说「打开的是哪个应用」再问时长：主语在前，问句在后 */
.ph-sheet-app {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.4;
}

.ph-sheet-ask {
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.4;
}

/* 「今天第 3 次」—— 来自会话记录，让人知道系统记着，
   而不是每次都从零开始问同一句 */
.ph-tally {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    color: var(--brand-text);
    background: var(--brand-surface);
    padding: 4px 9px;
    border-radius: var(--rad-xs);
    flex: none;
}

/* DURATION_OPTIONS 九项，3×3 正好填满不留孤格 */
.ph-durs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin-bottom: 12px;
}

.ph-dur {
    text-align: center;
    padding: 10px 0;
    border-radius: var(--rad-sm);
    background: var(--bg-fill);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    box-shadow: inset 0 0 0 1px var(--line-soft);
}

/* 选中用描边 + 浅底，不用实心块：这九个是平等的选项，不是九个号召。
   实底柠檬留给下面那个确认按钮 —— 一层里只能有一个主操作 */
.ph-dur.on {
    background: var(--brand-surface);
    color: var(--brand-text);
    font-weight: 700;
    box-shadow: inset 0 0 0 1.5px var(--brand-line);
}

.ph-remind {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-radius: var(--rad-sm);
    background: var(--bg-fill);
    margin-bottom: 14px;
}

.ph-remind > .ms {
    color: var(--brand-text);
}

.ph-remind-title {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.4;
}

.ph-remind-sub {
    font-size: 11px;
    color: var(--text-tertiary);
    line-height: 1.4;
}

/* 开关走柠檬实底，关是中性槽 */
.ph-switch {
    margin-left: auto;
    width: 36px;
    height: 21px;
    border-radius: var(--rad-full);
    background: var(--brand-ground);
    position: relative;
    flex: none;
}

.ph-switch::after {
    content: '';
    position: absolute;
    top: 2.5px;
    right: 2.5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--p-white);
}

.ph-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    padding: 13px 0;
    border-radius: var(--rad-full);
    background: var(--brand-ground);
    color: var(--on-brand);
    font-size: 14px;
    font-weight: 600;
}

/* 算出来的结束时刻。「15 分钟」是抽象的，「到 8:38」是具体的，
   后者才让人能对着它安排下一件事 */
.ph-until {
    text-align: center;
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 9px;
}

.ph-until b {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ── 看板 mock ────────────────────────────────────────────
   功能区右侧那张。整页只有一张近黑的主角卡（会话卡），
   其余是白卡 —— 「浅底 + 一块黑 + 一点亮绿」。 */
.ph-scroll {
    flex: 1;
    padding: 2px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    overflow: hidden;
}

/* 列方向的 flex 会把超出的那部分按比例从每个子项身上扣回来，
   卡越高扣得越狠 —— 主角卡首当其冲被压成一条。钉成自然高度，
   多出来的让机身裁掉就好 */
.ph-scroll > * { flex: none; }

/* 看板和统计本来就比一屏长，是要往下滑的。底部收一道渐隐，
   说明下面还有 —— 硬切一刀会被看成布局坏了 */
.ph-scroll.cut {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent);
}

.ph-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 6px 2px 2px;
}

.ph-title {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.ph-date {
    text-align: right;
    font-size: 11px;
    color: var(--text-tertiary);
    line-height: 1.5;
}

.ph-date b {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

/* 主角卡。渐变角度 160°：跨度本来就小，角度越接近垂直，
   那点跨度越读成「一块底色有光」而不是「两种颜色拼接」 */
.ph-session {
    background: linear-gradient(160deg, var(--grad-a), var(--grad-b));
    border-radius: var(--rad-lg);
    padding: 16px;
    color: var(--on-grad);
    box-shadow: var(--shadow-md), inset 0 0 0 1px var(--hero-ring);
    position: relative;
    overflow: hidden;
}

/* 右上角那一团。基于 currentColor 而不是写死白 —— 这张卡的底色
   是个可以改的决定，这一团得跟着走 */
.ph-session::after {
    content: '';
    position: absolute;
    top: -46px;
    right: -46px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: color-mix(in srgb, currentColor 6%, transparent);
}

.ph-session-head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    position: relative;
}

/* 点走 --on-grad 而不是某一族的浅档：那些档里挑不出一个在两套
   主题下都亮得起来的 */
.ph-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--on-grad);
    opacity: .9;
    animation: ph-pulse 1.6s ease-in-out infinite;
}

@keyframes ph-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .4; transform: scale(.8); }
}

/* 卡内的弱化前景一律 currentColor 混透明，不写死白 */
.ph-session-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3px;
    color: color-mix(in srgb, currentColor 85%, transparent);
}

.ph-mode-tag {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: var(--rad-full);
    background: color-mix(in srgb, currentColor 12%, transparent);
    color: color-mix(in srgb, currentColor 88%, transparent);
}

.ph-session-body {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
}

.ph-ring {
    position: relative;
    width: 66px;
    height: 66px;
    flex: none;
}

.ph-ring svg {
    transform: rotate(-90deg);
    display: block;
}

.ph-ring .groove {
    stroke: color-mix(in srgb, currentColor 16%, transparent);
}

.ph-ring .arc {
    stroke: var(--on-grad);
    stroke-linecap: round;
}

.ph-ring-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
}

.ph-ring-time {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.5px;
    font-variant-numeric: tabular-nums;
}

.ph-ring-unit {
    font-size: 9px;
    color: color-mix(in srgb, currentColor 65%, transparent);
}

.ph-session-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ph-session-app {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
}

.ph-session-line {
    font-size: 10.5px;
    color: color-mix(in srgb, currentColor 72%, transparent);
    line-height: 1.5;
}

/* ── 应用图标占位 ─────────────────────────────────────────
   举例用的是真实应用的「名字」，图标是两个字母 + 一道渐变。
   不画它们的真实 logo，也不用它们的品牌色：名字是指代（说清楚守约
   管的是哪类应用），logo 和品牌色是别人的商标资产，画上去既是侵权
   风险，也容易被应用商店判成冒充。
   前景走 --on-vivid（两套主题下都是白，一个字不能变） */
.ph-ico {
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: var(--on-vivid);
    font-weight: 700;
    flex: none;
    width: 26px;
    height: 26px;
    font-size: 11px;
    letter-spacing: -.02em;
}

.ph-ico.md { width: 32px; height: 32px; font-size: 12px; }

/* 三道中性偏冷的渐变，刻意避开这几家各自的招牌色 */
.ic-tt { background: linear-gradient(135deg, #5A6B8C, #3C4A66); }
.ic-yt { background: linear-gradient(135deg, #E4A853, #C88B3F); }
.ic-ig { background: linear-gradient(135deg, #4A9EFF, #3B7FCC); }
/* 浏览器不指名某一家，给一道中性灰 */
.ic-br { background: linear-gradient(135deg, #8A9088, #686E66); }

/* ── 普通卡（看板里的白卡）────────────────────────────── */
.ph-card {
    background: var(--bg-card);
    border-radius: var(--rad-md);
    padding: 14px;
    box-shadow: var(--shadow-sm);
}

.ph-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.ph-card-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.01em;
}

.ph-card-action {
    font-size: 11px;
    color: var(--brand-text);
    display: inline-flex;
    align-items: center;
    gap: 1px;
}

/* 守约率：环 + 右侧三行细项。
   数字挪进环里，环本身就编码了大小，不需要再靠字号喊 */
.ph-rate {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ph-rate-ring {
    position: relative;
    width: 76px;
    height: 76px;
    flex: none;
}

.ph-rate-ring svg {
    transform: rotate(-90deg);
    display: block;
}

.ph-rate-ring .track { stroke: var(--track); }

/* 环是进度，和柱、条同一个口径，走图形档不走文字档 ——
   深绿铺一整圈弧在亮色下会变成页面上第二块暗色，去和主角卡抢 */
.ph-rate-ring .fill {
    stroke: var(--brand-graph);
    stroke-linecap: round;
}

.ph-rate-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: baseline;
    justify-content: center;
}

.ph-rate-value {
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
}

.ph-rate-unit {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    margin-left: 1px;
}

.ph-facts {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ph-fact {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-tertiary);
}

.ph-fact .ms { color: var(--brand-text); }

.ph-fact b {
    margin-left: auto;
    color: var(--text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* 应用行 */
.ph-rows {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.ph-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ph-row-body { flex: 1; min-width: 0; }

.ph-row-name {
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.4;
}

.ph-row-meta {
    font-size: 10.5px;
    color: var(--text-tertiary);
    line-height: 1.5;
}

.ph-row-meta .good { color: var(--brand-text); font-weight: 600; }
.ph-row-meta .bad  { color: var(--bad-text);   font-weight: 600; }

.ph-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 9px;
    border-radius: var(--rad-full);
    font-size: 10.5px;
    font-weight: 500;
    flex: none;
}

.ph-chip.on   { background: var(--brand-surface); color: var(--brand-text); }
.ph-chip.over { background: var(--bad-surface);   color: var(--bad-text); }

/* 使用结构条 */
.ph-usage {
    display: flex;
    height: 9px;
    border-radius: var(--rad-full);
    overflow: hidden;
    gap: 2px;
    margin-bottom: 11px;
}

/* 段太细会被 gap 吃没，兜一个下限 */
.ph-seg { height: 100%; min-width: 3px; }

/* 一族颜色，往页底色里兑：兑得越多排得越后。真机上每个应用各给一个
   色相，搬到这条 9px 的细条上会变成一条彩虹，去和主角卡抢。
   最后一段走 --track —— 它和前面几段不是同类，那是没被管的时间 */
.ph-seg.a { background: var(--brand-graph); }
.ph-seg.b { background: color-mix(in srgb, var(--brand-graph) 70%, var(--bg-card)); }
.ph-seg.c { background: color-mix(in srgb, var(--brand-graph) 46%, var(--bg-card)); }
.ph-seg.d { background: color-mix(in srgb, var(--brand-graph) 28%, var(--bg-card)); }
.ph-seg.e { background: var(--track); }

.ph-legend {
    font-size: 10.5px;
    color: var(--text-tertiary);
}

/* 语言各一份，整行切换。display 由语言规则给（revert → block），
   所以这里只管内部排布 */
.ph-legend-row {
    flex-wrap: wrap;
    gap: 5px 14px;
}

html[data-locale="en"] .ph-legend-row[data-lang="en"],
html[data-locale="zh"] .ph-legend-row[data-lang="zh"] {
    display: flex;
}

.ph-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ph-legend i {
    width: 7px;
    height: 7px;
    border-radius: 2px;
    flex: none;
}

.ph-legend .a { background: var(--brand-graph); }
.ph-legend .b { background: color-mix(in srgb, var(--brand-graph) 70%, var(--bg-card)); }
.ph-legend .c { background: color-mix(in srgb, var(--brand-graph) 46%, var(--bg-card)); }
.ph-legend .d { background: color-mix(in srgb, var(--brand-graph) 28%, var(--bg-card)); }
.ph-legend .e { background: var(--track); }

/* 和昨天比的角标。颜色集中在这一小块和环上 */
.ph-rate-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: var(--rad-full);
    background: var(--brand-surface);
    color: var(--brand-text);
    flex: none;
}

/* ── 今日违约 ─────────────────────────────────────────────
   左边一道红边把它和别的白卡分开。卡里写的是「发生了什么」，
   不是一句评价 —— 记录，不是判决。 */
.ph-viol {
    background: var(--bg-card);
    border-radius: var(--rad-md);
    padding: 12px 13px;
    box-shadow: var(--shadow-sm);
    border-left: 3px solid var(--bad-solid);
}

.ph-viol-count {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--bad-text);
    flex: none;
}

.ph-viol-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px;
    margin-top: 9px;
    background: var(--bad-surface);
    border-radius: var(--rad-sm);
}

.ph-viol-over {
    font-size: 12px;
    font-weight: 700;
    color: var(--bad-text);
    flex: none;
}

/* 占比那一行。分隔线上方是构成，下方是结论 */
.ph-usage-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--divider);
    font-size: 10.5px;
    color: var(--text-secondary);
}

.ph-usage-foot b {
    font-size: 12px;
    color: var(--brand-text);
}

/* ── 本周趋势 ───────────────────────────────────────────── */
.ph-trend-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-secondary);
}

.ph-trend-delta {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 10.5px;
    color: var(--brand-text);
    flex: none;
}

.ph-week {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 5px;
    height: 110px;
    margin-top: 12px;
}

.ph-wcol {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

/* 柱顶上那颗是「那天违约了几次」的唯一标记，承载信息，走文字档 */
.ph-wmark {
    height: 16px;
    margin-bottom: 3px;
    color: var(--bad-text);
}

.ph-wcount {
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bad-surface);
    color: var(--bad-text);
    font-size: 9px;
    font-weight: 700;
}

/* 百分比写在柱顶，柱高是个相对量，具体多少还是得有个数 */
.ph-wval {
    font-size: 9.5px;
    color: var(--text-tertiary);
    margin-bottom: 3px;
    font-variant-numeric: tabular-nums;
}

.ph-wval.today { color: var(--brand-text); font-weight: 700; }

/* 柱高已经表示守约率，颜色不再表示一遍；违约看柱顶那颗数字。
   过去那几根往卡面里兑掉一半 —— 暗色下 --brand-fade 几乎沉进底色，
   柱子就看不见了。今天那根走图形档，靠明度差站出来 */
.ph-wbar {
    width: 100%;
    background: color-mix(in srgb, var(--brand-graph) 42%, var(--bg-card));
    border-radius: var(--rad-full) var(--rad-full) 0 0;
}

.ph-wbar.today  { background: var(--brand-graph); }
.ph-wbar.future { background: var(--track); }

.ph-wlab {
    font-size: 10px;
    color: var(--text-tertiary);
    margin-top: 4px;
}

.ph-wlab.today {
    color: var(--brand-text);
    font-weight: 700;
}

/* ── 统计 mock ────────────────────────────────────────────
   habit 卡复用主角卡的盒子（.ph-session），只是内部版式不是
   环 + 三格，所以额外给一组内容类。 */
.ph-habit {
    padding: 15px 16px;
}

.ph-habit-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 700;
    position: relative;
}

/* 火苗是这张卡上唯一的一点绿，走柠檬本体 ——
   卡外那档 --brand-text 是给白底用的深绿，压在黑上读不出来 */
.ph-habit-title .ms {
    color: var(--brand-ground);
}

.ph-habit-sub {
    font-size: 10.5px;
    color: color-mix(in srgb, currentColor 72%, transparent);
    margin: 5px 0 10px;
    position: relative;
}

/* .ph-prog 本体在权限 mock 那一段：槽走 currentColor，专给近黑卡用。
   白卡上的那条得换一套明暗关系 */
.ph-prog.light {
    background: var(--bg-inset);
    margin: 0 0 9px;
}

.ph-prog.light i { background: var(--brand-graph); }

/* 周期卡头上的日期/区间。中性档 —— 它是坐标，不是状态 */
.ph-avail {
    margin-left: auto;
    font-size: 10.5px;
    color: var(--text-tertiary);
    flex: none;
}

.ph-today {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 9px;
}

.ph-today-rate {
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -1px;
    color: var(--brand-text);
}

.ph-today-times { text-align: right; }

.ph-today-val {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.ph-today-lab,
.ph-stat-l {
    font-size: 10px;
    color: var(--text-tertiary);
}

.ph-stats3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 11px;
}

.ph-stat { text-align: center; }

.ph-stat-v {
    font-size: 15px;
    font-weight: 700;
    color: var(--brand-text);
    margin-bottom: 2px;
}

.ph-insight {
    display: flex;
    gap: 6px;
    font-size: 10.5px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.ph-insight + .ph-insight { margin-top: 4px; }

.ph-insight .dot {
    color: var(--brand-text);
    flex: none;
}

/* 卡头里的图标。修饰类不叫 brand —— 顶栏的 .brand 是个 display:flex
   的站名块，同名会把图标撑成一整行 */
.ph-card-title .ms.accent {
    color: var(--brand-text);
    vertical-align: -3px;
    margin-right: 4px;
}

.ph-rate-num {
    font-size: 14px;
    font-weight: 700;
    color: var(--brand-text);
    flex: none;
}

/* 往下走的那条结论点成红，往上走的点成绿。文字一个字不变 ——
   方向由那一点颜色说，句子本身只是陈述 */
.ph-insight .dot.bad { color: var(--bad-text); }


/* ── 看板主角卡：守约率搬到近黑上 ─────────────────────────
   白卡那套前景档（--text-tertiary / --track / --brand-text）全是为
   浅底配的，压在近黑上要么糊要么看不见。这里一律改走 currentColor
   混透明，底色换了也不用再回来改一遍 */
.ph-hero-rate .ph-session-label {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: currentColor;
}

/* 持平就写持平。箭头是向右的，不假装有个方向 */
.ph-flat-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: var(--rad-full);
    background: color-mix(in srgb, currentColor 12%, transparent);
    color: var(--brand-ground);
    flex: none;
}

.ph-hero-rate .ph-rate-ring .track {
    stroke: color-mix(in srgb, currentColor 16%, transparent);
}

/* 环走柠檬本体：卡是深的，--brand-graph 那档在亮色主题下是给白底
   配的中绿，压在这儿亮不起来 */
.ph-hero-rate .ph-rate-ring .fill { stroke: var(--brand-ground); }

.ph-hero-rate .ph-rate-value { color: currentColor; }
.ph-hero-rate .ph-rate-unit  { color: color-mix(in srgb, currentColor 60%, transparent); }

.ph-hero-rate .ph-fact     { color: color-mix(in srgb, currentColor 66%, transparent); }
.ph-hero-rate .ph-fact .ms { color: color-mix(in srgb, currentColor 52%, transparent); }
.ph-hero-rate .ph-fact b   { color: currentColor; }


/* ── 「下次可以这样做」────────────────────────────────────
   违约卡是记录，这张是建议 —— 分成两张卡，就不会读成「记完一笔
   再训一句」。底色走 brand-surface：全页第二处用到柠檬的地方，
   浅到只是把这段话圈出来 */
.ph-tip {
    background: var(--brand-surface);
    border-radius: var(--rad-md);
    padding: 13px 14px;
}

.ph-tip-title {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--brand-text);
    margin-bottom: 6px;
}

.ph-tip-body {
    font-size: 10.5px;
    line-height: 1.65;
    color: var(--text-secondary);
}


/* ── 统计页补件 ───────────────────────────────────────── */
.ph-head.stack { display: block; }

.ph-head-sub {
    font-size: 10.5px;
    color: var(--text-tertiary);
    margin-top: 3px;
}

/* 「有数据 / 无数据」是这一页的状态标，不是强调。
   和标题同一行，字号压到最小一档 */
.ph-has {
    display: inline-block;
    margin-left: 6px;
    vertical-align: 1px;
    font-size: 9.5px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: var(--rad-xs);
    background: var(--brand-surface);
    color: var(--brand-text);
}

.ph-stat-v.n { color: var(--text-primary); }

.ph-alert {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--bad-text);
    margin-bottom: 10px;
}

/* 点进去看明细的那一行。整条可点，所以给一块底，不是一个链接文字 */
.ph-link {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 12px;
    border-radius: var(--rad-sm);
    background: var(--bg-fill);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--brand-text);
}

.ph-link .ms { margin-left: auto; }

.ph-link.center { justify-content: center; }
.ph-link.center .ms { margin-left: 2px; }

.ph-hr {
    height: 1px;
    background: var(--divider);
    margin: 0 0 9px;
}

/* 折线图。不加 preserveAspectRatio="none" —— 里面有 text，
   非等比缩放会把字一起拉变形 */
.ph-spark {
    height: 62px;
    margin-bottom: 9px;
}

.ph-spark svg { width: 100%; height: 100%; display: block; }

.ph-spark-lab {
    font-size: 10px;
    font-weight: 600;
    fill: var(--text-tertiary);
    text-anchor: middle;
}


/* ── 今日守约详情 mock ────────────────────────────────────
   统计页点进来的那一屏。日/周/月三个尺度共用这一页 */

.ph-tabs {
    display: flex;
    gap: 3px;
    padding: 3px;
    background: var(--bg-inset);
    border-radius: var(--rad-full);
}

.ph-tab {
    flex: 1;
    text-align: center;
    padding: 6px 0;
    border-radius: var(--rad-full);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
}

/* 选中态只换底和字色，不加边框 —— 三个格子等宽，多一道边会让它比别人高 */
.ph-tab.on {
    background: var(--bg-card);
    color: var(--brand-text);
    box-shadow: var(--shadow-sm);
}

/* 判语卡：环在左，一句话在右。这一页的结论先于明细 */
.ph-day-hero .ph-rate { align-items: center; }

.ph-verdict { flex: 1; min-width: 0; }

.ph-verdict-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--brand-ground);
    margin-bottom: 5px;
}

.ph-verdict-body {
    margin: 0;
    font-size: 10.5px;
    line-height: 1.6;
    color: color-mix(in srgb, currentColor 72%, transparent);
}

/* 时段行 */
.ph-slot {
    display: flex;
    align-items: center;
    gap: 9px;
}

.ph-slot + .ph-slot { margin-top: 9px; }

/* 标签列定宽，四行的条才对得齐。52px 是按英文最长的 "Afternoon" 定的 */
.ph-slot-name {
    width: 52px;
    flex: none;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
}

.ph-slot-name i {
    display: block;
    font-style: normal;
    font-size: 9px;
    font-weight: 500;
    color: var(--text-disabled);
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}

.ph-slot-bar {
    flex: 1;
    min-width: 0;
    height: 20px;
    border-radius: var(--rad-full);
    background: color-mix(in srgb, var(--brand-graph) 20%, var(--bg-card));
    overflow: hidden;
}

/* 条里带字，所以给一个最小宽度：4% 的那一段按比例只有几个像素，
   宽度照实画会把标签挤没。比例读右边的百分数，条只负责给个相对感觉。
   字走墨色而不是白：柠檬和亮绿在两套主题下都是亮色，白字压上去读不出来 */
.ph-slot-fill {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-width: 46px;
    padding: 0 7px;
    box-sizing: border-box;
    border-radius: var(--rad-full);
    background: var(--brand-graph);
    color: var(--on-brand);
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

/* 最突出的那一段换成柠檬本体，比别的条亮一档 */
.ph-slot-fill.peak { background: var(--brand-ground); }

.ph-slot-val {
    flex: none;
    min-width: 30px;
    text-align: right;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ph-slot-val.good { color: var(--brand-text); }

/* 卡头是 flex：标题不参与收缩，不然右边那句注解一长，
   标题就被压到图标和文字分两行 */
.ph-card-head .ph-card-title { flex: none; }
.ph-card-head .ph-avail { text-align: right; }

/* PRO 只是个标记，不是按钮：描边、不填底 */
.ph-pro {
    display: inline-block;
    vertical-align: 1px;
    margin-left: 5px;
    padding: 1px 5px;
    border: 1px solid var(--line-strong);
    border-radius: var(--rad-xs);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--text-tertiary);
}


/* ── 权限页 mock ──────────────────────────────────────────
   隐私区右侧那张。主角卡这里是「已就绪」状态卡 */

/* 就绪图标走柠檬本体：它压在近黑卡上，那张卡在两套主题下都是深的，
   所以不能用 brandText 那档（为白底设计的深绿） */
.ph-session-head > .ms {
    color: var(--brand-ground);
}

/* 整行文案，不跟在环旁边 */
.ph-session-line.wide {
    position: relative;
    font-size: 11px;
}

/* 必需权限完成度。槽和进度同源 currentColor，不写死白 */
.ph-prog {
    position: relative;
    margin-top: 12px;
    height: 5px;
    border-radius: var(--rad-full);
    background: color-mix(in srgb, currentColor 25%, transparent);
    overflow: hidden;
}

.ph-prog i {
    display: block;
    height: 100%;
    border-radius: var(--rad-full);
    background: var(--brand-ground);
}

/* 权限图标。已开启走品牌浅底，未开启走缓停蓝 ——
   这一页的蓝只表示「这项还差着」，红留给真正的违约。同 app */
.ph-pico {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    flex: none;
    display: grid;
    place-items: center;
    background: var(--calm-surface);
    color: var(--calm-text);
}

.ph-pico.on {
    background: var(--brand-surface);
    color: var(--brand-text);
}

/* 「必需」角标走红：它说的是「缺了就不成立」，不是「还差一点」 */
.ph-req {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 4px;
    border-radius: 4px;
    font-size: 9.5px;
    font-weight: 700;
    background: var(--bad-surface);
    color: var(--bad-text);
    vertical-align: 1px;
}

.ph-ok {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: none;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--brand-text);
}

/* 行尾的小实心按钮。不是整宽药丸，所以单独一档圆角 */
.ph-btn.sm {
    display: inline-flex;
    flex: none;
    padding: 6px 11px;
    border-radius: 9px;
    font-size: 10.5px;
}

.ph-note {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    font-size: 10px;
    line-height: 1.6;
    color: var(--text-tertiary);
    padding: 0 2px;
}

.ph-note .ms {
    color: var(--text-disabled);
    flex: none;
    margin-top: 1px;
}

/* ── 三步流程的小 mock ────────────────────────────────────
   不套手机外壳：三张并排的小手机会把这一段变成一排缩略图，
   而这里要给看的是「那一步里你点什么」。所以只画内容本身，
   一张裁出来的卡。 */
.mini {
    background: var(--bg-page);
    border-radius: var(--rad-sm);
    padding: 12px;
    box-shadow: inset 0 0 0 1px var(--line-soft);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 白区里的 mini 反过来垫卡面色，否则页底色压在白区上
   和卡的浅填充底几乎同色，这一块就看不出是个物件 */
section.band.alt .mini {
    background: var(--bg-card);
}

/* 1 · 选应用 */
.mini-pick {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border-radius: var(--rad-xs);
    background: var(--bg-card);
    font-size: 12.5px;
}

section.band.alt .mini-pick {
    background: var(--bg-fill);
}

.mini-pick-name { flex: 1; min-width: 0; font-weight: 500; }

.mini-pick-sub {
    font-size: 10.5px;
    color: var(--text-tertiary);
    font-weight: 400;
}

/* 勾选框。选中走柠檬实底 + 墨勾，未选是一圈中性描边 ——
   原来 .fact-list 那套对勾是 ✓ 字符，各平台字形不一 */
.mini-check {
    width: 19px;
    height: 19px;
    border-radius: 6px;
    flex: none;
    display: grid;
    place-items: center;
    box-shadow: inset 0 0 0 1.5px var(--line-strong);
    color: transparent;
}

.mini-check.on {
    background: var(--brand-ground);
    box-shadow: none;
    color: var(--on-brand);
}

/* 2 · 三档模式。每档一个色相：提醒绿、缓停雾蓝、强制陶红。
   这三块是设置项，不是决策时刻的选项 —— 决策时刻不上色那条
   硬规则管的是「时间到了，停还是继续」那一层，不是这里 */
.mini-mode {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: var(--rad-xs);
    background: var(--bg-card);
    font-size: 12.5px;
}

section.band.alt .mini-mode {
    background: var(--bg-fill);
}

/* 图标右边是「名字 + 一句说明」的竖排，占满剩余宽 */
.mini-mode > div,
.mini-pick > div {
    flex: 1;
    min-width: 0;
}

.mini-mode-ico {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    flex: none;
}

.mini-mode.rem .mini-mode-ico { background: var(--brand-surface); color: var(--brand-text); }
.mini-mode.dly .mini-mode-ico { background: var(--calm-surface);  color: var(--calm-text); }
.mini-mode.str .mini-mode-ico { background: var(--bad-surface);   color: var(--bad-text); }

/* 选中那档加一圈品牌描边，不换底 —— 换底会读成「这一档是另一种东西」 */
.mini-mode.on {
    box-shadow: inset 0 0 0 1.5px var(--brand-line);
}

/* 3 · 倒计时。这一步给看的是约定跑起来之后的样子，
   所以这块是近黑的主角卡 */
.mini-run {
    background: linear-gradient(160deg, var(--grad-a), var(--grad-b));
    border-radius: var(--rad-sm);
    padding: 14px;
    color: var(--on-grad);
    display: flex;
    align-items: center;
    gap: 13px;
    box-shadow: inset 0 0 0 1px var(--hero-ring);
}

/* .mini 把方向设成了竖排，这一张是横排（环在左、文案在右），
   同时带了两个类，所以要显式写回来 */
.mini.mini-run {
    flex-direction: row;
}

.mini-run .ph-ring {
    width: 58px;
    height: 58px;
}

.mini-run .ph-ring-time { font-size: 14px; }

section.band.alt .mini.mini-run {
    background: linear-gradient(160deg, var(--grad-a), var(--grad-b));
}

.mini-run-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mini-run .mini-pick-name { font-size: 12.5px; font-weight: 600; }

/* 这张卡上的次要文字不能走 --text-tertiary：那是给白卡设计的深灰绿，
   压在近黑上读不出来。和卡内其他弱化前景同源，currentColor 混透明 */
.mini-run .mini-pick-sub {
    font-size: 10px;
    color: color-mix(in srgb, currentColor 72%, transparent);
    line-height: 1.5;
}

/* ── 功能区：左文右图 ─────────────────────────────────── */
.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    gap: 56px;
    align-items: center;
    margin-top: 52px;
}

/* 统计那一段把 mock 放左边。整页交替左右，不让每段都是一个节奏。
   窄屏下 900 那档会把它压成一列，DOM 里 mock 在前，正好先图后文 */
.split.rev {
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
}

.split-copy h3 {
    margin: 0 0 8px;
    font-size: 19px;
    letter-spacing: -0.015em;
}

.split-copy p {
    margin: 0 0 24px;
    color: var(--text-secondary);
    font-size: 15px;
}

.split-copy p:last-child { margin-bottom: 0; }

/* ── 隐私强调块 ───────────────────────────────────────── */
/* 图标 + 一段话的横排块，不再是居中的大横幅 —— 它现在在 .split
   的左栏里，整段文案都是左对齐的 */
.privacy-highlight {
    background: var(--brand-surface);
    box-shadow: inset 0 0 0 1px var(--brand-line);
    border-radius: var(--rad-md);
    padding: 20px 22px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.privacy-highlight > .ms {
    color: var(--brand-text);
    flex: none;
    margin-top: 1px;
}

.privacy-highlight h3 {
    margin: 0 0 6px;
    font-size: 16px;
    color: var(--brand-text);
    letter-spacing: -0.015em;
}

.privacy-highlight p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.fact-list {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
    display: grid;
    gap: 10px;
    text-align: left;
}

/* 链接行。箭头跟在链接后面，一起读成一个去向 */
.privacy-more {
    margin: 18px 0 0;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-text);
}

.privacy-more a {
    color: inherit;
    text-decoration: none;
}

.privacy-more a:hover { text-decoration: underline; }

.fact-list li {
    background: var(--bg-card);
    border-radius: var(--rad-sm);
    padding: 12px 14px;
    font-size: 14px;
    color: var(--text-secondary);
    display: flex;
    gap: 9px;
    align-items: center;
}

/* 对勾改成 Material 图标。原来是 ::before content "✓" ——
   那个字符在 Windows 上细、在 mac 上粗，和页面其他图标不是一套 */
.fact-list .ms {
    color: var(--brand-text);
}

/* ── 法律条款页排版 ───────────────────────────────────── */
.legal {
    padding: 56px 0 80px;
}

.legal-inner {
    max-width: 780px;
    margin: 0 auto;
    background: var(--bg-card);
    border-radius: var(--rad-md);
    box-shadow: var(--shadow-sm);
    padding: clamp(26px, 5vw, 54px);
}

.legal h1 {
    font-size: clamp(27px, 3.2vw, 35px);
    margin: 0 0 8px;
    letter-spacing: -0.025em;
}

.legal .meta {
    color: var(--text-tertiary);
    font-size: 13.5px;
    margin: 0 0 8px;
}

/* 摘要块走品牌浅底 + 一条左边线。审核和用户都先读这一块 */
.legal .summary {
    background: var(--brand-surface);
    border-left: 3px solid var(--brand-solid);
    border-radius: 0 var(--rad-sm) var(--rad-sm) 0;
    padding: 16px 18px;
    margin: 24px 0 36px;
    font-size: 14.5px;
    color: var(--text-secondary);
}

.legal h2 {
    font-size: 19px;
    margin: 40px 0 12px;
    padding-top: 4px;
    color: var(--text-primary);
    letter-spacing: -0.015em;
}

.legal h3 {
    font-size: 16px;
    margin: 26px 0 8px;
}

.legal p,
.legal li {
    color: var(--text-secondary);
    font-size: 15px;
}

.legal ul,
.legal ol {
    padding-left: 22px;
}

.legal li {
    margin-bottom: 7px;
}

.legal strong {
    color: var(--text-primary);
}

.legal a {
    color: var(--brand-text);
}

.legal table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 14.5px;
}

.legal th,
.legal td {
    text-align: left;
    padding: 11px 13px;
    border-bottom: 1px solid var(--divider);
    vertical-align: top;
}

.legal th {
    background: var(--bg-fill);
    color: var(--text-primary);
    font-weight: 600;
}

.legal table code,
.legal p code {
    font-size: 13px;
    background: var(--bg-fill);
    padding: 1px 5px;
    border-radius: 4px;
}

/* 联系方式块。原来走一族暖金（--amber-*）—— 那一族在 ui_v2 里
   已经删了，而且它和柠檬在色相上挨着，两块浅底并排时读成同一块。
   改走中性填充：这一块是补充信息，不需要色相 */
.contact-box {
    margin-top: 36px;
    padding: 18px 20px;
    background: var(--bg-fill);
    box-shadow: inset 0 0 0 1px var(--line-soft);
    border-radius: var(--rad-sm);
    font-size: 14.5px;
    color: var(--text-secondary);
}

/* ── 页脚 ─────────────────────────────────────────────── */
.site-footer {
    background: var(--bg-card);
    border-top: 1px solid var(--line-soft);
    padding: 34px 0;
    font-size: 14px;
    color: var(--text-tertiary);
}

.site-footer .wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 26px;
    align-items: center;
}

.site-footer nav {
    margin-left: auto;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.site-footer a {
    color: var(--text-secondary);
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--brand-text);
    text-decoration: underline;
}

/* ── 窄屏 ─────────────────────────────────────────────────
   两栏塌成一栏，mock 落到文案下面并居中。
   900 这个断点是按 1080 的容器减两侧留白、再减 mock 的 340 得来的：
   比它再窄，左边那栏的行宽就短到一行只剩七八个字 */
@media (max-width: 900px) {
    .hero .wrap,
    .split,
    .split.rev {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .hero-copy,
    .split-copy {
        max-width: none;
        text-align: center;
    }

    .hero-copy .cta-row {
        justify-content: center;
    }

    .split { margin-top: 40px; }
}

@media (max-width: 620px) {
    .site-header .wrap {
        height: auto;
        padding-block: 11px;
        flex-wrap: wrap;
    }

    .site-nav {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
    }

    .hero {
        padding: 48px 0 56px;
    }

    section.band {
        padding: 52px 0;
    }

    .privacy-highlight {
        padding: 28px 20px;
    }

    .site-footer nav {
        margin-left: 0;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}