/* ============================================================================
   HWS 统一外壳与组件层 (hws-surface.css)
   作用：把 Portal / 首页 / 登录 / 法务收敛到同一套几何与交互语法。
   只做「外观裁决」，不写死颜色；所有值来自 hws-tokens.css 语义令牌 + 皮肤覆盖。
   加载顺序：最后加载（压过 site.css / portal-*.css 的同名规则）。
   作用域：.portal-page 与共用按钮族；首页（home.css 自有体系）只共享按钮/输入。
   ========================================================================== */

/* ---------- 1. 页面基底 ---------- */
.portal-page {
    background: var(--hws-color-canvas);
    color: var(--hws-color-text);
    font-family: var(--hws-font-sans);
    font-size: var(--hws-text-body);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    min-height: 100dvh;
}
.portal-page ::selection { background: var(--hws-color-accent-soft); color: var(--hws-color-ink); }
.portal-page :is(button, summary, [role="button"]) { font-family: inherit; }
.portal-page :is(input, select, textarea) { font: inherit; color: inherit; }
.portal-page ::-webkit-scrollbar { width: 10px; height: 10px; }
.portal-page ::-webkit-scrollbar-thumb {
    border: 3px solid transparent; border-radius: var(--hws-radius-pill);
    background-clip: content-box; background-color: var(--hws-color-line-strong);
}
.portal-page ::-webkit-scrollbar-thumb:hover { background-color: var(--hws-color-muted); }
.portal-page ::-webkit-scrollbar-track { background: transparent; }

/* 标题字阶统一（各视图仍在用的 h1/h2/h3 收敛到同一套） */
.portal-page :is(h1, h2, h3, h4) {
    color: var(--hws-color-ink);
    font-weight: var(--hws-heading-weight);
    letter-spacing: var(--hws-letter-spacing-title);
    line-height: 1.35;
}
.portal-page h1 { font-size: var(--hws-text-h1); }
.portal-page h2 { font-size: var(--hws-text-h2); }
.portal-page h3 { font-size: var(--hws-text-h3); }
.portal-page p { color: inherit; }

/* ---------- 2. 页头 ---------- */
.portal-page .portal-header {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
    align-items: center;
    gap: var(--hws-space-4) var(--hws-space-5);
    min-height: 68px;
    padding: var(--hws-space-3) 0;
    margin-bottom: var(--hws-space-6);
    border-bottom: 0;
    background: transparent;
}
.portal-page .portal-header .workspace-brand { gap: 12px; }
.portal-page .portal-header .brand-mark { width: 34px; height: 34px; border-radius: var(--hws-radius-sm); }
.portal-page .portal-header .brand-copy strong {
    font-size: 16px; font-weight: 700; letter-spacing: .01em; color: var(--hws-color-ink);
}
.portal-page .portal-header .brand-copy small {
    margin-top: 3px; font-size: 11px; letter-spacing: .02em; color: var(--hws-color-muted);
}

/* 导航：胶囊分段控件（统一几何，皮肤只换圆角与底色） */
.portal-page .portal-primary-nav {
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    min-width: 0;
    max-width: 100%;
    padding: 4px;
    overflow-x: auto;
    border-radius: var(--hws-nav-radius);
    background: color-mix(in srgb, var(--hws-color-surface-soft) 78%, var(--hws-color-surface));
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 6px;
}
.portal-page .portal-primary-nav::-webkit-scrollbar { display: none; }
.portal-page .portal-nav-item {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 13px;
    color: var(--hws-color-text);
    border: 0;
    border-radius: var(--hws-nav-radius);
    background: transparent;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    scroll-snap-align: start;
    cursor: pointer;
    transition: color var(--hws-dur-fast) var(--hws-ease),
                background-color var(--hws-dur-fast) var(--hws-ease),
                box-shadow var(--hws-dur-fast) var(--hws-ease);
}
.portal-page .portal-nav-item::after { content: none; }
.portal-page .portal-nav-item:hover {
    color: var(--hws-color-ink);
    background: color-mix(in srgb, var(--hws-color-surface) 72%, transparent);
}
.portal-page .portal-nav-item.is-active {
    color: var(--hws-color-ink);
    background: var(--hws-color-surface);
    box-shadow: var(--hws-shadow-1);
}
.portal-page .portal-nav-agent { color: var(--hws-color-accent-deep); }
.portal-page .portal-nav-ext { font-size: 10px; opacity: .65; }

/* 右侧动作区 */
.portal-page .portal-header-actions {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    border-radius: var(--hws-radius-pill);
    background: color-mix(in srgb, var(--hws-color-surface-soft) 78%, var(--hws-color-surface));
}
.portal-page .portal-header-actions > a {
    display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px;
    color: var(--hws-color-text); border-radius: var(--hws-radius-pill);
    font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
    transition: color var(--hws-dur-fast) var(--hws-ease), background-color var(--hws-dur-fast) var(--hws-ease);
}
.portal-page .portal-header-actions > a:hover { color: var(--hws-color-ink); background: var(--hws-color-surface); }
.portal-page .portal-theme-toggle,
.portal-page .portal-notification-button,
.portal-page .hws-appearance-trigger {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    color: var(--hws-color-text);
    border: 1px solid transparent;
    border-radius: var(--hws-radius-pill);
    background: transparent;
    cursor: pointer;
    transition: color var(--hws-dur-fast) var(--hws-ease), background-color var(--hws-dur-fast) var(--hws-ease);
}
.portal-page :is(.portal-theme-toggle, .portal-notification-button, .hws-appearance-trigger):hover {
    color: var(--hws-color-ink); background: var(--hws-color-surface);
}
.portal-page :is(.portal-theme-toggle, .portal-notification-button, .hws-appearance-trigger) svg { width: 18px; height: 18px; }
.portal-page .portal-unread-dot {
    border-color: var(--hws-color-surface) !important;
    background: var(--hws-color-danger) !important;
    color: var(--hws-color-surface) !important;
}

/* 用户菜单 */
.portal-page .portal-user-menu { position: relative; }
.portal-page .portal-user-trigger {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 34px; padding: 2px 8px 2px 3px;
    border: 0; border-radius: var(--hws-radius-pill);
    background: transparent; color: var(--hws-color-ink); cursor: pointer;
    transition: background-color var(--hws-dur-fast) var(--hws-ease);
}
.portal-page .portal-user-trigger:hover { background: var(--hws-color-surface); }
.portal-page .portal-user-avatar {
    width: 28px; height: 28px; display: grid; place-items: center;
    overflow: hidden; border-radius: var(--hws-radius-pill);
    background: var(--hws-color-accent-soft); color: var(--hws-color-accent-deep);
    font-size: 12px; font-weight: 700;
}
.portal-page .portal-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.portal-page .portal-user-copy { display: grid; min-width: 0; text-align: left; line-height: 1.2; }
.portal-page .portal-user-copy strong { font-size: 13px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; }
.portal-page .portal-user-copy small { color: var(--hws-color-muted); font-size: 11px; }
.portal-page .portal-user-chevron { color: var(--hws-color-muted); font-size: 11px; }
.portal-page .portal-user-popover {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
    display: grid; gap: 2px; min-width: 208px; padding: 6px;
    border: 1px solid var(--hws-color-line); border-radius: var(--hws-radius-md);
    background: var(--hws-color-surface); box-shadow: var(--hws-shadow-3);
}
.portal-page .portal-user-popover :is(a, button) {
    display: grid; gap: 1px; padding: 9px 11px; text-align: left;
    color: var(--hws-color-text); border: 0; border-radius: var(--hws-radius-sm);
    background: transparent; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.portal-page .portal-user-popover :is(a, button):hover { background: var(--hws-color-surface-soft); color: var(--hws-color-ink); }
.portal-page .portal-user-popover small { color: var(--hws-color-muted); font-size: 11px; font-weight: 400; }

/* 空间身份行：一条克制的说明，不做第二个标题 */
.portal-page .portal-space-identity {
    display: flex; align-items: center; gap: 10px;
    margin: 0 auto var(--hws-space-5); padding: 0;
    color: var(--hws-color-muted); font-size: var(--hws-text-small);
}
.portal-page .portal-space-identity strong { color: var(--hws-color-ink); font-weight: 650; }
.portal-page .portal-space-identity span::before {
    content: ""; display: inline-block; width: 1px; height: 11px;
    margin-right: 10px; vertical-align: -1px; background: var(--hws-color-line-strong);
}

/* ---------- 3. 按钮族 ---------- */
.portal-page .button,
.portal-page .news-button,
.portal-page .cal-btn,
.portal-page .submit-button,
.portal-page .usage-range-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: var(--hws-control-height);
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--hws-button-radius);
    background: var(--hws-color-surface);
    color: var(--hws-color-ink);
    font-size: 13.5px;
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    transform: none;
    transition: background-color var(--hws-dur-fast) var(--hws-ease),
                color var(--hws-dur-fast) var(--hws-ease),
                box-shadow var(--hws-dur-fast) var(--hws-ease);
}
.portal-page .button:hover,
.portal-page .news-button:hover,
.portal-page .cal-btn:hover { transform: none; }
.portal-page .button-primary {
    color: var(--hws-color-on-accent);
    background: var(--hws-color-accent);
    border-color: transparent;
    box-shadow: none;
}
.portal-page .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;
}
.portal-page .button-secondary {
    color: var(--hws-color-text);
    background: transparent;
    border-color: var(--hws-color-line-strong);
}
.portal-page .button-secondary:hover {
    color: var(--hws-color-ink);
    background: var(--hws-color-surface-soft);
    border-color: var(--hws-color-line-strong);
    box-shadow: none;
}
.portal-page .button-quiet,
.portal-page .text-action {
    min-height: 32px; padding: 0 10px;
    color: var(--hws-color-accent-deep);
    border: 0; border-radius: var(--hws-button-radius);
    background: transparent; font-size: 13px; font-weight: 650; cursor: pointer;
}
.portal-page :is(.button-quiet, .text-action):hover { background: var(--hws-color-accent-soft); }
.portal-page .button.compact { min-height: 34px; padding-inline: 13px; font-size: 12.5px; }
.portal-page .button[disabled],
.portal-page :is(button, .button):disabled { opacity: .5; cursor: not-allowed; }
.portal-page .cal-primary { color: var(--hws-color-on-accent); background: var(--hws-color-accent); }
.portal-page .cal-primary:hover { background: color-mix(in srgb, var(--hws-color-accent) 88%, var(--hws-color-ink)); }

/* 输入族 */
.portal-page :is(input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="url"], input:not([type]), select, textarea) {
    min-height: var(--hws-control-height);
    padding: 8px 12px;
    color: var(--hws-color-ink);
    border: 1px solid var(--hws-color-line-strong);
    border-radius: var(--hws-control-radius);
    background: var(--hws-color-surface);
    box-shadow: none;
    transition: border-color var(--hws-dur-fast) var(--hws-ease), background-color var(--hws-dur-fast) var(--hws-ease);
}
.portal-page :is(input, select, textarea):focus,
.portal-page :is(input, select, textarea):focus-visible {
    outline: none;
    border-color: var(--hws-color-accent-deep);
    box-shadow: 0 0 0 var(--hws-focus-ring) var(--hws-color-accent-soft);
}
.portal-page :is(input, textarea)::placeholder { color: color-mix(in srgb, var(--hws-color-muted) 82%, transparent); }
.portal-page select {
    appearance: none;
    padding-right: 34px;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 17px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
.portal-page .full-field, .portal-page .form-grid label { display: grid; gap: 6px; font-size: var(--hws-text-small); font-weight: 600; color: var(--hws-color-text); }

/* ---------- 4. 面板 / 卡片 ---------- */
.portal-page :is(.portal-hero, .portal-panel, .portal-empty-card, .portal-card, .usage-card, .ticket-detail, .mcp-card, .portal-filter) {
    border: var(--hws-card-border);
    border-radius: var(--hws-panel-radius);
    background: var(--hws-color-surface);
    box-shadow: var(--hws-panel-shadow);
}
.portal-page .portal-hero {
    padding: var(--hws-space-5) var(--hws-space-6);
    border-radius: var(--hws-panel-radius);
    background:
        radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--hws-color-tint-1) 34%, transparent) 0%, transparent 62%),
        radial-gradient(90% 120% at 0% 100%, color-mix(in srgb, var(--hws-color-accent-soft) 62%, transparent) 0%, transparent 70%),
        var(--hws-color-surface);
    box-shadow: var(--hws-shadow-2);
}
.portal-page .portal-greeting { margin: 0 0 4px; color: var(--hws-color-muted); font-size: var(--hws-text-small); }
.portal-page .portal-hero-title { margin: 0 0 8px; font-size: clamp(26px, 3.2vw, 34px); letter-spacing: -.03em; }
.portal-page .portal-hero-sub { margin: 0; max-width: 52ch; color: var(--hws-color-text); font-size: var(--hws-text-body); }
.portal-page .portal-hero-stats { display: inline-flex; gap: 10px; }
.portal-page .portal-stat {
    display: grid; place-items: center; min-width: 84px; padding: 12px 14px;
    border-radius: var(--hws-card-radius);
    background: color-mix(in srgb, var(--hws-color-surface) 72%, transparent);
    box-shadow: var(--hws-shadow-1);
}
.portal-page .portal-stat strong { font-size: 22px; font-weight: 700; color: var(--hws-color-ink); line-height: 1.1; }
.portal-page .portal-stat small { color: var(--hws-color-muted); font-size: 11px; }

.portal-page :is(.desktop-card, .workspace-stage) {
    border: var(--hws-card-border);
    border-radius: var(--hws-card-radius);
    background: var(--hws-color-surface);
    box-shadow: var(--hws-card-shadow);
    transition: box-shadow var(--hws-dur-base) var(--hws-ease), transform var(--hws-dur-base) var(--hws-ease);
}
.portal-page :is(.desktop-card, .workspace-stage):hover {
    transform: translateY(-2px);
    box-shadow: var(--hws-card-shadow-hover);
}
.portal-page .desktop-card-accent {
    width: 4px; border-radius: var(--hws-card-radius) 0 0 var(--hws-card-radius);
    background: var(--hws-color-accent);
}
.portal-page .health-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: var(--hws-radius-pill);
    font-size: 11.5px; font-weight: 650;
}
.portal-page .workspace-destination {
    border-radius: var(--hws-card-radius);
    border: 1px solid var(--hws-color-line);
    background: color-mix(in srgb, var(--hws-color-surface-soft) 52%, var(--hws-color-surface));
    box-shadow: none;
}
.portal-page .workspace-destination-agent {
    border-color: color-mix(in srgb, var(--hws-color-accent) 34%, var(--hws-color-line));
    background: color-mix(in srgb, var(--hws-color-accent-soft) 58%, var(--hws-color-surface));
}
.portal-page .workspace-destination h3 { margin: 2px 0 6px; }
.portal-page .workspace-destination p { color: var(--hws-color-text); font-size: var(--hws-text-small); }
.portal-page .workspace-destination-label { color: var(--hws-color-muted); font-size: 11.5px; letter-spacing: .04em; }

/* ---------- 5. 列表 / 工具条 / 分页 / 徽章 ---------- */
.portal-page :is(.portal-list, .portal-center-list) { display: grid; gap: 2px; }
.portal-page .portal-list > *,
.portal-page .portal-center-list > * {
    border-radius: var(--hws-radius-sm);
    transition: background-color var(--hws-dur-fast) var(--hws-ease);
}
.portal-page .portal-list > *:hover,
.portal-page .portal-center-list > *:hover { background: var(--hws-color-surface-soft); }
.portal-page .portal-center-toolbar,
.portal-page .mail-list-tools,
.portal-page .usage-range {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.portal-page .portal-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 18px 0; }
.portal-page .portal-pagination button {
    min-width: 34px; min-height: 34px; border-radius: var(--hws-radius-pill);
    border: 1px solid var(--hws-color-line-strong); background: var(--hws-color-surface);
    color: var(--hws-color-text); font-size: 13px; font-weight: 600; cursor: pointer;
}
.portal-page .portal-pagination button.is-active {
    color: var(--hws-color-on-accent); background: var(--hws-color-accent); border-color: transparent;
}
.portal-page :is(.eyebrow, .portal-panel-head .eyebrow) {
    margin: 0 0 6px; color: var(--hws-color-accent-deep);
    font-size: 12px; font-weight: 650; letter-spacing: .06em;
}
.portal-page .portal-panel-head,
.portal-page .portal-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: var(--hws-space-4); }
.portal-page .portal-section-heading h2 { margin: 0; }
.portal-page .portal-section-heading p:not(.eyebrow) { margin: 4px 0 0; color: var(--hws-color-muted); font-size: var(--hws-text-small); }

/* 徽章 / 状态 */
.portal-page :is(.message-kind, .usage-live-badge, .news-tag, .mail-chip) {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px; border-radius: var(--hws-radius-pill);
    background: var(--hws-color-surface-soft); color: var(--hws-color-text);
    font-size: 11.5px; font-weight: 600;
}

/* 空态 / 加载 */
.portal-page :is(.portal-loading, .usage-empty, .news-state, .portal-empty-state) {
    margin: 0; padding: var(--hws-space-6) var(--hws-space-4);
    color: var(--hws-color-muted); font-size: var(--hws-text-small); text-align: center;
}
.portal-page :is(.usage-empty, .news-state, .portal-empty-state) {
    border: 1px dashed var(--hws-color-line-strong);
    border-radius: var(--hws-card-radius);
    background: color-mix(in srgb, var(--hws-color-surface-soft) 40%, var(--hws-color-surface));
}
.portal-page .form-feedback {
    margin: 0 0 var(--hws-space-3); padding: 10px 14px;
    border-radius: var(--hws-control-radius);
    background: var(--hws-color-surface-soft); color: var(--hws-color-text); font-size: var(--hws-text-small);
}
.portal-page .form-feedback.is-error { color: var(--hws-color-danger); background: color-mix(in srgb, var(--hws-color-danger) 10%, var(--hws-color-surface)); }
.portal-page .form-feedback.is-success { color: var(--hws-color-success); background: color-mix(in srgb, var(--hws-color-success) 10%, var(--hws-color-surface)); }

/* ---------- 6. 对话框 ---------- */
.portal-page :is(.mcp-dialog-card, .mail-dialog) {
    border: 1px solid var(--hws-color-line);
    border-radius: var(--hws-panel-radius);
    background: var(--hws-color-surface);
    box-shadow: var(--hws-shadow-3);
}
.portal-page .mcp-dialog {
    background: color-mix(in srgb, var(--hws-color-ink) 32%, transparent);
    backdrop-filter: blur(3px);
}
.portal-page .mcp-field { display: grid; gap: 6px; margin-bottom: var(--hws-space-3); font-size: var(--hws-text-small); font-weight: 600; }
.portal-page .mcp-hint { margin: 0 0 var(--hws-space-3); color: var(--hws-color-muted); font-size: var(--hws-text-tiny); }
.portal-page .mcp-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ---------- 7. 外观切换器（三套皮肤 + 深浅色） ---------- */
.hws-appearance { position: relative; }
.hws-appearance-trigger svg { width: 18px; height: 18px; }
.hws-appearance-popover {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 70;
    width: 306px; padding: 14px;
    border: 1px solid var(--hws-color-line);
    border-radius: var(--hws-radius-lg);
    background: var(--hws-color-surface);
    box-shadow: var(--hws-shadow-3);
}
.hws-appearance-popover[hidden] { display: none; }
.hws-appearance-title { margin: 0 0 2px; color: var(--hws-color-ink); font-size: 13px; font-weight: 700; }
.hws-appearance-note { margin: 0 0 12px; color: var(--hws-color-muted); font-size: 11.5px; line-height: 1.5; }
.hws-skin-list { display: grid; gap: 8px; }
.hws-skin-option {
    display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 11px;
    width: 100%; padding: 8px; text-align: left;
    border: 1px solid var(--hws-color-line);
    border-radius: var(--hws-radius-md);
    background: transparent;
    color: var(--hws-color-text);
    cursor: pointer;
    transition: border-color var(--hws-dur-fast) var(--hws-ease), background-color var(--hws-dur-fast) var(--hws-ease);
}
.hws-skin-option:hover { background: var(--hws-color-surface-soft); }
.hws-skin-option[aria-checked="true"] {
    border-color: var(--hws-color-accent-deep);
    background: var(--hws-color-accent-soft);
}
.hws-skin-swatch {
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
    width: 54px; height: 40px; overflow: hidden;
    border: 1px solid var(--hws-color-line); border-radius: var(--hws-radius-sm);
}
.hws-skin-swatch i { display: block; }
.hws-skin-copy { display: grid; gap: 2px; min-width: 0; }
.hws-skin-copy strong { color: var(--hws-color-ink); font-size: 13px; font-weight: 700; }
.hws-skin-copy small { color: var(--hws-color-muted); font-size: 11.5px; line-height: 1.45; }
.hws-appearance-divider { height: 1px; margin: 12px 0; background: var(--hws-color-line); }
.hws-theme-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hws-theme-row span { color: var(--hws-color-ink); font-size: 12.5px; font-weight: 650; }
.hws-theme-switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--hws-radius-pill); background: var(--hws-color-surface-soft); }
.hws-theme-switch button {
    min-height: 28px; padding: 0 11px; border: 0; border-radius: var(--hws-radius-pill);
    background: transparent; color: var(--hws-color-text); font-size: 12px; font-weight: 600; cursor: pointer;
}
.hws-theme-switch button[aria-checked="true"] { background: var(--hws-color-surface); color: var(--hws-color-ink); box-shadow: var(--hws-shadow-1); }

/* ---------- 8. 响应式 ---------- */
@media (max-width: 1180px) {
    .portal-page .portal-header { grid-template-columns: minmax(0, auto) minmax(0, 1fr); }
    .portal-page .portal-primary-nav { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; justify-content: flex-start; }
    .portal-page .portal-header-actions { justify-self: end; }
}
@media (max-width: 760px) {
    .portal-page .portal-header { gap: 10px; margin-bottom: var(--hws-space-5); }
    .portal-page .portal-header .brand-copy small { display: none; }
    .portal-page .portal-header-actions > a,
    .portal-page .portal-user-copy,
    .portal-page .portal-user-chevron { display: none; }
    .portal-page .portal-nav-item { min-height: 40px; padding: 0 12px; font-size: 13px; }
    .portal-page .portal-hero { padding: var(--hws-space-5) var(--hws-space-4); }
    .portal-page .hws-appearance-popover { width: min(306px, calc(100vw - 32px)); }
}
@media (prefers-reduced-motion: reduce) {
    .portal-page * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* ============================================================================
   9. 中和 site.css 里不属于任何皮肤的历史残留（shell 级）
   ========================================================================== */

/* 9.1 空间身份行：历史实现是一条带边框的宽条（site.css:1364），统一为一行说明文字。 */
.portal-page .portal-space-identity {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    min-height: 0;
    width: auto;
    margin: 0 auto var(--hws-space-5);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

/* 9.2 桌面卡的底部发射台：历史实现是白/天蓝渐变 + 两栏各自卡片化。
       统一为「卡片内一整块分区、左 AI 右桌面、发丝线分隔、随卡片圆角裁切」。 */
.portal-page :is(.workspace-stage, .desktop-card) { overflow: hidden; }
.portal-page .workspace-launchpad {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: 0;
    background: transparent;
    border-top: 1px solid var(--hws-color-line);
}
.portal-page .workspace-destination {
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.portal-page .workspace-destination-agent {
    background: color-mix(in srgb, var(--hws-color-accent-soft) 62%, var(--hws-color-surface));
}
.portal-page .workspace-destination + .workspace-destination {
    border-left: 1px solid var(--hws-color-line);
}
.portal-page .workspace-destination-label,
.portal-page .workspace-destination-agent .workspace-destination-label {
    color: var(--hws-color-accent-deep);
    font-weight: 700;
    letter-spacing: .04em;
}
.portal-page .workspace-destination-foot > p { font-size: var(--hws-text-tiny); }
.portal-page .workspace-destination-foot time { color: var(--hws-color-text); }
.portal-page .workspace-stage-title h2 { color: var(--hws-color-ink); }
.portal-page .workspace-stage-identity > p { color: var(--hws-color-muted); }
.portal-page .workspace-stage-identity > p strong { color: var(--hws-color-text); }

/* 9.3 健康状态徽章：改用状态语义色（成功/危险/警告），不再写死绿红橙。 */
.portal-page .health-badge {
    padding: 3px 9px;
    border-radius: var(--hws-radius-pill);
    background: var(--hws-color-surface-soft);
    color: var(--hws-color-muted);
    text-transform: none;
    font-size: 11.5px;
    font-weight: 650;
}
.portal-page .health-badge.health-online {
    background: color-mix(in srgb, var(--hws-color-success) 14%, var(--hws-color-surface));
    color: var(--hws-color-success);
}
.portal-page .health-badge.health-offline {
    background: color-mix(in srgb, var(--hws-color-danger) 14%, var(--hws-color-surface));
    color: var(--hws-color-danger);
}
.portal-page .health-badge.health-orphaned {
    background: color-mix(in srgb, var(--hws-color-warning) 16%, var(--hws-color-surface));
    color: var(--hws-color-warning);
}

/* 9.4 工作台选择器（多台桌面时的胶囊切换） */
.portal-page .workspace-selector { color: var(--hws-color-muted); font-size: var(--hws-text-small); }
.portal-page .workspace-selector button {
    min-height: 32px; padding: 0 13px;
    border: 1px solid var(--hws-color-line-strong);
    border-radius: var(--hws-radius-pill);
    background: var(--hws-color-surface);
    color: var(--hws-color-text);
    font-size: var(--hws-text-small); font-weight: 600; cursor: pointer;
}
.portal-page .workspace-selector button:hover,
.portal-page .workspace-selector button.is-active {
    border-color: transparent;
    background: var(--hws-color-accent-soft);
    color: var(--hws-color-accent-deep);
}

/* 9.5 外观切换器：没有合适宿主的页面（登录/法务）固定到右下角 */
.hws-appearance.is-floating {
    position: fixed; right: 20px; bottom: 20px; z-index: 90;
}
.hws-appearance.is-floating .hws-appearance-trigger {
    width: 44px; height: 44px;
    border: 1px solid var(--hws-color-line);
    background: var(--hws-color-surface);
    box-shadow: var(--hws-shadow-2);
}
.hws-appearance.is-floating .hws-appearance-popover {
    top: auto; bottom: calc(100% + 10px); right: 0;
}


/* ---------- 10. 品牌标记跟随皮肤（r1 评审唯一跨皮肤 P0：冷蓝 Logo 串味） ----------
   首页/登录原本用 CSS filter 把品牌蓝位图染成 cocoa；Portal 直接用了蓝色位图，
   三套皮肤下都是唯一的冷色锚点。这里改成「同一位置放三枚矢量标记 + 由 data-skin 选择」，
   颜色精确、不依赖 filter、也不受图片解码差异影响。
   用法：<span class="brand-mark-stack"><img class="brand-mark-warm" …cocoa><img class="brand-mark-teal" …>
        <img class="brand-mark-moss" …></span>
   对应关系：warm → cocoa #3B2A22；air → teal #0E7C86；paper → moss #2F5747。 */
.brand-mark-stack { position: relative; display: inline-grid; place-items: center; flex: none; }
.brand-mark-stack > img { grid-area: 1 / 1; display: block; width: 100%; height: 100%; }
.brand-mark-stack > .brand-mark-teal,
.brand-mark-stack > .brand-mark-moss { display: none; }
html[data-skin="air"] .brand-mark-stack > .brand-mark-warm { display: none; }
html[data-skin="air"] .brand-mark-stack > .brand-mark-teal { display: block; }
html[data-skin="paper"] .brand-mark-stack > .brand-mark-warm { display: none; }
html[data-skin="paper"] .brand-mark-stack > .brand-mark-moss { display: block; }
/* 首页既有 home.css:122 的 .brand img filter 会把 stack 里的 svg 再染一遍，这里豁免； */
.portal-page .brand-mark-stack img,
.site-header .brand-mark-stack img,
.site-footer .brand-mark-stack img,
.brand .brand-mark-stack img { filter: none; }


/* ============================================================================
   11. 外观入口（站点头部通用）
   背景（2026-11-08 线上反馈）：首页 .header-actions 里的 .hws-appearance-trigger 没有
   任何按钮 reset 规则，落的是浏览器默认的 button 边框/底色 —— 一个带灰边的方盒子，
   与暖绒的描边/圆角语言冲突。这里给「非 Portal 页面」的头部一个统一的安静图标键：
   40×40、无边框、胶囊圆角、透明底、hover 才出面。
   Portal 页头内的版本仍由 §7 的 .portal-page 规则接管（34pt，融进右侧胶囊组）。
   ========================================================================== */
.hws-appearance { display: inline-flex; align-items: center; }
.hws-appearance-trigger {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--hws-radius-pill);
    background: transparent;
    color: var(--hws-color-text);
    cursor: pointer;
    transition: color var(--hws-dur-fast) var(--hws-ease),
                background-color var(--hws-dur-fast) var(--hws-ease);
}
.hws-appearance-trigger svg { width: 20px; height: 20px; }
.hws-appearance-trigger:hover {
    color: var(--hws-color-ink);
    background: color-mix(in srgb, var(--hws-color-surface-soft) 64%, transparent);
}
.hws-appearance-trigger:active {
    color: var(--hws-color-ink);
    background: var(--hws-color-accent-soft);
}
.hws-appearance-trigger:focus-visible {
    outline: var(--hws-focus-ring) solid var(--hws-color-focus);
    outline-offset: 2px;
}
/* 头部里的呼吸位：离导航 4px、离主 CTA 6px；比 header-actions 的 gap 更松一点。 */
.site-header .hws-appearance { margin-inline: 2px 4px; }
.header-actions .hws-appearance { align-self: center; }
/* 小屏：home.css 会把整个 .header-actions 藏掉，皮肤入口不该跟着消失 —— 只留外观键，
   并把它推到右侧汉堡按钮旁边（品牌与入口之间留白，而不是悬在页头中间）。 */
@media (max-width: 900px) {
    .site-header .header-inner { gap: 8px; }
    .site-header .header-actions {
        display: flex;
        gap: 0;
        margin-left: auto;
    }
    .site-header .header-actions > :not(.hws-appearance) { display: none; }
    .site-header .hws-appearance { margin-inline: 0; }
    .site-header .hws-appearance-trigger { width: 44px; height: 44px; }
    /* 汉堡键不再抢 auto margin，让外观键贴到它左边。 */
    .site-header .menu-toggle { margin-left: 0; }
}
/* 法务页等「页头只有品牌 + 返回」的页面：入口贴在返回按钮左侧，不抢品牌位。 */
.site-header .header-inner > .hws-appearance { margin-inline: 0 4px; }