/* wwwroot/css/site.css — hand-written modern CSS, committed to git as-is, no build step (docs/05 §6). */

@layer reset, tokens, base, layout, components;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  button {
    font: inherit;
    cursor: pointer;
    background: none;
    border: none;
    color: inherit;
    padding: 0;
  }
  ul { list-style: none; padding: 0; }
  h1, h2, h3, p, ul, figure, pre { margin: 0; }
}

@layer tokens {
  :root {
    color-scheme: light dark;                                            /* enables light-dark() automatic dark mode */
    /* Material Indigo accent — dark mode matches eax.org (#9FA8DA on #121212 / #1e1e1e
       surfaces, 87 % / 60 % white text); light mode uses Indigo 500 (#3F51B5) for
       accessible contrast on a near-white background. */
    --brand:         light-dark(#3F51B5, #9FA8DA);
    --brand-hover:   light-dark(#303F9F, #b1b9e1);
    --brand-text:    light-dark(#ffffff, #121212);                       /* text drawn ON a brand-coloured surface */
    --bg:            light-dark(#fafafa, #121212);                       /* Material backdrop */
    --fg:            light-dark(rgba(0,0,0,0.87), rgba(255,255,255,0.87));
    --fg-muted:      light-dark(rgba(0,0,0,0.60), rgba(255,255,255,0.60));
    --surface:       light-dark(#ffffff, #1e1e1e);                       /* cards, dropdown panels, inputs */
    --surface-hover: light-dark(rgba(0,0,0,0.04), rgba(255,255,255,0.04));
    --border:        light-dark(rgba(0,0,0,0.12), rgba(255,255,255,0.12));
    --radius:        0.25rem;                                            /* Material small radius (eax.org). rem so它随用户字体大小一起缩放——
                                                                            和余下的 spacing / typography 一致；hairline border / outline / shadow
                                                                            offset / 9999px pill 留 px（约定，详见 docs/05 §6）。 */
    --content-max:   72rem;
    --navbar-h:      2.75rem;                                            /* compact bar, matches Material dense / eax.org feel */
    --shadow-sm:     0 1px 2px rgb(0 0 0 / 0.06);
    --shadow-md:     0 4px 16px rgb(0 0 0 / 0.18);
    --shadow-lg:     0 10px 25px rgb(0 0 0 / 0.15);
    /* Semantic status colours — single source so every app's error / success / warning
       agrees (previously 3 drifting "error red" palettes + varying ambers, see docs/05 §6).
       --color-error 用于错误文字 / 图标 / 边框（深色模式取亮红保证可读）；--color-error-strong
       用于「填充危险面 + 白字」按钮（深色模式取饱和红保证白字对比）。warning 同理分前景 / 底色。 */
    --color-error:        light-dark(#b00020, #f88a82);
    --color-error-strong: light-dark(#b00020, #cf6679);
    --color-success:      light-dark(#2e7d32, #81c784);
    --color-warning:      light-dark(#f9a825, #ffc107);
    --color-warning-bg:   light-dark(#fff8e1, #3a3000);
  }
}

@layer base {
  body {
    margin: 0;
    min-block-size: 100vh;
    background: var(--bg);
    color: var(--fg);
    /* eax.org's font stack — Roboto on systems that have it, falls back through
       Helvetica Neue / Arial; no external font load, no build step (docs/05 §6). */
    font-family: Roboto, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    line-height: 1.5;
  }

  h1 { font-size: 1.75rem;  font-weight: 500; margin-block-end: 1rem; letter-spacing: -0.01em; }
  h2 { font-size: 1.375rem; font-weight: 500; margin-block: 1.5rem 0.75rem; }
  p  { margin-block-end: 1rem; }
  a  { color: var(--brand); text-decoration: none; }
  a:hover { text-decoration: underline; }

  :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
}

@layer layout {
  .content {
    max-inline-size: var(--content-max);
    margin-inline: auto;
    padding-inline: 1rem;
    padding-block: 2rem;
  }
}

@layer components {

  /* === Site header — sticky banner, always pinned to viewport top === */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 100;
    background: var(--surface);
    border-block-end: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
  }

  /* === Navbar — full-width edge-to-edge (mimics macOS menu bar / Kali Linux panel) ===
     No max-inline-size / margin-inline: auto — items hug both viewport edges; the
     .content container below stays max-w-bounded. Items provide their own inner padding. */
  .navbar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    block-size: var(--navbar-h);
    padding-inline: 0;
  }
  .navbar__logo {
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--fg);
    padding-inline: 1rem;
  }
  .navbar__logo:hover { text-decoration: none; }

  /* === Dropdown menus (Apps / Bookmarks / Language / User) === */
  .menu { position: relative; }
  .menu__trigger {
    padding-inline: 0.75rem;
    padding-block: 0.375rem;
    color: var(--fg);
    border-radius: var(--radius);
    font-weight: 500;
  }
  .menu__trigger:hover { background: var(--surface-hover); }

  /* === Command-palette trigger (visible Search affordance in the navbar) === */
  /* First item of the inline-end cluster: carries margin-inline-start: auto, so it
     and everything after it (theme / language / user) hugs the inline-end edge. */
  .navbar__search {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3125rem 0.625rem;
    color: var(--fg-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.875rem;
    line-height: 1;
  }
  .navbar__search:hover { background: var(--surface-hover); color: var(--fg); }
  .navbar__search-kbd {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    padding: 0.1rem 0.3rem;
    color: var(--fg-muted);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 0.25rem;
  }
  @media (max-width: 40rem) {
    .navbar__search-text, .navbar__search-kbd { display: none; }
  }

  /* === Theme toggle (compact icon button, cycles auto → light → dark) === */
  /* Flows after .navbar__search (which carries the margin-inline-start: auto). */
  .theme-toggle {
    inline-size: 2rem;
    block-size: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fg);
    border-radius: var(--radius);
    font-size: 1rem;
    line-height: 1;
  }
  .theme-toggle:hover { background: var(--surface-hover); }
  .theme-toggle__icon { font-family: "Apple Color Emoji", "Segoe UI Symbol", "Noto Sans Symbols2", sans-serif; }

  .menu__panel {
    position: absolute;
    inset-block-start: calc(100% + 0.25rem);
    inset-inline-start: 0;
    min-inline-size: 14rem;
    padding-block: 0.375rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    z-index: 200;
    /* overflow stays the default visible: cascade submenus are absolute-positioned
       descendants and must escape the panel's box. Per the CSS Overflow spec,
       setting overflow-y: auto forces overflow-x to auto too (clipping cascades).
       Long menus are rare; if a level ever needs scrolling, add a wrapper element. */
  }
  /* Theme toggle (above) carries margin-inline-start: auto; Language and User flow after it
     toward the inline-end edge — no extra margin needed on Language. */
  /* Right-edge menus open toward the leading edge so they don't overflow the viewport. */
  .menu[data-nav="language"] .menu__panel,
  .menu[data-nav="user"]     .menu__panel {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }

  .menu__item {
    display: block;
    inline-size: 100%;
    padding-inline: 1rem;
    padding-block: 0.375rem;
    color: var(--fg);
    text-align: start;
    border-radius: 0;
  }
  .menu__item:hover {
    background: var(--surface-hover);
    color: var(--fg);
    text-decoration: none;
  }
  .menu__panel form { margin: 0; }

  /* === Inline SVG icons (sprite in _Layout) ===
     <svg class="icon"><use href="#i-xxx"/></svg> — stroke 跟随 currentColor，故随文字 / 主题色走；
     1em 见方、随行高对齐。所有图标都是 stroke-only（无填充）。 */
  .icon {
    inline-size: 1em;
    block-size: 1em;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.125em;
  }

  /* 下拉里的分隔线（如书签菜单「编辑书签」入口前）。 */
  .menu__sep {
    block-size: 0;
    margin-block: 0.375rem;
    border-block-start: 1px solid var(--border);
  }
  /* 管理类入口（书签菜单底部「编辑书签」）——淡色 + 前置图标，和上面的书签外链拉开层级。 */
  .menu__item--manage {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--fg-muted);
    font-size: 0.875rem;
  }
  .menu__item--manage:hover { color: var(--fg); }

  /* === Cascading submenus (Apps tools, Bookmarks branches) ===
     Each item with children gets .menu__item-wrap on its <li> for positioning;
     the nested <ul class="menu__panel menu__submenu"> flies out to the inline-end side. */
  .menu__item-wrap { position: relative; }
  /* Keep the parent item highlighted while the cursor is anywhere in its submenu
     (the submenu is a DOM descendant of .menu__item-wrap, so :hover propagates). */
  .menu__item-wrap:hover > .menu__item { background: var(--surface-hover); }

  .menu__submenu {
    inset-block-start: -0.375rem;        /* align with parent <li> top, offsetting panel padding */
    inset-inline-start: 100%;            /* fly to trailing edge of parent */
  }
  /* Right-side menus (language/user) sit at viewport's trailing edge — any submenu
     they might host must fly toward the leading edge to avoid overflow. */
  .menu[data-nav="language"] .menu__submenu,
  .menu[data-nav="user"]     .menu__submenu {
    inset-inline-start: auto;
    inset-inline-end: 100%;
  }

  /* Item that opens a submenu — chevron rendered after the label on the trailing side. */
  .menu__item--has-children {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }
  .menu__item--has-children::after {
    content: "▸";
    color: var(--fg-muted);
    font-size: 0.75rem;
    line-height: 1;
  }
  [dir="rtl"] .menu__item--has-children::after { transform: scaleX(-1); }

  /* === Home search launcher (Pages/_Content.cshtml) ===
     Google-style：顶上当前引擎名作品牌 <h1>，下面一行 pill 把 [engine ▾ | input | search]
     连成一体——共享 surface bg、外圆角，内部用 1px 竖线分隔。Engine 选择器仍是 .menu /
     .menu__panel / .menu__submenu cascade（与 navbar 共享样式）。整个 launcher 在视口
     纵向居中、宽到接近 50rem，避免顶上一坨小东西的局促感。 */
  .search-launcher {
    position: relative;            /* 设置入口绝对定位的容器 */
    max-inline-size: 48rem;
    margin-inline: auto;
    min-block-size: calc(78vh - var(--navbar-h));
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* 搜索引擎管理入口——主内容区右下角，淡灰不抢搜索框焦点（Google「设置」同位）。
     绝对定位到 launcher 块的 block-end / inline-end 角；logical props → RTL 自动落到左下角。 */
  .search-launcher__settings {
    position: absolute;
    inset-block-end: 1rem;
    inset-inline-end: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    border-radius: var(--radius);
    color: var(--fg-muted);
    font-size: 0.875rem;
  }
  .search-launcher__settings:hover {
    color: var(--fg);
    background: var(--surface-hover);
    text-decoration: none;
  }
  @media (width < 32rem) {
    /* 窄屏：角落空间紧张，改贴底居中、与搜索框拉开。 */
    .search-launcher__settings {
      position: static;
      align-self: center;
      margin-block-start: 1.5rem;
    }
  }

  .search-launcher__brand {
    text-align: center;
    font-size: 4.5rem;
    font-weight: 400;
    letter-spacing: -0.03em;
    margin-block: 0 2rem;
  }

  /* 整条 pill：连体外观——容器持边框 + 圆角；子元素背景透明、无边框，靠 divider 分段。 */
  .search-launcher__bar {
    display: flex;
    align-items: stretch;
    block-size: 3.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 9999px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.15s, border-color 0.15s;
  }
  .search-launcher__bar:hover,
  .search-launcher__bar:focus-within {
    border-color: var(--brand);
    box-shadow: var(--shadow-md);
  }

  /* 故意不写 .search-launcher__engine { position: relative }——.menu 类已带；也不写
     .search-launcher__engine .menu__panel { inset-... }——会以 0,2,0 的 specificity
     盖过 .menu__submenu（0,1,0），导致 cascade 子菜单不能朝侧面飞、被强按到下方。
     交由全局 .menu__panel + .menu__submenu 默认规则处理：顶层挂下方、子级飞 inline-end。 */
  .search-launcher__engine-btn {
    background: transparent;
    border: none;
    block-size: 100%;
    padding-inline: 1.5rem;
    padding-block: 0;
    border-start-start-radius: 9999px;
    border-end-start-radius: 9999px;
    white-space: nowrap;
    font-weight: 500;
    color: var(--fg);
    cursor: pointer;
  }
  .search-launcher__engine-btn:hover { background: var(--surface-hover); }

  .search-launcher__divider {
    inline-size: 1px;
    background: var(--border);
    margin-block: 0.625rem;       /* 上下留呼吸位、不贴 pill 边 */
    flex: 0 0 auto;
  }

  /* 输入框：透明、无边框、无内边距——铺满 flex 剩余空间。focus 时不显示自带 outline
     （pill 的 :focus-within 已把外框染成品牌色，那就是焦点指示）。 */
  .search-launcher__bar .search-launcher__input {
    flex: 1 1 auto;
    inline-size: auto;
    background: transparent;
    border: none;
    border-radius: 0;
    font-size: 1.125rem;
    padding-inline: 1.25rem;
    padding-block: 0;
    color: var(--fg);
  }
  .search-launcher__bar .search-launcher__input:focus,
  .search-launcher__bar .search-launcher__input:focus-visible {
    outline: none;
    border: none;
  }
  .search-launcher__bar .search-launcher__input::placeholder { color: var(--fg-muted); }

  /* Submit 按钮：pill 右端的实色 CTA——品牌色底 + brand-text 字（亮色模式白字、
     暗色模式深字，对比度都达标）。hover 加深到 brand-hover。比全局
     button[type="submit"] 更具体——靠 .search-launcher__bar 前缀提升 specificity
     压住那条全局规则。
     box-sizing: border-box 全局生效——pill 子项 stretch 后填的是 content box
     （pill 高 - 2×border），实色按钮会在右端漏出 pill 的 1px 边框圈一周。用
     -1px 的 block / inline-end margin 让按钮越过边框贴到 pill 外缘；按钮右端
     与 pill 右端半径都是 9999px（半圆），覆盖后曲线完全重合。 */
  .search-launcher__bar .search-launcher__submit {
    background: var(--brand);
    color: var(--brand-text);
    border: none;
    padding-inline: 1.75rem;
    padding-block: 0;
    margin-block: -1px;
    margin-inline-end: -1px;
    border-start-end-radius: 9999px;
    border-end-end-radius: 9999px;
    font-weight: 500;
    font-size: 1rem;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    white-space: nowrap;
  }
  .search-launcher__bar .search-launcher__submit:hover {
    background: var(--brand-hover);
    color: var(--brand-text);
  }

  /* === Suite workspace (per-suite grid page; docs/04 §3.2、docs/05 §1） ===
     四区 grid（grid-template-areas）：
       header header header   ← _WorkspaceHeader（面包屑 + Run / Copy / Clear）
       ops    input  output   ← _WorkspaceOps · workbench · 输出区
     窄屏 (<60rem) 折叠为单列垂直堆叠。 */
  .workspace {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "header header header"
      "ops    input  output";
    gap: 1.25rem;
    min-block-size: calc(100vh - var(--navbar-h) - 4rem);
  }

  /* 宽输出模式（docs/04b §3 / §13）：当 op 的 Renderer 是 Dashboard / CandidateList
     时（text-count / magic 等），把 grid 改成 2 列——input 与 output 共享右侧并
     垂直堆叠，让仪表盘卡片 / 候选列表横向铺开（重要：6 个数字卡 / 多候选行长在窄
     右列里硬挤会丑）。MultiCard 不进这条——random-generator 已 bespoke 不用 workspace。 */
  .workspace:has(:is(.dashboard, .candidate-list)) {
    grid-template-columns: 12rem minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "header header"
      "ops    input"
      "ops    output";
  }

  /* 输出上移模式（.workspace--stacked，由 WorkspaceShellViewModel.StackedOutput 驱动）：
     同上两栏布局，但由 App 显式选用（不靠 output 内容 :has 探测）。给「输入极短、输出多字段」
     的 App（network-suite）——紧凑输入置于右上，多字段输出占满其下整宽，免去中栏大片空白。 */
  .workspace--stacked {
    grid-template-columns: 12rem minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "header header"
      "ops    input"
      "ops    output";
  }

  /* Workspace header banner：面包屑（App ▸ Op）+ 操作按钮组（Run / Copy / Clear）。
     视觉上轻——透明背景融入页面，仅靠字号 / 颜色对比定位重心。
     高度只占自身内容（grid-template-rows: auto），不抢 input/output 主区空间。 */
  .workspace__header {
    grid-area: header;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.25rem;
    min-block-size: 2.5rem;
  }
  .workspace__breadcrumb {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.9375rem;
    min-inline-size: 0;
  }
  .workspace__app-name { color: var(--fg-muted); }
  .workspace__bc-sep { color: var(--fg-muted); font-size: 0.75rem; }
  /* op 名是用户在套件内的当前位置锚——放大 + 加粗 + 品牌色，第一眼就能看到「我在哪个 op」。 */
  .workspace__op-name {
    color: var(--brand);
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.2;
  }

  /* Action 按钮组——三个等大 36×36 icon button；primary（Run）实色填充，其余 ghost 边框。
     base 层 button[type="submit"] 规则用 :not(.workspace__action) 排除了 Run，所以这里
     不需要再 reset padding / text-transform 等。 */
  .workspace__actions { display: flex; gap: 0.375rem; }
  .workspace__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    padding: 0;
    background: transparent;
    color: var(--fg-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
  }
  .workspace__action:hover { background: var(--surface-hover); color: var(--fg); }
  .workspace__action--primary {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--brand-text);
  }
  .workspace__action--primary:hover {
    background: var(--brand-hover);
    border-color: var(--brand-hover);
    color: var(--brand-text);
  }
  .workspace__action svg { inline-size: 1.125rem; block-size: 1.125rem; }

  /* Cascade 侧栏（docs/05 §3.1）：左栏只列组名按钮；hover/click 把当前组 op 列表
     绝对定位 cascade 飞到 inline-end 端。Alpine 状态 openGroup 由 _WorkspaceOps.cshtml
     内的 aside 自管，外层 suiteWorkspace 仍持有 op/selectOp。 */
  .workspace__ops {
    grid-area: ops;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.375rem 0.25rem;
    align-self: start;
  }
  .workspace__ops-group {
    position: relative;
  }
  .workspace__ops-group + .workspace__ops-group {
    margin-block-start: 0.125rem;
  }
  .workspace__ops-group-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    inline-size: 100%;
    padding-inline: 0.625rem;
    padding-block: 0.5rem;
    background: transparent;
    border: 0;
    border-radius: var(--radius);
    color: var(--fg);
    font: inherit;
    font-size: 0.875rem;
    text-align: start;
    cursor: pointer;
  }
  .workspace__ops-group-trigger:hover,
  .workspace__ops-group.is-open > .workspace__ops-group-trigger {
    background: var(--surface-hover);
  }
  /* 当前选中 op 所在的组：label 上色锚定位置 */
  .workspace__ops-group.is-current > .workspace__ops-group-trigger > .workspace__ops-group-label {
    color: var(--brand);
    font-weight: 500;
  }
  .workspace__ops-group-label { flex: 1 1 auto; min-inline-size: 0; }
  .workspace__ops-group-chevron {
    font-size: 0.75rem;
    color: var(--fg-muted);
    flex: 0 0 auto;
    margin-inline-start: 0.375rem;
  }
  [dir="rtl"] .workspace__ops-group-chevron { transform: scaleX(-1); }

  /* cascade 面板飞出：inset-inline-start: 100% 紧贴侧栏外缘，间距 0.25rem 由 ::before
     做透明 hover 桥；与 .menu__submenu 同款风格但层级独立。
     默认 `display:none`——脱离 Alpine `x-show` 走纯 CSS 显隐：组 hover 或 .is-open
     （Alpine `:class` 据 openGroup 绑）时才 block。Alpine 没及时 init 也不会闪「全展开」。 */
  .workspace__ops-cascade {
    display: none;
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: calc(100% + 0.25rem);
    min-inline-size: 14rem;
    max-inline-size: 22rem;
    margin: 0;
    padding: 0.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    list-style: none;
    z-index: 10;
  }
  .workspace__ops-group:hover > .workspace__ops-cascade,
  .workspace__ops-group.is-open > .workspace__ops-cascade { display: block; }
  /* hover 桥——把侧栏与 cascade 间的 0.25rem 空隙也算作 hover 区，
     避免鼠标穿越时触发 mouseleave debounce 不必要的关闭。 */
  .workspace__ops-cascade::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inline-size: 0.375rem;
    inset-inline-start: -0.375rem;
  }
  .workspace__ops-cascade > li { margin: 0; }
  .workspace__op {
    display: block;
    padding-inline: 0.75rem;
    padding-block: 0.4rem;
    color: var(--fg);
    font-size: 0.875rem;
    text-decoration: none;
    border-radius: var(--radius);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .workspace__op:hover { background: var(--surface-hover); color: var(--fg); text-decoration: none; }
  .workspace__op.is-active { background: var(--surface-hover); color: var(--brand); font-weight: 500; }

  /* form 包裹 input 卡片，本身不带视觉边框（边框在 .workspace__input-card 上）。 */
  .workspace__main {
    grid-area: input;
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
  }

  /* Workbench card——params + input 合体的单一带边卡片。
     params 段薄背景区分；与 textarea 间有 1px 分隔线，但仅当 textarea 真存在时
     （:not(:only-child)），用于 random-generator 这种无 textarea 的变体自然消失。
     默认填满列高（成块文本输入的 App 要大输入框）；紧凑模式下收缩见 .workspace--compact-input。 */
  .workspace__input-card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-block-size: 16rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .workspace__input-card:focus-within {
    border-color: var(--brand);
  }

  .workspace__params {
    padding: 0.75rem 1rem;
    background: light-dark(rgba(0, 0, 0, 0.025), rgba(255, 255, 255, 0.03));
    min-block-size: 2.5rem;
  }
  .workspace__params:not(:only-child) {
    border-block-end: 1px solid var(--border);
  }
  .workspace__params-row { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
  .workspace__params-row--empty { color: var(--fg-muted); font-size: 0.875rem; }
  .workspace__param { display: inline-flex; flex-direction: column; gap: 0.25rem; font-size: 0.875rem; }
  .workspace__param > span { color: var(--fg-muted); }
  .workspace__param--inline { flex-direction: row; align-items: center; gap: 0.375rem; }
  .workspace__param select { inline-size: auto; min-inline-size: 12rem; }
  .workspace__param input[type="checkbox"] { inline-size: auto; }
  /* TextArea 参数（PEM key 等多行）——等宽、可竖向拉伸、最小高度容下一段 PEM。 */
  .workspace__param-textarea {
    inline-size: 100%;
    min-block-size: 6rem;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8125rem;
    line-height: 1.4;
  }
  /* 含 TextArea 的参数（如 RSA 的 PEM key）占满整行——否则 inline-flex 的 .workspace__param
     收缩到内容宽度，textarea 只剩 placeholder 那么宽，又小又丑（用户反馈）。 */
  .workspace__param:has(.workspace__param-textarea) { flex: 1 1 100%; }

  /* 方向开关（encode/decode、encrypt/decrypt…）——分段 pill 组，置于 input 卡顶部，
     与 params 段同款薄背景 + 下分隔线。radio 视觉隐藏、label pill 承担视觉与点击；
     选中态 .is-active 上品牌填充。数据驱动渲染见 _WorkspaceShell + docs/04b §6。 */
  .workspace__directions {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
    padding: 0.625rem 1rem;
    border-block-end: 1px solid var(--border);
    background: light-dark(rgba(0, 0, 0, 0.025), rgba(255, 255, 255, 0.03));
  }
  .workspace__direction {
    display: inline-flex;
    align-items: center;
    padding: 0.3125rem 0.875rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.8125rem;
    color: var(--fg-muted);
    cursor: pointer;
    user-select: none;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  }
  .workspace__direction:hover { background: var(--surface-hover); color: var(--fg); }
  .workspace__direction.is-active {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--brand-text);
    font-weight: 500;
  }
  /* radio 仅承担语义与键盘可达——视觉隐藏（保留可聚焦），焦点环画在 label 上。 */
  .workspace__direction-input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .workspace__direction:has(.workspace__direction-input:focus-visible) {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
  }

  /* input 卡内 textarea：无独立边框（卡边即边）、无圆角。
     默认填满卡片剩余高度、内部滚动——成块文本（cipher-suite / data-converter / text-processor）
     输入本就可能很多，要大输入框，不收缩。 */
  .workspace__input {
    flex: 1 1 auto;
    box-sizing: border-box;
    min-block-size: 12rem;
    padding: 0.875rem 1rem;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875rem;
    resize: none;
  }
  .workspace__input:focus { outline: 0; }

  /* 紧凑输入模式（.workspace--compact-input，由 WorkspaceShellViewModel.CompactInput 驱动）：
     给「输入本就很短」的 App（network-suite）和「只有参数、无主输入」的 App（key-forge）。
     卡片收缩到内容高度、不再填满列；textarea 塌成一行、按 scrollHeight 自增长（_WorkspaceShell
     的 x-effect），超 max-block-size 滚动。box-sizing:border-box + border:0 → height==scrollHeight 精确。 */
  .workspace--compact-input .workspace__main { align-self: start; }
  .workspace--compact-input .workspace__input-card { flex: 0 0 auto; min-block-size: 0; }
  .workspace__input--compact {
    flex: 0 0 auto;
    min-block-size: 2.75rem;
    max-block-size: 28rem;
    overflow-y: auto;
  }
  /* 大输入 op（粘 PEM / 响应头 / CIDR 列表）：起始更高，明确是「贴一整块」的区域。
     min-block-size 会顶住 x-effect 写的内联 height（min 优先），故空框也保持此高度、内容更多再长。 */
  .workspace__input--roomy { min-block-size: 11rem; }

  /* Output 视觉降权——背景透明融入页面、边框仍存以勾勒边界，让 input 卡视觉上是
     用户主动操作的对象、output 是被动派生的结果。落结果时短暂 .is-pulsing 高亮。 */
  .workspace__output-pane {
    grid-area: output;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    min-block-size: 18rem;
    position: relative;
    overflow: hidden;
  }

  /* 落结果脉冲：顶边 brand-color 一闪 + 文本淡入。
     ::before 做绝对定位顶边 bar；动画完成后透明，等下次触发。 */
  .workspace__output-pane::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 2px;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: center;
    pointer-events: none;
  }
  .workspace__output-pane.is-pulsing::before {
    animation: workspace-result-flash 600ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .workspace__output-pane.is-pulsing > #output {
    animation: workspace-result-fade 200ms ease-out;
  }
  @keyframes workspace-result-flash {
    0%   { transform: scaleX(0); opacity: 1; }
    30%  { transform: scaleX(1); opacity: 1; }
    100% { transform: scaleX(1); opacity: 0; }
  }
  @keyframes workspace-result-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  /* 减少动效偏好：尊重 prefers-reduced-motion，关掉脉冲与淡入。 */
  @media (prefers-reduced-motion: reduce) {
    .workspace__output-pane.is-pulsing::before,
    .workspace__output-pane.is-pulsing > #output { animation: none; }
  }
  .workspace__output-pane > #output {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-block-size: 0;
  }
  /* 输出计数徽章——贴在输出区底部，错误/空输出时 :empty 自动隐藏。 */
  .workspace__output-meta {
    flex: 0 0 auto;
    margin-block-start: 0.5rem;
    padding-block-start: 0.5rem;
    border-block-start: 1px solid var(--border);
    font-size: 0.75rem;
    color: var(--fg-muted);
    font-variant-numeric: tabular-nums;
  }
  .workspace__output-meta:empty { display: none; }
  /* Output 空态：居中 icon + 引导文字，比单行小字更可读、提示更明确。 */
  .workspace__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin: auto;
    padding-block: 1rem;
    color: var(--fg-muted);
    font-size: 0.9375rem;
    text-align: center;
    max-inline-size: 22rem;
  }
  .workspace__placeholder-icon {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    opacity: 0.45;
    stroke-width: 1.25;
  }
  /* RTL：箭头方向（指向 input）需镜像；LTR 默认指左，RTL 指右。 */
  [dir="rtl"] .workspace__placeholder-icon { transform: scaleX(-1); }
  .workspace__placeholder p { margin: 0; }
  .workspace__error { color: var(--color-error); font-size: 0.875rem; }

  /* 输出上移布局：占位箭头指左已无意义（输入在上方、不在左），隐去——只留引导文字。 */
  .workspace--stacked .workspace__placeholder-icon { display: none; }

  /* 手动运行 op（dns/whois 等）的提示：按 Enter / Run。实时 op 不显（x-show）。 */
  .workspace__run-hint {
    margin: 0.4rem 0 0;
    font-size: 0.75rem;
    color: var(--fg-muted);
  }
  /* 「试个例子」链接——输入区下方的低调文字按钮。 */
  .workspace__input-aux { margin: 0.4rem 0 0; }
  .workspace__sample-btn {
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.75rem;
    color: var(--brand);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .workspace__sample-btn:hover { color: var(--fg); }

  /* 慢请求加载态：盖在输出之上的「Looking up…」遮罩，避免「先闪一串错误再出数据」的观感。
     form 发请求期间 htmx 给它挂 .htmx-request；相邻兄弟选择器点亮其后 output-pane 的遮罩。
     关键：transition-delay 只在「显示」一侧 0.35s——请求若在 0.35s 内完成则遮罩根本不淡入，
     快的本地计算 op 因此不闪；隐藏无 delay、瞬时撤。 */
  .workspace__loading {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--bg) 85%, transparent);
    color: var(--fg-muted);
    font-size: 0.875rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
  }
  #workspace-form.htmx-request ~ .workspace__output-pane .workspace__loading {
    opacity: 1;
    transition-delay: 0.35s;
  }
  @media (prefers-reduced-motion: reduce) {
    .workspace__loading { transition: opacity 0.12s ease; transition-delay: 0.35s; }
  }
  /* .workspace__stats 已废除——text-count 升级到 Shell v2 Dashboard renderer
     （.dashboard__*），见 docs/04b §3 与 site.css 末尾。 */
  .workspace__result { display: flex; flex-direction: column; flex: 1 1 auto; min-block-size: 0; }
  .workspace__result-text {
    flex: 1 1 auto;
    margin: 0;
    background: transparent;
    border: none;
    padding: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875rem;
    overflow: auto;
    min-block-size: 0;
    white-space: pre-wrap;
    word-break: break-word;
  }
  /* VerifyMatchOutput badge —— bcrypt / argon2id verify 方向输出。 */
  .workspace__verify-match {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    border-inline-start-width: 4px;
    border-inline-start-style: solid;
    font-size: 0.95rem;
  }
  .workspace__verify-match--ok {
    background: light-dark(#e8f5e9, #1b2e1d);
    border-inline-start-color: var(--color-success);
    color: light-dark(#1b5e20, #c8e6c9);
  }
  .workspace__verify-match--fail {
    background: light-dark(#ffebee, #2e1a1a);
    border-inline-start-color: light-dark(#c62828, #ef9a9a);
    color: light-dark(#b71c1c, #ffcdd2);
  }

  @media (width < 60rem) {
    /* 窄屏：四区垂直堆叠（header / ops / input / output），不再 12rem 侧栏。
       宽输出 `:has()` 在桌面成立但在移动端要被这条覆盖——具体 selector 同上 +
       :has 变体，让 desktop 改的 grid 也回归单列。 */
    .workspace,
    .workspace--stacked,
    .workspace:has(:is(.dashboard, .candidate-list)) {
      grid-template-columns: 1fr;
      grid-template-rows: none;
      grid-template-areas:
        "header"
        "ops"
        "input"
        "output";
      min-block-size: 0;
      gap: 0.75rem;
    }
    /* 窄屏：cascade 走回行内（static），不再绝对飞出——避免溢出视口。 */
    .workspace__ops-cascade {
      position: static;
      margin-inline-start: 1rem;
      box-shadow: none;
      border: 0;
      background: transparent;
      padding-block: 0.125rem;
    }
    .workspace__ops-cascade::before { content: none; }
    /* 窄屏顶栏黏在 navbar 下，确保 Run / Clear 始终触手可及。 */
    .workspace__header {
      position: sticky;
      inset-block-start: var(--navbar-h, 3rem);
      z-index: 5;
      background: var(--bg);
      padding-block: 0.5rem;
    }
  }

  /* === Form controls (workspace 内的 input/textarea/select) === */
  input, textarea, select {
    inline-size: 100%;
    padding-inline: 0.75rem;
    padding-block: 0.5rem;
    font: inherit;
    color: var(--fg);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }
  textarea {
    resize: vertical;
    min-block-size: 6rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875rem;
  }
  input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
    border-color: var(--brand);
  }

  /* 通用 submit 按钮——brand 色实色按钮，大写字 + 文字尺寸。:not(.workspace__action)
     排除 workspace header 里的 Run icon 按钮（它另走 .workspace__action 36×36 icon
     button 范式）；否则本规则 element+attr 特异性 (0,1,1) 高过 .workspace__action
     的 (0,1,0)，会把 padding-inline:1.25rem / text-transform:uppercase 灌进 icon
     button，把 36px 方框撑成 76×36 大胖子并把 SVG 淹没。 */
  button[type="submit"]:not(.workspace__action) {
    background: var(--brand);
    color: var(--brand-text);   /* dark-on-lavender in dark mode (eax.org), white-on-indigo in light */
    padding-inline: 1.25rem;
    padding-block: 0.5rem;
    border-radius: var(--radius);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.875rem;
  }
  button[type="submit"]:not(.workspace__action):hover { background: var(--brand-hover); }

  /* Logout 走 POST 表单，渲染成 <button type="submit">，但它在用户下拉里只是一个普通
     菜单项，不该套通用 submit 的 brand 实色 + 大写。拉平成与「我的账号」<a> 完全一致的
     menu__item（透明背、常规字、同 padding）。element+双类 (0,2,1) 与 base 同特异性，
     靠排在 base 之后由源码顺序胜出（同 .auth-card__submit 的覆盖手法）。 */
  button[type="submit"].menu__item {
    background: transparent;
    color: var(--fg);
    font: inherit;
    text-transform: none;
    letter-spacing: 0;
    padding-inline: 1rem;
    padding-block: 0.375rem;
  }
  button[type="submit"].menu__item:hover { background: var(--surface-hover); }

  /* === Output preformatted blocks (tool results) === */
  pre {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875rem;
  }

  /* Alpine `x-cloak`：避免初渲染时 x-show 元素闪现。 */
  [x-cloak] { display: none !important; }

  /* === Shell v2 input: Bytes（DataShape.Bytes，docs/04b §6） ===
     Tab 切 4 模式（Text/Hex/Base64/File）+ textarea 或文件 picker。 */
  .input-bytes {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-block-size: 0;
  }
  .input-bytes__tabs {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
  }
  .input-bytes__tab {
    padding-inline: 0.75rem;
    padding-block: 0.375rem;
    font-size: 0.8125rem;
    color: var(--fg-muted);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 9999px;
    cursor: pointer;
  }
  .input-bytes__tab:hover { color: var(--fg); border-color: var(--brand); }
  .input-bytes__tab.is-active {
    color: var(--brand-text);
    background: var(--brand);
    border-color: var(--brand);
  }
  .input-bytes__textarea {
    flex: 1 1 auto;
    min-block-size: 6rem;
  }
  .input-bytes__file-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-block-size: 6rem;
    padding: 1rem;
    color: var(--fg-muted);
    background: var(--surface);
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    text-align: center;
  }
  .input-bytes__file-zone:hover { border-color: var(--brand); }
  .input-bytes__file-zone input[type="file"] {
    /* 让整个 label 可点；视觉只显示提示文字。 */
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    overflow: hidden;
  }

  /* === Shell v2 §8 命令面板（Ctrl/Cmd+K，docs/04b §8） ===
     固定全屏 modal：半透明 backdrop + 居中 panel + 搜索框 + 结果列表。
     结果列表超过视口高度时内部滚动。 */
  .command-palette {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-block-start: 10vh;
  }
  .command-palette__backdrop {
    position: absolute;
    inset: 0;
    background: light-dark(rgb(0 0 0 / 0.30), rgb(0 0 0 / 0.55));
  }
  .command-palette__panel {
    position: relative;
    inline-size: min(40rem, 92vw);
    max-block-size: 70vh;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 20px 50px rgb(0 0 0 / 0.25);
    overflow: hidden;
  }
  .command-palette__input {
    inline-size: 100%;
    padding: 0.875rem 1rem;
    font-size: 1rem;
    color: var(--fg);
    background: transparent;
    border: none;
    border-block-end: 1px solid var(--border);
    outline: none;
  }
  .command-palette__results {
    margin: 0;
    padding: 0.25rem 0;
    list-style: none;
    overflow-y: auto;
    flex: 1 1 auto;
    min-block-size: 0;
  }
  .command-palette__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    color: var(--fg);
  }
  .command-palette__item.is-active {
    background: light-dark(rgb(63 81 181 / 0.10), rgb(159 168 218 / 0.16));
    color: var(--brand);
  }
  .command-palette__label {
    flex: 1 1 auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .command-palette__group {
    flex: 0 0 auto;
    color: var(--fg-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .command-palette__empty {
    margin: 0;
    padding: 0.875rem 1rem;
    color: var(--fg-muted);
    font-size: 0.875rem;
    font-style: italic;
  }

  /* === Shell v2 renderer: CandidateList（OutputRenderer.CandidateList，docs/04b §3） ===
     magic 自动解码 / cipher-id 等的输出：N 个候选按 score 降序排列；每候选 = scheme +
     score 百分比 + 解码预览（等宽 pre）+ 可选 note。 */
  .candidate-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .candidate-list-empty { color: var(--fg-muted); font-style: italic; margin: 0; }
  .candidate {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.625rem 0.75rem;
  }
  .candidate__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-block-end: 0.375rem;
  }
  .candidate__scheme {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--fg);
  }
  .candidate__score {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    color: var(--fg-muted);
    padding-inline: 0.5rem;
    padding-block: 0.125rem;
    border: 1px solid var(--border);
    border-radius: 9999px;
  }
  .candidate__preview {
    margin: 0;
    padding: 0.5rem 0.625rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
    max-block-size: 8rem;
  }
  .candidate__note {
    margin: 0.375rem 0 0;
    font-size: 0.75rem;
    color: var(--fg-muted);
  }

  /* === Shell v2 renderer: MultiCard（OutputRenderer.MultiCard，docs/04b §3 / §13） ===
     random-generator 每次 POST 单卡，hx-swap=afterbegin 塞进 #card-list 顶端形成
     历史栈。每卡含标题 + 可选 note + 等宽 value + Copy / Remove。 */
  .multi-card-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .multi-card-empty {
    margin: 1rem 0 0;
    color: var(--fg-muted);
    font-style: italic;
  }
  /* card-list 非空时隐藏 empty 提示。:has() 是 baseline-widely-available（2024）。 */
  #output:has(.multi-card-list > .multi-card) .multi-card-empty { display: none; }

  .multi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .multi-card__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-block-end: 1px solid var(--border);
  }
  .multi-card__title {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fg-muted);
  }
  .multi-card__note {
    font-size: 0.75rem;
    color: var(--fg-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }
  .multi-card__actions {
    margin-inline-start: auto;
    display: flex;
    gap: 0.25rem;
  }
  .multi-card__action {
    padding-inline: 0.5rem;
    padding-block: 0.125rem;
    font-size: 0.75rem;
    color: var(--fg-muted);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    min-inline-size: 2.25rem;
  }
  .multi-card__action:hover { color: var(--fg); border-color: var(--brand); }
  .multi-card__action[aria-pressed="true"] { color: var(--brand); border-color: var(--brand); }
  .multi-card__value {
    margin: 0;
    padding: 0.75rem;
    background: transparent;
    border: none;
    border-radius: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
  }

  /* === Shell v2 renderer: Structured（OutputRenderer.Structured，docs/04b §3） ===
     字段卡片列表，每字段 label + 等宽 value + Copy 按钮。AES envelope / RSA keypair
     等多字段输出走它。 */
  /* 单一带边容器 + 行分隔线（而非一堆独立小盒子，旧版显得「一个个的」不工整，用户反馈）。
     每行两列对齐：label 列定宽、value 列吃剩余宽——label / value 各自纵向对齐成表格感。 */
  .structured {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .structured__field {
    display: grid;
    grid-template-columns: minmax(4.5rem, 10rem) minmax(0, 1fr);
    align-items: baseline;
    gap: 0.25rem 1rem;
    padding: 0.4rem 0.75rem;
    border-block-end: 1px solid var(--border);
  }
  .structured__field:last-child { border-block-end: 0; }
  .structured__label {
    margin: 0;
    font-size: 0.75rem;
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    word-break: break-word;
  }
  .structured__value-row {
    margin: 0;
    min-inline-size: 0;          /* 让长 value 能在网格列里收缩/换行而不撑破布局 */
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
  }
  /* 窄屏退化为单列堆叠（label 在上、value 在下），避免两列硬挤。 */
  @media (width < 32rem) {
    .structured__field { grid-template-columns: 1fr; gap: 0.15rem; }
  }
  .structured__value {
    flex: 1 1 auto;
    overflow-x: auto;
    overflow-y: hidden;
    /* pre-wrap 保留 PEM 等多行值的换行（旧默认 normal 会把 \n 折成空格、整块 PEM 挤成一行），
       同时仍按 break-all 换行长行。单行值（base64 信封）无内部换行，表现与原来一致。 */
    white-space: pre-wrap;
    word-break: break-all;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--fg);
  }
  /* 敏感值（私钥）默认遮蔽——blur + 不可选，防肩窥；Copy 仍读真实 textContent。 */
  .structured__value.is-masked {
    filter: blur(5px);
    user-select: none;
  }
  .structured__copy {
    flex: 0 0 auto;
    padding-inline: 0.5rem;
    padding-block: 0.125rem;
    font-size: 0.75rem;
    color: var(--fg-muted);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    min-inline-size: 3rem;
    text-align: center;
  }
  .structured__copy:hover { color: var(--fg); border-color: var(--brand); }
  .structured__copy[aria-pressed="true"] { color: var(--brand); border-color: var(--brand); }

  /* === Shell v2 renderer: HashHex（OutputRenderer.HashHex，docs/04b §3） ===
     等宽 hex + 字节长度 badge + Base64 切显按钮。 */
  .hashhex {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-block-size: 0;
    gap: 0.5rem;
  }
  .hashhex__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .hashhex__badge {
    padding-inline: 0.5rem;
    padding-block: 0.125rem;
    border-radius: 9999px;
    background: var(--brand);
    color: var(--brand-text);
    font-size: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }
  .hashhex__toggle {
    padding-inline: 0.5rem;
    padding-block: 0.125rem;
    font-size: 0.75rem;
    color: var(--fg-muted);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
  }
  .hashhex__toggle:hover { color: var(--fg); border-color: var(--brand); }
  .hashhex__value {
    flex: 1 1 auto;
    margin: 0;
    overflow: auto;
    word-break: break-all;
    white-space: pre-wrap;
  }

  /* === Shell v2 renderer: Dashboard（OutputRenderer.Dashboard，docs/04b §3） ===
     适用 inspect 类 op（text-count / entropy / freq-analysis 等）：grid 数字卡，
     每卡大字号 Value + 小字号 Label。auto-fit 让宽屏 4-6 卡一行、窄屏单列。 */
  .dashboard {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  }
  .dashboard__stat {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.875rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }
  .dashboard__stat-value {
    font-size: 1.75rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    color: var(--fg);
  }
  .dashboard__stat-label {
    font-size: 0.8125rem;
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-block-start: 0.25rem;
  }
  .dashboard__stat-detail {
    font-size: 0.75rem;
    color: var(--fg-muted);
    margin-block-start: 0.125rem;
  }

  /* === bespoke App: random-generator（Layout=Bespoke，docs/04b §13） ===
     顶部 header（标题 + Clear）+ 横向 op tabs + 参数面板 + 全宽 #card-list。
     不套 workspace 三栏——切 op 模型与「同屏并存多卡」用例不匹配，bespoke 后
     用户可以同时盯着多张 UUID / Password / Lorem 卡而不互相覆盖。 */
  .rand-gen {
    max-inline-size: 80rem;
    margin-inline: auto;
    padding-inline: 1rem;
    padding-block: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .rand-gen__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
  }
  .rand-gen__heading { flex: 1 1 auto; min-inline-size: 0; }
  .rand-gen__title {
    margin: 0 0 0.25rem;
    font-size: 1.5rem;
    font-weight: 500;
  }
  .rand-gen__subtitle {
    margin: 0;
    color: var(--fg-muted);
    font-size: 0.9375rem;
  }
  .rand-gen__clear {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding-inline: 0.75rem;
    padding-block: 0.375rem;
    font-size: 0.8125rem;
    color: var(--fg-muted);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
  }
  .rand-gen__clear:hover { color: var(--fg); border-color: var(--brand); }
  .rand-gen__clear svg { inline-size: 1rem; block-size: 1rem; }
  /* grouped 下拉 op 选择器：替代横向 tab，扩展到 30+ op 不挤。
     trigger 按钮 + 弹层 panel，按 GroupKey 分段列出全部 op。 */
  .rand-gen__op-picker { position: relative; align-self: flex-start; }
  .rand-gen__op-picker-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-inline: 0.875rem;
    padding-block: 0.5rem;
    background: var(--surface);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 0.9375rem;
    min-inline-size: 14rem;
  }
  .rand-gen__op-picker-trigger:hover { border-color: var(--brand); }
  .rand-gen__op-picker-label {
    font-size: 0.75rem;
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .rand-gen__op-picker-current { font-weight: 500; flex: 1 1 auto; }
  .rand-gen__op-picker-chevron {
    inline-size: 1rem;
    block-size: 1rem;
    color: var(--fg-muted);
    transition: transform 150ms;
  }
  .rand-gen__op-picker-chevron.is-flipped { transform: rotate(180deg); }
  .rand-gen__op-picker-panel {
    position: absolute;
    inset-block-start: calc(100% + 0.25rem);
    inset-inline-start: 0;
    z-index: 10;
    min-inline-size: 16rem;
    max-block-size: 24rem;
    overflow-y: auto;
    padding-block: 0.375rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
  }
  .rand-gen__op-picker-group + .rand-gen__op-picker-group {
    margin-block-start: 0.25rem;
    border-block-start: 1px solid var(--border);
    padding-block-start: 0.25rem;
  }
  .rand-gen__op-picker-group-title {
    margin: 0;
    padding: 0.375rem 0.875rem 0.125rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .rand-gen__op-picker-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .rand-gen__op-picker-item {
    display: block;
    padding-inline: 0.875rem;
    padding-block: 0.5rem;
    color: var(--fg);
    text-decoration: none;
    font-size: 0.875rem;
    cursor: pointer;
  }
  .rand-gen__op-picker-item:hover { background: light-dark(rgb(63 81 181 / 0.08), rgb(159 168 218 / 0.14)); }
  .rand-gen__op-picker-item.is-active {
    background: light-dark(rgb(63 81 181 / 0.10), rgb(159 168 218 / 0.18));
    color: var(--brand);
    font-weight: 500;
  }
  .rand-gen__form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }
  .rand-gen__params { display: flex; flex-direction: column; gap: 0.5rem; }
  .rand-gen__generate {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-inline: 1.25rem;
    padding-block: 0.5rem;
    background: var(--brand);
    color: var(--brand-text);
    border: 1px solid var(--brand);
    border-radius: var(--radius);
    font-weight: 500;
    cursor: pointer;
  }
  .rand-gen__generate:hover { background: var(--brand-hover); }
  .rand-gen__generate svg { inline-size: 1rem; block-size: 1rem; }
  .rand-gen__output { min-block-size: 6rem; }

  /* === bespoke App: jwt（首个不套 workspace 模板的 App，docs/05a + 注册表 §7.1） ===
     顶部 token 输入框 + 下方三段卡片（header / payload / signature）+ 安全告警。
     此处样式只服务 jwt——若以后第二个 App 用同样的「输入 + 多卡片输出」形态，再抽
     通用类。 */
  .jwt-app {
    max-inline-size: 80rem;
    margin-inline: auto;
    padding-inline: 1rem;
    padding-block: 1.5rem;
  }
  .jwt-app__header { margin-block-end: 1.5rem; }
  .jwt-app__title {
    margin: 0 0 0.25rem;
    font-size: 1.5rem;
    font-weight: 500;
  }
  .jwt-app__description {
    margin: 0;
    color: var(--fg-muted);
    font-size: 0.9375rem;
  }
  .jwt-app__form { margin-block-end: 1.5rem; }
  /* Decode / Encode 模式 segment 切换 */
  .jwt-app__mode { display: inline-flex; margin-block-end: 1rem; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
  .jwt-app__mode-tab { padding: 0.4rem 1rem; font-size: 0.875rem; color: var(--fg-muted); text-decoration: none; background: var(--surface); }
  .jwt-app__mode-tab:not(:last-child) { border-inline-end: 1px solid var(--border); }
  .jwt-app__mode-tab:hover { color: var(--fg); }
  .jwt-app__mode-tab.is-active { background: var(--brand); color: var(--brand-text); }
  /* Encode 表单：左右两栏分别 header / payload */
  .jwt-encode__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-block-end: 0.75rem; }
  @media (width < 50rem) { .jwt-encode__grid { grid-template-columns: 1fr; } }
  .jwt-encode__field { display: flex; flex-direction: column; gap: 0.25rem; min-inline-size: 0; }
  .jwt-encode__json {
    inline-size: 100%; min-block-size: 9rem; resize: vertical;
    padding: 0.75rem;
    background: var(--surface); color: var(--fg);
    border: 1px solid var(--border); border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
  }
  .jwt-encode__json:focus { outline: 0; border-color: var(--brand); }
  .jwt-app__label {
    display: block;
    margin-block-end: 0.5rem;
    font-size: 0.875rem;
    color: var(--fg-muted);
  }
  .jwt-app__token {
    inline-size: 100%;
    block-size: 8rem;
    resize: vertical;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--fg);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875rem;
    word-break: break-all;
  }
  .jwt-app__empty {
    margin: 0;
    color: var(--fg-muted);
    font-style: italic;
  }
  .jwt-app__error {
    margin: 0;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    color: var(--color-error);
    border: 1px solid currentColor;
    background: light-dark(rgb(176 0 32 / 0.06), rgb(207 102 121 / 0.08));
  }
  .jwt-app__warnings {
    margin-block-end: 1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    background: var(--color-warning-bg);
    border-inline-start: 4px solid var(--color-warning);
  }
  .jwt-app__warnings-title {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
  }
  .jwt-app__warnings-list {
    margin: 0;
    padding-inline-start: 1.25rem;
    font-size: 0.875rem;
  }
  .jwt-app__cards {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
  }
  @media (width >= 60rem) {
    .jwt-app__cards { grid-template-columns: 1fr 1.5fr 1fr; }
  }
  .jwt-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .jwt-card__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-block-end: 1px solid var(--border);
  }
  /* 卡片复制按钮——推到行末（title + alg 徽章在左）。 */
  .jwt-card__copy {
    margin-inline-start: auto;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    color: var(--fg-muted);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    min-inline-size: 3rem;
    text-align: center;
  }
  .jwt-card__copy:hover { color: var(--fg); border-color: var(--brand); }
  .jwt-card__title {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fg-muted);
  }
  .jwt-card__badge {
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    background: var(--brand);
    color: var(--brand-text);
    font-size: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }
  .jwt-card__body {
    margin: 0;
    padding: 0.75rem;
    flex: 1;
    background: transparent;
    border: none;
    border-radius: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
  }
  .jwt-card__body--mono { color: var(--fg-muted); }
  .jwt-card__body--muted {
    color: var(--fg-muted);
    font-style: italic;
    font-family: inherit;
    white-space: normal;
  }
  .jwt-card__claims {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 0.75rem;
    padding: 0.5rem 0.75rem 0.75rem;
    font-size: 0.8125rem;
    border-block-start: 1px solid var(--border);
  }
  .jwt-card__claims dt {
    color: var(--fg-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }
  .jwt-card__claims dd {
    margin: 0;
    word-break: break-all;
  }
  .jwt-claim__rel {
    margin-inline-start: 0.4rem;
    color: var(--fg-muted);
    font-size: 0.75rem;
    white-space: nowrap;
  }
  .jwt-claim__rel--past { color: var(--color-error); }     /* 过期/已过：同 error 红 */
  .jwt-claim__rel--future { color: var(--color-success); }  /* 将来：绿 */

  /* 可选签名验证：折叠区 + 顶部状态条。 */
  .jwt-app__verify {
    margin-block-start: 0.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
  }
  .jwt-app__verify-summary {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--fg-muted);
    list-style: revert;
  }
  .jwt-app__verify-summary:hover { color: var(--fg); }
  .jwt-app__verify-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0 0.75rem 0.75rem;
    border-block-start: 1px solid var(--border);
    padding-block-start: 0.75rem;
  }
  .jwt-app__key {
    min-block-size: 5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--fg);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    resize: vertical;
  }
  .jwt-app__key-encoding {
    align-self: flex-start;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--fg);
    font-size: 0.875rem;
  }
  .jwt-app__verify-hint {
    margin: 0;
    color: var(--fg-muted);
    font-size: 0.75rem;
  }

  .jwt-verify {
    margin-block-end: 1rem;
    padding: 0.625rem 0.875rem;
    border-radius: var(--radius);
    border-inline-start-width: 4px;
    border-inline-start-style: solid;
    font-size: 0.875rem;
  }
  .jwt-verify__label { font-weight: 600; }
  .jwt-verify--valid {
    background: light-dark(#e8f5e9, #1b2e1d);
    border-inline-start-color: var(--color-success);
    color: light-dark(#1b5e20, #c8e6c9);
  }
  .jwt-verify--invalid {
    background: light-dark(#ffebee, #2e1a1a);
    border-inline-start-color: light-dark(#c62828, #ef9a9a);
    color: light-dark(#b71c1c, #ffcdd2);
  }
  .jwt-verify--warn {
    background: var(--color-warning-bg);
    border-inline-start-color: var(--color-warning);
    color: light-dark(#6d4c00, #ffe082);
  }
  .jwt-verify--neutral {
    background: light-dark(#eceff1, #2a2f33);
    border-inline-start-color: light-dark(#90a4ae, #607d8b);
    color: var(--fg-muted);
  }

  /* === Markdown Preview (Pages/Apps/Markdown/) — bespoke 自治区 ===
     左 textarea 右预览。markdown-body 给渲染后的 HTML 套 GFM 风排版。 */
  .md-app { display: flex; flex-direction: column; gap: 1rem; }
  .md-app__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .md-app__title { margin: 0; font-size: 1.25rem; }
  .md-app__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .md-app__form { display: flex; flex-direction: column; gap: 0.5rem; }
  .md-app__label { font-size: 0.875rem; color: var(--fg-muted); }
  .md-app__split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    min-block-size: 60vh;
  }
  @media (width >= 60rem) {
    .md-app__split { grid-template-columns: 1fr 1fr; }
  }
  .md-app__input {
    min-block-size: 30rem;
    padding: 0.75rem;
    background: var(--surface);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875rem;
    resize: vertical;
  }
  .md-app__preview {
    padding: 0.75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow-y: auto;
    min-block-size: 30rem;
  }
  .md-app__empty,
  .md-app__error {
    margin: 0;
    color: var(--fg-muted);
    font-size: 0.875rem;
  }
  .md-app__error { color: var(--color-error); }

  /* markdown-body —— Markdig 渲染后的 HTML 类名应用区。GFM 风格的最小排版。 */
  .markdown-body h1 { font-size: 1.5rem; margin: 0.5em 0 0.4em; }
  .markdown-body h2 { font-size: 1.25rem; margin: 0.6em 0 0.4em; padding-block-end: 0.2em; border-block-end: 1px solid var(--border); }
  .markdown-body h3 { font-size: 1.1rem; margin: 0.6em 0 0.3em; }
  .markdown-body h4, .markdown-body h5, .markdown-body h6 { font-size: 1rem; margin: 0.6em 0 0.3em; color: var(--fg-muted); }
  .markdown-body p { margin: 0.5em 0; line-height: 1.55; }
  .markdown-body a { color: var(--brand); text-decoration: underline; }
  .markdown-body ul, .markdown-body ol { padding-inline-start: 1.5rem; margin: 0.5em 0; }
  .markdown-body li { margin: 0.15em 0; }
  .markdown-body blockquote {
    margin: 0.6em 0;
    padding: 0.25rem 0.75rem;
    color: var(--fg-muted);
    border-inline-start: 3px solid var(--border);
  }
  .markdown-body code {
    padding: 0.1rem 0.3rem;
    background: light-dark(#f3f4f6, #2a2d33);
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85em;
  }
  .markdown-body pre {
    margin: 0.6em 0;
    padding: 0.75rem;
    background: light-dark(#f3f4f6, #2a2d33);
    border-radius: var(--radius);
    overflow-x: auto;
  }
  .markdown-body pre code {
    padding: 0;
    background: transparent;
    font-size: 0.85em;
  }
  .markdown-body table {
    border-collapse: collapse;
    margin: 0.6em 0;
    font-size: 0.9em;
  }
  .markdown-body th, .markdown-body td {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
  }
  .markdown-body th { background: light-dark(#f3f4f6, #2a2d33); text-align: start; }
  .markdown-body hr { border: 0; border-block-start: 1px solid var(--border); margin: 1em 0; }
  .markdown-body img { max-inline-size: 100%; }

  /* === Regex Playground (Pages/Apps/RegexPlayground/) — bespoke 自治区 ===
     pattern + flags + 测试文本 → 高亮 + 捕获组表。复用 navbar/workspace 同套 tokens。 */
  .regex-app { display: flex; flex-direction: column; gap: 1rem; }
  .regex-app__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .regex-app__title { margin: 0; font-size: 1.25rem; }
  .regex-app__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .regex-app__form { display: flex; flex-direction: column; gap: 0.75rem; }
  .regex-app__label { font-size: 0.875rem; color: var(--fg-muted); }
  .regex-app__pattern,
  .regex-app__replacement,
  .regex-app__text {
    inline-size: 100%;
    padding: 0.625rem 0.875rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875rem;
  }
  .regex-app__pattern:focus,
  .regex-app__replacement:focus,
  .regex-app__text:focus { outline: 0; border-color: var(--brand); }
  .regex-app__text { min-block-size: 9rem; resize: vertical; }
  /* fieldset 自身保持 block（不设 display:flex——否则 legend 在 flex 容器里渲染错乱）；
     legend 单独一行，内层 .regex-app__flags-row 才做 flex。 */
  .regex-app__flags { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
  .regex-app__flags-legend {
    display: block;
    padding: 0;
    margin-block-end: 0.5rem;
    font-size: 0.875rem;
    color: var(--fg-muted);
  }
  .regex-app__flags-row { display: flex; gap: 1.25rem; flex-wrap: wrap; }
  .regex-app__flag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    cursor: pointer;
    white-space: nowrap;
  }
  /* 全局 `input { inline-size: 100% }`（§表单基样式）会把 checkbox 也撑满 → 复位 auto
     （同 .workspace__param / .auth-card__check 的处理）。 */
  .regex-app__flag input[type="checkbox"] { inline-size: auto; margin: 0; flex: none; }
  .regex-app__flag-key {
    padding: 0.0625rem 0.3125rem;
    background: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.08));
    border-radius: 3px;
    font-size: 0.75rem;
  }
  .regex-app__flag code,
  .regex-app__flag-key,
  .regex-app__group-name code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
  .regex-app__output { display: flex; flex-direction: column; gap: 0.75rem; }
  .regex-app__empty { color: var(--fg-muted); }
  .regex-app__error { color: var(--color-error); }
  .regex-app__count { margin: 0; font-size: 0.875rem; color: var(--fg-muted); }
  .regex-app__highlight {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    padding: 0.875rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    max-block-size: 20rem;
    overflow: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875rem;
  }
  .regex-app__hit {
    background: light-dark(#fff1a8, #5b4a00);
    color: inherit;
    border-radius: 3px;
    padding-block: 1px;
  }
  /* 零长匹配（^ / \b / 前瞻）——零宽插入符，不占字符位、不挪文本布局。 */
  .regex-app__hit--empty {
    background: none;
    padding: 0;
    border-inline-start: 2px solid var(--brand);
    margin-inline: -1px;
  }
  .regex-app__table { inline-size: 100%; border-collapse: collapse; font-size: 0.875rem; }
  .regex-app__table th,
  .regex-app__table td {
    text-align: start;
    padding: 0.375rem 0.5rem;
    border-block-end: 1px solid var(--border);
    vertical-align: top;
  }
  .regex-app__table th { color: var(--fg-muted); font-weight: 500; }
  .regex-app__idx { color: var(--fg-muted); font-variant-numeric: tabular-nums; }
  .regex-app__match-val { word-break: break-all; }
  .regex-app__group { display: inline-flex; gap: 0.25rem; margin-inline-end: 0.625rem; }
  .regex-app__group-name { color: var(--fg-muted); }
  .regex-app__muted { color: var(--fg-muted); }
  /* 示例预设按钮行（pattern 下方）。 */
  .regex-app__presets { display: flex; gap: 0.5rem; flex-wrap: wrap; }
  .regex-app__preset {
    padding: 0.25rem 0.625rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--fg-muted);
    font-size: 0.8125rem;
    cursor: pointer;
  }
  .regex-app__preset:hover { color: var(--fg); border-color: var(--brand); }
  /* 替换模式输出面板（pattern 有效且替换模板非空时显示）。 */
  .regex-app__replace {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }
  .regex-app__replace-head { display: flex; align-items: center; gap: 0.5rem; }
  .regex-app__replace-title { margin: 0; font-size: 0.875rem; color: var(--fg-muted); font-weight: 500; }
  .regex-app__replace-result {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    padding: 0.875rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    max-block-size: 20rem;
    overflow: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875rem;
  }
  .regex-app__copy {
    margin-inline-start: auto;
    padding: 0.1875rem 0.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--fg-muted);
    font-size: 0.75rem;
    cursor: pointer;
  }
  .regex-app__copy:hover { color: var(--fg); border-color: var(--brand); }

  /* === Diff Compare (Pages/Apps/DiffCompare/) — bespoke 自治区 ===
     两份文本 → 行级并排差异。输入两栏 grid；输出每行两侧（删=左红 / 增=右绿 / 等=中性）。 */
  .diff-app { display: flex; flex-direction: column; gap: 1rem; }
  .diff-app__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .diff-app__title { margin: 0; font-size: 1.25rem; }
  .diff-app__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .diff-app__inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .diff-app__input-col { display: flex; flex-direction: column; gap: 0.375rem; min-inline-size: 0; }
  .diff-app__label { font-size: 0.875rem; color: var(--fg-muted); }
  .diff-app__input {
    inline-size: 100%;
    min-block-size: 12rem;
    padding: 0.625rem 0.875rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875rem;
    resize: vertical;
  }
  .diff-app__input:focus { outline: 0; border-color: var(--brand); }
  .diff-app__empty { color: var(--fg-muted); }
  .diff-app__error { color: var(--color-error); }
  .diff-app__summary { margin: 0; display: flex; gap: 1rem; font-size: 0.875rem; align-items: baseline; }
  .diff-app__added { color: light-dark(#1a7f37, #3fb950); font-variant-numeric: tabular-nums; }
  .diff-app__removed { color: light-dark(#cf222e, #f85149); font-variant-numeric: tabular-nums; }
  .diff-app__muted { color: var(--fg-muted); }
  .diff-app__view {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    max-block-size: 32rem;
  }
  .diff-app__row { display: grid; grid-template-columns: 1fr 1fr; }
  .diff-app__cell {
    display: grid;
    grid-template-columns: 2.5rem 1rem 1fr;
    gap: 0.25rem;
    padding: 0.0625rem 0.25rem;
    border-block-end: 1px solid light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.04));
    min-inline-size: 0;
  }
  .diff-app__cell--left { border-inline-end: 1px solid var(--border); }
  .diff-app__row--delete .diff-app__cell--left { background: light-dark(#ffebe9, #3a1418); }
  .diff-app__row--insert .diff-app__cell--right { background: light-dark(#e6ffec, #12261c); }
  .diff-app__num { color: var(--fg-muted); text-align: end; font-variant-numeric: tabular-nums; user-select: none; }
  .diff-app__sign { text-align: center; user-select: none; color: var(--fg-muted); }
  .diff-app__line { white-space: pre-wrap; word-break: break-word; }
  /* Modify 行（两侧改动 + 词级高亮）+ 内联片段 chip + 忽略选项 fieldset。 */
  .diff-app__row--modify .diff-app__cell--left { background: light-dark(#fff8e1, #2b2410); }
  .diff-app__row--modify .diff-app__cell--right { background: light-dark(#fff8e1, #2b2410); }
  .diff-app__seg--del { background: light-dark(#ffc9c9, #5a1d22); border-radius: 2px; }
  .diff-app__seg--ins { background: light-dark(#a6f3b5, #16361f); border-radius: 2px; }
  .diff-app__options { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
  .diff-app__options-legend {
    display: block;
    padding: 0;
    margin-block-end: 0.5rem;
    font-size: 0.875rem;
    color: var(--fg-muted);
  }
  .diff-app__options-row { display: flex; gap: 1.25rem; flex-wrap: wrap; }
  .diff-app__option {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    cursor: pointer;
    white-space: nowrap;
  }
  /* 复位全局 `input { inline-size: 100% }` 对 checkbox 的撑满（同 regex-app__flag）。 */
  .diff-app__option input[type="checkbox"] { inline-size: auto; margin: 0; flex: none; }

  /* === QR Coder (Pages/Apps/QrCoder/) — bespoke 自治区 ===
     文本 + 纠错等级 → 内联 SVG 二维码。左输入 / 右预览（窄屏堆叠）。 */
  .qr-app { display: flex; flex-direction: column; gap: 1rem; }
  .qr-app__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .qr-app__title { margin: 0; font-size: 1.25rem; }
  .qr-app__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .qr-app__layout { display: grid; grid-template-columns: 1fr minmax(0, 22rem); gap: 1.5rem; align-items: start; }
  .qr-app__form { display: flex; flex-direction: column; gap: 0.375rem; min-inline-size: 0; }
  .qr-app__label { font-size: 0.875rem; color: var(--fg-muted); }
  .qr-app__text,
  .qr-app__input,
  .qr-app__ecc {
    inline-size: 100%;
    padding: 0.625rem 0.875rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.875rem;
  }
  .qr-app__text {
    min-block-size: 8rem;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }
  .qr-app__text:focus,
  .qr-app__input:focus,
  .qr-app__ecc:focus { outline: 0; border-color: var(--brand); }
  /* 结构化载荷的 checkbox + 拖放区（粘贴 / 拖拽图片解码）。 */
  .qr-app__check {
    display: inline-flex; align-items: center; gap: 0.375rem;
    font-size: 0.875rem; cursor: pointer; white-space: nowrap;
  }
  .qr-app__check input[type="checkbox"] { inline-size: auto; margin: 0; flex: none; }
  .qr-app__dropzone {
    border: 1px dashed var(--border); border-radius: var(--radius);
    padding: 0.75rem; transition: border-color 120ms, background 120ms;
  }
  .qr-app__dropzone.is-drag-hover { border-color: var(--brand); background: var(--surface-hover); }
  .qr-app__paste-hint { margin: 0.375rem 0 0; color: var(--fg-muted); font-size: 0.8125rem; }
  .qr-app__ecc { margin-block-end: 0.5rem; }
  /* generate / decode 模式开关——pill 组（同 workspace 方向开关观感）。 */
  .qr-app__modes {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    margin-block-end: 0.5rem;
    align-self: start;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }
  .qr-app__mode {
    display: inline-flex;
    align-items: center;
    padding: 0.3125rem 0.875rem;
    border-radius: calc(var(--radius) - 2px);
    font-size: 0.875rem;
    color: var(--fg-muted);
    cursor: pointer;
  }
  .qr-app__mode.is-active { background: var(--brand); color: var(--brand-text); }
  .qr-app__mode-input { position: absolute; opacity: 0; pointer-events: none; }
  .qr-app__file { font-size: 0.875rem; color: var(--fg); padding-block: 0.375rem; }
  .qr-app__output { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
  .qr-app__empty { color: var(--fg-muted); align-self: start; }
  .qr-app__error { color: var(--color-error); align-self: start; }
  /* decode 结果——解码文本块（等宽、可换行、可全选复制）。 */
  .qr-app__decoded { display: flex; flex-direction: column; gap: 0.375rem; inline-size: 100%; }
  .qr-app__decoded-head { display: flex; align-items: center; gap: 0.5rem; }
  .qr-app__decoded-label { font-size: 0.875rem; color: var(--fg-muted); }
  .qr-app__copy {
    margin-inline-start: auto;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    color: var(--fg-muted);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    min-inline-size: 3rem;
    text-align: center;
  }
  .qr-app__copy:hover { color: var(--fg); border-color: var(--brand); }
  .qr-app__decoded-text {
    margin: 0;
    padding: 0.625rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.875rem;
    white-space: pre-wrap;
    word-break: break-all;
  }
  /* 白底容器——QR 始终黑模块 / 白底，暗色模式下也可扫。
     padding 为 0：SVG 自带 4 模块 quiet zone（QR 规范要求、扫描必需），不再叠加 CSS
     白边，否则白框套白框（用户反馈「周围一大圈空白」）。 */
  .qr-app__code {
    background: #ffffff;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    line-height: 0;
    overflow: hidden;
  }
  /* 放大到 20rem（原 16rem 太小、密一点的码手机扫不动）；窄屏下整列折叠为全宽（见底部
     media query），码可铺到屏宽，扫描更稳。 */
  .qr-app__code svg {
    display: block;
    inline-size: 100%;
    max-inline-size: 20rem;
    block-size: auto;
  }
  /* 下载按钮组：PNG（首选，实色）+ SVG（次要，ghost）。 */
  .qr-app__downloads { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
  .qr-app__download {
    display: inline-flex;
    align-items: center;
    padding: 0.4375rem 0.875rem;
    border: 1px solid var(--brand);
    border-radius: var(--radius);
    font-size: 0.875rem;
    background: var(--brand);
    color: var(--brand-text);
  }
  .qr-app__download:hover { background: var(--brand-hover); border-color: var(--brand-hover); text-decoration: none; }
  .qr-app__download--ghost {
    background: transparent;
    border-color: var(--border);
    color: var(--fg);
  }
  .qr-app__download--ghost:hover { background: var(--surface-hover); border-color: var(--border); }
  @media (max-width: 40rem) {
    .qr-app__layout { grid-template-columns: 1fr; }
  }

  /* === Auth card — Login / Register / ForgotPassword (Pages/Account/) ===
     居中的 28rem 卡片：顶部 Login/Register tab + 表单字段 + 底部辅助链接。
     与 navbar 共享 --brand / --surface / --border tokens；black/dark 模式自动跟随。
     Tab 切换走 HTMX GET 换 #content；表单 POST 是普通整页提交。 */
  .auth-card {
    max-inline-size: 28rem;
    margin-inline: auto;
    margin-block-start: 2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }
  .auth-card__tabs {
    display: flex;
    border-block-end: 1px solid var(--border);
  }
  .auth-card__tab {
    flex: 1 1 0;
    padding-block: 0.875rem;
    text-align: center;
    color: var(--fg-muted);
    font-weight: 500;
    background: light-dark(rgb(0 0 0 / 0.02), rgb(255 255 255 / 0.03));
    border: 0;
    border-block-end: 2px solid transparent;
    cursor: pointer;
  }
  .auth-card__tab:hover { color: var(--fg); text-decoration: none; background: var(--surface-hover); }
  .auth-card__tab.is-active {
    color: var(--brand);
    background: var(--surface);
    border-block-end-color: var(--brand);
    cursor: default;
  }
  .auth-card__tab.is-active:hover { background: var(--surface); }
  .auth-card__heading {
    margin: 0;
    padding: 1.25rem 1.5rem 0;
    font-size: 1.25rem;
    font-weight: 500;
  }
  .auth-card__form {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 1.5rem;
  }
  .auth-card__field { display: flex; flex-direction: column; gap: 0.375rem; }
  .auth-card__label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--fg-muted);
  }
  .auth-card__check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--fg);
  }
  .auth-card__check input[type="checkbox"] { inline-size: auto; margin: 0; }
  /* submit 按钮全宽——比通用 brand 按钮拍扁、靠 padding 撑高，整页比例更稳。
     不走 button[type="submit"] 通用样式（uppercase + tracking），登录场景更适合
     mixed-case 自然字。:not(.workspace__action) 选择器在 base 层已让出特异性，但
     auth-card 内嵌套也能覆盖——靠类名 + 元素双选择器。 */
  button[type="submit"].auth-card__submit {
    background: var(--brand);
    color: var(--brand-text);
    padding-block: 0.625rem;
    padding-inline: 1rem;
    border: 0;
    border-radius: var(--radius);
    font-weight: 500;
    font-size: 0.9375rem;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
  }
  button[type="submit"].auth-card__submit:hover { background: var(--brand-hover); }
  .auth-card__errors {
    margin: 0;
    padding: 0.625rem 0.875rem;
    list-style: none;
    border-radius: var(--radius);
    background: light-dark(rgb(176 0 32 / 0.06), rgb(207 102 121 / 0.08));
    border: 1px solid light-dark(rgb(176 0 32 / 0.35), rgb(207 102 121 / 0.35));
    color: var(--color-error);
    font-size: 0.875rem;
  }
  .auth-card__errors li { padding-block: 0.125rem; }
  .auth-card__aux {
    margin: 0;
    padding: 0.5rem 1.5rem;
    font-size: 0.875rem;
    color: var(--fg-muted);
    text-align: center;
  }
  .auth-card__aux:last-child { padding-block-end: 1.25rem; }
  .auth-card__notice {
    margin: 0;
    padding: 0.5rem 1.5rem;
    color: var(--fg);
    font-size: 0.9375rem;
  }
  .auth-card__notice:first-of-type { padding-block-start: 1rem; }
  .auth-card__notice:last-child { padding-block-end: 1.25rem; }
  /* 「检查垃圾箱」类辅助提示——比 notice 更弱（muted + 偏小），收在确认页正文之后。 */
  .auth-card__hint {
    margin: 0;
    padding: 0.25rem 1.5rem 0.5rem;
    font-size: 0.8125rem;
    color: var(--fg-muted);
  }
  /* 邮箱验证徽章——Manage 总览页用，紧贴邮箱地址后。两种语义：ok=已验证、warn=未验证。 */
  .auth-card__badge {
    display: inline-block;
    margin-inline-start: 0.5rem;
    padding: 0.0625rem 0.5rem;
    border-radius: 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid var(--border);
    background: var(--surface-hover);
    color: var(--fg-muted);
  }
  .auth-card__badge--ok { color: var(--brand); border-color: var(--brand); }
  /* 未验证等告警态：复用全站 danger 色（同 .auth-card__action--danger / .manage__nav-link--danger）。 */
  .auth-card__badge--warn { color: var(--color-error); border-color: var(--color-error); }

  /* === full-width 操作行（Manage/Sessions 的撤销按钮）===
     每项是 full-width 可点击的边框行，hover 抬高（背景换浅 surface）。撤销当前 /
     全部会话作为风险操作走 danger 变体。（Manage 总览页原先的入口列表已迁到左侧
     persistent 导航，见 _ManageLayout + .manage__nav。） */
  .auth-card__action {
    display: block;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    color: var(--fg);
    background: var(--surface);
    font-size: 0.9375rem;
    text-align: start;
  }
  .auth-card__action:hover {
    background: var(--surface-hover);
    color: var(--fg);
    border-color: var(--brand);
    text-decoration: none;
  }
  /* 注销变体——hover 时边线 + 文本变 destructive 提示色（用 light-dark() 适配主题）。
     不上 destructive bg / fill——避免误点感太强；只 hint 风险。 */
  .auth-card__action--danger {
    margin-block-start: 0.5rem;
    color: var(--color-error);
  }
  .auth-card__action--danger:hover {
    color: var(--color-error);
    border-color: var(--color-error);
  }

  /* === 账户管理区两栏骨架（Pages/Account/Manage/_ManageLayout）===
     左侧 persistent 导航列 + 右侧内容面板。用户反馈：逐项进出总览页切换太繁——
     导航集中到左栏后，改密 / 改邮 / 会话 / 注销可直接横跳，不必回总览。
     视觉沿用 workspace 左栏 op-list 的语言（is-active = 浅 surface 背 + brand 字），
     但自成一套 .manage__* 类（账户区与 App workspace 语义独立）。
     窄屏（width < 40rem）退化为上下堆叠、导航横向 wrap。 */
  .manage {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    max-inline-size: 52rem;
    margin-inline: auto;
  }
  .manage__sidebar {
    flex: 0 0 13rem;
    position: sticky;
    inset-block-start: calc(var(--navbar-h) + 1rem);
  }
  .manage__title {
    margin: 0 0 0.5rem;
    padding-inline: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fg-muted);
  }
  .manage__nav {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }
  .manage__nav-link {
    display: block;
    padding-inline: 0.75rem;
    padding-block: 0.5rem;
    color: var(--fg);
    font-size: 0.9375rem;
    border-radius: var(--radius);
  }
  .manage__nav-link:hover {
    background: var(--surface-hover);
    color: var(--fg);
    text-decoration: none;
  }
  .manage__nav-link.is-active {
    background: var(--surface-hover);
    color: var(--brand);
    font-weight: 500;
  }
  /* 删除账号——不可逆操作，与上面常规项隔一档：顶部细分隔线 + hover/active 透出
     destructive 提示色（light-dark() 适配主题）。 */
  .manage__nav-link--danger {
    margin-block-start: 0.5rem;
    padding-block-start: 0.625rem;
    border-block-start: 1px solid var(--border);
    border-start-start-radius: 0;
    border-start-end-radius: 0;
  }
  .manage__nav-link--danger:hover,
  .manage__nav-link--danger.is-active {
    color: var(--color-error);
  }
  .manage__body { flex: 1 1 auto; min-inline-size: 0; }
  /* 卡片在内容栏内左对齐、不再视口居中——侧栏已占左侧，卡片紧随其后更自然。 */
  .manage__body .auth-card {
    margin-inline: 0;
    margin-block-start: 0;
  }
  @media (width < 40rem) {
    .manage { flex-direction: column; gap: 1rem; }
    .manage__sidebar {
      flex-basis: auto;
      position: static;
      inline-size: 100%;
    }
    .manage__nav { flex-direction: row; flex-wrap: wrap; }
    /* 横排时分隔线语义失效——退回普通圆角项。 */
    .manage__nav-link--danger {
      margin-block-start: 0;
      padding-block-start: 0.5rem;
      border-block-start: 0;
      border-radius: var(--radius);
    }
  }

  /* === 导航编辑器（Manage/Bookmarks、Manage/SearchEngines 共用）=== */
  /* 独立页壳：标题 + 说明 + 返回首页链接，居中、适中宽度。 */
  .nav-editor-page {
    max-inline-size: 42rem;
    margin-inline: auto;
    padding-inline: 1rem;
    padding-block: 1.5rem 3rem;
    display: flex;
    flex-direction: column;
  }
  .nav-editor-page__back {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--fg-muted);
    font-size: 0.875rem;
    margin-block-end: 1rem;
  }
  .nav-editor-page__back:hover { color: var(--fg); text-decoration: none; }
  /* 返回箭头随书写方向镜像——RTL 下「返回首页」应指 inline-start（视觉右）。 */
  [dir="rtl"] .nav-editor-page__back .icon { transform: scaleX(-1); }
  .nav-editor-page__heading { margin: 0 0 0.25rem; font-size: 1.5rem; }
  .nav-editor-page__intro { margin: 0 0 1.5rem; color: var(--fg-muted); font-size: 0.9375rem; line-height: 1.5; }

  /* 形态：紧凑树（参 PrimeVue Tree）——每节点一行（chevron + 名称 + 计数/url + 末端操作簇 ✎ 🗑 ↑ ↓ ＋）。
     行扁平密排、悬停高亮，操作簇悬停 / 聚焦时浮现（触屏恒显）。折叠用「隐藏 checkbox」纯 CSS：无 JS 默认
     展开、点 chevron 也能折叠，JS（eaxApplyCollapse）接管后默认收起 + 按分类记忆。点 ✎/🗑/＋ 的 <details>
     靠 .row 的 flex-wrap + [open]{flex-basis:100%} 就地展开到整行下方。键盘可达，全 logical properties，RTL 镜像。 */
  .nav-editor {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .nav-editor__empty {
    color: var(--fg-muted);
    font-style: italic;
    margin: 0;
    padding-inline-start: 2.125rem;   /* 对齐到 chevron 之后 */
    padding-block: 0.25rem;
    font-size: 0.8125rem;
  }
  /* 干掉所有 <summary> 的默认三角标——图标 / 胶囊自带语义。 */
  .nav-editor summary { list-style: none; cursor: pointer; }
  .nav-editor summary::-webkit-details-marker { display: none; }

  /* === 草稿工具条（保存 / 撤销 / 放弃 + 脏标记），编辑器顶部 ===
     flex-wrap：放弃确认面板（details[open] flex-basis:100%）掉到工具条整行下方。 */
  .nav-editor__toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem 0.5rem;
    padding-block: 0.25rem 0.5rem;
    margin-block-end: 0.25rem;
    border-block-end: 1px solid var(--border);
  }
  .nav-editor__status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--fg-muted);
  }
  .nav-editor__status--dirty { color: var(--fg); font-weight: 500; }
  .nav-editor__status-dot {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    background: light-dark(#b8860b, #e0a83e);   /* amber = 未保存 */
    flex: 0 0 auto;
  }
  .nav-editor__tbtn {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    cursor: pointer;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--fg);
    font-weight: 600;
    font-size: 0.8125rem;
    user-select: none;
  }
  .nav-editor__tbtn:hover { background: var(--surface-hover); }
  .nav-editor__tbtn--danger { color: var(--color-error); }
  /* Undo / Save 是 <button type=submit>——压住通用 submit 的 brand 实色 + 大写 + 宽 padding
     （base 选择器 (0,2,1)，同 .nav-editor__icon / .menu__item 的源码靠后覆盖手法）。 */
  button[type="submit"].nav-editor__tbtn {
    background: var(--surface);
    color: var(--fg);
    padding: 0.375rem 0.75rem;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.8125rem;
    font-weight: 600;
  }
  button[type="submit"].nav-editor__tbtn:hover { background: var(--surface-hover); }
  button[type="submit"].nav-editor__tbtn:disabled,
  .nav-editor__tbtn:disabled { opacity: 0.45; cursor: default; }
  button[type="submit"].nav-editor__tbtn:disabled:hover { background: var(--surface); }
  /* 保存：主操作，brand 实色（但用本组 padding / 不大写）。 */
  button[type="submit"].nav-editor__tbtn--primary {
    background: var(--brand);
    color: var(--brand-text);
    border-color: var(--brand);
  }
  button[type="submit"].nav-editor__tbtn--primary:hover { background: var(--brand-hover); }
  button[type="submit"].nav-editor__tbtn--primary:disabled:hover { background: var(--brand); }
  /* 放弃确认 details：闭合占按钮宽；展开占满工具条整行、确认面板掉到下方。 */
  .nav-editor__discard { display: inline-flex; flex: 0 0 auto; }
  .nav-editor__discard[open] { flex-basis: 100%; order: 5; flex-direction: column; }
  .nav-editor__discard[open] > summary { display: none; }

  .nav-editor__tree,
  .nav-editor__children {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;                            /* 密排：行与行不留缝 */
  }
  /* 子层缩进 + 淡 inline-start 引导线（比旧版细、轻）。 */
  .nav-editor__children {
    margin-inline-start: 0.8125rem;
    padding-inline-start: 1.25rem;
    border-inline-start: 1px solid var(--border);
  }

  .nav-editor__node { display: flex; flex-direction: column; position: relative; }

  /* 折叠开关 checkbox：视觉裁切但保持可聚焦（键盘 Tab + Space 切换）；鼠标点击由 label(chevron) 驱动。
     与 .nav-editor__row / .nav-editor__children 同为 <li> 的兄弟，故 `:checked ~` 纯 CSS 折叠。 */
  .nav-editor__twist-state {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
  }
  .nav-editor__twist-state:checked ~ .nav-editor__children { display: none; }

  /* 节点行：flex-wrap 让展开的 details（flex-basis:100%）换到整行下方 = 「就地展开」。扁平密排。 */
  .nav-editor__row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
    padding: 0.1875rem 0.375rem;
    border-radius: var(--radius);
    min-block-size: 1.875rem;
  }
  /* 悬停 / 聚焦 / 内含展开面板时高亮该行。 */
  .nav-editor__row:hover,
  .nav-editor__row:focus-within,
  .nav-editor__row:has(.nav-editor__act[open], .nav-editor__add--inline[open]) {
    background: var(--surface-hover);
  }

  /* chevron 折叠开关（分类的 label）/ 叶子占位（保持名称对齐）。 */
  .nav-editor__twist {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    color: var(--fg-muted);
    cursor: pointer;
    border-radius: var(--radius);
  }
  .nav-editor__twist:hover { color: var(--fg); }
  .nav-editor__twist--leaf { cursor: default; }
  /* chevron：展开（checkbox 未选）转 90° 指下（⌄）；收起（:checked）回到指 inline-end（›）。RTL 收起态镜像。 */
  .nav-editor__twist-chevron { transition: transform 0.12s ease; transform: rotate(90deg); font-size: 0.875rem; }
  .nav-editor__twist-state:checked ~ .nav-editor__row .nav-editor__twist-chevron { transform: none; }
  [dir="rtl"] .nav-editor__twist-state:checked ~ .nav-editor__row .nav-editor__twist-chevron { transform: scaleX(-1); }
  /* 键盘聚焦裁切的 checkbox 时，把焦点环画到可见的 chevron 上。 */
  .nav-editor__twist-state:focus-visible ~ .nav-editor__row .nav-editor__twist {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
  }

  .nav-editor__name {
    font-weight: 500;
    flex: 0 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* 分类名略重，与链接 / 引擎区分。 */
  .nav-editor__node--branch > .nav-editor__row > .nav-editor__name { font-weight: 600; }

  /* 分类子项计数徽标（小药丸）。 */
  .nav-editor__count {
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--fg-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding-inline: 0.4375rem;
    line-height: 1.5;
  }

  /* url/模板 = 可伸缩填充物：flex-basis:0 不参与换行计算（否则长 url 会把图标挤到下一行），
     吃掉中间剩余空间并把操作簇推到 inline-end，超长截断省略。 */
  .nav-editor__link,
  .nav-editor__url {
    flex: 1 1 0;
    min-inline-size: 0;
    color: var(--fg-muted);
    font-size: 0.8125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nav-editor__url { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
  /* 分类行 count 之后用 spacer 把操作簇推到 inline-end。 */
  .nav-editor__spacer { flex: 1 1 0; min-inline-size: 0.5rem; }
  /* move 表单与编辑/删除/加项 details：固定尺寸、不参与收缩，故图标簇永不换行。 */
  .nav-editor__inline { display: inline-flex; flex: 0 0 auto; margin: 0; }

  /* 操作簇悬停浮现：有 hover 能力的设备默认藏（仍在 DOM、键盘可聚焦），行 hover / focus-within /
     含展开面板时显；保留布局位（opacity 而非 display，避免浮现时行宽抖动）。触屏（无 hover）恒显。 */
  @media (hover: hover) {
    .nav-editor__row > .nav-editor__act,
    .nav-editor__row > .nav-editor__inline,
    .nav-editor__row > .nav-editor__add--inline {
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.1s ease;
    }
    .nav-editor__row:hover > .nav-editor__act,
    .nav-editor__row:hover > .nav-editor__inline,
    .nav-editor__row:hover > .nav-editor__add--inline,
    .nav-editor__row:focus-within > .nav-editor__act,
    .nav-editor__row:focus-within > .nav-editor__inline,
    .nav-editor__row:focus-within > .nav-editor__add--inline,
    .nav-editor__row:has(.nav-editor__act[open], .nav-editor__add--inline[open]) > .nav-editor__act,
    .nav-editor__row:has(.nav-editor__act[open], .nav-editor__add--inline[open]) > .nav-editor__inline,
    .nav-editor__row:has(.nav-editor__act[open], .nav-editor__add--inline[open]) > .nav-editor__add--inline {
      opacity: 1;
      pointer-events: auto;
    }
  }

  /* 方形图标按钮——move 的 <button> 与 edit/delete/add 的 <summary> 共用。 */
  .nav-editor__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    color: var(--fg-muted);
    border-radius: var(--radius);
    inline-size: 1.625rem;
    block-size: 1.625rem;
    font-size: 0.9375rem;
  }
  .nav-editor__icon:hover {
    background: var(--surface);
    color: var(--fg);
    border-color: var(--border);
  }
  /* move 的 ↑↓ 是 <button type="submit">——压住通用 submit 规则的 brand 实色 + 宽 padding
     + 大写（base 选择器特异性 (0,2,1)）。element+attr+class 同特异性、靠源码顺序在后胜出
     （同 .menu__item / .auth-card__submit 的覆盖手法），拉平成与 edit/delete 的 <summary>
     图标完全一致的幽灵图标按钮。 */
  button[type="submit"].nav-editor__icon {
    background: transparent;
    color: var(--fg-muted);
    padding: 0;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.9375rem;
    font-weight: 400;
  }
  button[type="submit"].nav-editor__icon:hover {
    background: var(--surface);
    color: var(--fg);
    border-color: var(--border);
  }

  /* 编辑 / 删除 / 加项的 details：闭合时只占图标宽（不收缩）；展开时占满整行换到下方。 */
  .nav-editor__act,
  .nav-editor__add--inline { display: inline-flex; flex: 0 0 auto; }
  .nav-editor__act[open],
  .nav-editor__add--inline[open] {
    flex-basis: 100%;
    order: 5;
    flex-direction: column;
  }
  /* 展开后藏掉那个孤零零浮在面板上方的图标 summary——靠面板内的 Cancel 收起（编辑/删除/加项面板都有 Cancel）。 */
  .nav-editor__act[open] > summary,
  .nav-editor__add--inline[open] > summary { display: none; }
  .nav-editor__act--danger > .nav-editor__icon:hover {
    color: var(--color-error);
    border-color: var(--color-error);
  }

  /* 展开后的表单卡（编辑 / 删除确认 / 增项共用）。 */
  .nav-editor__panel {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-block-start: 0.5rem;
    padding: 0.875rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    max-inline-size: 30rem;
  }
  .nav-editor__panel-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
  .nav-editor__field { display: flex; flex-direction: column; gap: 0.25rem; }
  .nav-editor__label { font-size: 0.8125rem; color: var(--fg-muted); }
  .nav-editor__input {
    inline-size: 100%;
    padding: 0.4375rem 0.5rem;
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }
  .nav-editor__input:focus,
  .nav-editor__input:focus-visible { outline: none; border-color: var(--brand); }
  .nav-editor__hint { font-size: 0.75rem; color: var(--fg-muted); }
  .nav-editor__confirm { margin: 0; font-size: 0.875rem; }

  .nav-editor__btn {
    cursor: pointer;
    padding: 0.4375rem 0.875rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--fg);
    font-weight: 600;
    font-size: 0.875rem;
  }
  .nav-editor__btn--primary { background: var(--brand); color: var(--brand-text); border-color: var(--brand); }
  .nav-editor__btn--primary:hover { background: var(--brand-hover); }
  .nav-editor__btn--danger { background: var(--color-error-strong); color: #fff; border-color: transparent; }
  /* 取消——无边框幽灵按钮，弱于主操作。 */
  .nav-editor__btn--ghost { background: transparent; border-color: transparent; color: var(--fg-muted); font-weight: 500; }
  .nav-editor__btn--ghost:hover { background: var(--surface-hover); color: var(--fg); text-decoration: none; }

  /* footer 顶层「加分类」摘要胶囊（用 .nav-editor__add--primary 加强为虚线描边）。 */
  .nav-editor__add-summary {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--brand);
    font-size: 0.8125rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius);
    user-select: none;
  }
  .nav-editor__add-summary:hover { background: var(--surface-hover); }

  /* 顶层「加分类」「重置」分区——与树拉开、加分隔线。 */
  .nav-editor__footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-block-start: 1.25rem;
    padding-block-start: 1.25rem;
    border-block-start: 1px solid var(--border);
  }
  /* 顶层「加分类」更显眼——虚线描边的 add 按钮。 */
  .nav-editor__add--primary > .nav-editor__add-summary {
    border: 1px dashed var(--border);
    color: var(--fg);
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 600;
  }
  .nav-editor__add--primary > .nav-editor__add-summary:hover { border-color: var(--brand); color: var(--brand); background: transparent; }
  .nav-editor__reset-summary {
    cursor: pointer;
    display: inline-block;
    color: var(--color-error);
    font-size: 0.8125rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius);
    user-select: none;
  }
  .nav-editor__reset-summary:hover { background: var(--surface-hover); }

  /* === 在线会话列表（Manage/Sessions）=== */
  .session-list {
    list-style: none;
    margin: 0;
    padding: 0.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .session {
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    background: var(--surface);
  }
  .session__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: space-between;
  }
  .session__device {
    font-weight: 500;
    font-size: 0.875rem;
    overflow-wrap: anywhere;
  }
  .session__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin-block-start: 0.375rem;
    font-size: 0.8125rem;
    color: var(--fg-muted);
  }
  .session__action {
    margin-block-start: 0.5rem;
  }
  /* 列表内的撤销按钮不要 auth-card__action 的整块边框样式占满宽——收成内联小按钮。 */
  .session__action .auth-card__action {
    display: inline-block;
    margin-block-start: 0;
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
  }

  /* === PRG flash banner === */
  /* PRG 重定向后顶部一行短状态：成功改密 / 改邮 / 删账户等。无 dismiss 按钮——TempData
     一次性消费，重渲即消失（避免 dismissable notice 视觉噪声，与 cookie 信息条决策一致）。 */
  .flash {
    margin-block-start: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--brand);
    border-radius: 0.375rem;
    background: var(--surface-hover);
    color: var(--fg);
    font-size: 0.9375rem;
  }

  /* === Legal pages — Privacy / Terms === */
  /* 单栏窄版易读宽度 + 紧凑 h2 节奏；与 .content 共享外宽，自己控制内栏宽。 */
  .legal-page {
    max-inline-size: 48rem;
    margin-inline: auto;
  }
  .legal-page h2 {
    margin-block: 2rem 0.5rem;
    padding-block-end: 0.25rem;
    border-block-end: 1px solid var(--border);
  }
  .legal-page__meta {
    color: var(--fg-muted);
    font-size: 0.875rem;
  }
  .legal-page ul {
    padding-inline-start: 1.5rem;
    list-style: disc;
    margin-block-end: 1rem;
  }
  .legal-page li { margin-block-end: 0.25rem; }

  /* === Error page (Pages/Error.cshtml) === */
  .error-page__code {
    font-size: 2.5rem;
    color: var(--color-error);
  }
  .error-page__message {
    font-size: 1.125rem;
    color: var(--fg-muted);
    margin-block-end: 1rem;
  }

  /* === bespoke App: color-studio（Pages/Apps/ColorStudio/）===
     convert（输入色 → 全格式 + 大色块）+ contrast（前景/背景 → WCAG 比率 + AA/AAA 徽章）。
     色块 / 预览框的填色来自用户输入的颜色数据（内联 style），其余 chrome 全走 tokens。 */
  .color-studio {
    max-inline-size: 60rem;
    margin-inline: auto;
    padding-inline: 1rem;
    padding-block: 1.5rem;
  }
  .color-studio__header { margin-block-end: 1.5rem; }
  .color-studio__title {
    margin: 0 0 0.25rem;
    font-size: 1.5rem;
    font-weight: 500;
  }
  .color-studio__description {
    margin: 0;
    color: var(--fg-muted);
    font-size: 0.9375rem;
  }
  .color-studio__modes {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    margin-block-end: 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
  }
  .color-studio__mode {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
    color: var(--fg-muted);
    cursor: pointer;
    user-select: none;
  }
  .color-studio__mode.is-active {
    background: var(--brand);
    color: var(--brand-text);
  }
  .color-studio__mode:has(:focus-visible) {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
  }
  .color-studio__mode-input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .color-studio__form { margin-block-end: 1.25rem; }
  .color-studio__form--pair {
    display: grid;
    gap: 1rem;
  }
  @media (width >= 36rem) {
    .color-studio__form--pair { grid-template-columns: 1fr 1fr; }
  }
  .color-studio__label {
    display: block;
    margin-block-end: 0.5rem;
    font-size: 0.875rem;
    color: var(--fg-muted);
  }
  .color-studio__input {
    inline-size: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--fg);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9375rem;
  }
  .color-studio__empty {
    margin: 0;
    color: var(--fg-muted);
    font-style: italic;
  }
  .color-studio__error {
    margin: 0;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    color: var(--color-error);
    border: 1px solid currentColor;
    background: light-dark(rgb(176 0 32 / 0.06), rgb(207 102 121 / 0.08));
  }

  /* convert 结果：大色块 + 各格式行 */
  .color-studio__result {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
  }
  @media (width >= 40rem) {
    .color-studio__result { grid-template-columns: 12rem 1fr; align-items: start; }
  }
  .color-studio__swatch {
    block-size: 8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
  }
  @media (width >= 40rem) {
    .color-studio__swatch { block-size: 100%; min-block-size: 8rem; }
  }
  .color-rows { margin: 0; display: grid; gap: 0.5rem; }
  .color-row {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    align-items: center;
    gap: 0.25rem 0.75rem;
  }
  .color-row__label {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fg-muted);
  }
  .color-row__value-row {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-inline-size: 0;
  }
  .color-row__value {
    flex: 1;
    min-inline-size: 0;
    overflow-x: auto;
    padding: 0.375rem 0.5rem;
    border-radius: var(--radius);
    background: var(--surface-hover);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    white-space: nowrap;
  }
  .color-row__copy {
    flex: none;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--fg-muted);
    font-size: 0.75rem;
    cursor: pointer;
  }
  .color-row__copy:hover { background: var(--surface-hover); color: var(--fg); }

  /* contrast 结果：预览 + 比率 + 四档徽章 */
  .contrast-result { display: grid; gap: 1.25rem; }
  .contrast-preview {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    min-block-size: 8rem;
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: center;
  }
  .contrast-preview__large { font-size: 2rem; font-weight: 600; }
  .contrast-preview__normal { font-size: 1rem; }
  .contrast-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
  }
  .contrast-score__ratio {
    font-size: 2.5rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .contrast-score__suffix { color: var(--fg-muted); font-size: 1.5rem; font-weight: 400; }
  .contrast-score__caption {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fg-muted);
  }
  .contrast-note {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--fg-muted);
  }
  .contrast-badges {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
  }
  .contrast-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    border: 1px solid currentColor;
    font-size: 0.8125rem;
    font-weight: 600;
  }
  .contrast-badge.is-pass {
    color: var(--color-success);
    background: light-dark(rgb(46 125 50 / 0.08), rgb(129 199 132 / 0.1));
  }
  .contrast-badge.is-fail {
    color: var(--color-error);
    background: light-dark(rgb(176 0 32 / 0.06), rgb(207 102 121 / 0.08));
  }
  .contrast-badge__mark { font-size: 0.875rem; }

  /* 取色器 / 互换 / 配色方案（0.11.3.7） */
  .color-studio__input-row { display: flex; gap: 0.5rem; align-items: stretch; }
  .color-studio__input-row .color-studio__input { flex: 1 1 auto; min-inline-size: 0; }
  .color-studio__picker {
    flex: none;
    inline-size: 2.75rem;
    block-size: auto;
    padding: 0.125rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
  }
  .color-studio__swap {
    align-self: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--fg-muted);
    font-size: 1.125rem;
    cursor: pointer;
  }
  .color-studio__swap:hover { color: var(--fg); border-color: var(--brand); }
  .harmony-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
    gap: 0.75rem;
  }
  .harmony-swatch {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    align-items: center;
  }
  .harmony-swatch__chip {
    inline-size: 100%;
    block-size: 4rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }
  .harmony-swatch__hex {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
  }
  .harmony-swatch__copy {
    padding: 0.1875rem 0.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--fg-muted);
    font-size: 0.75rem;
    cursor: pointer;
  }
  .harmony-swatch__copy:hover { color: var(--fg); border-color: var(--brand); }
  .harmony-swatch__caption {
    font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--fg-muted); text-align: center;
  }

  /* shades / mix 输出：分组小标题 + 色块网格（0.11 国际对标增量） */
  .color-scale { display: flex; flex-direction: column; gap: 0.5rem; }
  .color-scale__title {
    margin: 0.5rem 0 0; font-size: 0.8125rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-muted);
  }
  .color-scale__title:first-child { margin-block-start: 0; }
  .color-studio__range { inline-size: 100%; accent-color: var(--brand); cursor: pointer; }
  .color-studio__file {
    inline-size: 100%; padding: 0.5rem 0.625rem;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); color: var(--fg); font-size: 0.875rem;
  }
  .color-studio__file::file-selector-button {
    margin-inline-end: 0.75rem; padding: 0.3rem 0.7rem;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface-hover); color: var(--fg); cursor: pointer; font-size: 0.8125rem;
  }

  /* === bespoke App: timezone（Pages/Apps/Timezone/）===
     转换表单（DateText + Source + Target）+ 输出 + 世界时钟卡片网格。 */
  .tz-app { display: flex; flex-direction: column; gap: 1rem; }
  .tz-app__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .tz-app__title { margin: 0; font-size: 1.25rem; }
  .tz-app__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .tz-app__form { display: flex; flex-direction: column; gap: 0.75rem; }
  .tz-app__row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem; }
  @media (width < 40rem) { .tz-app__row { grid-template-columns: 1fr; } }
  .tz-app__field { display: flex; flex-direction: column; gap: 0.25rem; min-inline-size: 0; }
  .tz-app__label { font-size: 0.875rem; color: var(--fg-muted); }
  .tz-app__input {
    inline-size: 100%; padding: 0.625rem 0.875rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    font-size: 0.875rem;
  }
  .tz-app__input:focus { outline: 0; border-color: var(--brand); }
  .tz-app__date-row { display: flex; gap: 0.375rem; align-items: stretch; min-inline-size: 0; }
  .tz-app__date-row > .tz-app__input { flex: 1 1 auto; min-inline-size: 0; }
  .tz-app__now-btn {
    flex: 0 0 auto;
    padding: 0 0.875rem;
    background: var(--surface);
    color: var(--fg-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.8125rem;
    cursor: pointer;
  }
  .tz-app__now-btn:hover { color: var(--fg); border-color: var(--brand); }
  .tz-app__output { display: flex; flex-direction: column; min-block-size: 3rem; }
  .tz-app__empty { color: var(--fg-muted); margin: 0; }
  .tz-app__error { color: var(--color-error); margin: 0; font-size: 0.875rem; }
  .tz-result {
    display: flex; flex-direction: column; gap: 0.25rem;
    padding: 0.875rem 1rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  }
  .tz-result__time { font-size: 1.5rem; font-weight: 600; color: var(--brand); font-variant-numeric: tabular-nums; }
  .tz-result__zone { font-size: 0.8125rem; color: var(--fg-muted); }
  .tz-app__clocks-title { margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.06em; }
  .tz-app__clocks-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.5rem;
  }
  .tz-clock {
    display: flex; flex-direction: column; gap: 0.125rem;
    padding: 0.625rem 0.75rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  }
  .tz-clock__city { font-weight: 600; }
  .tz-clock__time { font-variant-numeric: tabular-nums; font-size: 0.9375rem; }
  .tz-clock__meta { font-size: 0.75rem; color: var(--fg-muted); }

  /* === bespoke App: password-strength（Pages/Apps/PasswordStrength/）===
     输入 + 隐私行 + 输出（档位徽章 / 指标网格 / 弱点条目）。 */
  .pw-app { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 38rem; }
  .pw-app__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .pw-app__title { margin: 0; font-size: 1.25rem; }
  .pw-app__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .pw-app__form { display: flex; flex-direction: column; gap: 0.375rem; }
  .pw-app__label { font-size: 0.875rem; color: var(--fg-muted); }
  .pw-app__input {
    inline-size: 100%; padding: 0.625rem 0.875rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9375rem;
  }
  .pw-app__input:focus { outline: 0; border-color: var(--brand); }
  .pw-app__empty { color: var(--fg-muted); margin: 0; }
  .pw-app__error { color: var(--color-error); margin: 0; font-size: 0.875rem; }
  .pw-result { display: flex; flex-direction: column; gap: 0.75rem; }
  .pw-result__band {
    align-self: flex-start;
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    font-weight: 600; font-size: 0.9375rem;
  }
  .pw-result__band--veryweak { background: light-dark(#fde0e0, #5a1d22); color: var(--color-error); }
  .pw-result__band--weak { background: light-dark(#ffe6cc, #3a2310); color: light-dark(#b25800, #ffb878); }
  .pw-result__band--reasonable { background: light-dark(#fff4cc, #3a3110); color: light-dark(#a08000, #ffe07b); }
  .pw-result__band--strong { background: light-dark(#d6f0d8, #163322); color: var(--color-success); }
  .pw-result__band--verystrong { background: light-dark(#a6f3b5, #16361f); color: light-dark(#1e6324, #3ed35f); }
  .pw-result__stats {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 0.75rem;
    margin: 0; padding: 0;
  }
  .pw-stat { margin: 0; display: flex; flex-direction: column; gap: 0.125rem; min-inline-size: 0; }
  .pw-stat--wide { grid-column: 1 / -1; }
  .pw-stat__label { font-size: 0.75rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; }
  .pw-stat__value { font-size: 1.0625rem; font-weight: 500; font-variant-numeric: tabular-nums; margin: 0; }
  .pw-result__weaknesses { margin: 0; padding-inline-start: 1.25rem; display: flex; flex-direction: column; gap: 0.25rem; }
  .pw-weakness { color: var(--color-error); font-size: 0.875rem; }

  /* === bespoke App: cron-helper（Pages/Apps/CronHelper/）===
     输入 + 提示 + 输出（白话 + 接下来 N 次执行）。 */
  .cron-app { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 38rem; }
  .cron-app__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .cron-app__title { margin: 0; font-size: 1.25rem; }
  .cron-app__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .cron-app__form { display: flex; flex-direction: column; gap: 0.375rem; }
  .cron-app__label { font-size: 0.875rem; color: var(--fg-muted); }
  .cron-app__input {
    inline-size: 100%; padding: 0.625rem 0.875rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9375rem;
  }
  .cron-app__input:focus { outline: 0; border-color: var(--brand); }
  .cron-app__hint { margin: 0; color: var(--fg-muted); font-size: 0.75rem; }
  .cron-app__empty { color: var(--fg-muted); margin: 0; }
  .cron-app__error { color: var(--color-error); margin: 0; font-size: 0.875rem; }
  .cron-result { display: flex; flex-direction: column; gap: 0.625rem; }
  .cron-result__prose { margin: 0; font-size: 0.9375rem; }
  .cron-result__heading { margin: 0; font-size: 0.75rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; }
  .cron-result__runs {
    margin: 0; padding-inline-start: 1.5rem;
    display: flex; flex-direction: column; gap: 0.125rem;
  }
  .cron-run { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; font-size: 0.875rem; }

  /* === bespoke App: image-toolkit（Pages/Apps/ImageToolkit/）===
     上传 + 参数 3 列 + 预览 + 统计 + 下载链接。 */
  .img-app { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 52rem; }
  .img-app__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .img-app__title { margin: 0; font-size: 1.25rem; }
  .img-app__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .img-app__form { display: flex; flex-direction: column; gap: 0.75rem; }
  .img-app__label { font-size: 0.875rem; color: var(--fg-muted); }
  .img-app__file { font-size: 0.875rem; color: var(--fg); padding-block: 0.375rem; }
  .img-app__row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem; }
  @media (width < 40rem) { .img-app__row { grid-template-columns: 1fr; } }
  .img-app__field { display: flex; flex-direction: column; gap: 0.25rem; min-inline-size: 0; }
  .img-app__input {
    inline-size: 100%; padding: 0.5rem 0.75rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    font-size: 0.875rem;
  }
  .img-app__input:focus { outline: 0; border-color: var(--brand); }
  .img-app__empty { color: var(--fg-muted); margin: 0; }
  .img-app__error { color: var(--color-error); margin: 0; font-size: 0.875rem; }
  .img-result { display: flex; flex-direction: column; gap: 0.625rem; }
  .img-result__preview {
    background: light-dark(#f5f5f5, #2a2a2a);
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 0.75rem; display: flex; justify-content: center;
  }
  .img-result__preview img { max-inline-size: 100%; max-block-size: 24rem; object-fit: contain; }
  .img-result__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 0.75rem; margin: 0; }
  @media (width < 30rem) { .img-result__stats { grid-template-columns: 1fr; } }
  .img-stat { margin: 0; display: flex; flex-direction: column; gap: 0.125rem; }
  .img-stat__label { font-size: 0.75rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; }
  .img-stat__value { font-size: 0.875rem; font-variant-numeric: tabular-nums; margin: 0; }
  .img-stat__delta { display: inline-block; margin-inline-start: 0.5rem; font-size: 0.75rem; font-variant-numeric: tabular-nums; }
  .img-stat__delta--up   { color: var(--color-error); }
  .img-stat__delta--down { color: var(--color-success); }
  .img-stat__note {
    grid-column: 1 / -1;
    margin: 0.25rem 0 0;
    padding: 0.5rem 0.75rem;
    color: var(--fg-muted);
    font-size: 0.75rem;
    background: var(--color-warning-bg);
    border-inline-start: 3px solid var(--color-warning);
    border-radius: 4px;
  }
  .img-app__hint { margin: 0.125rem 0 0; color: var(--fg-muted); font-size: 0.75rem; }
  .img-result__download {
    align-self: flex-start;
    padding: 0.5rem 1rem;
    background: var(--brand); color: var(--brand-text);
    border-radius: var(--radius); text-decoration: none; font-weight: 500;
  }
  .img-result__download:hover { background: var(--brand-hover); }

  /* EXIF / IPTC / XMP 元数据展示——上传一次读全部，分组折叠（GPS 默认展开作为隐私警示）。 */
  .img-exif { display: flex; flex-direction: column; gap: 0.5rem; margin-block-start: 1rem; }
  .img-exif__title { margin: 0; font-size: 0.875rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.06em; }
  .img-exif__hint  { margin: 0; color: var(--fg-muted); font-size: 0.8125rem; }
  .img-exif__empty { margin: 1rem 0 0; color: var(--fg-muted); font-size: 0.8125rem; font-style: italic; }
  .img-exif__group { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
  .img-exif__group-name { padding: 0.5rem 0.75rem; cursor: pointer; font-size: 0.875rem; font-weight: 500; }
  .img-exif__group-count { display: inline-block; margin-inline-start: 0.4rem; padding: 0.0625rem 0.4rem; background: var(--border); border-radius: 9999px; font-size: 0.6875rem; color: var(--fg-muted); font-weight: 400; }
  .img-exif__fields { padding: 0 0.75rem 0.75rem; margin: 0; display: grid; gap: 0.25rem 0.75rem; grid-template-columns: max-content 1fr; font-size: 0.8125rem; }
  .img-exif__field { display: contents; }
  .img-exif__field-name { color: var(--fg-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.75rem; }
  .img-exif__field-value { margin: 0; word-break: break-word; }

  /* === bespoke App: stego（Pages/Apps/Stego/）===
     隐写/取证四模式：lsb 抽位 / bitplane 渲位平面 / zerowidth 零宽收发 / carve 嵌入文件扫描。
     分段开关 + 各模式独立 form + 输出区，结构沿用 color-studio；位平面图原样灰度渲染。 */
  .stego-app {
    max-inline-size: 60rem;
    margin-inline: auto;
    padding-inline: 1rem;
    padding-block: 1.5rem;
  }
  .stego-app__header { margin-block-end: 1.5rem; }
  .stego-app__title { margin: 0 0 0.25rem; font-size: 1.5rem; font-weight: 500; }
  .stego-app__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .stego-app__modes,
  .stego-app__subtabs {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    margin-block-end: 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
  }
  .stego-app__subtabs { margin-block-end: 1rem; }
  .stego-app__mode,
  .stego-app__subtab {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
    color: var(--fg-muted);
    cursor: pointer;
    user-select: none;
  }
  .stego-app__mode.is-active,
  .stego-app__subtab.is-active { background: var(--brand); color: var(--brand-text); }
  .stego-app__mode:has(:focus-visible),
  .stego-app__subtab:has(:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
  .stego-app__mode-input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .stego-app__form { margin-block-end: 1.25rem; }
  .stego-app__row {
    display: grid;
    gap: 0.75rem;
    margin-block-start: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  }
  .stego-app__field { min-inline-size: 0; }
  .stego-app__label {
    display: block;
    margin-block-end: 0.5rem;
    font-size: 0.875rem;
    color: var(--fg-muted);
  }
  .stego-app__input,
  .stego-app__file {
    inline-size: 100%;
    padding: 0.5rem 0.625rem;
    font: inherit;
    color: var(--fg);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }
  .stego-app__textarea {
    inline-size: 100%;
    padding: 0.625rem 0.75rem;
    margin-block-end: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    color: var(--fg);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    resize: vertical;
  }
  .stego-app__hint { margin: 0.5rem 0 0; color: var(--fg-muted); font-size: 0.75rem; }
  .stego-app__output { margin-block-start: 1rem; }
  .stego-app__empty { margin: 0.5rem 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .stego-app__error {
    margin: 0.5rem 0;
    padding: 0.625rem 0.875rem;
    border-radius: var(--radius);
    color: var(--color-error);
    border: 1px solid currentColor;
    background: light-dark(rgb(176 0 32 / 0.06), rgb(207 102 121 / 0.08));
  }

  .stego-result { display: flex; flex-direction: column; gap: 0.5rem; }
  .stego-result__row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
  .stego-result__label { margin: 0.5rem 0 0; font-size: 0.8125rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.06em; }
  .stego-result__meta { margin: 0; color: var(--fg-muted); font-size: 0.875rem; }
  .stego-result__note { margin: 0.25rem 0 0; color: var(--fg-muted); font-size: 0.8125rem; font-style: italic; }
  .stego-result__pre {
    margin: 0;
    padding: 0.625rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    white-space: pre-wrap;
    word-break: break-all;
    max-block-size: 22rem;
    overflow: auto;
  }
  .stego-result__copy {
    padding: 0.25rem 0.625rem;
    font-size: 0.8125rem;
    color: var(--fg-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }
  .stego-result__copy:hover { color: var(--fg); }
  .stego-result__download {
    align-self: flex-start;
    margin-block-start: 0.25rem;
    padding: 0.5rem 1rem;
    background: var(--brand); color: var(--brand-text);
    border-radius: var(--radius); text-decoration: none; font-weight: 500;
  }
  .stego-result__download:hover { background: var(--brand-hover); }

  /* 位平面：棋盘格底衬托出黑白 1-bit 图；图像按原始像素渲染不插值。 */
  .stego-plane {
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background:
      repeating-conic-gradient(var(--surface) 0% 25%, var(--bg) 0% 50%) 50% / 16px 16px;
    overflow: auto;
  }
  .stego-plane__img {
    display: block;
    max-inline-size: 100%;
    image-rendering: pixelated;
  }

  /* 通道拆分：R/G/B/A 四张图并排网格；低位放大单图复用 .stego-plane。 */
  .stego-amplify-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  }
  .stego-amplify-cell { margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
  .stego-amplify-cell__label { font-size: 0.8125rem; color: var(--fg-muted); }
  .stego-amplify-cell .stego-result__download { padding: 0.3rem 0.7rem; font-size: 0.8125rem; }

  .stego-zw__found { margin: 0.25rem 0 0; padding-inline-start: 1.1rem; font-size: 0.875rem; }
  .stego-zw__found-item { margin-block-end: 0.2rem; }
  .stego-zw__count { color: var(--fg-muted); }

  .stego-carve {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
  }
  .stego-carve th,
  .stego-carve td {
    padding: 0.4rem 0.6rem;
    text-align: start;
    border-block-end: 1px solid var(--border);
    vertical-align: top;
  }
  .stego-carve th { color: var(--fg-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.6875rem; }
  .stego-carve__offset { font-variant-numeric: tabular-nums; white-space: nowrap; }
  .stego-carve__hexoff { color: var(--fg-muted); }
  .stego-carve__badge {
    display: inline-block;
    margin-inline-start: 0.4rem;
    padding: 0.0625rem 0.4rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 500;
  }
  .stego-carve__badge--container { background: var(--border); color: var(--fg-muted); }
  .stego-carve__badge--embedded { background: var(--color-warning-bg); color: var(--color-warning); }

  /* === bespoke App: unicode-inspector（Pages/Apps/UnicodeInspector/）===
     文本输入 + 输出（长度计数 dashboard / 四种规范化形式 / 逐码点表）。 */
  .uni-app { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 56rem; }
  .uni-app__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .uni-app__title { margin: 0; font-size: 1.25rem; }
  .uni-app__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .uni-app__form { display: flex; flex-direction: column; gap: 0.375rem; }
  .uni-app__label { font-size: 0.875rem; color: var(--fg-muted); }
  .uni-app__input {
    inline-size: 100%; padding: 0.625rem 0.875rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9375rem; resize: vertical;
  }
  .uni-app__input:focus { outline: 0; border-color: var(--brand); }
  .uni-app__empty { color: var(--fg-muted); margin: 0; }
  .uni-app__error { color: var(--color-error); margin: 0; font-size: 0.875rem; }
  .uni-result { display: flex; flex-direction: column; gap: 1rem; }

  .uni-result__stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem 0.75rem; margin: 0;
  }
  @media (width < 34rem) { .uni-result__stats { grid-template-columns: 1fr 1fr; } }
  .uni-stat { margin: 0; display: flex; flex-direction: column; gap: 0.125rem; min-inline-size: 0; }
  .uni-stat__label { font-size: 0.75rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; }
  .uni-stat__value { font-size: 1.0625rem; font-weight: 500; font-variant-numeric: tabular-nums; margin: 0; }

  .uni-norm { display: flex; flex-direction: column; gap: 0.375rem; }
  .uni-norm__heading { margin: 0; font-size: 0.75rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; }
  .uni-norm__row { display: flex; align-items: baseline; gap: 0.625rem; flex-wrap: wrap; }
  .uni-norm__name { min-inline-size: 3.25rem; font-size: 0.75rem; font-weight: 600; color: var(--fg-muted); }
  .uni-norm__value {
    flex: 1 1 12rem; min-inline-size: 0;
    padding: 0.25rem 0.5rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem; word-break: break-word;
  }
  .uni-norm__already { font-size: 0.75rem; color: var(--color-success); }

  .uni-table {
    inline-size: 100%; border-collapse: collapse; font-size: 0.8125rem;
    display: block; overflow-x: auto;
  }
  .uni-table th, .uni-table td {
    padding: 0.375rem 0.625rem; text-align: start;
    border-block-end: 1px solid var(--border); vertical-align: middle; white-space: nowrap;
  }
  .uni-table th { color: var(--fg-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.6875rem; }
  .uni-table__mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
  .uni-table__char { font-size: 1.125rem; }
  .uni-char--invisible { color: var(--fg-muted); opacity: 0.6; }
  .uni-result__note {
    margin: 0; padding: 0.5rem 0.75rem;
    color: var(--fg-muted); font-size: 0.75rem;
    background: var(--color-warning-bg);
    border-inline-start: 3px solid var(--color-warning); border-radius: 4px;
  }

  /* === bespoke App: json-to-types（Pages/Apps/JsonToTypes/）===
     JSON textarea + 语言分段选择（纯 :checked）+ 根名 + 输出（语言标签 / 类型计数 / 复制 / 代码块）。 */
  .j2t-app { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 60rem; }
  .j2t-app__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .j2t-app__title { margin: 0; font-size: 1.25rem; }
  .j2t-app__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .j2t-app__form { display: flex; flex-direction: column; gap: 0.75rem; }
  .j2t-app__controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1.25rem; }

  .j2t-langs {
    margin: 0; padding: 0.25rem; border: 1px solid var(--border); border-radius: var(--radius);
    min-inline-size: 0; background: var(--surface);
    display: inline-flex; flex-wrap: wrap; gap: 0.25rem;
  }
  .j2t-lang {
    display: inline-flex; align-items: center; padding: 0.375rem 0.75rem;
    border-radius: var(--radius); font-size: 0.8125rem; color: var(--fg-muted);
    cursor: pointer; user-select: none;
  }
  .j2t-lang:hover { color: var(--fg); }
  .j2t-lang:has(:checked) { background: var(--brand); color: var(--brand-text); }
  .j2t-lang:has(:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
  .j2t-lang__radio { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }

  .j2t-rootname { display: flex; flex-direction: column; gap: 0.25rem; }
  .j2t-rootname__label { font-size: 0.6875rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; }
  .j2t-rootname__input {
    inline-size: 11rem; max-inline-size: 100%; padding: 0.375rem 0.625rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    font-size: 0.875rem;
  }
  .j2t-rootname__input:focus { outline: 0; border-color: var(--brand); }

  .j2t-app__label { font-size: 0.875rem; color: var(--fg-muted); }
  .j2t-app__input {
    inline-size: 100%; padding: 0.625rem 0.875rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875rem; resize: vertical;
  }
  .j2t-app__input:focus { outline: 0; border-color: var(--brand); }
  .j2t-app__empty { color: var(--fg-muted); margin: 0; }
  .j2t-app__error { color: var(--color-error); margin: 0; font-size: 0.875rem; }

  .j2t-result { display: flex; flex-direction: column; gap: 0.5rem; }
  .j2t-result__head { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; }
  .j2t-result__lang { font-weight: 600; font-size: 0.9375rem; }
  .j2t-result__count { font-size: 0.75rem; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
  .j2t-result__copy {
    margin-inline-start: auto; padding: 0.25rem 0.7rem; font-size: 0.8125rem;
    color: var(--fg-muted); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer;
  }
  .j2t-result__copy:hover { color: var(--fg); border-color: var(--brand); }
  .j2t-result__copy[aria-pressed="true"] { color: var(--color-success); border-color: var(--color-success); }
  .j2t-code {
    margin: 0; padding: 0.875rem 1rem; overflow-x: auto;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    line-height: 1.55; tab-size: 4;
  }
  .j2t-code code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem; color: var(--fg); white-space: pre;
  }

  /* === bespoke App: css-toolkit（Pages/Apps/CssToolkit/）===
     6 个可视化 CSS 生成器：模式 tab（客户端切换）+ 各模式 form（滑块/颜色）+ 服务端渲染预览。 */
  .csst { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 60rem; }
  .csst__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .csst__title { margin: 0; font-size: 1.25rem; }
  .csst__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }

  /* 模式 tab —— 复用 color-studio 模式视觉（分段 pill，is-active = brand 填充）。 */
  .csst-modes {
    display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.25rem;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  }
  .csst-mode {
    display: inline-flex; align-items: center; padding: 0.375rem 0.75rem;
    border-radius: var(--radius); font-size: 0.8125rem; color: var(--fg-muted);
    cursor: pointer; user-select: none;
  }
  .csst-mode:hover { color: var(--fg); }
  .csst-mode.is-active { background: var(--brand); color: var(--brand-text); }
  .csst-mode:has(:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
  .csst-mode__input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }

  .csst-form { margin: 0; }
  .csst-controls {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.75rem 1.25rem; align-items: end;
  }

  .csst-slider { display: flex; flex-direction: column; gap: 0.25rem; min-inline-size: 0; }
  .csst-slider__label { font-size: 0.6875rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; }
  .csst-slider__row { display: flex; align-items: center; gap: 0.625rem; }
  .csst-slider__range { flex: 1 1 auto; min-inline-size: 0; accent-color: var(--brand); }
  .csst-slider__value {
    flex: 0 0 auto; min-inline-size: 3rem; text-align: end;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem; font-variant-numeric: tabular-nums; color: var(--fg);
  }

  .csst-color { display: flex; flex-direction: column; gap: 0.25rem; min-inline-size: 0; }
  .csst-color__row { display: flex; align-items: center; gap: 0.5rem; }
  .csst-color__text {
    flex: 1 1 auto; min-inline-size: 0; padding: 0.375rem 0.625rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem;
  }
  .csst-color__text:focus { outline: 0; border-color: var(--brand); }
  .csst-color__picker {
    flex: 0 0 auto; inline-size: 2rem; block-size: 2rem; padding: 0;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer;
  }

  .csst-check { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; cursor: pointer; align-self: center; }
  /* 复位全局 `input { inline-size: 100% }`（§表单基样式）对 checkbox 的撑满（同 diff-app__option / qr-app__check）。 */
  .csst-check input[type="checkbox"] { inline-size: auto; margin: 0; flex: none; accent-color: var(--brand); }

  .csst-segrow { display: inline-flex; gap: 0.25rem; padding: 0.2rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
  .csst-seg { display: inline-flex; align-items: center; padding: 0.3rem 0.7rem; border-radius: var(--radius); font-size: 0.8125rem; color: var(--fg-muted); cursor: pointer; user-select: none; }
  .csst-seg.is-active { background: var(--brand); color: var(--brand-text); }
  .csst-seg:has(:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
  .csst-seg__input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }

  .csst-output { margin-block-start: 1rem; }
  .csst-result { display: flex; flex-direction: column; gap: 0.625rem; }

  /* 预览舞台 —— 浅色棋盘格底（透明指示 + 保证阴影/渐变/变换在任意主题下都可见）。 */
  .csst-stage {
    display: flex; align-items: center; justify-content: center;
    min-block-size: 13rem; padding: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden;
    background-color: #ffffff;
    background-image:
      linear-gradient(45deg, #e9e9ef 25%, transparent 25%),
      linear-gradient(-45deg, #e9e9ef 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #e9e9ef 75%),
      linear-gradient(-45deg, transparent 75%, #e9e9ef 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  }
  .csst-stage--flush { padding: 0; }
  .csst-stage--bezier { flex-direction: column; gap: 1rem; background: var(--surface); background-image: none; }

  .csst-demo--fill { inline-size: 7.5rem; block-size: 7.5rem; background: var(--brand); }
  .csst-demo--small { inline-size: 4.5rem; block-size: 4.5rem; }
  .csst-demo--gradient { inline-size: 100%; block-size: 11rem; }
  .csst-demo--text { margin: 0; font-size: 3.25rem; font-weight: 700; color: #1f2430; line-height: 1; }

  .csst-transform-frame {
    display: flex; align-items: center; justify-content: center;
    inline-size: 7.5rem; block-size: 7.5rem; border: 1px dashed var(--fg-muted); border-radius: 4px;
  }

  /* cubic-bezier 曲线 SVG + 缓动小球轨道。 */
  .csst-bezier { inline-size: 12rem; block-size: 12rem; overflow: visible; }
  .csst-bezier__grid { fill: none; stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
  .csst-bezier__diag { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
  .csst-bezier__handle { stroke: var(--fg-muted); stroke-width: 1; vector-effect: non-scaling-stroke; }
  .csst-bezier__curve { fill: none; stroke: var(--brand); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linecap: round; }
  .csst-bezier__pt { fill: var(--brand); }
  .csst-bezier__track {
    position: relative; inline-size: min(100%, 20rem); block-size: 1.5rem;
    background: var(--surface-hover, var(--border)); border-radius: 9999px;
  }
  .csst-bezier__dot {
    position: absolute; inset-block-start: 0.125rem; inset-inline-start: 0;
    inline-size: 1.25rem; block-size: 1.25rem; border-radius: 50%; background: var(--brand);
    animation: csst-bezier-run 1.6s infinite alternate;
  }
  @keyframes csst-bezier-run { from { inset-inline-start: 0; } to { inset-inline-start: calc(100% - 1.25rem); } }
  @media (prefers-reduced-motion: reduce) { .csst-bezier__dot { animation: none; } }

  .csst-code-row { display: flex; align-items: center; gap: 0.5rem; }
  .csst-code {
    flex: 1 1 auto; min-inline-size: 0; padding: 0.5rem 0.75rem; overflow-x: auto; white-space: nowrap;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; color: var(--fg);
  }
  .csst-copy {
    flex: 0 0 auto; padding: 0.4rem 0.8rem; font-size: 0.8125rem;
    color: var(--fg-muted); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer;
  }
  .csst-copy:hover { color: var(--fg); border-color: var(--brand); }
  .csst-copy[aria-pressed="true"] { color: var(--color-success); border-color: var(--color-success); }
  .csst-error { margin: 0; color: var(--color-error); font-size: 0.875rem; }

  /* clip-path / filter / glassmorphism / triangle 生成器（国际对标增量） */
  .csst-code--block { white-space: pre; }
  .csst-select {
    inline-size: 100%; padding: 0.45rem 0.6rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    color: var(--fg); font-size: 0.875rem;
  }
  .csst-select:focus { outline: 0; border-color: var(--brand); }
  /* filter 预览：彩色渐变方块，让各滤镜效果可见 */
  .csst-demo--filter {
    inline-size: 9rem; block-size: 9rem; border-radius: 8px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ffd93d 35%, #6bcB77 70%, #4d96ff 100%);
  }
  /* glassmorphism 预览舞台：鲜艳背景在玻璃元素之后，凸显 backdrop-filter 模糊 */
  .csst-stage--glass {
    background-color: transparent;
    background-image: linear-gradient(135deg, #5b6cff 0%, #b14bff 50%, #ff5fa2 100%);
  }
  .csst-glass {
    inline-size: 11rem; block-size: 7rem;
  }

  /* === bespoke App: programmer-calculator（Pages/Apps/ProgrammerCalculator/）===
     表达式输入 + 位宽分段 + 有符号开关 + 输出（多进制行 + 可点位格）。 */
  .pc { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 60rem; }
  .pc__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .pc__title { margin: 0; font-size: 1.25rem; }
  .pc__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .pc__form { display: flex; flex-direction: column; gap: 0.625rem; }
  .pc__label { font-size: 0.875rem; color: var(--fg-muted); }
  .pc__input {
    inline-size: 100%; padding: 0.625rem 0.875rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1rem;
  }
  .pc__input:focus { outline: 0; border-color: var(--brand); }
  .pc__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }

  .pc-widths {
    margin: 0; padding: 0.25rem; border: 1px solid var(--border); border-radius: var(--radius);
    min-inline-size: 0; background: var(--surface); display: inline-flex; gap: 0.25rem;
  }
  .pc-width {
    display: inline-flex; align-items: center; padding: 0.3rem 0.7rem; border-radius: var(--radius);
    font-size: 0.8125rem; color: var(--fg-muted); cursor: pointer; user-select: none;
    font-variant-numeric: tabular-nums;
  }
  .pc-width:hover { color: var(--fg); }
  .pc-width:has(:checked) { background: var(--brand); color: var(--brand-text); }
  .pc-width:has(:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
  .pc-width__input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }

  .pc-signed { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; cursor: pointer; }
  .pc-signed input[type="checkbox"] { inline-size: auto; margin: 0; flex: none; accent-color: var(--brand); }

  .pc__empty { color: var(--fg-muted); margin: 0; }
  .pc__error { color: var(--color-error); margin: 0; font-size: 0.875rem; }
  .pc-result { display: flex; flex-direction: column; gap: 1.25rem; }

  .pc-bases { display: flex; flex-direction: column; gap: 0.375rem; }
  .pc-row { display: grid; grid-template-columns: 4.5rem 1fr auto; align-items: center; gap: 0.75rem; }
  .pc-row__label { font-size: 0.75rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; }
  .pc-row__value {
    min-inline-size: 0; padding: 0.45rem 0.7rem; overflow-x: auto; white-space: nowrap;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9375rem; font-variant-numeric: tabular-nums; color: var(--fg);
  }
  .pc-row__value--bin { font-size: 0.8125rem; }
  .pc-row__note { margin-inline-start: 0.6rem; color: var(--fg-muted); font-size: 0.8125rem; }
  .pc-row__copy {
    padding: 0.4rem 0.75rem; font-size: 0.8125rem; color: var(--fg-muted); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer;
  }
  .pc-row__copy:hover { color: var(--fg); border-color: var(--brand); }
  .pc-row__copy[aria-pressed="true"] { color: var(--color-success); border-color: var(--color-success); }

  .pc-bits-block { display: flex; flex-direction: column; gap: 0.5rem; }
  .pc-bits-block__label { font-size: 0.75rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; }
  .pc-bits { display: flex; flex-wrap: wrap; gap: 0.75rem 1.1rem; }
  .pc-byte { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
  .pc-byte__bits { display: flex; gap: 2px; }
  .pc-byte__bits .pc-bit:nth-child(5) { margin-inline-start: 0.3rem; }
  .pc-byte__label { font-size: 0.6875rem; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
  .pc-bit {
    inline-size: 1.7rem; block-size: 2rem; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9375rem; color: var(--fg-muted); cursor: pointer; user-select: none;
  }
  .pc-bit:hover { border-color: var(--brand); }
  .pc-bit.is-on { background: var(--brand); border-color: var(--brand); color: var(--brand-text); font-weight: 600; }
  .pc-bit:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

  /* === bespoke App: xpath-tester（Pages/Apps/XpathTester/）===
     XPath 表达式 + XML textarea + 输出（节点集列表 / 标量值卡片）。 */
  .xpath-app { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 56rem; }
  .xpath-app__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .xpath-app__title { margin: 0; font-size: 1.25rem; }
  .xpath-app__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .xpath-app__form { display: flex; flex-direction: column; gap: 0.375rem; }
  .xpath-app__label { font-size: 0.875rem; color: var(--fg-muted); }
  .xpath-app__expr {
    inline-size: 100%; padding: 0.625rem 0.875rem; margin-block-end: 0.5rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9375rem;
  }
  .xpath-app__expr:focus { outline: 0; border-color: var(--brand); }
  .xpath-app__xml {
    inline-size: 100%; padding: 0.625rem 0.875rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; resize: vertical;
  }
  .xpath-app__xml:focus { outline: 0; border-color: var(--brand); }
  .xpath-app__empty { color: var(--fg-muted); margin: 0; }
  .xpath-app__error { color: var(--color-error); margin: 0; font-size: 0.875rem; }

  .xpath-result { display: flex; flex-direction: column; gap: 0.625rem; }
  .xpath-result__count { margin: 0; font-size: 0.8125rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; }
  .xpath-result__note {
    margin: 0; padding: 0.5rem 0.75rem; color: var(--fg-muted); font-size: 0.75rem;
    background: var(--color-warning-bg); border-inline-start: 3px solid var(--color-warning); border-radius: 4px;
  }
  .xpath-nodes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
  .xpath-node, .xpath-scalar {
    display: flex; flex-direction: column; gap: 0.4rem;
    padding: 0.625rem 0.75rem; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .xpath-node__head { display: flex; align-items: center; gap: 0.5rem; }
  .xpath-node__type {
    padding: 0.1rem 0.5rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
    background: light-dark(#e7e9f7, #2a2f45); color: var(--brand);
  }
  .xpath-node__name {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; color: var(--fg-muted);
  }
  .xpath-node__copy {
    margin-inline-start: auto; padding: 0.2rem 0.6rem; font-size: 0.75rem;
    color: var(--fg-muted); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer;
  }
  .xpath-node__copy:hover { color: var(--fg); border-color: var(--brand); }
  .xpath-node__copy[aria-pressed="true"] { color: var(--color-success); border-color: var(--color-success); }
  .xpath-node__markup {
    margin: 0; padding: 0.5rem 0.625rem; overflow-x: auto;
    background: light-dark(#f6f7fb, #15161c); border: 1px solid var(--border); border-radius: 4px;
  }
  .xpath-node__markup code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem; color: var(--fg); white-space: pre-wrap; word-break: break-word;
  }

  /* === bespoke App: cert-decoder（Pages/Apps/CertDecoder/）===
     贴 PEM textarea + 输出（有效性徽章 / 分组字段 / SAN / 指纹 + 复制）。 */
  .cert-app { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 52rem; }
  .cert-app__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .cert-app__title { margin: 0; font-size: 1.25rem; }
  .cert-app__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .cert-app__form { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
  .cert-app__label { font-size: 0.875rem; color: var(--fg-muted); }
  .cert-app__input {
    inline-size: 100%; padding: 0.625rem 0.875rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem; resize: vertical;
  }
  .cert-app__input:focus { outline: 0; border-color: var(--brand); }
  .cert-app__example {
    padding: 0.3rem 0.7rem; font-size: 0.8125rem;
    color: var(--fg-muted); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer;
  }
  .cert-app__example:hover { color: var(--fg); border-color: var(--brand); }
  .cert-app__empty { color: var(--fg-muted); margin: 0; }
  .cert-app__error { color: var(--color-error); margin: 0; font-size: 0.875rem; }

  .cert-result { display: flex; flex-direction: column; gap: 0.875rem; }
  .cert-result__head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
  .cert-result__kind { font-weight: 600; font-size: 1rem; }
  .cert-result__band {
    padding: 0.2rem 0.7rem; border-radius: 9999px; font-size: 0.8125rem; font-weight: 600;
  }
  .cert-result__band--valid { background: light-dark(#d6f0d8, #163322); color: var(--color-success); }
  .cert-result__band--expired { background: light-dark(#fde0e0, #5a1d22); color: var(--color-error); }
  .cert-result__band--pending { background: light-dark(#fff4cc, #3a3110); color: light-dark(#a08000, #ffe07b); }
  .cert-result__band--neutral { background: var(--border); color: var(--fg-muted); }

  .cert-result__fields { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1rem; }
  .cert-field { display: contents; }
  .cert-field--wide .cert-field__value { min-inline-size: 0; }
  .cert-field__label { margin: 0; color: var(--fg-muted); font-size: 0.8125rem; }
  .cert-field__value { margin: 0; font-size: 0.875rem; word-break: break-word; }
  @media (width < 34rem) {
    .cert-result__fields { grid-template-columns: 1fr; gap: 0.15rem 0; }
    .cert-field { display: block; margin-block-end: 0.5rem; }
  }

  .cert-san, .cert-usage { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem; }
  .cert-san__item, .cert-usage__item {
    padding: 0.1rem 0.5rem; border-radius: 4px; font-size: 0.8125rem;
    background: var(--surface); border: 1px solid var(--border);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }
  .cert-usage__item { font-family: inherit; }

  .cert-result__prints { display: flex; flex-direction: column; gap: 0.4rem; }
  .cert-print { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
  .cert-print__label { min-inline-size: 11rem; color: var(--fg-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
  .cert-print__hex {
    flex: 1 1 16rem; min-inline-size: 0;
    padding: 0.25rem 0.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.75rem; word-break: break-all;
  }
  .cert-print__copy {
    inline-size: 1.9rem; block-size: 1.9rem; flex: none;
    color: var(--fg-muted); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer;
  }
  .cert-print__copy:hover { color: var(--fg); border-color: var(--brand); }

  /* === bespoke App: mac-lookup（Pages/Apps/MacLookup/）===
     MAC 输入 + 输出（厂商高亮 + 字段表）。 */
  .mac-app { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 40rem; }
  .mac-app__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .mac-app__title { margin: 0; font-size: 1.25rem; }
  .mac-app__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .mac-app__form { display: flex; flex-direction: column; gap: 0.375rem; }
  .mac-app__label { font-size: 0.875rem; color: var(--fg-muted); }
  .mac-app__input {
    inline-size: 100%; padding: 0.625rem 0.875rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9375rem;
  }
  .mac-app__input:focus { outline: 0; border-color: var(--brand); }
  .mac-app__empty { color: var(--fg-muted); margin: 0; }
  .mac-app__error { color: var(--color-error); margin: 0; font-size: 0.875rem; }
  .mac-result { display: flex; flex-direction: column; gap: 0.875rem; }
  .mac-result__vendor {
    display: flex; align-items: baseline; gap: 0.625rem; flex-wrap: wrap;
    padding: 0.5rem 0.75rem; border-radius: var(--radius);
    background: light-dark(#eef3ff, #1b2438); border: 1px solid var(--border);
  }
  .mac-result__vendor-label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-muted); }
  .mac-result__vendor-name { font-weight: 600; font-size: 1rem; }
  .mac-result__fields { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1rem; }
  .mac-field { display: contents; }
  .mac-field__label { margin: 0; color: var(--fg-muted); font-size: 0.8125rem; }
  .mac-field__value { margin: 0; font-size: 0.875rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-break: break-word; }
  @media (width < 30rem) {
    .mac-result__fields { grid-template-columns: 1fr; gap: 0.15rem 0; }
    .mac-field { display: block; margin-block-end: 0.5rem; }
  }

  /* === bespoke App: totp-generator（Pages/Apps/TotpGenerator/）===
     Base32 secret + 算法/位数/步长 → 当前码（大字）+ 倒计时环（自动刷新）+ 前后码。 */
  .totp-app { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 38rem; }
  .totp-app__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .totp-app__title { margin: 0; font-size: 1.25rem; }
  .totp-app__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .totp-app__form { display: flex; flex-direction: column; gap: 0.625rem; }
  .totp-app__label { font-size: 0.875rem; color: var(--fg-muted); }
  .totp-app__input {
    inline-size: 100%; padding: 0.625rem 0.875rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9375rem; letter-spacing: 0.05em;
  }
  .totp-app__input:focus { outline: 0; border-color: var(--brand); }
  .totp-app__opts { display: flex; flex-wrap: wrap; gap: 0.75rem; }
  .totp-opt { display: flex; flex-direction: column; gap: 0.25rem; }
  .totp-opt__label { font-size: 0.75rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; }
  .totp-opt__select {
    padding: 0.4rem 0.6rem; background: var(--surface); color: var(--fg);
    border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.875rem;
  }
  .totp-opt__select:focus { outline: 0; border-color: var(--brand); }
  .totp-app__empty { color: var(--fg-muted); margin: 0; }
  .totp-app__error { color: var(--color-error); margin: 0; font-size: 0.875rem; }

  .totp-result { display: flex; flex-direction: column; gap: 0.5rem; margin-block-start: 0.5rem; }
  .totp-result__code-row { display: flex; align-items: center; gap: 1rem; }
  .totp-result__code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 2.25rem; font-weight: 600; letter-spacing: 0.15em;
    font-variant-numeric: tabular-nums; color: var(--brand);
  }
  .totp-result__timer { position: relative; inline-size: 2.75rem; block-size: 2.75rem; flex: none; }
  .totp-ring { inline-size: 100%; block-size: 100%; transform: rotate(-90deg); }
  .totp-ring__track { fill: none; stroke: var(--border); stroke-width: 3; }
  .totp-ring__fill {
    fill: none; stroke: var(--brand); stroke-width: 3; stroke-linecap: round;
    stroke-dasharray: 100.53; transition: stroke-dashoffset 1s linear;
  }
  .totp-result__count {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-size: 0.8125rem; font-variant-numeric: tabular-nums; color: var(--fg-muted);
  }
  .totp-result__expires { margin: 0; font-size: 0.8125rem; color: var(--fg-muted); }
  .totp-result__adjacent { display: flex; gap: 1.5rem; margin: 0.5rem 0 0; }
  .totp-adj { margin: 0; display: flex; flex-direction: column; gap: 0.15rem; }
  .totp-adj__label { font-size: 0.6875rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; }
  .totp-adj__value {
    margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1rem; letter-spacing: 0.1em; color: var(--fg-muted); font-variant-numeric: tabular-nums;
  }

  /* === bespoke App: chmod-calculator（Pages/Apps/ChmodCalculator/）===
     输八进制/符号串 → 两种表示卡 + rwx 网格 + 特殊位芯片。 */
  .chmod-app { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 34rem; }
  .chmod-app__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .chmod-app__title { margin: 0; font-size: 1.25rem; }
  .chmod-app__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .chmod-app__form { display: flex; flex-direction: column; gap: 0.375rem; }
  .chmod-app__label { font-size: 0.875rem; color: var(--fg-muted); }
  .chmod-app__input {
    inline-size: 100%; padding: 0.625rem 0.875rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9375rem; letter-spacing: 0.05em;
  }
  .chmod-app__input:focus { outline: 0; border-color: var(--brand); }
  .chmod-app__empty { color: var(--fg-muted); margin: 0; }
  .chmod-app__error { color: var(--color-error); margin: 0; font-size: 0.875rem; }

  .chmod-result { display: flex; flex-direction: column; gap: 1rem; }
  .chmod-result__forms { display: flex; gap: 0.75rem; flex-wrap: wrap; }
  .chmod-form-card {
    flex: 1 1 9rem; display: flex; flex-direction: column; gap: 0.2rem;
    padding: 0.625rem 0.875rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  }
  .chmod-form-card__label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-muted); }
  .chmod-form-card__value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.375rem; font-weight: 600; letter-spacing: 0.08em; color: var(--brand);
  }

  .chmod-grid { border-collapse: collapse; font-size: 0.875rem; }
  .chmod-grid th, .chmod-grid td { padding: 0.4rem 0.9rem; text-align: center; }
  .chmod-grid thead th { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-muted); font-weight: 500; }
  .chmod-grid tbody th { text-align: start; color: var(--fg-muted); font-weight: 500; }
  .chmod-cell { font-weight: 600; }
  .chmod-cell--on { color: var(--color-success); }
  .chmod-cell--off { color: var(--border); }

  .chmod-special { margin: 0; padding: 0; list-style: none; display: flex; gap: 0.4rem; flex-wrap: wrap; }
  .chmod-special__chip {
    padding: 0.15rem 0.55rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: var(--color-warning-bg); color: var(--color-warning);
  }

  /* === bespoke App: datetime-calculator（Pages/Apps/DatetimeCalculator/）===
     双模式（Difference / Add-Subtract）；diff 输出拆解网格 + 总量；add 输出结果 + 星期。 */
  .dt-app { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 42rem; }
  .dt-app__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .dt-app__title { margin: 0; font-size: 1.25rem; }
  .dt-app__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .dt-app__form { display: flex; flex-direction: column; gap: 0.875rem; }
  .dt-app__modes { display: inline-flex; gap: 0.25rem; padding: 0.25rem; align-self: flex-start;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
  .dt-mode { display: inline-flex; align-items: center; padding: 0.35rem 0.85rem; border-radius: var(--radius);
    font-size: 0.875rem; color: var(--fg-muted); cursor: pointer; user-select: none; }
  .dt-mode.is-active { background: var(--brand); color: var(--brand-text); }
  .dt-mode:has(:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
  .dt-mode__input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
  .dt-app__fields { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; }
  .dt-field { display: flex; flex-direction: column; gap: 0.25rem; }
  .dt-field__label { font-size: 0.8125rem; color: var(--fg-muted); }
  .dt-field__input {
    padding: 0.5rem 0.75rem; background: var(--surface); color: var(--fg);
    border: 1px solid var(--border); border-radius: var(--radius); font: inherit; font-size: 0.9375rem;
    max-inline-size: 18rem;
  }
  .dt-field__input:focus { outline: 0; border-color: var(--brand); }
  .dt-app__durations { display: grid; grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); gap: 0.5rem; }
  .dt-dur { display: flex; flex-direction: column; gap: 0.2rem; min-inline-size: 0; }
  .dt-dur__label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-muted); }
  .dt-dur__input {
    inline-size: 100%; padding: 0.4rem 0.55rem; background: var(--surface); color: var(--fg);
    border: 1px solid var(--border); border-radius: var(--radius); font: inherit; font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
  }
  .dt-dur__input:focus { outline: 0; border-color: var(--brand); }
  .dt-app__empty { color: var(--fg-muted); margin: 0; }
  .dt-app__error { color: var(--color-error); margin: 0; font-size: 0.875rem; }

  .dt-result { display: flex; flex-direction: column; gap: 1rem; }
  .dt-result__breakdown { margin: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5rem; }
  @media (width < 34rem) { .dt-result__breakdown { grid-template-columns: repeat(3, 1fr); } }
  .dt-stat { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
    padding: 0.5rem 0.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
  .dt-stat__value { margin: 0; font-size: 1.375rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--brand); }
  .dt-stat__label { margin: 0; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-muted); }
  .dt-result__totals { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; }
  .dt-total { display: contents; }
  .dt-total__label { margin: 0; color: var(--fg-muted); font-size: 0.8125rem; }
  .dt-total__value { margin: 0; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
  .dt-result__primary { display: flex; flex-direction: column; gap: 0.25rem; }
  .dt-result__label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-muted); }
  .dt-result__value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.5rem; font-weight: 600; color: var(--brand);
  }
  .dt-result__weekday { margin: 0; font-size: 0.9375rem; color: var(--fg-muted); }

  /* === bespoke App: unit-converter（Pages/Apps/UnitConverter/）===
     值 + 源单位（optgroup 下拉）→ 同类别全部单位结果行（源高亮 + 逐行复制）。 */
  .unit-app { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 34rem; }
  .unit-app__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .unit-app__title { margin: 0; font-size: 1.25rem; }
  .unit-app__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .unit-app__form { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: flex-end; }
  .unit-field { display: flex; flex-direction: column; gap: 0.25rem; }
  .unit-field__label { font-size: 0.8125rem; color: var(--fg-muted); }
  .unit-field__input, .unit-field__select {
    padding: 0.5rem 0.75rem; background: var(--surface); color: var(--fg);
    border: 1px solid var(--border); border-radius: var(--radius); font: inherit; font-size: 0.9375rem;
  }
  .unit-field__input { inline-size: 9rem; font-variant-numeric: tabular-nums; }
  .unit-field__select { min-inline-size: 13rem; }
  .unit-field__input:focus, .unit-field__select:focus { outline: 0; border-color: var(--brand); }
  .unit-app__empty { color: var(--fg-muted); margin: 0; }
  .unit-app__error { color: var(--color-error); margin: 0; font-size: 0.875rem; }

  .unit-result { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
  .unit-row {
    display: grid; grid-template-columns: 1fr auto minmax(7rem, auto) auto; align-items: center; gap: 0.6rem;
    padding: 0.45rem 0.5rem; border-block-end: 1px solid var(--border);
  }
  .unit-row--source { background: light-dark(#eef3ff, #1b2438); border-radius: var(--radius); border-block-end-color: transparent; }
  .unit-row__name { font-size: 0.875rem; min-inline-size: 0; }
  .unit-row__symbol { font-size: 0.8125rem; color: var(--fg-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
  .unit-row__value {
    text-align: end; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9375rem; font-variant-numeric: tabular-nums; word-break: break-all;
  }
  .unit-row--source .unit-row__value { color: var(--brand); font-weight: 600; }
  .unit-row__copy {
    inline-size: 1.7rem; block-size: 1.7rem; flex: none;
    color: var(--fg-muted); background: transparent; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer;
  }
  .unit-row__copy:hover { color: var(--fg); border-color: var(--border); }

  /* === bespoke App: barcode-generator（Pages/Apps/BarcodeGenerator/）===
     码制 select + 数据输入 + 选项滑块 → 服务端渲染 SVG 条码（白底舞台 + 复制/下载）。 */
  .bcg { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 60rem; }
  .bcg__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .bcg__title { margin: 0; font-size: 1.25rem; }
  .bcg__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }

  .bcg-form { display: flex; flex-direction: column; gap: 0.875rem; margin: 0; }
  .bcg-controls { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: flex-end; }
  .bcg-field { display: flex; flex-direction: column; gap: 0.25rem; min-inline-size: 0; }
  .bcg-field--grow { flex: 1 1 16rem; }
  .bcg-field__label { font-size: 0.6875rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; }
  .bcg-select, .bcg-input {
    inline-size: 100%; padding: 0.5rem 0.75rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    font-size: 0.9375rem; color: var(--fg);
  }
  .bcg-input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
  .bcg-select:focus, .bcg-input:focus { outline: 0; border-color: var(--brand); }

  .bcg-hint { margin: 0; min-block-size: 1.1em; font-size: 0.8125rem; color: var(--fg-muted); }

  .bcg-options { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; }
  .bcg-slider { display: flex; flex-direction: column; gap: 0.25rem; min-inline-size: 12rem; }
  .bcg-slider__label { font-size: 0.6875rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; }
  .bcg-slider__row { display: flex; align-items: center; gap: 0.625rem; }
  .bcg-slider__range { flex: 1 1 auto; min-inline-size: 0; accent-color: var(--brand); }
  .bcg-slider__value {
    flex: 0 0 auto; min-inline-size: 3rem; text-align: end;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem; font-variant-numeric: tabular-nums; color: var(--fg);
  }
  .bcg-check { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; cursor: pointer; }
  .bcg-check input[type="checkbox"] { inline-size: auto; margin: 0; flex: none; accent-color: var(--brand); }

  .bcg-result { display: flex; flex-direction: column; gap: 0.75rem; }
  /* 白底舞台 —— 暗色主题下黑条仍可扫（同 qr-coder）；宽码横向滚动。 */
  .bcg-stage {
    display: flex; align-items: center; justify-content: center;
    min-block-size: 9rem; padding: 1.25rem; overflow-x: auto;
    background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius);
  }
  .bcg-stage svg { max-inline-size: 100%; height: auto; }
  .bcg-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .bcg-action {
    display: inline-flex; align-items: center; padding: 0.45rem 0.9rem; font-size: 0.8125rem; cursor: pointer;
    color: var(--brand-text); background: var(--brand); border: 1px solid var(--brand);
    border-radius: var(--radius); text-decoration: none;
  }
  .bcg-action:hover { filter: brightness(1.05); }
  .bcg-action--ghost { color: var(--fg-muted); background: var(--surface); border-color: var(--border); }
  .bcg-action--ghost:hover { color: var(--fg); border-color: var(--brand); filter: none; }
  .bcg-empty {
    margin: 0; padding: 1.5rem; text-align: center; color: var(--fg-muted); font-size: 0.9375rem;
    border: 1px dashed var(--border); border-radius: var(--radius);
  }
  .bcg-error { margin: 0; color: var(--color-error); font-size: 0.875rem; }

  /* === bespoke App: scientific-calculator（Pages/Apps/ScientificCalculator/）===
     表达式输入 + 角度/弧度分段开关 → 服务端求值（大号数值 + 复制）+ 函数参考 details。 */
  .sci { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 60rem; }
  .sci__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .sci__title { margin: 0; font-size: 1.25rem; }
  .sci__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .sci__form { display: flex; flex-direction: column; gap: 0.625rem; }
  .sci__label { font-size: 0.875rem; color: var(--fg-muted); }
  .sci__input {
    inline-size: 100%; padding: 0.6rem 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1rem;
    color: var(--fg); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .sci__input:focus { outline: 0; border-color: var(--brand); }
  .sci__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }

  /* 角度/弧度分段切换（同 pc 位宽分段风格） */
  .sci-angle { display: inline-flex; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
  .sci-angle__opt { display: inline-flex; position: relative; }
  .sci-angle__opt input { position: absolute; opacity: 0; pointer-events: none; }
  .sci-angle__opt span {
    padding: 0.4rem 0.9rem; font-size: 0.8125rem; color: var(--fg-muted); cursor: pointer;
    border-inline-start: 1px solid var(--border);
  }
  .sci-angle__opt:first-child span { border-inline-start: 0; }
  .sci-angle__opt input:checked + span { color: var(--brand-text); background: var(--brand); }

  .sci__output { min-block-size: 3rem; }
  .sci__empty { color: var(--fg-muted); margin: 0; }
  .sci__error { color: var(--color-error); margin: 0; font-size: 0.875rem; }
  .sci-result { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
  .sci-result__label { font-size: 0.75rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; }
  .sci-result__value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.6rem; font-weight: 600; color: var(--brand);
    font-variant-numeric: tabular-nums; word-break: break-all;
  }
  .sci-result__copy {
    padding: 0.3rem 0.7rem; font-size: 0.75rem; cursor: pointer;
    color: var(--fg-muted); background: transparent; border: 1px solid var(--border); border-radius: var(--radius);
  }
  .sci-result__copy:hover { color: var(--fg); border-color: var(--brand); }
  .sci-result__copy[aria-pressed="true"] { color: var(--color-success); border-color: var(--color-success); }
  .sci-ref { font-size: 0.8125rem; color: var(--fg-muted); }
  .sci-ref__summary { cursor: pointer; }
  .sci-ref__body { margin-block-start: 0.5rem; display: flex; flex-direction: column; gap: 0.35rem; }
  .sci-ref__body p { margin: 0; }
  .sci-ref__body code { word-break: break-word; }

  /* === bespoke App: statistics-calculator（Pages/Apps/StatisticsCalculator/）===
     数字列表 textarea → 服务端描述统计（统计网格）+ 直方图（CSS 条）。 */
  .stat { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 60rem; }
  .stat__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .stat__title { margin: 0; font-size: 1.25rem; }
  .stat__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .stat__form { display: flex; flex-direction: column; gap: 0.375rem; }
  .stat__label { font-size: 0.875rem; color: var(--fg-muted); }
  .stat__input {
    inline-size: 100%; padding: 0.6rem 0.75rem; resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9375rem;
    color: var(--fg); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .stat__input:focus { outline: 0; border-color: var(--brand); }
  .stat__empty { color: var(--fg-muted); margin: 0; }
  .stat__error { color: var(--color-error); margin: 0; font-size: 0.875rem; }
  .stat-result { display: flex; flex-direction: column; gap: 1.25rem; }
  .stat-grid {
    margin: 0; display: grid; gap: 0.5rem;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  }
  .stat-cell {
    display: flex; flex-direction: column; gap: 0.15rem; margin: 0;
    padding: 0.5rem 0.6rem; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .stat-cell__label { font-size: 0.7rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; }
  .stat-cell__value {
    margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1rem; font-weight: 600; color: var(--fg);
    font-variant-numeric: tabular-nums; word-break: break-all;
  }
  .stat-hist { display: flex; flex-direction: column; gap: 0.3rem; }
  .stat-hist__title { font-size: 0.75rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; }
  .stat-bar-row { display: grid; grid-template-columns: 9rem 1fr 2.5rem; align-items: center; gap: 0.6rem; font-size: 0.8125rem; }
  .stat-bar-row__range { color: var(--fg-muted); font-variant-numeric: tabular-nums; text-align: end; white-space: nowrap; }
  .stat-bar { display: block; block-size: 0.9rem; background: var(--surface-hover); border-radius: var(--radius); overflow: hidden; }
  .stat-bar__fill { display: block; block-size: 100%; background: var(--brand); border-radius: var(--radius); }
  .stat-bar-row__count { color: var(--fg); font-variant-numeric: tabular-nums; }

  /* === bespoke App: finance-calculator（Pages/Apps/FinanceCalculator/）===
     4 模式 tab（贷款/复利/回报/分摊），各模式数字字段 form → 服务端计算（结果卡 + 分期表）。 */
  .fin { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 60rem; }
  .fin__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .fin__title { margin: 0; font-size: 1.25rem; }
  .fin__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .fin-modes { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .fin-mode { display: inline-flex; position: relative; }
  .fin-mode__input { position: absolute; opacity: 0; pointer-events: none; }
  .fin-mode span {
    padding: 0.4rem 0.85rem; font-size: 0.8125rem; cursor: pointer;
    color: var(--fg-muted); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .fin-mode.is-active span { color: var(--brand-text); background: var(--brand); border-color: var(--brand); }
  .fin-panel { display: flex; flex-direction: column; gap: 1rem; }
  .fin-form { margin: 0; }
  .fin-fields { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
  .fin-field { display: flex; flex-direction: column; gap: 0.25rem; }
  .fin-field__label { font-size: 0.8125rem; color: var(--fg-muted); }
  .fin-field__input {
    padding: 0.5rem 0.6rem; font-size: 0.9375rem;
    color: var(--fg); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
    font-variant-numeric: tabular-nums;
  }
  .fin-field__input:focus { outline: 0; border-color: var(--brand); }
  .fin-result { display: flex; flex-direction: column; gap: 1rem; }
  .fin-stats { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
  .fin-stat {
    display: flex; flex-direction: column; gap: 0.2rem;
    padding: 0.6rem 0.7rem; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .fin-stat--primary { border-color: var(--brand); }
  .fin-stat__label { font-size: 0.72rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; }
  .fin-stat__value { font-size: 1.1rem; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; word-break: break-all; }
  .fin-stat--primary .fin-stat__value { color: var(--brand); font-size: 1.35rem; }
  .fin-schedule { display: flex; flex-direction: column; gap: 0.4rem; }
  .fin-schedule__title { font-size: 0.75rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; }
  .fin-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
  .fin-table { inline-size: 100%; border-collapse: collapse; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
  .fin-table th, .fin-table td { padding: 0.4rem 0.65rem; text-align: end; white-space: nowrap; }
  .fin-table th:first-child, .fin-table td:first-child { text-align: start; }
  .fin-table thead th { color: var(--fg-muted); font-weight: 600; border-block-end: 1px solid var(--border); }
  .fin-table tbody tr:nth-child(even) { background: var(--surface-hover); }
  .fin-error { margin: 0; color: var(--color-error); font-size: 0.875rem; }

  /* === bespoke App: health-calculator（Pages/Apps/HealthCalculator/）===
     5 模式 tab（BMI/BMR·TDEE/体脂/理想体重/配速），各模式 form（数字/选择）→ 服务端计算（结果卡 + 分类徽章）。 */
  .hc { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 60rem; }
  .hc__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .hc__title { margin: 0; font-size: 1.25rem; }
  .hc__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .hc-modes { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .hc-mode { display: inline-flex; position: relative; }
  .hc-mode__input { position: absolute; opacity: 0; pointer-events: none; }
  .hc-mode span {
    padding: 0.4rem 0.85rem; font-size: 0.8125rem; cursor: pointer;
    color: var(--fg-muted); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .hc-mode.is-active span { color: var(--brand-text); background: var(--brand); border-color: var(--brand); }
  .hc-panel { display: flex; flex-direction: column; gap: 1rem; }
  .hc-form { margin: 0; }
  .hc-fields { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
  .hc-field { display: flex; flex-direction: column; gap: 0.25rem; }
  .hc-field__label { font-size: 0.8125rem; color: var(--fg-muted); }
  .hc-field__input {
    padding: 0.5rem 0.6rem; font-size: 0.9375rem;
    color: var(--fg); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
    font-variant-numeric: tabular-nums;
  }
  .hc-field__input:focus { outline: 0; border-color: var(--brand); }
  .hc-result { display: flex; flex-direction: column; gap: 1rem; }
  .hc-stats { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
  .hc-stat {
    display: flex; flex-direction: column; gap: 0.2rem;
    padding: 0.6rem 0.7rem; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .hc-stat--primary { border-color: var(--brand); }
  .hc-stat__label { font-size: 0.72rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; }
  .hc-stat__value { font-size: 1.1rem; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; word-break: break-all; }
  .hc-stat--primary .hc-stat__value { color: var(--brand); font-size: 1.35rem; }
  .hc-unit { font-size: 0.75rem; font-weight: 400; color: var(--fg-muted); }
  .hc-badge { display: inline-block; padding: 0.15rem 0.5rem; font-size: 0.8125rem; font-weight: 600; color: var(--brand-text); background: var(--brand); border-radius: var(--radius); }
  .hc-error { margin: 0; color: var(--color-error); font-size: 0.875rem; }

  /* === bespoke App: percentage-calculator（Pages/Apps/PercentageCalculator/）===
     4 模式 tab（% of / X 是 Y 几% / 变化率 / 折扣），句式内联输入或字段 form → 服务端计算。 */
  .pct { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 60rem; }
  .pct__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .pct__title { margin: 0; font-size: 1.25rem; }
  .pct__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .pct-modes { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .pct-mode { display: inline-flex; position: relative; }
  .pct-mode__input { position: absolute; opacity: 0; pointer-events: none; }
  .pct-mode span {
    padding: 0.4rem 0.85rem; font-size: 0.8125rem; cursor: pointer;
    color: var(--fg-muted); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .pct-mode.is-active span { color: var(--brand-text); background: var(--brand); border-color: var(--brand); }
  .pct-panel { display: flex; flex-direction: column; gap: 1rem; }
  .pct-form { margin: 0; }
  .pct-sentence { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.95rem; color: var(--fg); }
  .pct-inline {
    inline-size: 6rem; padding: 0.4rem 0.5rem; font-size: 0.95rem;
    color: var(--fg); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); font-variant-numeric: tabular-nums;
  }
  .pct-inline:focus { outline: 0; border-color: var(--brand); }
  .pct-fields { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
  .pct-field { display: flex; flex-direction: column; gap: 0.25rem; }
  .pct-field__label { font-size: 0.8125rem; color: var(--fg-muted); }
  .pct-field__input {
    padding: 0.5rem 0.6rem; font-size: 0.9375rem;
    color: var(--fg); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); font-variant-numeric: tabular-nums;
  }
  .pct-field__input:focus { outline: 0; border-color: var(--brand); }
  .pct-result { display: flex; flex-direction: column; gap: 0.6rem; }
  .pct-result__label { font-size: 0.72rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; }
  .pct-result__value { font-size: 1.6rem; font-weight: 600; color: var(--brand); font-variant-numeric: tabular-nums; word-break: break-all; }
  .pct-stats { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
  .pct-stat {
    display: flex; flex-direction: column; gap: 0.2rem;
    padding: 0.6rem 0.7rem; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .pct-stat--primary { border-color: var(--brand); }
  .pct-stat__label { font-size: 0.72rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; }
  .pct-stat__value { font-size: 1.2rem; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; word-break: break-all; }
  .pct-stat--primary .pct-stat__value { color: var(--brand); font-size: 1.35rem; }
  .pct-unit { font-size: 0.8rem; font-weight: 400; color: var(--fg-muted); }
  .pct-error { margin: 0; color: var(--color-error); font-size: 0.875rem; }

  /* === bespoke App: roman-numerals（Pages/Apps/RomanNumerals/）===
     方向分段开关 + 单输入 → 服务端转换（结果 + 复制）。 */
  .rom { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 48rem; }
  .rom__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .rom__title { margin: 0; font-size: 1.25rem; }
  .rom__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .rom__form { display: flex; flex-direction: column; gap: 0.625rem; }
  .rom__controls { display: flex; flex-wrap: wrap; gap: 0.75rem; }
  .rom-dir { display: inline-flex; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
  .rom-dir__opt { display: inline-flex; position: relative; }
  .rom-dir__opt input { position: absolute; opacity: 0; pointer-events: none; }
  .rom-dir__opt span {
    padding: 0.4rem 0.9rem; font-size: 0.8125rem; color: var(--fg-muted); cursor: pointer;
    border-inline-start: 1px solid var(--border);
  }
  .rom-dir__opt:first-child span { border-inline-start: 0; }
  .rom-dir__opt input:checked + span { color: var(--brand-text); background: var(--brand); }
  .rom__label { font-size: 0.875rem; color: var(--fg-muted); }
  .rom__input {
    inline-size: 100%; padding: 0.6rem 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1rem;
    color: var(--fg); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .rom__input:focus { outline: 0; border-color: var(--brand); }
  .rom__output { min-block-size: 3rem; }
  .rom__empty { color: var(--fg-muted); margin: 0; }
  .rom__error { color: var(--color-error); margin: 0; font-size: 0.875rem; }
  .rom-result { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
  .rom-result__label { font-size: 0.75rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; }
  .rom-result__value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.6rem; font-weight: 600; color: var(--brand); letter-spacing: 0.05em; word-break: break-all;
  }
  .rom-result__copy {
    padding: 0.3rem 0.7rem; font-size: 0.75rem; cursor: pointer;
    color: var(--fg-muted); background: transparent; border: 1px solid var(--border); border-radius: var(--radius);
  }
  .rom-result__copy:hover { color: var(--fg); border-color: var(--brand); }
  .rom-result__copy[aria-pressed="true"] { color: var(--color-success); border-color: var(--color-success); }

  /* === bespoke App: aspect-ratio（Pages/Apps/AspectRatio/）===
     2 模式 tab（from size / resize），各模式数字字段 form → 服务端计算（结果卡）。 */
  .ar { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 52rem; }
  .ar__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .ar__title { margin: 0; font-size: 1.25rem; }
  .ar__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .ar-modes { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .ar-mode { display: inline-flex; position: relative; }
  .ar-mode__input { position: absolute; opacity: 0; pointer-events: none; }
  .ar-mode span {
    padding: 0.4rem 0.85rem; font-size: 0.8125rem; cursor: pointer;
    color: var(--fg-muted); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .ar-mode.is-active span { color: var(--brand-text); background: var(--brand); border-color: var(--brand); }
  .ar-panel { display: flex; flex-direction: column; gap: 1rem; }
  .ar-form { margin: 0; }
  .ar-fields { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
  .ar-field { display: flex; flex-direction: column; gap: 0.25rem; }
  .ar-field__label { font-size: 0.8125rem; color: var(--fg-muted); }
  .ar-field__input {
    padding: 0.5rem 0.6rem; font-size: 0.9375rem;
    color: var(--fg); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); font-variant-numeric: tabular-nums;
  }
  .ar-field__input:focus { outline: 0; border-color: var(--brand); }
  .ar-result { display: flex; flex-direction: column; gap: 1rem; }
  .ar-stats { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
  .ar-stat {
    display: flex; flex-direction: column; gap: 0.2rem;
    padding: 0.6rem 0.7rem; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .ar-stat--primary { border-color: var(--brand); }
  .ar-stat__label { font-size: 0.72rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; }
  .ar-stat__value { font-size: 1.35rem; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; word-break: break-all; }
  .ar-stat--primary .ar-stat__value { color: var(--brand); }
  .ar-unit { font-size: 0.8rem; font-weight: 400; color: var(--fg-muted); }
  .ar-error { margin: 0; color: var(--color-error); font-size: 0.875rem; }

  /* === bespoke App: word-counter（Pages/Apps/WordCounter/）===
     文本 textarea → 服务端统计（计数网格 + 阅读/朗读时长 + 关键词词频条）。 */
  .wc { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 60rem; }
  .wc__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .wc__title { margin: 0; font-size: 1.25rem; }
  .wc__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .wc__form { display: flex; flex-direction: column; gap: 0.375rem; }
  .wc__label { font-size: 0.875rem; color: var(--fg-muted); }
  .wc__input {
    inline-size: 100%; padding: 0.6rem 0.75rem; resize: vertical; line-height: 1.5; font-size: 0.9375rem;
    color: var(--fg); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .wc__input:focus { outline: 0; border-color: var(--brand); }
  .wc__empty { color: var(--fg-muted); margin: 0; }
  .wc__error { color: var(--color-error); margin: 0; font-size: 0.875rem; }
  .wc-result { display: flex; flex-direction: column; gap: 1.25rem; }
  .wc-grid { margin: 0; display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
  .wc-cell {
    display: flex; flex-direction: column; gap: 0.15rem; margin: 0;
    padding: 0.5rem 0.6rem; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .wc-cell--primary { border-color: var(--brand); }
  .wc-cell__label { font-size: 0.7rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; }
  .wc-cell__value { margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
  .wc-cell--primary .wc-cell__value { color: var(--brand); font-size: 1.4rem; }
  .wc-times { display: flex; flex-wrap: wrap; gap: 0.75rem; }
  .wc-time { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.5rem 0.9rem; background: var(--surface-hover); border-radius: var(--radius); }
  .wc-time__label { font-size: 0.7rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; }
  .wc-time__value { font-size: 1.1rem; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
  .wc-keywords { display: flex; flex-direction: column; gap: 0.4rem; }
  .wc-keywords__title { font-size: 0.75rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; }
  .wc-keywords__empty { margin: 0; color: var(--fg-muted); font-size: 0.875rem; }
  .wc-kw-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
  .wc-kw { display: grid; grid-template-columns: 8rem 1fr 2.5rem; align-items: center; gap: 0.6rem; font-size: 0.8125rem; }
  .wc-kw__word { color: var(--fg); word-break: break-all; }
  .wc-kw__bar { display: block; block-size: 0.8rem; background: var(--surface-hover); border-radius: var(--radius); overflow: hidden; }
  .wc-kw__fill { display: block; block-size: 100%; background: var(--brand); border-radius: var(--radius); }
  .wc-kw__count { color: var(--fg); font-variant-numeric: tabular-nums; text-align: end; }

  /* === bespoke App: randomizer（Pages/Apps/Randomizer/）===
     4 模式 tab（coin/dice/pick/shuffle），各模式 form + 「再来一次」按钮 → 服务端随机（每次新结果）。 */
  .rnd { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 52rem; }
  .rnd__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .rnd__title { margin: 0; font-size: 1.25rem; }
  .rnd__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .rnd-modes { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .rnd-mode { display: inline-flex; position: relative; }
  .rnd-mode__input { position: absolute; opacity: 0; pointer-events: none; }
  .rnd-mode span {
    padding: 0.4rem 0.85rem; font-size: 0.8125rem; cursor: pointer;
    color: var(--fg-muted); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .rnd-mode.is-active span { color: var(--brand-text); background: var(--brand); border-color: var(--brand); }
  .rnd-panel { display: flex; flex-direction: column; gap: 1rem; }
  .rnd-form { margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
  .rnd-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; }
  .rnd-field { display: flex; flex-direction: column; gap: 0.25rem; }
  .rnd-field--block { inline-size: 100%; }
  .rnd-field__label { font-size: 0.8125rem; color: var(--fg-muted); }
  .rnd-field__input {
    inline-size: 9rem; padding: 0.5rem 0.6rem; font-size: 0.9375rem;
    color: var(--fg); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); font-variant-numeric: tabular-nums;
  }
  .rnd-field__textarea {
    inline-size: 100%; padding: 0.5rem 0.6rem; resize: vertical; font-size: 0.9375rem;
    color: var(--fg); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .rnd-field__input:focus, .rnd-field__textarea:focus { outline: 0; border-color: var(--brand); }
  .rnd-go {
    padding: 0.5rem 1.1rem; font-size: 0.875rem; cursor: pointer;
    color: var(--brand-text); background: var(--brand);
    border: 1px solid var(--brand); border-radius: var(--radius);
  }
  .rnd-go:hover { filter: brightness(1.05); }
  .rnd-result { display: flex; flex-direction: column; gap: 0.6rem; }
  .rnd-result__label { font-size: 0.72rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; }
  .rnd-big { font-size: 2.2rem; font-weight: 700; color: var(--brand); }
  .rnd-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .rnd-chip {
    display: inline-flex; align-items: center; padding: 0.3rem 0.6rem; font-size: 0.875rem;
    color: var(--fg); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .rnd-chip--die { min-inline-size: 2rem; justify-content: center; font-weight: 600; font-variant-numeric: tabular-nums; }
  .rnd-chip--pick { color: var(--brand-text); background: var(--brand); border-color: var(--brand); font-weight: 600; }
  .rnd-tally { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .rnd-ordered { margin: 0; padding-inline-start: 1.5rem; display: flex; flex-direction: column; gap: 0.25rem; }
  .rnd-ordered__item { color: var(--fg); }
  .rnd-error { margin: 0; color: var(--color-error); font-size: 0.875rem; }

  /* === bespoke App: number-to-words（Pages/Apps/NumberToWords/）===
     单输入 → 服务端转换（基数词 + 序数词两行，各带复制）。 */
  .ntw { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 52rem; }
  .ntw__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .ntw__title { margin: 0; font-size: 1.25rem; }
  .ntw__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .ntw__form { display: flex; flex-direction: column; gap: 0.5rem; }
  .ntw__label { font-size: 0.875rem; color: var(--fg-muted); }
  .ntw__input {
    inline-size: 100%; padding: 0.6rem 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1rem;
    color: var(--fg); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .ntw__input:focus { outline: 0; border-color: var(--brand); }
  .ntw__empty { color: var(--fg-muted); margin: 0; }
  .ntw__error { color: var(--color-error); margin: 0; font-size: 0.875rem; }
  .ntw-result { display: flex; flex-direction: column; gap: 0.75rem; }
  .ntw-row {
    display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 0.75rem; align-items: start;
    padding: 0.6rem 0.75rem; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .ntw-row__label { grid-column: 1; font-size: 0.72rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; }
  .ntw-row__value { grid-column: 1; margin: 0; font-size: 1.05rem; color: var(--fg); line-height: 1.4; word-break: break-word; }
  .ntw-row__copy {
    grid-column: 2; grid-row: 1 / span 2; align-self: center;
    padding: 0.3rem 0.7rem; font-size: 0.75rem; cursor: pointer;
    color: var(--fg-muted); background: transparent; border: 1px solid var(--border); border-radius: var(--radius);
  }
  .ntw-row__copy:hover { color: var(--fg); border-color: var(--brand); }
  .ntw-row__copy[aria-pressed="true"] { color: var(--color-success); border-color: var(--color-success); }

  /* === bespoke App: tax-calculator（Pages/Apps/TaxCalculator/）===
     2 模式 tab（add / remove），各模式数字字段 form → 服务端计算（结果卡）。 */
  .tax { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 52rem; }
  .tax__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .tax__title { margin: 0; font-size: 1.25rem; }
  .tax__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .tax-modes { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .tax-mode { display: inline-flex; position: relative; }
  .tax-mode__input { position: absolute; opacity: 0; pointer-events: none; }
  .tax-mode span {
    padding: 0.4rem 0.85rem; font-size: 0.8125rem; cursor: pointer;
    color: var(--fg-muted); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .tax-mode.is-active span { color: var(--brand-text); background: var(--brand); border-color: var(--brand); }
  .tax-panel { display: flex; flex-direction: column; gap: 1rem; }
  .tax-form { margin: 0; }
  .tax-fields { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
  .tax-field { display: flex; flex-direction: column; gap: 0.25rem; }
  .tax-field__label { font-size: 0.8125rem; color: var(--fg-muted); }
  .tax-field__input {
    padding: 0.5rem 0.6rem; font-size: 0.9375rem;
    color: var(--fg); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); font-variant-numeric: tabular-nums;
  }
  .tax-field__input:focus { outline: 0; border-color: var(--brand); }
  .tax-result { display: flex; flex-direction: column; gap: 1rem; }
  .tax-stats { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
  .tax-stat {
    display: flex; flex-direction: column; gap: 0.2rem;
    padding: 0.6rem 0.7rem; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .tax-stat--primary { border-color: var(--brand); }
  .tax-stat__label { font-size: 0.72rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; }
  .tax-stat__value { font-size: 1.2rem; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; word-break: break-all; }
  .tax-stat--primary .tax-stat__value { color: var(--brand); font-size: 1.4rem; }
  .tax-error { margin: 0; color: var(--color-error); font-size: 0.875rem; }

  /* === bespoke App: fuel-cost（Pages/Apps/FuelCost/）===
     单表单（距离 + 油耗 + 油价 + 人数，各带单位 select）→ 服务端计算（结果卡）。 */
  .fuel { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 52rem; }
  .fuel__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .fuel__title { margin: 0; font-size: 1.25rem; }
  .fuel__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .fuel-form { margin: 0; display: flex; flex-direction: column; gap: 0.85rem; }
  .fuel-fields { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
  .fuel-field { display: flex; flex-direction: column; gap: 0.25rem; }
  .fuel-field__label { font-size: 0.8125rem; color: var(--fg-muted); }
  .fuel-combo { display: flex; gap: 0.4rem; }
  .fuel-combo .fuel-field__input { flex: 1 1 auto; min-inline-size: 0; }
  .fuel-field__input, .fuel-field__select {
    padding: 0.5rem 0.6rem; font-size: 0.9375rem;
    color: var(--fg); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); font-variant-numeric: tabular-nums;
  }
  .fuel-field__select { flex: 0 0 auto; cursor: pointer; }
  .fuel-field__input:focus, .fuel-field__select:focus { outline: 0; border-color: var(--brand); }
  .fuel-check { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.875rem; color: var(--fg); cursor: pointer; }
  .fuel-result { display: flex; flex-direction: column; gap: 1rem; }
  .fuel-stats { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
  .fuel-stat {
    display: flex; flex-direction: column; gap: 0.2rem;
    padding: 0.6rem 0.7rem; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .fuel-stat--primary { border-color: var(--brand); }
  .fuel-stat__label { font-size: 0.72rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; }
  .fuel-stat__value { font-size: 1.2rem; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; word-break: break-all; }
  .fuel-stat--primary .fuel-stat__value { color: var(--brand); font-size: 1.4rem; }
  .fuel-stat__sub { font-size: 0.78rem; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
  .fuel-error { margin: 0; color: var(--color-error); font-size: 0.875rem; }

  /* === bespoke App: gpa-calculator（Pages/Apps/GpaCalculator/）===
     textarea「成绩, 学分」逐行 → 服务端算加权 GPA（结果卡 + 逐课表）。 */
  .gpa { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 52rem; }
  .gpa__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .gpa__title { margin: 0; font-size: 1.25rem; }
  .gpa__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .gpa-form { margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
  .gpa-field { display: flex; flex-direction: column; gap: 0.25rem; }
  .gpa-field__label { font-size: 0.8125rem; color: var(--fg-muted); }
  .gpa-field__input {
    padding: 0.5rem 0.6rem; font-size: 0.9375rem; resize: vertical;
    color: var(--fg); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; line-height: 1.5;
  }
  .gpa-field__input:focus { outline: 0; border-color: var(--brand); }
  .gpa-hint { margin: 0; font-size: 0.78rem; color: var(--fg-muted); }
  .gpa-result { display: flex; flex-direction: column; gap: 1rem; }
  .gpa-stats { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
  .gpa-stat {
    display: flex; flex-direction: column; gap: 0.2rem;
    padding: 0.6rem 0.7rem; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .gpa-stat--primary { border-color: var(--brand); }
  .gpa-stat__label { font-size: 0.72rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; }
  .gpa-stat__value { font-size: 1.2rem; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
  .gpa-stat--primary .gpa-stat__value { color: var(--brand); font-size: 1.4rem; }
  .gpa-table { inline-size: 100%; border-collapse: collapse; font-size: 0.875rem; }
  .gpa-table th, .gpa-table td {
    padding: 0.4rem 0.6rem; text-align: start;
    border-block-end: 1px solid var(--border);
  }
  .gpa-table th { font-size: 0.72rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; }
  .gpa-table__num { text-align: end; font-variant-numeric: tabular-nums; }
  .gpa-error { margin: 0; color: var(--color-error); font-size: 0.875rem; }

  /* === bespoke App: energy-cost（Pages/Apps/EnergyCost/）===
     单表单（功率 + 时长 + 周期 + 数量 + 电价）→ 服务端计算（结果卡）。复用 fuel 的 combo 形态。 */
  .energy { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 52rem; }
  .energy__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .energy__title { margin: 0; font-size: 1.25rem; }
  .energy__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .energy-form { margin: 0; }
  .energy-fields { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
  .energy-field { display: flex; flex-direction: column; gap: 0.25rem; }
  .energy-field__label { font-size: 0.8125rem; color: var(--fg-muted); }
  .energy-combo { display: flex; gap: 0.4rem; }
  .energy-combo .energy-field__input { flex: 1 1 auto; min-inline-size: 0; }
  .energy-field__input, .energy-field__select {
    padding: 0.5rem 0.6rem; font-size: 0.9375rem;
    color: var(--fg); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); font-variant-numeric: tabular-nums;
  }
  .energy-field__select { flex: 0 0 auto; cursor: pointer; }
  .energy-field__input:focus, .energy-field__select:focus { outline: 0; border-color: var(--brand); }
  .energy-result { display: flex; flex-direction: column; gap: 1rem; }
  .energy-stats { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
  .energy-stat {
    display: flex; flex-direction: column; gap: 0.2rem;
    padding: 0.6rem 0.7rem; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .energy-stat--primary { border-color: var(--brand); }
  .energy-stat__label { font-size: 0.72rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; }
  .energy-stat__value { font-size: 1.2rem; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; word-break: break-all; }
  .energy-stat--primary .energy-stat__value { color: var(--brand); font-size: 1.4rem; }
  .energy-stat__sub { font-size: 0.78rem; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
  .energy-error { margin: 0; color: var(--color-error); font-size: 0.875rem; }

  /* === bespoke App: work-hours（Pages/Apps/WorkHours/）===
     textarea 班次 + 时薪字段 → 服务端算总工时/工资（结果卡 + 逐班表）。 */
  .work { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 52rem; }
  .work__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .work__title { margin: 0; font-size: 1.25rem; }
  .work__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .work-form { margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
  .work-field { display: flex; flex-direction: column; gap: 0.25rem; }
  .work-field--inline { max-inline-size: 16rem; }
  .work-field__label { font-size: 0.8125rem; color: var(--fg-muted); }
  .work-field__input {
    padding: 0.5rem 0.6rem; font-size: 0.9375rem;
    color: var(--fg); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; line-height: 1.5;
  }
  textarea.work-field__input { resize: vertical; }
  .work-field__input:focus { outline: 0; border-color: var(--brand); }
  .work-hint { margin: 0; font-size: 0.78rem; color: var(--fg-muted); }
  .work-result { display: flex; flex-direction: column; gap: 1rem; }
  .work-stats { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
  .work-stat {
    display: flex; flex-direction: column; gap: 0.2rem;
    padding: 0.6rem 0.7rem; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .work-stat--primary { border-color: var(--brand); }
  .work-stat__label { font-size: 0.72rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; }
  .work-stat__value { font-size: 1.2rem; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
  .work-stat--primary .work-stat__value { color: var(--brand); font-size: 1.4rem; }
  .work-stat__sub { font-size: 0.78rem; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
  .work-table { inline-size: 100%; border-collapse: collapse; font-size: 0.875rem; }
  .work-table th, .work-table td {
    padding: 0.4rem 0.6rem; text-align: start; border-block-end: 1px solid var(--border);
  }
  .work-table th { font-size: 0.72rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; }
  .work-table__num { text-align: end; font-variant-numeric: tabular-nums; }
  .work-table__dec { color: var(--fg-muted); font-size: 0.8125rem; }
  .work-error { margin: 0; color: var(--color-error); font-size: 0.875rem; }

  /* === bespoke App: type-scale（Pages/Apps/TypeScale/）===
     单表单（基准 + 比率 + 上下阶 + 根字号）→ 服务端算字阶；每行内联 style 预览 + px/rem + 复制。 */
  .type { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 52rem; }
  .type__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .type__title { margin: 0; font-size: 1.25rem; }
  .type__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .type-form { margin: 0; }
  .type-fields { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
  .type-field { display: flex; flex-direction: column; gap: 0.25rem; }
  .type-field__label { font-size: 0.8125rem; color: var(--fg-muted); }
  .type-field__input {
    padding: 0.5rem 0.6rem; font-size: 0.9375rem;
    color: var(--fg); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); font-variant-numeric: tabular-nums;
  }
  .type-field__input:focus { outline: 0; border-color: var(--brand); }
  .type-scale-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
  .type-row {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.5rem 0.7rem; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .type-row__preview {
    flex: 1 1 auto; min-inline-size: 0; line-height: 1.1;
    color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .type-row__meta { flex: 0 0 auto; display: flex; align-items: baseline; gap: 0.6rem; font-variant-numeric: tabular-nums; }
  .type-row__step { font-size: 0.72rem; color: var(--fg-muted); inline-size: 1.8rem; text-align: end; }
  .type-row__px { font-size: 0.875rem; font-weight: 600; color: var(--fg); inline-size: 4rem; text-align: end; }
  .type-row__rem { font-size: 0.8125rem; color: var(--fg-muted); inline-size: 4.5rem; text-align: end; }
  .type-row__copy {
    flex: 0 0 auto; padding: 0.3rem 0.7rem; font-size: 0.75rem; cursor: pointer;
    color: var(--fg-muted); background: transparent; border: 1px solid var(--border); border-radius: var(--radius);
  }
  .type-row__copy:hover { color: var(--fg); border-color: var(--brand); }
  .type-row__copy[aria-pressed="true"] { color: var(--color-success); border-color: var(--color-success); }
  .type-error { margin: 0; color: var(--color-error); font-size: 0.875rem; }

  /* === bespoke App: css-units（Pages/Apps/CssUnits/）===
     单表单（值 + 源单位 + root/parent）→ 服务端算全单位表（行 + 复制）。 */
  .cssu { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 52rem; }
  .cssu__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .cssu__title { margin: 0; font-size: 1.25rem; }
  .cssu__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .cssu-form { margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
  .cssu-fields { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
  .cssu-field { display: flex; flex-direction: column; gap: 0.25rem; }
  .cssu-field__label { font-size: 0.8125rem; color: var(--fg-muted); }
  .cssu-combo { display: flex; gap: 0.4rem; }
  .cssu-combo .cssu-field__input { flex: 1 1 auto; min-inline-size: 0; }
  .cssu-field__input, .cssu-field__select {
    padding: 0.5rem 0.6rem; font-size: 0.9375rem;
    color: var(--fg); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); font-variant-numeric: tabular-nums;
  }
  .cssu-field__select { flex: 0 0 auto; cursor: pointer; }
  .cssu-field__input:focus, .cssu-field__select:focus { outline: 0; border-color: var(--brand); }
  .cssu-hint { margin: 0; font-size: 0.78rem; color: var(--fg-muted); }
  .cssu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
  .cssu-row {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.5rem 0.7rem; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .cssu-row__unit { font-size: 0.72rem; color: var(--fg-muted); text-transform: uppercase; inline-size: 2.2rem; }
  .cssu-row__value { flex: 1 1 auto; min-inline-size: 0; font-size: 1.05rem; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; word-break: break-all; }
  .cssu-row__copy {
    flex: 0 0 auto; padding: 0.3rem 0.7rem; font-size: 0.75rem; cursor: pointer;
    color: var(--fg-muted); background: transparent; border: 1px solid var(--border); border-radius: var(--radius);
  }
  .cssu-row__copy:hover { color: var(--fg); border-color: var(--brand); }
  .cssu-row__copy[aria-pressed="true"] { color: var(--color-success); border-color: var(--color-success); }
  .cssu-error { margin: 0; color: var(--color-error); font-size: 0.875rem; }

  /* === bespoke App: meta-tags（Pages/Apps/MetaTags/）===
     多字段表单 → 服务端生成 <meta> 标签块（转义后）+ 长度提示 + 复制。 */
  .meta { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 52rem; }
  .meta__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .meta__title { margin: 0; font-size: 1.25rem; }
  .meta__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .meta-form { margin: 0; }
  .meta-fields { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
  .meta-field { display: flex; flex-direction: column; gap: 0.25rem; }
  .meta-field--wide { grid-column: 1 / -1; }
  .meta-field__label { font-size: 0.8125rem; color: var(--fg-muted); }
  .meta-field__input {
    padding: 0.5rem 0.6rem; font-size: 0.9375rem; resize: vertical;
    color: var(--fg); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .meta-field__input:focus { outline: 0; border-color: var(--brand); }
  .meta-result { display: flex; flex-direction: column; gap: 0.6rem; }
  .meta-lengths { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .meta-len {
    font-size: 0.72rem; color: var(--fg-muted); font-variant-numeric: tabular-nums;
    padding: 0.2rem 0.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  }
  .meta-len.is-over { color: var(--color-error); border-color: var(--color-error); }
  .meta-code { position: relative; }
  .meta-code__pre {
    margin: 0; padding: 0.75rem; overflow: auto; max-block-size: 24rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; line-height: 1.55;
  }
  .meta-code__copy {
    position: absolute; inset-block-start: 0.5rem; inset-inline-end: 0.5rem;
    padding: 0.3rem 0.7rem; font-size: 0.75rem; cursor: pointer;
    color: var(--fg-muted); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  }
  .meta-code__copy:hover { color: var(--fg); border-color: var(--brand); }
  .meta-code__copy[aria-pressed="true"] { color: var(--color-success); border-color: var(--color-success); }
  .meta-error { margin: 0; color: var(--color-error); font-size: 0.875rem; }

  /* === bespoke App: list-compare（Pages/Apps/ListCompare/）===
     双 textarea + 选项 → 服务端集合运算（4 卡：仅A/仅B/交集/并集，各 pre + 复制）。 */
  .lc { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 60rem; }
  .lc__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .lc__title { margin: 0; font-size: 1.25rem; }
  .lc__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .lc-form { margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
  .lc-inputs { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
  .lc-field { display: flex; flex-direction: column; gap: 0.25rem; }
  .lc-field__label { font-size: 0.8125rem; color: var(--fg-muted); }
  .lc-field__input {
    padding: 0.5rem 0.6rem; font-size: 0.9375rem; resize: vertical;
    color: var(--fg); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; line-height: 1.5;
  }
  .lc-field__input:focus { outline: 0; border-color: var(--brand); }
  .lc-options { display: flex; flex-wrap: wrap; gap: 0.9rem; }
  .lc-check { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; color: var(--fg); cursor: pointer; }
  .lc-result { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
  .lc-card {
    display: flex; flex-direction: column; gap: 0.4rem;
    padding: 0.6rem 0.7rem; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .lc-card--both { border-color: var(--brand); }
  .lc-card__head { display: flex; align-items: center; gap: 0.5rem; }
  .lc-card__label { flex: 1 1 auto; font-size: 0.72rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; }
  .lc-card__count { font-size: 0.95rem; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
  .lc-card__copy {
    flex: 0 0 auto; padding: 0.2rem 0.55rem; font-size: 0.72rem; cursor: pointer;
    color: var(--fg-muted); background: transparent; border: 1px solid var(--border); border-radius: var(--radius);
  }
  .lc-card__copy:hover { color: var(--fg); border-color: var(--brand); }
  .lc-card__copy[aria-pressed="true"] { color: var(--color-success); border-color: var(--color-success); }
  .lc-card__pre {
    margin: 0; padding: 0.5rem; overflow: auto; max-block-size: 16rem; min-block-size: 2rem;
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; line-height: 1.5;
  }
  .lc-error { margin: 0; color: var(--color-error); font-size: 0.875rem; }

  /* === bespoke App: css-clamp（Pages/Apps/CssClamp/）===
     单表单（两尺寸 + 两视口 + root）→ 服务端算流体 clamp()（代码卡 + 分解）。 */
  .clamp { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 52rem; }
  .clamp__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .clamp__title { margin: 0; font-size: 1.25rem; }
  .clamp__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .clamp-form { margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
  .clamp-fields { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
  .clamp-field { display: flex; flex-direction: column; gap: 0.25rem; }
  .clamp-field__label { font-size: 0.8125rem; color: var(--fg-muted); }
  .clamp-field__input {
    padding: 0.5rem 0.6rem; font-size: 0.9375rem;
    color: var(--fg); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); font-variant-numeric: tabular-nums;
  }
  .clamp-field__input:focus { outline: 0; border-color: var(--brand); }
  .clamp-hint { margin: 0; font-size: 0.78rem; color: var(--fg-muted); }
  .clamp-result { display: flex; flex-direction: column; gap: 0.75rem; }
  .clamp-code { position: relative; }
  .clamp-code__value {
    display: block; padding: 0.75rem 4.5rem 0.75rem 0.75rem; overflow-x: auto;
    background: var(--surface); border: 1px solid var(--brand); border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9375rem; color: var(--fg);
  }
  .clamp-code__copy {
    position: absolute; inset-block-start: 0.5rem; inset-inline-end: 0.5rem;
    padding: 0.3rem 0.7rem; font-size: 0.75rem; cursor: pointer;
    color: var(--fg-muted); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  }
  .clamp-code__copy:hover { color: var(--fg); border-color: var(--brand); }
  .clamp-code__copy[aria-pressed="true"] { color: var(--color-success); border-color: var(--color-success); }
  .clamp-breakdown { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); margin: 0; }
  .clamp-bd {
    display: flex; flex-direction: column; gap: 0.2rem;
    padding: 0.5rem 0.6rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  }
  .clamp-bd dt { font-size: 0.72rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; }
  .clamp-bd dd { margin: 0; font-size: 0.95rem; color: var(--fg); font-variant-numeric: tabular-nums; word-break: break-all; }
  .clamp-error { margin: 0; color: var(--color-error); font-size: 0.875rem; }

  /* === bespoke App: sleep-calculator（Pages/Apps/SleepCalculator/）===
     模式分段开关 + 共享字段 → 服务端按睡眠周期算建议时刻列表（卡片，5–6 周期高亮）。 */
  .sleep { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 52rem; }
  .sleep__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .sleep__title { margin: 0; font-size: 1.25rem; }
  .sleep__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .sleep-form { margin: 0; display: flex; flex-direction: column; gap: 0.85rem; }
  .sleep-modes { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .sleep-mode { display: inline-flex; position: relative; }
  .sleep-mode__input { position: absolute; opacity: 0; pointer-events: none; }
  .sleep-mode span {
    padding: 0.4rem 0.85rem; font-size: 0.8125rem; cursor: pointer;
    color: var(--fg-muted); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .sleep-mode.is-active span { color: var(--brand-text); background: var(--brand); border-color: var(--brand); }
  .sleep-fields { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
  .sleep-field { display: flex; flex-direction: column; gap: 0.25rem; }
  .sleep-field__label { font-size: 0.8125rem; color: var(--fg-muted); }
  .sleep-field__input {
    padding: 0.5rem 0.6rem; font-size: 0.9375rem;
    color: var(--fg); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); font-variant-numeric: tabular-nums;
  }
  .sleep-field__input:focus { outline: 0; border-color: var(--brand); }
  .sleep-result { display: flex; flex-direction: column; gap: 0.6rem; }
  .sleep-result__lead { margin: 0; font-size: 0.9rem; color: var(--fg-muted); }
  .sleep-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
  .sleep-card {
    display: flex; flex-direction: column; gap: 0.2rem;
    padding: 0.6rem 0.7rem; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .sleep-card--rec { border-color: var(--brand); }
  .sleep-card__time { font-size: 1.4rem; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
  .sleep-card--rec .sleep-card__time { color: var(--brand); }
  .sleep-card__meta { font-size: 0.78rem; color: var(--fg-muted); }
  .sleep-error { margin: 0; color: var(--color-error); font-size: 0.875rem; }

  /* === bespoke App: query-builder（Pages/Apps/QueryBuilder/）===
     基础 URL + 参数 textarea → 服务端构建编码 URL（完整 URL + 查询串，各 pre + 复制）。 */
  .qb { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 54rem; }
  .qb__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .qb__title { margin: 0; font-size: 1.25rem; }
  .qb__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .qb-form { margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
  .qb-field { display: flex; flex-direction: column; gap: 0.25rem; }
  .qb-field__label { font-size: 0.8125rem; color: var(--fg-muted); }
  .qb-field__input {
    padding: 0.5rem 0.6rem; font-size: 0.9375rem; resize: vertical;
    color: var(--fg); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .qb-field__input--mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; line-height: 1.5; }
  .qb-field__input:focus { outline: 0; border-color: var(--brand); }
  .qb-hint { margin: 0; font-size: 0.78rem; color: var(--fg-muted); }
  .qb-result { display: flex; flex-direction: column; gap: 0.75rem; }
  .qb-out { display: flex; flex-direction: column; gap: 0.3rem; }
  .qb-out__head { display: flex; align-items: center; gap: 0.5rem; }
  .qb-out__label { flex: 1 1 auto; font-size: 0.72rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; }
  .qb-out__copy {
    flex: 0 0 auto; padding: 0.25rem 0.7rem; font-size: 0.72rem; cursor: pointer;
    color: var(--fg-muted); background: transparent; border: 1px solid var(--border); border-radius: var(--radius);
  }
  .qb-out__copy:hover { color: var(--fg); border-color: var(--brand); }
  .qb-out__copy[aria-pressed="true"] { color: var(--color-success); border-color: var(--color-success); }
  .qb-out__pre {
    margin: 0; padding: 0.6rem 0.7rem; overflow-x: auto;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; line-height: 1.5;
    color: var(--fg); white-space: pre-wrap; word-break: break-all;
  }
  .qb-error { margin: 0; color: var(--color-error); font-size: 0.875rem; }

  /* === bespoke App: unit-price（Pages/Apps/UnitPrice/）===
     textarea 逐行「价格 数量 [标签]」→ 服务端比价（摘要 + 表，最优行高亮）。 */
  .up { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 54rem; }
  .up__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .up__title { margin: 0; font-size: 1.25rem; }
  .up__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .up-form { margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
  .up-field { display: flex; flex-direction: column; gap: 0.25rem; }
  .up-field__label { font-size: 0.8125rem; color: var(--fg-muted); }
  .up-field__input {
    padding: 0.5rem 0.6rem; font-size: 0.9375rem; resize: vertical;
    color: var(--fg); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; line-height: 1.5;
  }
  .up-field__input:focus { outline: 0; border-color: var(--brand); }
  .up-hint { margin: 0; font-size: 0.78rem; color: var(--fg-muted); }
  .up-result { display: flex; flex-direction: column; gap: 0.6rem; }
  .up-summary {
    margin: 0; padding: 0.5rem 0.7rem; font-size: 0.9rem; color: var(--fg);
    background: var(--surface); border: 1px solid var(--brand); border-radius: var(--radius);
  }
  .up-table { inline-size: 100%; border-collapse: collapse; font-size: 0.875rem; }
  .up-table th, .up-table td {
    padding: 0.45rem 0.6rem; text-align: start; border-block-end: 1px solid var(--border);
  }
  .up-table th { font-size: 0.72rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; }
  .up-table__num { text-align: end; font-variant-numeric: tabular-nums; }
  .up-table__perunit { font-weight: 600; color: var(--fg); }
  .up-row--best td { background: color-mix(in srgb, var(--brand) 12%, transparent); }
  .up-row--best .up-table__perunit { color: var(--brand); }
  .up-badge {
    display: inline-block; margin-inline-start: 0.4rem; padding: 0.05rem 0.4rem;
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--brand-text); background: var(--brand); border-radius: var(--radius);
  }
  .up-error { margin: 0; color: var(--color-error); font-size: 0.875rem; }

  /* === bespoke App: jsonpath-tester（Pages/Apps/JsonpathTester/）===
     JSONPath 表达式 + JSON textarea + 输出（匹配节点列表：路径 + 类型徽章 + JSON 值）。 */
  .jsonpath-app { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 56rem; }
  .jsonpath-app__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .jsonpath-app__title { margin: 0; font-size: 1.25rem; }
  .jsonpath-app__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .jsonpath-app__form { display: flex; flex-direction: column; gap: 0.375rem; }
  .jsonpath-app__label { font-size: 0.875rem; color: var(--fg-muted); }
  .jsonpath-app__expr {
    inline-size: 100%; padding: 0.625rem 0.875rem; margin-block-end: 0.5rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9375rem;
  }
  .jsonpath-app__expr:focus { outline: 0; border-color: var(--brand); }
  .jsonpath-app__json {
    inline-size: 100%; padding: 0.625rem 0.875rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; resize: vertical;
  }
  .jsonpath-app__json:focus { outline: 0; border-color: var(--brand); }
  .jsonpath-app__empty { color: var(--fg-muted); margin: 0; }
  .jsonpath-app__error { color: var(--color-error); margin: 0; font-size: 0.875rem; }

  .jsonpath-result { display: flex; flex-direction: column; gap: 0.625rem; }
  .jsonpath-result__count { margin: 0; font-size: 0.8125rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; }
  .jsonpath-result__note {
    margin: 0; padding: 0.5rem 0.75rem; color: var(--fg-muted); font-size: 0.75rem;
    background: var(--color-warning-bg); border-inline-start: 3px solid var(--color-warning); border-radius: 4px;
  }
  .jsonpath-nodes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
  .jsonpath-node {
    display: flex; flex-direction: column; gap: 0.4rem;
    padding: 0.625rem 0.75rem; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .jsonpath-node__head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
  .jsonpath-node__type {
    padding: 0.1rem 0.5rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
    background: light-dark(#e7e9f7, #2a2f45); color: var(--brand);
  }
  .jsonpath-node__path {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem;
    color: var(--fg-muted); word-break: break-all;
  }
  .jsonpath-node__copy {
    margin-inline-start: auto; padding: 0.2rem 0.6rem; font-size: 0.75rem;
    color: var(--fg-muted); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer;
  }
  .jsonpath-node__copy:hover { color: var(--fg); border-color: var(--brand); }
  .jsonpath-node__copy[aria-pressed="true"] { color: var(--color-success); border-color: var(--color-success); }
  .jsonpath-node__value {
    margin: 0; padding: 0.5rem 0.625rem; overflow-x: auto;
    background: light-dark(#f6f7fb, #15161c); border: 1px solid var(--border); border-radius: 4px;
  }
  .jsonpath-node__value code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem; color: var(--fg); white-space: pre-wrap; word-break: break-word;
  }

  /* === bespoke App: flexbox-grid（Pages/Apps/FlexboxGrid/）===
     Flexbox / Grid 容器生成器：模式 tab + 控件（select / 滑块）+ 实时预览（编号子项）+ 复制 CSS。 */
  .lg { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 60rem; }
  .lg__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .lg__title { margin: 0; font-size: 1.25rem; }
  .lg__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }

  /* 模式 tab —— 复用 css-toolkit 模式视觉（分段 pill，is-active = brand 填充）。 */
  .lg-modes {
    display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.25rem;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  }
  .lg-mode {
    display: inline-flex; align-items: center; padding: 0.375rem 0.9rem;
    border-radius: var(--radius); font-size: 0.8125rem; color: var(--fg-muted);
    cursor: pointer; user-select: none;
  }
  .lg-mode:hover { color: var(--fg); }
  .lg-mode.is-active { background: var(--brand); color: var(--brand-text); }
  .lg-mode:has(:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
  .lg-mode__input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }

  .lg-form { margin: 0; }
  .lg-controls {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.75rem 1.25rem; align-items: end;
  }
  .lg-field { display: flex; flex-direction: column; gap: 0.3rem; min-inline-size: 0; margin: 0; }
  .lg-field__label { font-size: 0.6875rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; }
  .lg-field__val { color: var(--fg); font-variant-numeric: tabular-nums; }
  .lg-select {
    inline-size: 100%; padding: 0.4rem 0.6rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; color: var(--fg);
  }
  .lg-select:focus { outline: 0; border-color: var(--brand); }
  .lg-range { inline-size: 100%; accent-color: var(--brand); }

  .lg-output { margin-block-start: 1rem; }
  .lg-result { display: flex; flex-direction: column; gap: 0.625rem; }
  .lg-stage {
    padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius);
    background: light-dark(#f6f7fb, #15161c);
  }
  /* 预览容器 —— 内联 style 注入生成的 display:flex/grid + 属性；min-height 让交叉轴对齐可见。 */
  .lg-container { inline-size: 100%; min-block-size: 12rem; }
  .lg-item {
    display: flex; align-items: center; justify-content: center;
    min-inline-size: 3rem; min-block-size: 3rem; padding: 0.75rem 1rem; box-sizing: border-box;
    background: var(--brand); color: var(--brand-text); border-radius: 6px;
    font-weight: 600; font-variant-numeric: tabular-nums;
  }

  .lg-code-row { display: flex; align-items: flex-start; gap: 0.5rem; }
  .lg-code {
    flex: 1 1 auto; min-inline-size: 0; margin: 0; padding: 0.625rem 0.875rem; overflow-x: auto;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  }
  .lg-code code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem; color: var(--fg); white-space: pre;
  }
  .lg-copy {
    flex: 0 0 auto; padding: 0.4rem 0.8rem; font-size: 0.8125rem;
    color: var(--fg-muted); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer;
  }
  .lg-copy:hover { color: var(--fg); border-color: var(--brand); }
  .lg-copy[aria-pressed="true"] { color: var(--color-success); border-color: var(--color-success); }

  /* === image-toolkit 多模式补充（Pages/Apps/ImageToolkit/）===
     模式 tab + favicon 网格 + data-uri / svg 代码块 + 颜色取值框。 */
  .img-modes {
    display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.25rem;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  }
  .img-mode {
    display: inline-flex; align-items: center; padding: 0.375rem 0.9rem;
    border-radius: var(--radius); font-size: 0.8125rem; color: var(--fg-muted);
    cursor: pointer; user-select: none;
  }
  .img-mode:hover { color: var(--fg); }
  .img-mode.is-active { background: var(--brand); color: var(--brand-text); }
  .img-mode:has(:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
  .img-mode__input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
  .img-panel { display: flex; flex-direction: column; gap: 1rem; }

  .img-color { display: flex; align-items: center; gap: 0.4rem; }
  .img-color__text {
    flex: 1 1 auto; min-inline-size: 0; padding: 0.5rem 0.75rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem;
  }
  .img-color__text:focus { outline: 0; border-color: var(--brand); }
  .img-color__picker {
    flex: 0 0 auto; inline-size: 2rem; block-size: 2rem; padding: 0;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer;
  }

  /* favicon 全套预览网格 —— 各尺寸棋盘格底（透明可见）+ 尺寸标签 + 单独下载。 */
  .img-favicons {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); gap: 0.75rem;
  }
  .img-favicon {
    display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
    padding: 0.625rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  }
  .img-favicon__preview {
    max-inline-size: 4rem; max-block-size: 4rem; object-fit: contain;
    background-color: #ffffff;
    background-image:
      linear-gradient(45deg, #e9e9ef 25%, transparent 25%), linear-gradient(-45deg, #e9e9ef 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #e9e9ef 75%), linear-gradient(-45deg, transparent 75%, #e9e9ef 75%);
    background-size: 12px 12px; background-position: 0 0, 0 6px, 6px -6px, -6px 0;
    border-radius: 4px;
  }
  .img-favicon__size { font-size: 0.6875rem; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
  .img-favicon__download {
    font-size: 0.6875rem; color: var(--brand); text-decoration: none; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  .img-favicon__download:hover { text-decoration: underline; }

  /* data-uri / svg 代码块（标签 + 复制 + 可滚动代码）。 */
  .img-datauri__meta { margin: 0; font-size: 0.8125rem; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
  .img-datauri__block { display: flex; flex-direction: column; gap: 0.3rem; }
  .img-datauri__head { display: flex; align-items: center; gap: 0.5rem; }
  .img-datauri__label { font-size: 0.6875rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; }
  .img-datauri__code {
    margin: 0; padding: 0.5rem 0.75rem; max-block-size: 9rem; overflow: auto;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  }
  .img-datauri__code code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem; color: var(--fg); white-space: pre-wrap; word-break: break-all;
  }
  .img-copy {
    margin-inline-start: auto; padding: 0.2rem 0.6rem; font-size: 0.75rem;
    color: var(--fg-muted); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer;
  }
  .img-copy:hover { color: var(--fg); border-color: var(--brand); }
  .img-copy[aria-pressed="true"] { color: var(--color-success); border-color: var(--color-success); }

  /* === word-counter 可读性补充（Pages/Apps/WordCounter/）===
     Flesch reading ease / Flesch–Kincaid grade / Gunning fog 三评分 + 定性档位。 */
  .wc-read { display: flex; flex-direction: column; gap: 0.5rem; }
  .wc-read__title { font-size: 0.75rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.06em; }
  .wc-read__grid { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.5rem 0.75rem; }
  .wc-read__cell {
    display: flex; flex-direction: column; gap: 0.15rem; margin: 0;
    padding: 0.5rem 0.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  }
  .wc-read__label { font-size: 0.6875rem; color: var(--fg-muted); }
  .wc-read__value { margin: 0; font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; }
  .wc-read__band {
    margin-inline-start: 0.4rem; font-size: 0.6875rem; font-weight: 600;
    padding: 0.05rem 0.45rem; border-radius: 9999px; vertical-align: middle;
    background: light-dark(#e7e9f7, #2a2f45); color: var(--brand);
  }
  .wc-read__hint { margin: 0; color: var(--fg-muted); font-size: 0.75rem; }

  /* === bespoke App: card-validator（Pages/Apps/CardValidator/）===
     2 模式（Validate / Generate）：Luhn 校验 + 品牌识别 / 测试卡号生成。 */
  .cv { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 44rem; }
  .cv__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .cv__title { margin: 0; font-size: 1.25rem; }
  .cv__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }

  .cv-modes {
    display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.25rem;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  }
  .cv-mode {
    display: inline-flex; align-items: center; padding: 0.375rem 0.9rem;
    border-radius: var(--radius); font-size: 0.8125rem; color: var(--fg-muted);
    cursor: pointer; user-select: none;
  }
  .cv-mode:hover { color: var(--fg); }
  .cv-mode.is-active { background: var(--brand); color: var(--brand-text); }
  .cv-mode:has(:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
  .cv-mode__input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }

  .cv-form { margin: 0; display: flex; flex-direction: column; gap: 0.375rem; }
  .cv-label { font-size: 0.875rem; color: var(--fg-muted); }
  .cv-input {
    inline-size: 100%; padding: 0.625rem 0.875rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.0625rem; letter-spacing: 0.02em;
  }
  .cv-input:focus { outline: 0; border-color: var(--brand); }
  .cv-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.75rem 1.25rem; align-items: end; }
  .cv-field { display: flex; flex-direction: column; gap: 0.3rem; min-inline-size: 0; margin: 0; }
  .cv-field__label { font-size: 0.6875rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; }
  .cv-field__val { color: var(--fg); font-variant-numeric: tabular-nums; }
  .cv-select {
    inline-size: 100%; padding: 0.4rem 0.6rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.875rem; color: var(--fg);
  }
  .cv-select:focus { outline: 0; border-color: var(--brand); }
  .cv-range { inline-size: 100%; accent-color: var(--brand); }

  .cv-output { margin-block-start: 0.5rem; }
  .cv-empty { color: var(--fg-muted); margin: 0; }
  .cv-error { color: var(--color-error); margin: 0; font-size: 0.875rem; }
  .cv-result { display: flex; flex-direction: column; gap: 0.625rem; }
  .cv-result__head { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; }
  .cv-badge { padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 600; }
  .cv-badge--valid { background: light-dark(#d6f0d8, #163322); color: var(--color-success); }
  .cv-badge--invalid { background: light-dark(#fde0e0, #5a1d22); color: var(--color-error); }
  .cv-brand {
    padding: 0.2rem 0.6rem; border-radius: 9999px; font-size: 0.8125rem; font-weight: 600;
    background: light-dark(#e7e9f7, #2a2f45); color: var(--brand);
  }
  .cv-brand--unknown { background: var(--border); color: var(--fg-muted); }
  .cv-number { margin: 0; }
  .cv-number code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.25rem; letter-spacing: 0.06em; color: var(--fg);
  }
  .cv-meta { margin: 0; font-size: 0.8125rem; color: var(--fg-muted); font-variant-numeric: tabular-nums; }

  .cv-testnote {
    margin: 0; padding: 0.5rem 0.75rem; color: var(--fg-muted); font-size: 0.75rem;
    background: var(--color-warning-bg); border-inline-start: 3px solid var(--color-warning); border-radius: 4px;
  }
  .cv-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
  .cv-card {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  }
  .cv-card__num {
    flex: 1 1 auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9375rem; letter-spacing: 0.04em; color: var(--fg);
  }
  .cv-card__copy {
    flex: 0 0 auto; padding: 0.2rem 0.6rem; font-size: 0.75rem;
    color: var(--fg-muted); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer;
  }
  .cv-card__copy:hover { color: var(--fg); border-color: var(--brand); }
  .cv-card__copy[aria-pressed="true"] { color: var(--color-success); border-color: var(--color-success); }

  /* === bespoke App: keycode-info（Pages/Apps/KeycodeInfo/）===
     可聚焦捕获区，按键 → 展示 JS 键盘事件字段（纯客户端 Alpine，无服务端）。 */
  .kc { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 48rem; }
  .kc__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .kc__title { margin: 0; font-size: 1.25rem; }
  .kc__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .kc__zone {
    display: flex; align-items: center; justify-content: center;
    min-block-size: 11rem; padding: 1.5rem; text-align: center;
    background: var(--surface); border: 2px dashed var(--border);
    border-radius: var(--radius); cursor: text;
  }
  .kc__zone:focus { outline: 0; border-color: var(--brand); border-style: solid; }
  .kc__zone.is-empty { color: var(--fg-muted); }
  .kc__hint { font-size: 1rem; color: var(--fg-muted); }
  .kc__display { display: flex; flex-direction: column; gap: 1rem; inline-size: 100%; }
  .kc__big {
    font-size: 2.4rem; font-weight: 700; color: var(--brand);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-break: break-all;
  }
  .kc__grid {
    margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.6rem;
  }
  .kc__cell {
    display: flex; flex-direction: column; gap: 0.15rem; padding: 0.5rem 0.7rem;
    text-align: start; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  }
  .kc__k { font-size: 0.72rem; color: var(--fg-muted); text-transform: none; letter-spacing: 0.02em; }
  .kc__v {
    margin: 0; font-size: 1rem; color: var(--fg);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums; word-break: break-all;
  }
  .kc__note { margin: 0; font-size: 0.8125rem; color: var(--fg-muted); }

  /* === bespoke App: emoji-picker（Pages/Apps/EmojiPicker/）===
     搜索框 + 分组 emoji 网格，点击复制（纯客户端 Alpine 筛选/复制）。 */
  .emj { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 56rem; }
  .emj__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .emj__title { margin: 0; font-size: 1.25rem; }
  .emj__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .emj__bar {
    display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
    position: sticky; inset-block-start: 0; z-index: 1;
    padding-block: 0.5rem; background: var(--bg);
  }
  .emj__search {
    flex: 1 1 16rem; padding: 0.5rem 0.7rem; font-size: 0.9375rem;
    color: var(--fg); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .emj__search:focus { outline: 0; border-color: var(--brand); }
  .emj__copied { font-size: 0.8125rem; color: var(--color-success); }
  .emj__copied-char { font-size: 1.1rem; }
  .emj-group { display: flex; flex-direction: column; gap: 0.5rem; }
  .emj-group__title {
    margin: 0; font-size: 0.78rem; color: var(--fg-muted);
    text-transform: uppercase; letter-spacing: 0.05em;
  }
  .emj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr)); gap: 0.3rem; }
  .emj-btn {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 1; font-size: 1.6rem; line-height: 1; cursor: pointer;
    background: var(--surface); border: 1px solid transparent; border-radius: var(--radius);
  }
  .emj-btn:hover { background: var(--surface-hover); border-color: var(--border); }
  .emj-btn:focus-visible { outline: 0; border-color: var(--brand); }
  .emj-empty { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }

  /* === bespoke App: coordinate（Pages/Apps/Coordinate/）===
     2 模式 tab（from decimal / parse text），各模式 form → 服务端换算（DD/DMS/DDM/Geohash 行 + Copy）。 */
  .coord { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 52rem; }
  .coord__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .coord__title { margin: 0; font-size: 1.25rem; }
  .coord__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .coord-modes { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .coord-mode { display: inline-flex; position: relative; }
  .coord-mode__input { position: absolute; opacity: 0; pointer-events: none; }
  .coord-mode span {
    padding: 0.4rem 0.85rem; font-size: 0.8125rem; cursor: pointer;
    color: var(--fg-muted); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .coord-mode.is-active span { color: var(--brand-text); background: var(--brand); border-color: var(--brand); }
  .coord-mode:has(:focus-visible) span { outline: 2px solid var(--brand); outline-offset: 2px; }
  .coord-panel { display: flex; flex-direction: column; gap: 1rem; }
  .coord-form { margin: 0; }
  .coord-fields { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
  .coord-field { display: flex; flex-direction: column; gap: 0.25rem; }
  .coord-field__label { font-size: 0.8125rem; color: var(--fg-muted); }
  .coord-field__input {
    padding: 0.5rem 0.6rem; font-size: 0.9375rem;
    color: var(--fg); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); font-variant-numeric: tabular-nums;
  }
  .coord-field__input--wide { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
  .coord-field__input:focus { outline: 0; border-color: var(--brand); }
  .coord-rows { margin: 0; display: grid; gap: 0.5rem; }
  .coord-row { display: grid; grid-template-columns: 7rem 1fr; align-items: center; gap: 0.25rem 0.75rem; }
  .coord-row__label {
    margin: 0; font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--fg-muted);
  }
  .coord-row__value-row { margin: 0; display: flex; align-items: center; gap: 0.5rem; min-inline-size: 0; }
  .coord-row__value {
    flex: 1; min-inline-size: 0; overflow-x: auto; padding: 0.375rem 0.5rem;
    border-radius: var(--radius); background: var(--surface-hover);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; white-space: nowrap;
  }
  .coord-row__copy {
    flex: none; padding: 0.25rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); color: var(--fg-muted); font-size: 0.75rem; cursor: pointer;
  }
  .coord-row__copy:hover { background: var(--surface-hover); color: var(--fg); }
  .coord__empty { margin: 0; color: var(--fg-muted); font-style: italic; }
  .coord__error { margin: 0; color: var(--color-error); font-size: 0.875rem; }

  /* === bespoke App: ascii-art（Pages/Apps/AsciiArt/）===
     文本 + 字体 → FIGlet 横幅（<pre> 等宽点阵 + Copy）。 */
  .ascii-art { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 60rem; }
  .ascii-art__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .ascii-art__title { margin: 0; font-size: 1.25rem; }
  .ascii-art__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .ascii-art__form {
    display: grid; gap: 0.75rem; align-items: end;
    grid-template-columns: 1fr;
  }
  @media (width >= 36rem) {
    .ascii-art__form { grid-template-columns: 1fr 12rem; }
  }
  .ascii-art__field { display: flex; flex-direction: column; gap: 0.25rem; }
  .ascii-art__label { font-size: 0.8125rem; color: var(--fg-muted); }
  .ascii-art__input, .ascii-art__select {
    padding: 0.5rem 0.6rem; font-size: 0.9375rem;
    color: var(--fg); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .ascii-art__input:focus, .ascii-art__select:focus { outline: 0; border-color: var(--brand); }
  .ascii-art__result { display: flex; flex-direction: column; gap: 0.5rem; align-items: start; }
  .ascii-art__banner {
    inline-size: 100%; margin: 0; padding: 1rem; overflow-x: auto;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875rem; line-height: 1.1; white-space: pre; tab-size: 4;
  }
  .ascii-art__copy {
    padding: 0.3rem 0.7rem; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); color: var(--fg-muted); font-size: 0.8125rem; cursor: pointer;
  }
  .ascii-art__copy:hover { background: var(--surface-hover); color: var(--fg); }
  .ascii-art__empty { margin: 0; color: var(--fg-muted); font-style: italic; }
  .ascii-art__error { margin: 0; color: var(--color-error); font-size: 0.875rem; }

  /* === bespoke App: music-theory（Pages/Apps/MusicTheory/）===
     4 模式 tab（scale / chord / frequency / transpose）。scale/chord 输出含钢琴键盘 SVG 高亮。 */
  .music { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 52rem; }
  .music__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .music__title { margin: 0; font-size: 1.25rem; }
  .music__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .music-modes { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .music-mode { display: inline-flex; position: relative; }
  .music-mode__input { position: absolute; opacity: 0; pointer-events: none; }
  .music-mode span {
    padding: 0.4rem 0.85rem; font-size: 0.8125rem; cursor: pointer;
    color: var(--fg-muted); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .music-mode.is-active span { color: var(--brand-text); background: var(--brand); border-color: var(--brand); }
  .music-mode:has(:focus-visible) span { outline: 2px solid var(--brand); outline-offset: 2px; }
  .music-panel { display: flex; flex-direction: column; gap: 1rem; }
  .music-form { margin: 0; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; }
  .music-field { display: flex; flex-direction: column; gap: 0.25rem; min-inline-size: 8rem; }
  .music-field--wide { flex: 1; min-inline-size: 14rem; }
  .music-field__label { font-size: 0.8125rem; color: var(--fg-muted); }
  .music-field__input {
    padding: 0.5rem 0.6rem; font-size: 0.9375rem;
    color: var(--fg); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); font-variant-numeric: tabular-nums;
  }
  .music-field__input--mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
  .music-field__input:focus { outline: 0; border-color: var(--brand); }
  .music-check { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; color: var(--fg-muted); }
  .music-output { display: flex; flex-direction: column; }
  .music-result { display: flex; flex-direction: column; gap: 1rem; align-items: start; }
  .music-notes { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .music-note {
    display: inline-flex; flex-direction: column; align-items: center; gap: 0.1rem;
    padding: 0.4rem 0.6rem; min-inline-size: 2.75rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  }
  .music-note.is-root { border-color: var(--brand); background: var(--surface-hover); }
  .music-note__name { font-weight: 600; font-size: 1rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
  .music-note__interval { font-size: 0.7rem; color: var(--fg-muted); }
  /* 钢琴键为乐器固有黑白色（skeuomorphic，同 barcode 条码的黑/白固定色，不随主题翻转）；
     高亮（is-on）与根音（is-root）才用 design token，保证两种含义可分辨。 */
  .music-piano { inline-size: 100%; overflow-x: auto; }
  .piano { display: block; max-inline-size: 100%; height: auto; }
  .piano__wk { fill: #f7f7fa; stroke: #c8c8d0; stroke-width: 1; }
  .piano__bk { fill: #26262c; stroke: #26262c; stroke-width: 1; }
  .piano__wk.is-on, .piano__bk.is-on { fill: var(--brand); }
  .piano__wk.is-root, .piano__bk.is-root { fill: var(--color-warning); stroke: var(--color-warning); }
  .music-rows { margin: 0; display: grid; gap: 0.5rem; }
  .music-row { display: grid; grid-template-columns: 9rem 1fr; align-items: center; gap: 0.25rem 0.75rem; }
  .music-row__label {
    margin: 0; font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--fg-muted);
  }
  .music-row__value {
    margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9375rem; font-variant-numeric: tabular-nums;
  }
  .music-actions { display: flex; gap: 0.5rem; }
  .music-action {
    padding: 0.3rem 0.7rem; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); color: var(--fg-muted); font-size: 0.8125rem; cursor: pointer;
  }
  .music-action:hover { background: var(--surface-hover); color: var(--fg); }
  .music__empty { margin: 0; color: var(--fg-muted); font-style: italic; }
  .music__error { margin: 0; color: var(--color-error); font-size: 0.875rem; }

  /* === bespoke App: sun-moon（Pages/Apps/SunMoon/）===
     单表单（纬度/经度/日期/时区）→ 太阳事件行 + 月相卡片（月面 SVG）。 */
  .sunmoon { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 52rem; }
  .sunmoon__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .sunmoon__title { margin: 0; font-size: 1.25rem; }
  .sunmoon__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .sunmoon-form { margin: 0; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; }
  .sunmoon-field { display: flex; flex-direction: column; gap: 0.25rem; min-inline-size: 8rem; }
  .sunmoon-field__label { font-size: 0.8125rem; color: var(--fg-muted); }
  .sunmoon-field__input {
    padding: 0.5rem 0.6rem; font-size: 0.9375rem;
    color: var(--fg); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); font-variant-numeric: tabular-nums;
  }
  .sunmoon-field__input:focus { outline: 0; border-color: var(--brand); }
  .sunmoon-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); align-items: start; }
  .sunmoon-banner {
    margin: 0 0 0.75rem; padding: 0.5rem 0.6rem; border-radius: var(--radius);
    background: var(--color-warning-bg); color: var(--fg); font-size: 0.875rem;
  }
  .sunmoon-rows { margin: 0; display: grid; gap: 0.4rem; }
  .sunmoon-row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0.75rem; }
  .sunmoon-row dt { margin: 0; font-size: 0.8125rem; color: var(--fg-muted); }
  .sunmoon-row dd {
    margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9375rem; font-variant-numeric: tabular-nums; text-align: end;
  }
  .sunmoon-row--total { padding-block-start: 0.4rem; border-block-start: 1px solid var(--border); font-weight: 600; }
  .sunmoon-row--total dt { color: var(--fg); }
  .sunmoon-moon { display: flex; flex-direction: column; gap: 0.75rem; align-items: center; }
  .sunmoon-moon__face { inline-size: 8rem; max-inline-size: 100%; }
  .sunmoon-moon .sunmoon-rows { inline-size: 100%; }
  /* 月面：暗盘用低调表面色、受照亮部用暖色 token（同 design token 约定）。 */
  .moon { display: block; inline-size: 100%; height: auto; }
  .moon__disc { fill: var(--surface-hover); stroke: var(--border); stroke-width: 1; }
  .moon__lit { fill: var(--color-warning); }
  .sunmoon__error { margin: 0; color: var(--color-error); font-size: 0.875rem; }

  /* === bespoke App: resistor-calculator（Pages/Apps/ResistorCalculator/）===
     4 模式 tab（color-code / band-finder / ohms-law / led-resistor）。前两者输出电阻彩色 SVG。 */
  .resistor-app { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 52rem; }
  .resistor-app__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .resistor-app__title { margin: 0; font-size: 1.25rem; }
  .resistor-app__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .resistor-modes { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .resistor-mode { display: inline-flex; position: relative; }
  .resistor-mode__input { position: absolute; opacity: 0; pointer-events: none; }
  .resistor-mode span {
    padding: 0.4rem 0.85rem; font-size: 0.8125rem; cursor: pointer;
    color: var(--fg-muted); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .resistor-mode.is-active span { color: var(--brand-text); background: var(--brand); border-color: var(--brand); }
  .resistor-mode:has(:focus-visible) span { outline: 2px solid var(--brand); outline-offset: 2px; }
  .resistor-panel { display: flex; flex-direction: column; gap: 1rem; }
  .resistor-hint { margin: 0; color: var(--fg-muted); font-size: 0.8125rem; }
  .resistor-form { margin: 0; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; }
  .resistor-field { display: flex; flex-direction: column; gap: 0.25rem; min-inline-size: 8rem; }
  .resistor-field__label { font-size: 0.8125rem; color: var(--fg-muted); }
  .resistor-field__input {
    padding: 0.5rem 0.6rem; font-size: 0.9375rem;
    color: var(--fg); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); font-variant-numeric: tabular-nums;
  }
  .resistor-field__input:focus { outline: 0; border-color: var(--brand); }
  .resistor-result { display: flex; flex-direction: column; gap: 0.75rem; align-items: start; }
  .resistor-svg { inline-size: 100%; max-inline-size: 22rem; }
  .resistor { display: block; inline-size: 100%; height: auto; }
  .resistor-value { margin: 0; font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
  .resistor-value__tol { font-size: 1rem; font-weight: 400; color: var(--fg-muted); }
  .resistor-sub { margin: 0; color: var(--fg-muted); font-size: 0.875rem; }
  .resistor-bandlist { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .resistor-chip {
    padding: 0.25rem 0.6rem; font-size: 0.8125rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: 9999px;
  }
  .resistor-rows { margin: 0; display: grid; gap: 0.4rem; max-inline-size: 24rem; }
  .resistor-row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0.75rem; }
  .resistor-row dt { margin: 0; font-size: 0.8125rem; color: var(--fg-muted); }
  .resistor-row dd {
    margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9375rem; font-variant-numeric: tabular-nums; text-align: end;
  }
  .resistor__error { margin: 0; color: var(--color-error); font-size: 0.875rem; }

  /* === bespoke App: matrix-calculator（Pages/Apps/MatrixCalculator/）===
     单运算选择 + 矩阵 A（+ 条件 B / 向量 b）→ 结果（矩阵网格 / 标量 / 秩）。精确分数。 */
  .matrix { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 52rem; }
  .matrix__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .matrix__title { margin: 0; font-size: 1.25rem; }
  .matrix__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .matrix-form { margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
  .matrix-field { display: flex; flex-direction: column; gap: 0.25rem; }
  .matrix-field__label { font-size: 0.8125rem; color: var(--fg-muted); }
  .matrix-field__input {
    padding: 0.5rem 0.6rem; font-size: 0.9375rem;
    color: var(--fg); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .matrix-field__input:focus { outline: 0; border-color: var(--brand); }
  .matrix-field__input--grid {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize: vertical;
  }
  .matrix-inputs { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
  .matrix-field--grid { min-inline-size: 0; }
  .matrix-hint { margin: 0; color: var(--fg-muted); font-size: 0.8125rem; }
  .matrix-output { display: flex; flex-direction: column; }
  .matrix-result { display: flex; flex-direction: column; gap: 0.5rem; align-items: start; }
  .matrix-scalar { margin: 0; font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
  .matrix-action {
    padding: 0.3rem 0.7rem; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); color: var(--fg-muted); font-size: 0.8125rem; cursor: pointer;
  }
  .matrix-action:hover { background: var(--surface-hover); color: var(--fg); }
  .matrix-grid {
    border-collapse: collapse; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
  }
  .matrix-grid td {
    padding: 0.35rem 0.7rem; text-align: end; border: 1px solid var(--border); background: var(--surface);
  }
  .matrix__error { margin: 0; color: var(--color-error); font-size: 0.875rem; }

  /* === bespoke App: molar-mass（Pages/Apps/MolarMass/）===
     化学式输入 → 摩尔质量 + 元素拆解表；可点击周期表（18 列 CSS 网格，点元素插入符号）。 */
  .molar { display: flex; flex-direction: column; gap: 1rem; max-inline-size: 52rem; }
  .molar__header { display: flex; flex-direction: column; gap: 0.25rem; }
  .molar__title { margin: 0; font-size: 1.25rem; }
  .molar__description { margin: 0; color: var(--fg-muted); font-size: 0.9375rem; }
  .molar-form { margin: 0; }
  .molar-field { display: flex; flex-direction: column; gap: 0.25rem; }
  .molar-field__label { font-size: 0.8125rem; color: var(--fg-muted); }
  .molar-field__input {
    padding: 0.5rem 0.6rem; font-size: 1rem;
    color: var(--fg); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }
  .molar-field__input:focus { outline: 0; border-color: var(--brand); }
  .molar-result { display: flex; flex-direction: column; gap: 0.75rem; align-items: start; }
  .molar-total { margin: 0; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
  .molar-total__value { font-size: 1.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
  .molar-total__unit { color: var(--fg-muted); }
  .molar-copy {
    padding: 0.25rem 0.6rem; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); color: var(--fg-muted); font-size: 0.75rem; cursor: pointer;
  }
  .molar-copy:hover { background: var(--surface-hover); color: var(--fg); }
  .molar-table { border-collapse: collapse; inline-size: 100%; max-inline-size: 32rem; font-size: 0.875rem; }
  .molar-table th, .molar-table td {
    padding: 0.35rem 0.6rem; text-align: end; border-block-end: 1px solid var(--border);
  }
  .molar-table th { color: var(--fg-muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
  .molar-table th:first-child, .molar-table td:first-child { text-align: start; }
  .molar-table td { font-variant-numeric: tabular-nums; }
  .molar-sym { font-weight: 600; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
  .molar__empty { margin: 0; color: var(--fg-muted); font-style: italic; }
  .molar__error { margin: 0; color: var(--color-error); font-size: 0.875rem; }
  .molar-ptable-wrap { overflow-x: auto; }
  .molar-ptable-summary { cursor: pointer; font-size: 0.875rem; color: var(--fg-muted); padding-block: 0.4rem; }
  .ptable {
    display: grid; grid-template-columns: repeat(18, 2.1rem); grid-auto-rows: 2.3rem; gap: 2px;
    inline-size: max-content; padding-block-start: 0.5rem;
  }
  .ptable__el {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
    padding: 0.1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 2px;
    cursor: pointer; line-height: 1.05;
  }
  .ptable__el:hover { background: var(--brand); border-color: var(--brand); }
  .ptable__el:hover .ptable__sym, .ptable__el:hover .ptable__z { color: var(--brand-text); }
  .ptable__z { font-size: 0.5rem; color: var(--fg-muted); }
  .ptable__sym { font-size: 0.75rem; font-weight: 600; }

  /* === regex-playground 新增：match/diagram 模式切换 + 铁路图（railroad diagram）SVG === */
  .regex-app__modes { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .regex-app__mode { display: inline-flex; position: relative; }
  .regex-app__mode-input { position: absolute; opacity: 0; pointer-events: none; }
  .regex-app__mode span {
    padding: 0.4rem 0.85rem; font-size: 0.8125rem; cursor: pointer;
    color: var(--fg-muted); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .regex-app__mode.is-active span { color: var(--brand-text); background: var(--brand); border-color: var(--brand); }
  .regex-app__mode:has(:focus-visible) span { outline: 2px solid var(--brand); outline-offset: 2px; }
  .regex-app__match-only { display: flex; flex-direction: column; gap: 0.75rem; }
  .regex-app__diagram { overflow-x: auto; padding-block: 0.5rem; }
  /* 铁路图：连线用前景弱化色、终结框用品牌色描边、分组虚线框、文本等宽。配色全走 design token。 */
  .rr { display: block; height: auto; }
  .rr__line { fill: none; stroke: var(--fg-muted); stroke-width: 1.5; }
  .rr__node { fill: var(--fg-muted); }
  .rr__box { fill: var(--surface); stroke: var(--brand); stroke-width: 1.5; }
  .rr__box--charclass, .rr__box--escape, .rr__box--any, .rr__box--anchor, .rr__box--empty { stroke: var(--fg-muted); }
  .rr__text { fill: var(--fg); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
  .rr__label { fill: var(--fg-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; }
  .rr__group { fill: none; stroke: var(--border); stroke-dasharray: 4 3; }
}