/* ============================================================================
   HWS 统一皮肤 · 历史样式兼容桥 (hws-bridge.css)
   ----------------------------------------------------------------------------
   角色：把 site.css / portal-mail.css / portal-calendar.css / portal-news.css /
        legal.css / workspace-entry.css 这些「写死冷蓝或暖色 hex、不走语义令牌」
        的历史实现，接到 hws-tokens.css 的语义契约（--hws-color-* / --hws-radius-* /
        --hws-shadow-* / --hws-font-*）上，让换皮肤 = 换 html[data-skin] 属性。

   加载顺序（所有页面统一，见 BRIEF §3.6）：
     site.css → 页面自有 CSS（home.css | legal.css | workspace-entry.css）
     → portal-mail.css → portal-calendar.css → portal-news.css → portal-shell.css
     → hws-tokens.css → skin-warm.css → skin-air.css → skin-paper.css
     → hws-bridge.css（本文件）→ hws-views.css → drive bundle → hws-drive.css
     → hws-surface.css（最终外观裁决）
   本文件故意排在 skins 之后、views/surface 之前：
     · 在 skins 之后，才能读到 --hws-color-*；
     · 在 surface 之前，是因为 surface 做「现代组件层」的最终裁决，
       bridge 只负责把「老实现」拽回令牌，不去抢新组件的几何与动效设计。

   CSP：style-src 'self' —— 本文件不产生内联样式，全部规则落在 .css 里。
   颜色纪律：除「必须始终是深色的代码/终端面板」外，本文件不新写 hex；
            统一用 var(--hws-color-*) 或 color-mix(in srgb, 令牌 x%, 令牌)。

   为什么选择器统一加 html[data-skin] 前缀（关键，别删）：
     site.css 自身 :root 与组件规则是 (0,1,0)；服务私有命名空间 .portal-mail 是
     (0,1,0)，且挂在组件元素自身（不会被 :root 继承覆盖）；site.css 的深色分支
     [data-theme="dark"] .portal-page / [data-theme="dark"] .portal-mail 是 (0,2,0)~ (0,3,0)。
     html[data-skin] .portal-mail 是 (0,2,1)，html[data-skin] .portal-mail .button-primary
     是 (0,3,1)：恰好比「私有命名空间定义」和「深色分支」都高一级，所以：
       1) 能把 --mail-* / --cal-* 从冷蓝板改指语义令牌（否则服务 CSS 自己的定义赢）；
       2) 能在深色主题下压过 site.css 写死的 navy 覆盖（否则深色下又变回冷蓝）。
     用类名而不是 [data-skin="warm"] 之类的具体值，是因为本文件要被三套皮肤共用；
     皮肤间的差异全部由 skin-*.css 的语义令牌取值承担，bridge 不该知道皮肤名。
   ========================================================================== */

/* ============================================================================
   0. site.css 里引用了、但历史令牌表里不存在的别名
   ----------------------------------------------------------------------------
   site.css 有 var(--hws-primary, #edf4ff) / var(--hws-canvas, #f6f8fb) /
   var(--surface-2, #16253d) 这类写法：变量未定义时浏览器会吃「冷蓝 fallback」。
   这里补齐映射，fallback 就永远不会生效。
   ========================================================================== */
:root {
    --hws-primary: var(--hws-color-accent);
    --hws-primary-soft: var(--hws-color-accent-soft);
    --hws-canvas: var(--hws-color-canvas);
    --surface-2: var(--hws-color-surface-soft);
}

/* 页面自有 CSS 里没被 tokens 覆盖的私有兜底键（legal.css 之外的旧名） */
html[data-skin] {
    --disabled-fill: var(--hws-color-surface-soft);
    --danger-bg: color-mix(in srgb, var(--hws-color-danger) 12%, var(--hws-color-surface));
}

/* ============================================================================
   1. 服务私有命名空间 → 语义令牌
   ----------------------------------------------------------------------------
   邮件 / 日历各自在自己的根元素上定义了一整套 --mail-* / --cal-* 冷蓝色板，
   这些定义「长在组件元素上」，:root 的别名覆盖不到它们；必须用 (0,2,1) 的
   html[data-skin] .portal-mail 直接改写在同一个元素上。
   深色分支 [data-theme="dark"] .portal-mail 是 (0,2,0)，同样被本规则压过，
   于是深色取值也回到 skin 提供的语义令牌（皮肤自己带深色值）。
   ========================================================================== */

/* 1.1 邮箱工作台（portal-mail.css 顶部 --mail-* 冷蓝板，字体只写 PingFang） */
html[data-skin] .portal-mail {
    --mail-canvas: var(--hws-color-canvas);
    --mail-surface: var(--hws-color-surface);
    --mail-ink: var(--hws-color-ink);
    --mail-text: var(--hws-color-text);
    --mail-muted: var(--hws-color-muted);
    --mail-border: var(--hws-color-line);
    --mail-accent: var(--hws-color-accent);
    --mail-selected: var(--hws-color-accent-soft);
    --mail-hover: var(--hws-color-surface-soft);
    --mail-danger: var(--hws-color-danger);
    --mail-shadow: var(--hws-shadow-3);
    /* portal-mail.css 末尾 .mail-contact-row 还在用 var(--border, #e4e5e1) */
    --border: var(--hws-color-line);
    color: var(--hws-color-text);
    font-family: var(--hws-font-sans);
}
/* 邮箱整页底色：--mail-canvas 只在邮件组件内部生效，外壳 class 需要单独接 */
html[data-skin] .mail-workbench-active {
    background: var(--hws-color-canvas);
}

/* 1.2 日历工作台（portal-calendar.css 顶部 --cal-* 冷蓝板，字体只写 PingFang） */
html[data-skin] .portal-calendar {
    --cal-canvas: var(--hws-color-canvas);
    --cal-surface: var(--hws-color-surface);
    --cal-ink: var(--hws-color-ink);
    --cal-text: var(--hws-color-text);
    --cal-muted: var(--hws-color-muted);
    --cal-line: var(--hws-color-line);
    --cal-blue: var(--hws-color-accent);
    --cal-hover: var(--hws-color-surface-soft);
    color: var(--hws-color-text);
    font-family: var(--hws-font-sans);
}

/* 1.3 法务页（legal.css 用 --w-* 这套暖色私有板 + !important；映射回语义令牌，
        !important 的值本身不用动，换了令牌值就跟着换皮肤） */
html[data-skin] {
    --w-canvas: var(--hws-color-canvas);
    --w-surface: var(--hws-color-surface);
    --w-cream: var(--hws-color-surface-soft);
    --w-ink: var(--hws-color-ink);
    --w-ink-soft: var(--hws-color-text);
    --w-ink-on-tint: var(--hws-color-text);
    --w-jade: var(--hws-color-accent-deep);
    --w-sep: var(--hws-color-line);
    --w-blush: var(--hws-color-tint-1);
}

/* 1.4 登录入口（workspace-entry.css 用的是 --canvas/--ink/--action 等通用名，
        tokens.css 的 :root 别名已在它之后加载并覆盖，这里只补 tokens 没映射的两个键） */
html[data-skin] {
    --disabled-fill: var(--hws-color-surface-soft);
    --danger-bg: color-mix(in srgb, var(--hws-color-danger) 12%, var(--hws-color-surface));
}

/* ============================================================================
   2. 全站外壳（site.css 的共享壳：页头 / 按钮 / 焦点环 / 页脚）
   ----------------------------------------------------------------------------
   这些规则同时服务 index.html（暖色首页，home.css 之后加载）与 legal.html。
   bridge 在 home.css 之后，所以每条都要保证「warm 皮肤下与冻结稿等价」：
   凡是能等价替换的（canvas 94% / line 55% 等），取与 home.css 相同的配方。
   ========================================================================== */

/* 2.1 跳到主内容 */
html[data-skin] .skip-link {
    color: var(--hws-color-surface);
    background: var(--hws-color-ink);
    border-radius: var(--hws-radius-xs);
}

/* 2.2 官网/法务页头（home.css 的毛玻璃页头 + site.css 的冷蓝页头共用）
       site.css: background: rgb(248 250 252 / 86%) → 冷蓝
       home.css: background: rgb(251 244 234 / 94%) → warm canvas 94%
       bridge 取 94% 版面值：warm 下与 home.css 等价，air/paper 下跟随各自 canvas。 */
html[data-skin] .site-header {
    background: color-mix(in srgb, var(--hws-color-canvas) 94%, transparent);
}
html[data-skin] .site-header.is-scrolled {
    border-bottom-color: var(--hws-color-line);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--hws-color-line) 55%, transparent);
}
html[data-skin] .desktop-nav a,
html[data-skin] .desktop-nav a::after {
    color: var(--hws-color-text);
}
html[data-skin] .desktop-nav a::after { background: var(--hws-color-accent); }
html[data-skin] .text-action { color: var(--hws-color-text); }
html[data-skin] .menu-toggle {
    color: var(--hws-color-ink);
    background: var(--hws-color-surface);
    border-color: var(--hws-color-line);
}
html[data-skin] .mobile-menu {
    background: var(--hws-color-surface);
    border-top-color: color-mix(in srgb, var(--hws-color-line) 70%, transparent);
}

/* 2.3 按钮族（site.css: 主按钮白字 + 蓝色阴影；次按钮白底冷蓝描边）
       warm 皮肤主按钮 = 青玉底 + 可可字（--hws-color-on-accent），不再强制白字。 */
html[data-skin] .button-primary {
    color: var(--hws-color-on-accent);
    background: var(--hws-color-accent);
    border-color: transparent;
    box-shadow: none; /* 清掉 site.css 的蓝色主按钮阴影 */
}
html[data-skin] .button-primary:hover {
    color: var(--hws-color-on-accent);
    background: color-mix(in srgb, var(--hws-color-accent) 88%, var(--hws-color-ink));
    box-shadow: none;
}
/* 次按钮：site.css 是白底冷蓝描边；统一为「透明底 + 发丝线」，与 hws-surface 一致
   （portal 的最终裁决由 surface 做，这里只是把非 portal 页面的旧值也接上） */
html[data-skin] .button-secondary {
    color: var(--hws-color-text);
    background: transparent;
    border-color: var(--hws-color-line-strong);
    box-shadow: none;
}
html[data-skin] .button-secondary:hover {
    color: var(--hws-color-ink);
    background: var(--hws-color-surface-soft);
    border-color: var(--hws-color-line-strong);
    box-shadow: none;
}
/* site.css 的 focus 环是冷蓝 rgb(30 99 243 / 28%)；tokens 的通用焦点规则不含
   input/select/textarea，所以这里补全并统一为皮肤 --hws-color-focus。 */
html[data-skin] :is(.button, button, a, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: var(--hws-focus-ring) solid var(--hws-color-focus);
    outline-offset: var(--hws-focus-offset);
}

/* 2.4 页脚（index/legal 共用；warm 下 site-footer 由 home.css 覆盖，这里补
       legal 与 air/paper 需要的皮肤取值；footer-bottom 分隔线来源色换成 ink 10%） */
html[data-skin] .site-footer {
    background: var(--hws-color-surface-soft);
    border-top-color: var(--hws-color-line);
}
html[data-skin] .footer-grid a:hover,
html[data-skin] .footer-grid button:hover { color: var(--hws-color-accent-deep); }
html[data-skin] .footer-bottom {
    border-top-color: color-mix(in srgb, var(--hws-color-ink) 10%, transparent);
}

/* ============================================================================
   3. Portal 工作台：site.css 里不属于任何皮肤的硬编码
   ========================================================================== */

/* 3.1 页面基底 + 深色分支别名重挂（本文件最重要的一段）
   ----------------------------------------------------------------------------
   site.css 的 [data-theme="dark"] .portal-page 在 .portal-page 元素上把
   --ink / --text / --muted / --line / --line-soft / --paper / --canvas /
   --blue / --blue-deep / --cyan / --success / --shadow 以及 --hws-* 一整套
   重写成 navy (#0b1524/#111e33/...)。那套值是 (0,2,0)，会压过 tokens.css 的
   :root 别名（继承被元素自身声明覆盖），并且自带「冷蓝」写死。
   这里用 (0,2,1) 在同一个元素上重挂回语义令牌：深色取值由 skin-*.css 的
   html[data-skin=X][data-theme="dark"] 提供，bridge 只负责「接线」。
   ========================================================================== */
html[data-skin] .portal-page {
    /* site.css 旧语义别名 */
    --ink: var(--hws-color-ink);
    --text: var(--hws-color-text);
    --muted: var(--hws-color-muted);
    --line: var(--hws-color-line-strong);
    --line-soft: var(--hws-color-line);
    --paper: var(--hws-color-surface);
    --canvas: var(--hws-color-canvas);
    --blue: var(--hws-color-accent);
    --blue-deep: var(--hws-color-accent-deep);
    --cyan: var(--hws-color-agent);
    --success: var(--hws-color-success);
    --warning: var(--hws-color-warning);
    --danger: var(--hws-color-danger);
    --shadow: var(--hws-shadow-2);
    /* site.css 的 --hws-* / portal-news 用到的 --hws-* 旧名（tokens 已给 :root
       映射，但深色分支在 .portal-page 上又写死了 navy，必须在这里重挂） */
    --hws-ink: var(--hws-color-ink);
    --hws-text: var(--hws-color-text);
    --hws-muted: var(--hws-color-muted);
    --hws-border: var(--hws-color-line);
    --hws-surface: var(--hws-color-canvas);
    --hws-raised: var(--hws-color-surface);
    --hws-desktop: var(--hws-color-accent);
    --hws-desktop-deep: var(--hws-color-accent-deep);
    --hws-agent: var(--hws-color-agent);
    --hws-model: var(--hws-color-success);
    --hws-token: var(--hws-color-warning);
    /* 页面底色：site.css 浅色是 radial 冷蓝渐变，深色是 navy 渐变，均不跟皮肤 */
    background: var(--hws-color-canvas);
    color: var(--hws-color-text);
}

/* 3.2 空态容器（site.css .portal-empty：冷蓝 1px 边 + 72% 白底） */
html[data-skin] .portal-empty {
    border-color: var(--hws-color-line);
    background: color-mix(in srgb, var(--hws-color-surface) 72%, transparent);
}

/* 3.3 云桌面卡片
   卡片主体（边线/底色/圆角/阴影）由 hws-surface 裁决；这里只接 portal.js
   按主机 ID 生成的 --host-accent 的「兜底色」，以及卡片文字色。
   注意：portal.js 会用 style.setProperty 覆盖 --host-accent（多桌面识别色，
   属于用户数据的可视化，不当作皮肤硬编码处理），inline 优先级高于本规则，
   所以这里只影响 JS 未执行时的首帧。 */
html[data-skin] .desktop-card {
    --host-accent: var(--hws-color-accent);
    --host-accent-soft: var(--hws-color-accent-soft);
    color: var(--hws-color-text);
}
html[data-skin] .desktop-label-form input { border-color: var(--hws-color-line-strong); }
html[data-skin] .desktop-label-feedback { color: var(--hws-color-success); }
html[data-skin] .desktop-label-feedback.is-error { color: var(--hws-color-danger); }

/* 3.4 工作空间舞台内的分区底色 / 生命周期清单
       site.css 把 .workspace-stage-tools / .desktop-lifecycle 刷成 #fff（深色分支才走变量），
       生命周期条写死绿/红。统一接语义色。 */
html[data-skin] .workspace-stage-tools,
html[data-skin] .desktop-lifecycle { background: var(--hws-color-surface); }
html[data-skin] .portal-lifecycle-step.is-ok .portal-lifecycle-step-bar { background: var(--hws-color-success); }
html[data-skin] .portal-lifecycle-step.is-failed .portal-lifecycle-step-bar { background: var(--hws-color-danger); }
html[data-skin] .portal-lifecycle-step.is-failed .portal-lifecycle-step-meta { color: var(--hws-color-danger); }
html[data-skin] .portal-lifecycle-step.is-running .portal-lifecycle-step-name { color: var(--hws-color-accent-deep); }

/* 3.5 AI 助理入口卡（site.css 蓝色渐变块 + 蓝青头像 + 状态色）
       warm 下换成「accent-soft → surface」的柔和面，air/paper 自动跟随。 */
html[data-skin] .agent-entry {
    border-color: color-mix(in srgb, var(--hws-color-accent) 24%, var(--hws-color-line));
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--hws-color-accent-soft) 70%, var(--hws-color-surface)) 0%,
            color-mix(in srgb, var(--hws-color-tint-1) 26%, var(--hws-color-surface)) 55%,
            var(--hws-color-surface) 100%);
}
html[data-skin] .agent-entry-glow {
    background: radial-gradient(closest-side,
        color-mix(in srgb, var(--hws-color-agent) 24%, transparent), transparent);
}
html[data-skin] .agent-avatar {
    color: var(--hws-color-on-accent);
    background: linear-gradient(140deg, var(--hws-color-accent), var(--hws-color-agent));
    box-shadow: var(--hws-shadow-1);
}
html[data-skin] .agent-avatar-soon {
    background: var(--hws-color-surface-sunk);
    box-shadow: none;
}
html[data-skin] .agent-status { color: var(--hws-color-muted); }
html[data-skin] .agent-status.is-online { color: var(--hws-color-success); }
html[data-skin] .agent-status.is-online .agent-status-dot {
    background: var(--hws-color-success);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hws-color-success) 18%, transparent);
}
html[data-skin] .agent-status.is-offline .agent-status-dot { background: var(--hws-color-line-strong); }
html[data-skin] .agent-status.is-incompatible { color: var(--hws-color-warning); }
html[data-skin] .agent-status.is-incompatible .agent-status-dot { background: var(--hws-color-warning); }
/* 同名的 keyframes 后定义者胜出：把 site.css 的绿色脉冲换成皮肤成功色 */
@keyframes agentPulse {
    0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--hws-color-success) 18%, transparent); }
    50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--hws-color-success) 5%, transparent); }
}
html[data-skin] .agent-entry-soon {
    background: var(--hws-color-surface-soft);
    border-color: var(--hws-color-line);
}
html[data-skin] .agent-detail {
    border-top-color: color-mix(in srgb, var(--hws-color-accent) 28%, transparent);
}
html[data-skin] .agent-detail dt { color: var(--hws-color-muted); }
html[data-skin] .agent-detail dd { color: var(--hws-color-ink); }

/* 3.6 「用量」tab（site.css: 冷蓝渐变概览 + 冷蓝条形图 + 白卡 + 冷蓝表格线）
       卡片外框由 hws-surface 接管；这里处理概览、图表、徽章、表格、下钻弹层。 */
html[data-skin] .usage-overview {
    border-color: var(--hws-color-line);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--hws-color-accent) 5%, transparent) 0%,
            color-mix(in srgb, var(--hws-color-agent) 4%, transparent) 100%),
        var(--hws-color-surface);
    box-shadow: var(--hws-shadow-1);
}
html[data-skin] .usage-plan-trigger-label,
html[data-skin] .usage-service-index { color: var(--hws-color-accent-deep); }
html[data-skin] .usage-plan-popover {
    border-color: var(--hws-color-line);
    background: var(--hws-color-surface);
    box-shadow: var(--hws-shadow-3);
}
html[data-skin] .usage-plan-popover header { border-bottom-color: var(--hws-color-line); }
html[data-skin] .usage-plan-popover header span { color: var(--hws-color-accent-deep); }
html[data-skin] .usage-plan-popover header button:hover { background: var(--hws-color-surface-soft); }
html[data-skin] .usage-plan-popover > p { border-top-color: var(--hws-color-line); }
html[data-skin] .usage-resource-strip {
    border-color: var(--hws-color-line);
    background: var(--hws-color-surface);
    box-shadow: var(--hws-shadow-1);
}
html[data-skin] .usage-card-compact + .usage-card-compact { border-left-color: var(--hws-color-line); }
html[data-skin] .usage-card-soon { background: var(--hws-color-surface-soft); }
html[data-skin] .usage-card-model .usage-stats { border-color: var(--hws-color-line); }
html[data-skin] .usage-live-badge {
    color: var(--hws-color-success);
    background: color-mix(in srgb, var(--hws-color-success) 14%, var(--hws-color-surface));
}
html[data-skin] .usage-credit-badge {
    border-color: color-mix(in srgb, var(--hws-color-warning) 42%, var(--hws-color-line));
    background: color-mix(in srgb, var(--hws-color-warning) 12%, var(--hws-color-surface));
    color: color-mix(in srgb, var(--hws-color-warning) 88%, var(--hws-color-ink));
}
html[data-skin] .usage-refund-note { color: var(--hws-color-warning); }
html[data-skin] .usage-balance-details {
    border-color: var(--hws-color-line);
    background: var(--hws-color-surface-soft);
}
html[data-skin] .usage-balance-details[open] summary { border-bottom-color: var(--hws-color-line); }
html[data-skin] .usage-range {
    border-color: var(--hws-color-line-strong);
    background: color-mix(in srgb, var(--hws-color-surface) 72%, transparent);
}
html[data-skin] .usage-range-btn.is-active {
    color: var(--hws-color-ink);
    background: var(--hws-color-surface);
    box-shadow: var(--hws-shadow-1);
}
html[data-skin] .usage-note {
    border-color: color-mix(in srgb, var(--hws-color-warning) 42%, var(--hws-color-line));
    background: color-mix(in srgb, var(--hws-color-warning) 12%, var(--hws-color-surface));
    color: color-mix(in srgb, var(--hws-color-warning) 88%, var(--hws-color-ink));
}
html[data-skin] .usage-chart {
    border-color: var(--hws-color-line);
    background: var(--hws-color-surface);
}
html[data-skin] .usage-table-wrap {
    border-color: var(--hws-color-line);
    background: var(--hws-color-surface);
}
html[data-skin] .usage-table th { border-bottom-color: var(--hws-color-line); }
html[data-skin] .usage-table td { border-bottom-color: var(--hws-color-line); }
html[data-skin] .usage-table tr.is-refund td {
    background: color-mix(in srgb, var(--hws-color-warning) 12%, var(--hws-color-surface));
}
html[data-skin] .usage-refund-badge {
    background: color-mix(in srgb, var(--hws-color-warning) 16%, var(--hws-color-surface));
    color: color-mix(in srgb, var(--hws-color-warning) 88%, var(--hws-color-ink));
}
/* 条形图：冷蓝 → 湖青渐变，换成「主操作色 → AI 助理色」 */
html[data-skin] .usage-bar {
    background: linear-gradient(180deg, var(--hws-color-accent), var(--hws-color-agent));
}
html[data-skin] .usage-bar.is-refund { background: var(--hws-color-warning); }
html[data-skin] .usage-bar-label { color: var(--hws-color-muted); }
html[data-skin] .usage-loading,
html[data-skin] .usage-empty { color: var(--hws-color-muted); }

/* 3.7 MCP 网关视图（site.css: 连接器 / 状态 pill / 表格 / 概览 / 页签） */
html[data-skin] .mcp-connector { border-left-color: var(--hws-color-line-strong); }
html[data-skin] .mcp-connector.is-online { border-left-color: var(--hws-color-success); }
html[data-skin] .mcp-connector.is-online .mcp-dot {
    background: var(--hws-color-success);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--hws-color-success) 16%, transparent);
}
html[data-skin] .mcp-connector.is-handshaking,
html[data-skin] .mcp-connector.is-connecting { border-left-color: var(--hws-color-warning); }
html[data-skin] .mcp-connector.is-handshaking .mcp-dot,
html[data-skin] .mcp-connector.is-connecting .mcp-dot { background: var(--hws-color-warning); }
html[data-skin] .mcp-connector.is-offline,
html[data-skin] .mcp-connector.is-error { border-left-color: var(--hws-color-danger); }
html[data-skin] .mcp-connector.is-offline .mcp-dot,
html[data-skin] .mcp-connector.is-error .mcp-dot { background: var(--hws-color-danger); }
html[data-skin] .mcp-pill {
    color: var(--hws-color-muted);
    background: color-mix(in srgb, var(--hws-color-muted) 14%, transparent);
}
html[data-skin] .mcp-pill-online,
html[data-skin] .mcp-pill-ok {
    color: var(--hws-color-success);
    background: color-mix(in srgb, var(--hws-color-success) 14%, transparent);
}
html[data-skin] .mcp-pill-handshaking,
html[data-skin] .mcp-pill-warn {
    color: var(--hws-color-warning);
    background: color-mix(in srgb, var(--hws-color-warning) 16%, transparent);
}
html[data-skin] .mcp-pill-bad {
    color: var(--hws-color-danger);
    background: color-mix(in srgb, var(--hws-color-danger) 10%, transparent);
}
html[data-skin] .mcp-danger { color: var(--hws-color-danger) !important; }
html[data-skin] .mcp-status-error,
html[data-skin] .mcp-status-timeout,
html[data-skin] .mcp-status-offline { color: var(--hws-color-danger) !important; }
html[data-skin] .mcp-status-quota { color: var(--hws-color-warning) !important; }
html[data-skin] .mcp-status-ok { color: var(--hws-color-success) !important; }
html[data-skin] .mcp-tabs { border-bottom-color: var(--hws-color-line); }
html[data-skin] .mcp-tabs .mcp-tab[aria-selected="true"] {
    border-bottom-color: var(--hws-color-accent);
    color: var(--hws-color-accent-deep);
}
html[data-skin] .mcp-tabs .mcp-tab:hover { color: var(--hws-color-accent-deep); }
/* mcp-card / mcp-dialog / 表格线等已由 site.css 的 var(--line-soft)/var(--paper)
   别名跟随皮肤，最终外观交给 hws-surface 裁决，本文件不重复声明。 */

/* 3.8 消息中心 / 工单中心（site.css 里 .portal-center-* 的冷蓝硬编码） */
html[data-skin] .portal-search-field:focus-within {
    border-color: var(--hws-color-accent-deep);
    box-shadow: 0 0 0 var(--hws-focus-ring) color-mix(in srgb, var(--hws-color-accent) 14%, transparent);
}
html[data-skin] .portal-filter.is-active {
    color: var(--hws-color-accent-deep);
    background: var(--hws-color-accent-soft);
}
html[data-skin] .portal-center-layout { box-shadow: var(--hws-shadow-2); }
html[data-skin] .portal-center-list {
    border-right-color: var(--hws-color-line);
    background: color-mix(in srgb, var(--hws-color-canvas) 65%, var(--hws-color-surface));
}
html[data-skin] .portal-message {
    border-color: transparent;
    background: transparent;
    color: var(--hws-color-text);
}
html[data-skin] .portal-message.is-unread {
    border-left-color: var(--hws-color-accent);
    background: var(--hws-color-accent-soft);
}
html[data-skin] .portal-message-body { color: var(--hws-color-text); }
html[data-skin] .portal-message-meta { color: var(--hws-color-accent-deep); }
html[data-skin] .portal-message-unread {
    background: var(--hws-color-danger);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--hws-color-danger) 10%, transparent);
}
html[data-skin] .portal-unread-badge {
    color: var(--hws-color-surface);
    background: var(--hws-color-danger);
}
html[data-skin] .sensitive-message-gate {
    border-color: color-mix(in srgb, var(--hws-color-warning) 45%, var(--hws-color-line));
    background: color-mix(in srgb, var(--hws-color-warning) 10%, var(--hws-color-surface));
    color: var(--hws-color-ink);
}
html[data-skin] .sensitive-message-gate p { color: var(--hws-color-warning); }
html[data-skin] .ticket-status {
    color: var(--hws-color-text);
    background: var(--hws-color-canvas);
}
html[data-skin] .ticket-status-pending_user {
    color: var(--hws-color-warning);
    background: color-mix(in srgb, var(--hws-color-warning) 14%, var(--hws-color-surface));
}
html[data-skin] .ticket-status-resolved {
    color: var(--hws-color-success);
    background: color-mix(in srgb, var(--hws-color-success) 12%, var(--hws-color-surface));
}
html[data-skin] .portal-ticket {
    border-color: transparent;
    background: transparent;
    color: var(--hws-color-text);
}
html[data-skin] .portal-ticket:hover { border-color: var(--hws-color-accent-deep); }
html[data-skin] .ticket-event {
    border-color: var(--hws-color-line);
    background: var(--hws-color-surface);
}
html[data-skin] .ticket-event-user,
html[data-skin] .ticket-event-requester { border-left-color: var(--hws-color-accent); }
html[data-skin] .ticket-event-staff,
html[data-skin] .ticket-event-mcp_appkey { border-left-color: var(--hws-color-success); }
html[data-skin] .ticket-attachment-item { border-color: var(--hws-color-line); background: var(--hws-color-surface); }
html[data-skin] .ticket-attachment-item:hover { border-color: var(--hws-color-accent-deep); }

/* 3.9 账户设置面板（site.css: 深蓝身份卡 + 白色编辑卡 + 冷蓝提示条）
       身份卡在深浅两套主题里都保持「深色反白面板」：浅色靠 --ink（可可棕），
       深色靠 --hws-color-scrim（皮肤规定它永远是深色）→ 卡内写死的浅色文字
       在两种主题下都可读，所以内部文字色保留，只把底色/阴影/边框接令牌。 */
html[data-skin] .account-sheet-backdrop {
    background: color-mix(in srgb, var(--hws-color-scrim) 30%, transparent);
}
html[data-skin] .account-sheet-panel {
    border-left-color: var(--hws-color-line);
    background: var(--hws-color-canvas);
    box-shadow: var(--hws-shadow-3);
}
html[data-skin] .account-sheet-close {
    color: var(--hws-color-ink);
    border-color: var(--hws-color-line-strong);
    background: var(--hws-color-surface);
}
html[data-skin] .account-inline-status {
    color: var(--hws-color-warning);
    border-color: color-mix(in srgb, var(--hws-color-warning) 42%, var(--hws-color-line));
    background: color-mix(in srgb, var(--hws-color-warning) 12%, var(--hws-color-surface));
}
html[data-skin] .account-identity-card,
html[data-skin] .account-edit-card { border-color: var(--hws-color-line); }
html[data-skin] .account-identity-card { box-shadow: var(--hws-shadow-3); }
html[data-skin][data-theme="dark"] .account-identity-card { background: var(--hws-color-scrim); }
html[data-skin] .account-edit-card { background: var(--hws-color-surface); }
html[data-skin] .account-readonly {
    color: var(--hws-color-text);
    border-left-color: var(--hws-color-line-strong);
    background: var(--hws-color-surface-soft);
}
html[data-skin] .account-security-note { border-top-color: var(--hws-color-line); }
html[data-skin] .account-security-note > span {
    color: var(--hws-color-accent-deep);
    border-color: color-mix(in srgb, var(--hws-color-accent) 34%, var(--hws-color-line));
}

/* ============================================================================
   4. 服务私有 CSS 内部的写死外观（命名空间接好之后剩下的组件级硬编码）
   ----------------------------------------------------------------------------
   注意：mail / calendar / news 的「视图级组件」最终外观已由 hws-views.css 接管
   （它在 hws-bridge.css 之后加载，且同样用 html[data-skin] 前缀，同属性会覆盖本层）。
   本节的同名规则保留为 hws-views.css 未加载/未覆盖时的降级兜底，不与之争抢。
   ========================================================================== */

/* 4.1 邮箱 */
html[data-skin] .portal-mail .button-primary {
    color: var(--hws-color-on-accent);
    background: var(--hws-color-accent);
    border-color: transparent;
}
html[data-skin] .portal-mail .button-primary:hover {
    color: var(--hws-color-on-accent);
    background: color-mix(in srgb, var(--hws-color-accent) 88%, var(--hws-color-ink));
}
html[data-skin] .portal-mail .button-primary:disabled {
    color: var(--hws-color-muted);
    background: var(--hws-color-surface-soft);
    border-color: var(--hws-color-line);
}
html[data-skin] .portal-mail .mail-compose-trigger { box-shadow: var(--hws-shadow-1); }
html[data-skin] .portal-mail .form-feedback.is-ok,
html[data-skin] .portal-mail .mail-hint.form-feedback.is-ok { color: var(--hws-color-success); }
/* 头像底色：从冷蓝/紫/灰三色换成「强调浅底 / 成功浅底 / 装饰浅底 / 中性浅底」 */
html[data-skin] .portal-mail .mail-avatar {
    color: var(--hws-color-accent-deep);
    background: var(--hws-color-accent-soft);
}
html[data-skin] .portal-mail .mail-avatar-1 {
    color: var(--hws-color-success);
    background: color-mix(in srgb, var(--hws-color-success) 14%, var(--hws-color-surface));
}
html[data-skin] .portal-mail .mail-avatar-2 {
    color: var(--hws-color-agent);
    background: color-mix(in srgb, var(--hws-color-agent) 16%, var(--hws-color-surface));
}
html[data-skin] .portal-mail .mail-avatar-3 {
    color: var(--hws-color-muted);
    background: var(--hws-color-surface-soft);
}
html[data-skin] .mail-dialog::backdrop {
    background: color-mix(in srgb, var(--hws-color-scrim) 30%, transparent);
}
html[data-skin] .mail-menu-items { box-shadow: var(--hws-shadow-2); }
html[data-skin] .mail-nav-open .mail-nav-scrim {
    background: color-mix(in srgb, var(--hws-color-scrim) 38%, transparent);
}

/* 4.2 日历 */
html[data-skin] .cal-primary {
    color: var(--hws-color-on-accent);
    background: var(--hws-color-accent);
    border-color: var(--hws-color-accent);
}
html[data-skin] .cal-primary:hover {
    color: var(--hws-color-on-accent);
    background: color-mix(in srgb, var(--hws-color-accent) 88%, var(--hws-color-ink));
}
html[data-skin] .cal-new { box-shadow: var(--hws-shadow-1); }
html[data-skin] .cal-date.is-today,
html[data-skin] .cal-mini-grid button.is-today { color: var(--hws-color-on-accent); }
/* 事件色默认值：#6688d5 是冷蓝；无自定义颜色的日历走皮肤主色。
   有颜色的日历由 portal-calendar.js 用 style.setProperty('--cal-event-color')
   覆盖（inline 优先），所以这里只动默认值。 */
html[data-skin] .cal-event-pill,
html[data-skin] .cal-day-event { --cal-event-color: var(--hws-color-accent); }
/* 三种事件色相（绿/紫/橙）→ 成功 / AI 助理 / 警告 */
html[data-skin] .cal-tone-green {
    border-color: var(--hws-color-success);
    background: color-mix(in srgb, var(--hws-color-success) 12%, var(--hws-color-surface));
    color: var(--hws-color-success);
}
html[data-skin] .cal-tone-purple {
    border-color: var(--hws-color-agent);
    background: color-mix(in srgb, var(--hws-color-agent) 12%, var(--hws-color-surface));
    color: var(--hws-color-agent);
}
html[data-skin] .cal-tone-orange {
    border-color: var(--hws-color-warning);
    background: color-mix(in srgb, var(--hws-color-warning) 12%, var(--hws-color-surface));
    color: var(--hws-color-warning);
}
html[data-skin] .cal-feedback,
html[data-skin] .cal-error {
    background: color-mix(in srgb, var(--hws-color-danger) 10%, var(--hws-color-surface));
    color: var(--hws-color-danger);
}
html[data-skin] .cal-danger { color: var(--hws-color-danger); }
html[data-skin] .cal-dialog::backdrop {
    background: color-mix(in srgb, var(--hws-color-scrim) 35%, transparent);
}
/* 日历预览卡（portal-calendar-card.js 注入的被动卡片）：整套冷蓝边/底/链接换令牌 */
html[data-skin] .hws-calendar-card {
    color: var(--hws-color-text);
    border-color: var(--hws-color-line);
    border-left-color: var(--hws-color-accent);
    background: color-mix(in srgb, var(--hws-color-accent-soft) 34%, var(--hws-color-surface));
}
html[data-skin] .hws-calendar-card-kicker { color: var(--hws-color-muted); }
html[data-skin] .hws-calendar-card-time,
html[data-skin] .hws-calendar-card-location { color: var(--hws-color-text); }
html[data-skin] .hws-calendar-card-meta {
    color: var(--hws-color-accent-deep);
    background: var(--hws-color-accent-soft);
}
html[data-skin] .hws-calendar-card-footer { border-top-color: var(--hws-color-line); }
html[data-skin] .hws-calendar-card-footer small { color: var(--hws-color-muted); }
html[data-skin] .hws-calendar-card-footer a { color: var(--hws-color-accent-deep); }
html[data-skin] .hws-calendar-card-footer a:focus-visible { outline-color: var(--hws-color-focus); }

/* 4.3 新闻（portal-news.css 基本已用 site.css 别名，只剩错误态与深色主按钮） */
html[data-skin] .news-feedback.is-error,
html[data-skin] .news-private-intent.is-error { color: var(--hws-color-danger); }
html[data-skin] .news-article-quote.is-error { border-left-color: var(--hws-color-danger); }
html[data-skin] .news-dialog::backdrop {
    background: color-mix(in srgb, var(--hws-color-scrim) 45%, transparent);
}
html[data-skin] .news-quote-menu.is-touch { box-shadow: var(--hws-shadow-2); }
/* 深色分支把新闻主按钮刷成 #174fc6 冷蓝（选择器带 4 个 :not，特异性很高，
   所以这里原样复制选择器链路再加 html[data-skin] 前缀来压过它）。 */
html[data-skin][data-theme="dark"] .portal-news .news-button:not(.news-button-secondary):not(.news-button-quiet):not(.news-workspace-tab):not(.news-topic-open) {
    color: var(--hws-color-on-accent);
    background: var(--hws-color-accent);
}

/* ============================================================================
   5. 页面级残留（首页 / 法务 / 登录入口）
   ========================================================================== */

/* 5.0 品牌 logo 三态栈（markup: .brand-mark-stack 内三张单色 SVG，显隐由
   hws-surface.css §10 按 html[data-skin] 裁决）。
   home.css / workspace-entry.css 的 .brand img { filter: grayscale+sepia... } 会把
   单色 SVG 再染一次（cocoa 图染两次会发灰），这里对 stack 内的 img 关掉 filter；
   legal.css 已有等价的 .brand .brand-mark { filter: none !important }。 */
html[data-skin] .brand-mark-stack img,
html:not([data-skin]) .brand-mark-stack img { filter: none; }
/* 三态显隐由 hws-surface.css §10 裁决（warm=cocoa / air=teal / paper=moss），
   本文件不重复声明 display，只负责两件 §10 管不到的事：
   1) stack 内的 img 是 width/height:100% 的叠图，容器必须由外部给尺寸：
      portal 由 hws-surface 的 .portal-header .brand-mark(34px) 撑起；
      首页/法务/登录页没有这层，SVG 会按 300×300 的固有尺寸爆开，这里按 markup
      的 width/height 属性（36/38/40）补容器尺寸。
   2) filter 豁免：登录页的 workspace-entry.css 不在 §10 的豁免选择器里，
      它的 .brand img filter 会把 SVG 再染一次。 */
body.home-page .brand-mark-stack { width: 36px; height: 36px; }
body.legal-page .brand-mark-stack { width: 38px; height: 38px; }
body.login-gate-page .brand-mark-stack { width: 40px; height: 40px; }

/* 5.1 首页（home.css 是评审冻结的暖色稿，bridge 只替换「换了皮肤会露馅」的暖色
       字面量；取值保证 warm 下与冻结稿等价：line 55% / ink 10% / tint 混合）
   注意 body 颜色：hws-tokens.css §4 的全局 body{color:var(--hws-color-text)} 在
   home.css 之后加载，会盖掉 home.css 的 body{color:var(--ink)}；首页的 h1/h2/
   品牌字等大量文字依赖 body 继承 ink，不恢复的话整页标题会从可可墨变浅成正文色
   （2026-11-07 首页 warm 回归截图实测：h1 rgb(106,82,70) vs 冻结稿 rgb(59,42,34)）。 */
html[data-skin] body.home-page { color: var(--hws-color-ink); }
html[data-skin] .service-tile.is-blush,
html[data-skin] .scenario-card:nth-child(3) {
    background: color-mix(in srgb, var(--hws-color-tint-2) 42%, var(--hws-color-surface));
}
html[data-skin] .svc,
html[data-skin] .bubble-user { box-shadow: var(--hws-shadow-1); }

/* 5.2 法务页（legal.css 用 !important 锁死了一大票值；这里只改「皮肤应该接管」的
       形状与阴影，颜色已由 1.3 的 --w-* 重映射负责） */
html[data-skin] body.legal-page .legal-main.site-shell {
    border-radius: var(--hws-panel-radius) !important;
    box-shadow: var(--hws-shadow-2) !important;
}
html[data-skin] body.legal-page .site-header .button.button-secondary.compact {
    border-radius: var(--hws-button-radius) !important;
    box-shadow: var(--hws-shadow-1) !important;
}
html[data-skin] body.legal-page .site-header .button.button-secondary.compact:hover {
    box-shadow: var(--hws-shadow-2) !important;
}
html[data-skin] body.legal-page .legal-main a {
    text-decoration-color: color-mix(in srgb, var(--hws-color-accent-deep) 45%, transparent);
}
/* legal.css 把字体栈写死为 PingFang/Noto 简写（!important）；接到全站字体令牌（清单 A13） */
html[data-skin] body.legal-page { font-family: var(--hws-font-sans) !important; }
/* legal.css 的 .eyebrow::before 写死 #9ed3be（暖绒青玉）；接主操作色 */
html[data-skin] body.legal-page .eyebrow::before { background: var(--hws-color-accent); }

/* 5.3 登录入口（workspace-entry.css 的绿色 bead 阴影与两处暖色字面量）
       warm 下视觉等价（阴影从青绿 tint 换成可可 tint，同一套「珠光」手感）。
       body 颜色同 §5.1：登录页 h1/品牌字靠 body 继承 ink，需从 tokens 的正文色恢复。 */
html[data-skin] body.login-gate-page { color: var(--hws-color-ink); }
html[data-skin] .choice-go {
    box-shadow: var(--hws-shadow-2);
}
html[data-skin] .choice:focus-visible {
    box-shadow: var(--hws-shadow-2),
        0 0 0 4px color-mix(in srgb, var(--hws-color-accent) 20%, transparent);
}
html[data-skin] .choice:focus-visible .choice-go {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hws-color-accent) 45%, transparent),
        var(--hws-shadow-2);
}
html[data-skin] body[data-state="leaving"] .choice[data-space="personal"] {
    box-shadow: var(--hws-shadow-3),
        0 0 0 4px color-mix(in srgb, var(--hws-color-accent) 26%, transparent),
        0 18px 46px 6px color-mix(in srgb, var(--hws-color-accent) 24%, transparent);
}
html[data-skin] body[data-state="leaving"] .choice[data-space="personal"] .choice-icon {
    background: color-mix(in srgb, var(--hws-color-tint-2) 60%, var(--hws-color-surface));
}
html[data-skin] .gate-error {
    background: color-mix(in srgb, var(--hws-color-danger) 10%, var(--hws-color-surface));
    color: var(--hws-color-ink);
}
html[data-skin] .gate-error a { color: var(--hws-color-accent-deep); }
html[data-skin] .gate-error a:hover { color: var(--hws-color-accent-deep); }

/* ============================================================================
   6. 已知未覆盖（有意跳过，原因见 docs/design/hws-unify-20261107 的交付报告）
   ----------------------------------------------------------------------------
   · .desktop-credentials / .workspace-ssh-secrets：刻意常暗的「终端/密钥」面板，
     语义令牌里没有「反白面/反白前景」这一对（surface/ink 会随深浅主题翻转），
     硬映射会在深色主题下把前景压成深色。本文件只把它们的底色换成
     --hws-color-scrim（永远深色）保证可读，内部冷色文字保留为 P2。
   · .account-card-kicker / .account-status-dot / 身份卡内的小字：同上，身份卡是
     常暗反白面，没有反白前景令牌；保留原值。
   → 若将来要统一这批「常暗反白面」，需先在 hws-tokens.css 契约里新增
     --hws-color-inverse-surface（反白面）与 --hws-color-on-inverse（反白前景）
     两个语义键，再由三套 skin 给值；不要在下游各写一套写死值。
   · .brand img 的 filter：home.css / workspace-entry.css 用 CSS filter 把品牌蓝
     logo 染成 cocoa。品牌色不随皮肤走，保留。
   · portal.js 按主机 ID 生成的 --host-accent（多桌面识别色）与
     --cal-event-color（日历自定义颜色）属于用户数据可视化，保留 inline 值。
   · site.css 里「旧官网 v2/v3 组件」（.hero-visual / .capability-grid /
     .product-preview / .service-section / .final-cta / .login-choice-* 等）：
     当前模板已不渲染这些块，且首页由 home.css 整体覆盖，逐条映射没有收益，跳过。
   ========================================================================== */