/* 设计令牌。黑白，不用灰作为填充色。
   层次靠留白、发丝线和阴影做；次级文字用黑或白降低不透明度，不引入灰色相。
   禁止在组件里硬编码颜色、圆角、间距、字号、动效。 */

/* 新版界面的标题宋体（4.524）。只声明，用到才按字取块，旧版界面不取 */
@import url("../vendor/fonts/noto-serif-sc/600.css");


:root {
  --bg:          var(--ph-bg, #FFFFFF);
  --status-band: #000000;  /* 不全屏时 iPhone 主屏幕版顶上垫的那条：系统状态栏的字是白的 */
  --surface:     var(--ph-surface, #FFFFFF);
  --surface-2:   var(--ph-surface-2, #F4F4F4);
  --surface-3:   var(--ph-surface-3, #ECECEC);
  --border:      var(--ph-border, #EDEDED);
  --border-2:    var(--ph-border-2, #DCDCDC);

  --text:        var(--ph-text, #000000);
  --text-2:      var(--ph-text-2, rgba(0, 0, 0, .56));
  --text-3:      var(--ph-text-3, rgba(0, 0, 0, .34));

  --accent:      var(--ph-accent, #000000);
  --accent-weak: var(--ph-accent-weak, #F1F1F1);
  --on-accent:   var(--ph-on-accent, #FFFFFF);

  --danger:      #000000;
  --danger-weak: #ECECEC;

  /* ins 风小组件：拍立得的相纸与胶片。深浅两套主题都一样 ——
     相纸就是白的、底片就是黑的，和应用图标深色下仍是白底同一个道理 */
  --paper:       #FFFFFF;
  --on-paper:    #000000;
  --on-paper-2:  rgba(0, 0, 0, .45);
  --film:        #000000;
  --film-edge:   transparent;   /* 黑卡的一圈边：浅色下黑卡自己分得清，不要边 */
  --on-film:     #FFFFFF;
  --on-film-2:   rgba(255, 255, 255, .55);

  /* 图文组件（4.431）。只有黑白灰，允许毛玻璃（用户要求） */
  --dc-paper:     #FFFFFF;
  --dc-mist:      rgba(255, 255, 255, .62);
  --dc-mist-line: rgba(255, 255, 255, .80);
  --dc-ink:       #141414;
  --on-dc:        #111111;
  --on-dc-2:      rgba(0, 0, 0, .46);
  --on-dc-ink:    #FFFFFF;
  --on-dc-ink-2:  rgba(255, 255, 255, .58);
  --dc-hole:      #EDEDED;
  --dc-hole-ic:   rgba(0, 0, 0, .22);
  --dc-shadow:    0 6px 22px rgba(0, 0, 0, .08);
  /* 借用界面的那一组（4.431）：发丝线与两种气泡。墨色底那一套深浅主题一样 */
  --mm-line:       rgba(0, 0, 0, .08);
  --mm-bub-in:     #EFEFEF;
  --mm-bub-out:    #111111;
  --on-mm-bub-out: #FFFFFF;
  --mm-ink-line:   rgba(255, 255, 255, .12);
  --mm-ink-bub-in: rgba(255, 255, 255, .12);
  /* 装饰组件（4.431 第五版）：卡片底跟主题走；唱片是黑胶，深浅一样；照片上的字是白的 */
  --dw-card:      #FFFFFF;
  /* 问卷的版式模板（4.519）：信纸、杂志、柔和三套的底色与字色。用户给一份问卷挑的主色、纸色、字色压在它们上面 */
  --qz-paper-warm: #F7F1E6;
  /* 桌游（4.547）：UNO 牌面（4.913 起只用黑白灰：四色换成四种花色与底纹，第 4 条）。
     纸面、墨色、底纹的线、素面那一花色的灰、万能牌与牌背的黑 */
  --gm-paper:   #FBFBFB;
  --gm-paper-2: #ECECEC;
  --gm-ink:     #1E1E1E;
  --gm-pat:     rgba(0, 0, 0, .16);
  --gm-edge:    rgba(0, 0, 0, .18);
  --gm-solid:   #D6D6D6;
  --gm-wild:    #242424;
  --gm-wild-2:  #161616;
  --gm-on:      #FFFFFF;
  --gm-on-pat:  rgba(255, 255, 255, .12);
  --gm-on-edge: rgba(255, 255, 255, .24);
  /* 桌面（4.598，4.913 改为炭灰绒面）：绒面、边沿、台词气泡 */
  --gm-felt:       #3A3A3A;
  --gm-felt-light: #4A4A4A;
  --gm-felt-edge:  #1F1F1F;
  --gm-felt-rim:   #5A5A5A;
  --gm-felt-weave: rgba(255, 255, 255, .03);
  /* 彩色那一套牌（4.914，用户要的，第 4 条的例外）：低饱和四色、墨绿绒面与深棕边沿 */
  --gm-red:    #B8675C;
  --gm-yellow: #C29A4A;
  --gm-green:  #6A9070;
  --gm-blue:   #5A7FA3;
  --gm-gloss:  rgba(255, 255, 255, .16);
  --gm-shade:  rgba(0, 0, 0, .10);
  --gm-hfelt:       #3F5A4B;
  --gm-hfelt-light: #4E6C5B;
  --gm-hfelt-edge:  #2B241F;
  --gm-stitch:      rgba(255, 255, 255, .16);
  --gm-bubble:     #FFFFFF;
  /* 大富翁（4.599）：七组地的颜色条、六位玩家的棋子色、棋盘底 */
  --gm-g1: #9C7B5B; --gm-g2: #7FA6C4; --gm-g3: #C58AA4; --gm-g4: #D39A5A; --gm-g5: #C4685C; --gm-g6: #6E9A73; --gm-g7: #5A6DA3;
  --gm-p1: #D16B5F; --gm-p2: #4F8FCB; --gm-p3: #5FA37A; --gm-p4: #D7A24B; --gm-p5: #9B74C8; --gm-p6: #4FA8A4;
  --gm-board:      #EEF0E8;
  --gm-board-line: #C9CDBF;
  /* 卡包（4.611）：娱乐卡八种卡面底色（低饱和）、三种账户卡（参考 Apple Pay 的深色卡）、卡面上的字与高光 */
  --wl-rose: #B9776F; --wl-pink: #C98E9E; --wl-peach: #D29F7E; --wl-sand: #B8A27C;
  --wl-mint: #7FA590; --wl-sky: #7C9DBB; --wl-lilac: #9C8DB8; --wl-ink: #4A4E57;
  --wl-debit: #2D3036; --wl-joint: #6E5B6E; --wl-kin: #556B63;
  --wl-on: #FFFFFF;
  --wl-tint: 9%;   /* 卡面的那一层底色有多淡（4.613） */
  /* 扭蛋机（4.616）：三档稀有度与扭蛋的颜色，低饱和 */
  --gc-common: #A9ADB3; --gc-rare: #8FA7C4; --gc-epic: #C9AD7A;
  --gc-ball-a: #E3C7C3; --gc-ball-b: #C9D6CF; --gc-ball-c: #D9D2E3;
  --wl-sheen: rgba(255, 255, 255, .16);
  --wl-shade: rgba(0, 0, 0, .38);
  --wl-shadow: 0 4px 14px rgba(0, 0, 0, .06);
  --wl-shadow-on: 0 10px 28px rgba(0, 0, 0, .12);
  --qz-ink-warm:   #3B3127;
  --qz-line-warm:  rgba(0, 0, 0, .10);
  --qz-mag-ink:    #111111;
  --qz-on-mag:     #FFFFFF;
  --qz-soft-bg:    #F6F3F1;
  --qz-soft-chip:  #FFFFFF;
  --dw-chip:      #EFEFEF;
  --dw-ring:      #FFFFFF;
  --dw-empty:     #E6E6E6;
  --dw-disc:      #1C1C1C;
  --dw-groove:    #2A2A2A;
  --dw-hole:      #FFFFFF;
  --dw-on-photo:  #FFFFFF;
  /* 主屏液态玻璃的清透那一档（4.564）：玻璃几乎不糊，上面的字与图标换成白色加一点阴影，和系统主屏的透明样式一样 */
  --glass-ink:    #FFFFFF;
  --glass-glyph:  #F4F5F2;   /* 图标图形：略带一点灰的白，上缘那道亮边才看得出来（4.569） */
  --glass-ink-2:  rgba(255, 255, 255, .86);
  --glass-ink-3:  rgba(255, 255, 255, .66);
  --glass-line:   rgba(255, 255, 255, .45);
  --glass-ink-shadow: 0 1px 2px rgba(0, 0, 0, .30);
  --dw-shade:     rgba(0, 0, 0, .30);
  --dw-shadow:    0 2px 10px rgba(0, 0, 0, .08);
  --dw-shadow-2:  0 4px 14px rgba(0, 0, 0, .14);
  --dw-serif:     "Times New Roman", Georgia, "Songti SC", serif;

  /* 应用图标：纯白底 + 黑色 SVG。颜色与阴影可在主题设置里改 */
  --tile-bg:     #FFFFFF;
  --icon-color:  #000000;
  --tile-shadow: 0 2px 8px rgba(0, 0, 0, .13);

  /* 浮层 */
  --scrim:        rgba(0, 0, 0, .40);
  --scrim-strong: rgba(0, 0, 0, .56);
  --stage-bg:    #000000;         /* 视频四周的信箱底色。深浅主题下都是黑 */
  --on-scrim:     #FFFFFF;
  /* 压在遮罩上的实心块。遮罩不跟主题走，所以这一对两套主题里是一样的 */
  --scrim-fill:    #FFFFFF;
  --on-scrim-fill: #000000;
  /* 压在浅色底上的字。和 --on-scrim 一对，两边都不跟主题走 */
  --on-paper:     #111318;
  --toast-bg:     rgba(0, 0, 0, .92);
  --toast-fg:     #FFFFFF;
  --toast-error:  rgba(0, 0, 0, .92);

  /* 面底。铺了壁纸时换成更透的一套，免得白板或灰板压在壁纸上很突兀 */
  --wg-bg:       rgba(0, 0, 0, .045);
  --wg-solid:    #FFFFFF;
  --capsule-bg:     rgba(0, 0, 0, .045);
  --capsule-border: transparent;
  --glass-blur:     18px;
  /* 悬浮球面板里的开关（仿 iOS，ARCHITECTURE 4.256）。深浅色都是这一个绿 */
  --ios-green:      #34c759;
  /* 联机好友的在线状态（4.683）：圆点。低饱和，和别处的小圆点一个分量 */
  --presence-on:    #5fae7a;
  --presence-busy:  #d29a4a;
  --presence-off:   #b8b8b8;


  /* 分组胶囊：极浅的灰底，不描边 */
  --group-fill: var(--ph-group-fill, #F5F5F5);
  --group-line: rgba(0, 0, 0, .07);

  /* 圆角 */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-full: 999px;

  /* 间距 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* 字号 */
  --fs-9: 9px;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-17: 17px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-40: 40px;
  --fs-56: 56px;

  /* 字重 */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;

  /* 动效 */
  --ease:      cubic-bezier(.32, .72, 0, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --dur-fast:  140ms;
  --dur:       240ms;
  --dur-slow:  380ms;
  /* 换页与打开 app（4.762）。用户：「页面切换是一个一个跳着的，原生 app 的页面切换是一条线的」。
     从前用 --ease-out：起步极快，头一帧就挪一百来像素（390 宽的屏幕上四分之一），前三帧走完一半，帧与帧之间隔得太远，
     看着是一下一下跳过去的。这一条起步缓一些、每帧不超过三十来像素，两百毫秒走完八成，收尾照样利落 */
  --ease-nav:  cubic-bezier(.45, .7, .5, 1);
  /* 4.784 用户：「动画速度有点慢，会不会快一点更好」。时长从 420 改为 320，曲线同时换成前一段匀速、后一段收住的这一条：
     只缩时长的话每帧挪 43 像素，又回到 4.762 之前一跳一跳的样子；这一条每帧最多 34 像素（390 宽），
     走到九成从 250 毫秒提前到 200，基本到位从 317 提前到 250。
     JS 里等动画走完的那几个定时器从 system/navfx.js 的 NAV_MS 算，改这里要一起改那一处 */
  --dur-nav:   320ms;

  /* 层级 */
  --z-dock:    30;
  --z-app:     40;
  --z-sheet:   60;
  --z-modal:   70;
  --z-toast:   80;
  --z-banner:  90;
  /* 电话压在所有东西上面：主界面、别的 app、锁屏、横幅，都要盖住 */
  --z-call:    95;
  --z-terms:   99;   /* 使用须知：第一次打开时挡在一切之上（system/terms.js） */
  --z-cover:   100;  /* 一键遮挡：盖住一切，连使用须知与电话（system/cover.js） */

  /* 结构尺寸 */
  --statusbar-h: 26px;
  --dock-h:      84px;
  --grid-gap:    14px;
  --tile-ratio:  .6;

  /* 底部整体上移多少。Safari 标签页里地址栏会压住最下面那排，
     用这个抬起来。PWA 里不需要，默认 0。在「主题」里调。 */
  --bottom-lift: 0px;
  --tabbar-h:    54px;

  /* 会话页那几个尺寸。原来写死在 app.css 里，提成令牌是为了「美化」能按
     会话覆盖它们（见 system/skin.js）。值和从前一模一样，不改观感。

     ---- 每一条都从一个 --ph- 变量读起 ----

     `--ph-*` 是**契约**：外部作者写的那份 CSS 只认这一套名字，我们保证
     不改名（见 src/system/skin-contract.js）。内部这些名字照旧用，
     以后想改随时改 —— 中间隔着这一层，改内部名字不会毁掉别人的美化。

     应用里那几个旋钮写的也是 `--ph-*`，不是内部名。**只留一条路**：
     两条路的话，用户调的和作者写的会互相盖，而盖的顺序谁也说不清。 */
  --navbar-h:     var(--ph-navbar-h, 48px);
  --composer-h:   var(--ph-composer-h, 38px);   /* 输入栏那几个圆按钮，也是输入框的最小高 */
  --composer-pad: var(--ph-composer-pad, var(--sp-2));
  --bubble-gap:   var(--ph-bubble-gap, var(--sp-4));   /* 两轮消息之间 */
  --bubble-gap-in: var(--ph-bubble-gap-in, 5px);       /* 同一轮里两个气泡之间 */
  --bubble-r:     var(--ph-bubble-r, var(--r-md));
  --bubble-px:    var(--ph-bubble-px, var(--sp-3));
  --bubble-py:    var(--ph-bubble-py, var(--sp-2));
  --bubble-fs:    var(--ph-bubble-fs, var(--fs-14));

  /* 安全区。由根容器换算，组件不自己算 */
  --safe-top:    0px;
  --safe-bottom: 0px;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .06);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, .10);
  --shadow-3: 0 12px 40px rgba(0, 0, 0, .18);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-serif: "Songti SC", "Times New Roman", Georgia, serif;
  /* 手写体。拍立得上的签名用它，可在角色卡展示页换成字体库里的一款（system/fonts.js） */
  --font-hand-base: "Xingkai SC", "STXingkai", "Kaiti SC", "STKaiti", "KaiTi", "BiauKai", cursive;
  --font-hand: var(--font-hand-base);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* 日记 app 的几种纸（4.333）。默认白纸就是 --surface，不另设 */
  --diary-warm:  #FAF8F3;
  --diary-line:  rgba(0, 0, 0, .07);

  /* 音声播放页（4.492）。听的时候不跟主题走：夜里关灯听，一律是暗的舞台 */
  --vstage-bg:    #0B0C0F;
  --vstage-fg:    #FFFFFF;
  --vstage-fg-2:  rgba(255, 255, 255, .64);
  --vstage-fg-3:  rgba(255, 255, 255, .34);
  --vstage-line:  rgba(255, 255, 255, .16);
  --vstage-shade: rgba(11, 12, 15, .72);
  --vstage-clear: rgba(11, 12, 15, 0);
  /* 小剧场（4.769）。封面与开幕前的幕布不跟主题走，一律是暗的 */
  --th-curtain:   #17151B;
  --th-on:        #F2EEE6;
  --th-on-2:      rgba(242, 238, 230, .64);
  --th-on-3:      rgba(242, 238, 230, .36);
  --th-line:      rgba(242, 238, 230, .16);
  /* 白天那一套（播放页右上角切换，4.493） */
  --vstage-day-bg:    #F5F4F1;
  --vstage-day-fg:    #16171A;
  --vstage-day-fg-2:  rgba(22, 23, 26, .62);
  --vstage-day-fg-3:  rgba(22, 23, 26, .34);
  --vstage-day-line:  rgba(22, 23, 26, .12);
  --vstage-day-shade: rgba(245, 244, 241, .70);
  /* 群聊旁白里各人的名字颜色（4.648）：低饱和、深浅两套主题都读得清的八种，按成员在群里的顺序轮着用 */
  --narr-p1: #A0705A; --narr-p2: #5F8A78; --narr-p3: #6E7FA6; --narr-p4: #A0809A;
  --narr-p5: #8A8A5A; --narr-p6: #5A8A9A; --narr-p7: #9A6A6A; --narr-p8: #7A6EA0;
}

:root[data-theme="dark"] {
  --narr-p1: #C9A08C; --narr-p2: #92BBA8; --narr-p3: #A2B0D2; --narr-p4: #CBAEC6;
  --narr-p5: #BDBC8E; --narr-p6: #8EBCCB; --narr-p7: #CB9C9C; --narr-p8: #ADA2CF;
  --diary-warm:  #16140F;
  --diary-line:  rgba(255, 255, 255, .08);
  --bg:          var(--ph-bg, #000000);
  --status-band: #000000;
  --surface:     var(--ph-surface, #0B0B0B);
  --surface-2:   var(--ph-surface-2, #141414);
  --surface-3:   var(--ph-surface-3, #1E1E1E);
  --border:      var(--ph-border, #1A1A1A);
  --border-2:    var(--ph-border-2, #2A2A2A);

  --text:        var(--ph-text, #FFFFFF);
  --text-2:      var(--ph-text-2, rgba(255, 255, 255, .58));
  --text-3:      var(--ph-text-3, rgba(255, 255, 255, .36));

  --accent:      var(--ph-accent, #FFFFFF);
  --accent-weak: var(--ph-accent-weak, #161616);
  --on-accent:   var(--ph-on-accent, #000000);

  --danger:      #FFFFFF;
  --danger-weak: #1E1E1E;

  --paper:       #FFFFFF;
  --on-paper:    #000000;
  --on-paper-2:  rgba(0, 0, 0, .45);
  --film:        #000000;
  --film-edge:   #1F1F1F;       /* 深色下黑卡贴着黑底，多一圈发丝边才分得出来 */
  --on-film:     #FFFFFF;
  --on-film-2:   rgba(255, 255, 255, .55);

  /* 图文组件：白卡与雾面在深色下换成深底白字；点缀色两套一样 */
  --dc-paper:     #1A1A1A;
  --dc-mist:      rgba(20, 20, 20, .55);
  --dc-mist-line: rgba(255, 255, 255, .10);
  --dc-ink:       #000000;
  --on-dc:        #FFFFFF;
  --on-dc-2:      rgba(255, 255, 255, .55);
  --dc-hole:      #262626;
  --dc-hole-ic:   rgba(255, 255, 255, .25);
  --mm-line:       rgba(255, 255, 255, .10);
  --mm-bub-in:     #262626;
  --mm-bub-out:    #FFFFFF;
  --on-mm-bub-out: #111111;
  --dw-card:      #1A1A1A;
  --qz-paper-warm: #2A2520;
  --gm-paper:   #E4E4E4;
  --gm-paper-2: #D2D2D2;
  --gm-wild:    #1C1C1C;
  --gm-wild-2:  #0E0E0E;
  --gm-felt:       #262626;
  --gm-red:    #A85D53;
  --gm-yellow: #B08B43;
  --gm-green:  #5E8164;
  --gm-blue:   #50729A;
  --gm-hfelt:       #2E4438;
  --gm-hfelt-light: #3A5244;
  --gm-hfelt-edge:  #1E1915;
  --gm-felt-light: #303030;
  --gm-felt-edge:  #121212;
  --gm-felt-rim:   #3C3C3C;
  --gm-bubble:     #2A2A2A;
  --gm-g1: #8A6C4F; --gm-g2: #6B90AD; --gm-g3: #AD7890; --gm-g4: #BC884E; --gm-g5: #B35E53; --gm-g6: #5F8A65; --gm-g7: #4E5F90;
  --gm-p1: #C9635A; --gm-p2: #4A86BE; --gm-p3: #57986F; --gm-p4: #C99745; --gm-p5: #8F6ABA; --gm-p6: #489C98;
  --gm-board:      #23251F;
  --gm-board-line: #3A3D34;
  --wl-rose: #9C6159; --wl-pink: #A87382; --wl-peach: #AE8263; --wl-sand: #998662;
  --wl-mint: #668A76; --wl-sky: #63819D; --wl-lilac: #82749C; --wl-ink: #3A3D45;
  --wl-debit: #1F2125; --wl-joint: #57475A; --wl-kin: #44574F;
  --wl-sheen: rgba(255, 255, 255, .10);
  --wl-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  --wl-shadow-on: 0 10px 28px rgba(0, 0, 0, .45);
  --wl-tint: 14%;
  --gc-common: #7E838A; --gc-rare: #6F88A6; --gc-epic: #A68C5C;
  --gc-ball-a: #6E5654; --gc-ball-b: #4E5D56; --gc-ball-c: #5E5670;
  --qz-ink-warm:   #EDE3D3;
  --qz-line-warm:  rgba(255, 255, 255, .10);
  --qz-mag-ink:    #F2F2F2;
  --qz-on-mag:     #111111;
  --qz-soft-bg:    #1E1C1B;
  --qz-soft-chip:  #2A2827;
  --dw-chip:      #2A2A2A;
  --dw-ring:      #1A1A1A;
  --dw-empty:     #2E2E2E;
  --dw-shadow:    0 2px 10px rgba(0, 0, 0, .40);

  /* 图标在深色下仍是白底黑图，与浅色一致 */
  --tile-bg:     #FFFFFF;
  --icon-color:  #000000;
  --tile-shadow: 0 2px 10px rgba(0, 0, 0, .55);

  --scrim:        rgba(0, 0, 0, .62);
  --scrim-strong: rgba(0, 0, 0, .76);
  --stage-bg:    #000000;
  --on-scrim:     #FFFFFF;
  --scrim-fill:    #FFFFFF;
  --on-scrim-fill: #000000;
  /* 压在浅色底上的字。和 --on-scrim 一对，两边都不跟主题走 */
  --on-paper:     #111318;
  --toast-bg:     rgba(255, 255, 255, .95);
  --toast-fg:     #000000;
  --toast-error:  rgba(255, 255, 255, .95);

  --wg-bg:       rgba(255, 255, 255, .08);
  --wg-solid:    #0B0B0B;
  --capsule-bg:     rgba(255, 255, 255, .08);
  --capsule-border: transparent;

  --group-fill: var(--ph-group-fill, #121212);
  --group-line: rgba(255, 255, 255, .08);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, .6);
  --shadow-3: 0 12px 40px rgba(0, 0, 0, .75);
}

/* 铺了壁纸：胶囊与小组件都改成半透明毛玻璃，让壁纸透上来 */
:root[data-wallpaper="on"] {
  --capsule-bg:     rgba(255, 255, 255, .22);
  --capsule-border: rgba(255, 255, 255, .30);
  --wg-solid:       rgba(255, 255, 255, .34);
  --glass-blur:     22px;
}
:root[data-theme="dark"][data-wallpaper="on"] {
  --capsule-bg:     rgba(0, 0, 0, .34);
  --capsule-border: rgba(255, 255, 255, .14);
  --wg-solid:       rgba(0, 0, 0, .40);
}
/* 毛玻璃关着（默认）：没有模糊垫底，半透明压在照片上显得单薄，底色加厚 */
:root[data-wallpaper="on"]:not([data-glass="on"]) {
  --capsule-bg:     rgba(255, 255, 255, .58);
  --capsule-border: rgba(255, 255, 255, .40);
  --wg-solid:       rgba(255, 255, 255, .72);
}
:root[data-theme="dark"][data-wallpaper="on"]:not([data-glass="on"]) {
  --capsule-bg:     rgba(0, 0, 0, .52);
  --capsule-border: rgba(255, 255, 255, .16);
  --wg-solid:       rgba(0, 0, 0, .62);
}
/* 装饰组件（4.431 第五版）铺了壁纸时跟着走：卡片底换成和其他小组件同一层半透明，白边换成半透明白 */
:root[data-wallpaper="on"] {
  --dw-card:   var(--wg-solid);
  --dw-ring:   rgba(255, 255, 255, .75);
  --dw-chip:   rgba(255, 255, 255, .45);
  --dw-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}
:root[data-theme="dark"][data-wallpaper="on"] {
  --dw-ring:   rgba(255, 255, 255, .18);
  --dw-chip:   rgba(255, 255, 255, .12);
}

/* ---- 阅读纸色 ----
   只在阅读器里用。这里是全项目唯一允许出现色相的地方：
   整个 app 是黑白的，但读书时的纸色是内容的一部分，用户自己挑，
   和全局主题分开（见 system/reader.js 开头那段）。
   自定义那一档不在这里，它由用户填的值直接写成内联变量。

   线下（--sg-*）同理，而且整套都在 system/stage.js 里，一个值都不在这儿：
   那几套主题本来就是「用户挑的一组颜色」的预设，不是设计令牌。 */
:root {
  --rd-paper-bg:  #ffffff;  --rd-paper-ink:  #1a1a1a;
  --rd-sepia-bg:  #f4ecd8;  --rd-sepia-ink:  #4a3f35;
  --rd-night-bg:  #16181c;  --rd-night-ink:  #b9bcc2;
}

/* ---- 新版界面（4.524） ----
   根元素挂 data-ui="new" 时生效，旧版一个值都不改。这里只放令牌，组件规则在 app.css 末尾。
   两套都定义一遍：旧版那一组就是现在的值，组件规则读同一个名字 */
:root {
  --font-display: var(--font-serif);
  --danger-text:  var(--danger);
  --r-btn:        var(--r-sm);
  /* 默认头像与无图格子：一只线条爪印（用户给的图）。头像那份四周留白，格子那份紧贴。底与线两档灰，线画在图里（assets/cat-*） */
  --cat-bg:       #EDEDEC;
  --cat-face:     url("../assets/cat-face-light.png");
  --cat-full:     url("../assets/cat-full-light.png");
}
:root[data-theme="dark"] {
  --cat-bg:       #222224;
  --cat-face:     url("../assets/cat-face-dark.png");
  --cat-full:     url("../assets/cat-full-dark.png");
}
:root[data-ui="new"] {
  --font-display: "Eira Serif", var(--font-serif);
  /* 删除一类：暗红文字。黑白里唯一的颜色，只给不能撤销的操作 */
  --danger-text:  #A8322A;
  --r-btn:        14px;
  --navbar-h:     var(--ph-navbar-h, 52px);
  /* 规格统一（4.866，按设计审查）：纯黑改深灰；灰只留一档，按下深一档，灰块里的分隔线再深一档；
     小字压到白底上 4.5 : 1 以上。美化写的 --ph-* 照旧优先 */
  --text:         var(--ph-text, #2E2E2E);
  --text-2:       var(--ph-text-2, #6B6B6B);
  --text-3:       var(--ph-text-3, #767676);
  --accent:       var(--ph-accent, #2E2E2E);
  --accent-weak:  var(--ph-accent-weak, #F4F4F4);
  --surface-2:    var(--ph-surface-2, #F4F4F4);
  --surface-3:    var(--ph-surface-3, #EBEBEB);
  --border:       var(--ph-border, #E3E3E3);
  --border-2:     var(--ph-border-2, #DCDCDC);
  --group-fill:   var(--ph-group-fill, #F4F4F4);
  --group-line:   #E3E3E3;
  --capsule-bg:   #F4F4F4;
  /* 关着的开关：描边轨道配同色圆点。白底上 3 : 1 以上，看得出是个开关 */
  --switch-off:   #8C8C8C;
  /* 灰块里面的东西（头像、次按钮）用白，不再灰上叠灰 */
  --on-group:     #FFFFFF;
  /* 图标格：白底一圈发丝边，不要投影。灰底栏上与白页上都分得出来 */
  --tile-shadow:  0 0 0 1px #E3E3E3;
  --focus-ring:   #2E2E2E;
  /* 角色的气泡：浅灰底、不要投影，和自己那边的深灰一深一浅（旧版不定义这两个，照旧白底加投影） */
  --bubble-theirs: #F4F4F4;
  --bubble-shadow: none;
  /* 主屏挂件：同一档浅灰、不要投影 */
  --wg-solid:     #F4F4F4;
}
:root[data-ui="new"][data-theme="dark"] {
  --danger-text:  #E8968F;
  /* 深色照旧纯黑底；字与灰各退一档，不刺眼 */
  --text:         var(--ph-text, #EDEDED);
  --text-2:       var(--ph-text-2, #A3A3A3);
  --text-3:       var(--ph-text-3, #8F8F8F);
  --accent:       var(--ph-accent, #EDEDED);
  --accent-weak:  var(--ph-accent-weak, #161616);
  --surface-2:    var(--ph-surface-2, #161616);
  --surface-3:    var(--ph-surface-3, #222222);
  --border:       var(--ph-border, #262626);
  --border-2:     var(--ph-border-2, #333333);
  --group-fill:   var(--ph-group-fill, #141414);
  --group-line:   #262626;
  --capsule-bg:   #161616;
  --switch-off:   #6B6B6B;
  --on-group:     #000000;
  --tile-shadow:  0 0 0 1px #262626;
  --focus-ring:   #EDEDED;
  --bubble-theirs: #1C1C1C;
  --wg-solid:     #141414;
}