/* ============================================================
   工作区主题：Liquid Glass × Warm Gold Lava Glass（暖金熔岩玻璃）
   设计系统：深焦黑底 + 液态玻璃 + 暖金熔岩流彩 + 虹彩晕染
   ============================================================ */

/* ============================================================
   #17 Immersive/Interactive Experience 优化
   — 新手引导浮层 · 帮助按钮 · 空面板 CTA
   ============================================================ */

/* 帮助按钮 */
.ws-help-btn {
    background: var(--ws-dark-hover);
    backdrop-filter: blur(8px);
    border: 1px solid var(--ws-border);
    color: var(--ws-text-muted);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 8px;
    transition: border-color 300ms ease, color 300ms ease, background 300ms ease, box-shadow 300ms ease;
}

.ws-help-btn:hover {
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(245, 240, 232, 0.85);
    background: rgba(255, 255, 255, 0.06);
}

.ws-help-btn:focus-visible {
    outline: 2px solid var(--ws-gold);
    outline-offset: 2px;
}

/* 新手引导浮层 */
#wsTourOverlay {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-modal) + 100);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms ease;
}

#wsTourOverlay.visible {
    opacity: 1;
    pointer-events: all;
}

.ws-tour-backdrop {
    position: absolute;
    inset: 0;
    background: var(--c-overlay);
    backdrop-filter: blur(4px);
}

.ws-tour-card {
    position: relative;
    z-index: 1;
    width: 420px;
    background: var(--ws-dark-surface);
    backdrop-filter: var(--ws-blur-heavy);
    -webkit-backdrop-filter: var(--ws-blur-heavy);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 3px solid #C8A84B;
    border-radius: 16px;
    padding: 36px 32px 28px;
    box-shadow:
        0 24px 64px var(--ws-dark-shadow),
        0 0 0 1px var(--ws-dark-border);
    transform: translateY(12px) scale(0.97);
    transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 300ms ease;
}

#wsTourOverlay.visible .ws-tour-card {
    transform: translateY(0) scale(1);
}

/* 步骤内容 */
.ws-tour-steps {
    min-height: 180px;
    position: relative;
}

.ws-tour-step {
    display: none;
    flex-direction: column;
    gap: 12px;
}

.ws-tour-step.active {
    display: flex;
}

.ws-tour-step-icon {
    color: #C8A84B;
    margin-bottom: 4px;
}

.ws-tour-step-num {
    font-size: 11px;
    color: var(--ws-dark-text-dim);
    letter-spacing: 2px;
    font-weight: 500;
}

.ws-tour-step-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--ws-dark-text);
    margin: 0;
    letter-spacing: 0.5px;
}

.ws-tour-step-desc {
    font-size: 14px;
    color: var(--ws-dark-text-muted);
    line-height: 1.7;
    margin: 0;
}

.ws-tour-step-desc strong {
    color: var(--ws-dark-text);
    font-weight: 600;
}

/* 底部：圆点导航 + 操作按钮 */
.ws-tour-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--ws-dark-divider);
}

.ws-tour-dots {
    display: flex;
    gap: 8px;
}

.ws-tour-dot {
    width: 20px;
    height: 3px;
    background: var(--ws-dark-border);
    cursor: pointer;
    transition: background 150ms ease, width 150ms ease;
}

.ws-tour-dot.active {
    background: #C8A84B;
    width: 32px;
}

.ws-tour-actions {
    display: flex;
    gap: 10px;
}

.ws-tour-skip {
    background: var(--ws-dark-hover);
    border: 1px solid var(--ws-dark-border);
    color: var(--ws-dark-text-muted);
    font: inherit;
    font-size: 13px;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 300ms ease;
}

.ws-tour-skip:hover {
    border-color: var(--ws-dark-border-strong);
    color: var(--ws-dark-text);
    background: var(--ws-dark-active);
}

.ws-tour-next {
    background: #C8A84B;
    border: none;
    color: #18120A;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 20px;
    cursor: pointer;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(200, 168, 75, 0.28);
    transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.ws-tour-next:hover {
    background: #D4B555;
    box-shadow: 0 4px 18px rgba(200, 168, 75, 0.38);
    transform: translateY(-1px);
}

.ws-tour-next:focus-visible,
.ws-tour-skip:focus-visible {
    outline: 2px solid rgba(212, 175, 55, 0.6);
    outline-offset: 2px;
}

/* 空面板 CTA 增强 */
.ws-placeholder-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ws-text-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.ws-placeholder-desc {
    font-size: 13px;
    color: var(--ws-text-dim);
    line-height: 1.6;
    text-align: center;
    max-width: 320px;
    margin: 0;
}

.ws-placeholder-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(245, 240, 232, 0.7);
    font: inherit;
    font-size: 13px;
    padding: 9px 20px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 200ms ease;
}

.ws-placeholder-cta:hover {
    background: rgba(255, 255, 255, 0.07);
    color: rgba(245, 240, 232, 0.92);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.ws-placeholder-cta:focus-visible {
    outline: 2px solid rgba(212, 175, 55, 0.55);
    outline-offset: 2px;
}

/* prefers-reduced-motion：关闭所有动画 */
@media (prefers-reduced-motion: reduce) {
    #wsTourOverlay,
    .ws-tour-card,
    .nav-ball-main,
    .nav-sat,
    #navCenterBall,
    .ws-home-btn,
    .ws-tour-next,
    .ws-placeholder-cta,
    .mine-btn-primary,
    .custom-task-btn {
        transition: none;
        animation: none;
    }
}

/* 工作区作用域 — 深色玻璃金色主题 */
#workspacePage,
#workspaceLoader {
    /* 背景层：深黑玻璃 */
    --ws-bg:           var(--ws-dark-bg);
    --ws-bg-elevated:  var(--ws-dark-surface);

    /* 玻璃底膜：深色 */
    --ws-glass:        var(--ws-dark-input-bg);
    --ws-glass-hover:  var(--ws-dark-hover);

    /* 边框：金色 */
    --ws-border:       var(--ws-dark-border);
    --ws-border-gold:  var(--ws-dark-border-strong);

    /* 文字层：暖白 */
    --ws-text:         var(--ws-dark-text);
    --ws-text-muted:   var(--ws-dark-text-muted);
    --ws-text-dim:     var(--ws-dark-text-dim);

    /* 主强调色：金色 */
    --ws-gold:         var(--c-gold);
    --ws-gold-glow:    var(--ws-dark-glow);

    /* 输入框 */
    --ws-input-bg:     var(--ws-dark-input-bg);
    --ws-input-border: var(--ws-dark-input-border);
    --ws-input-focus:  var(--ws-dark-input-focus);

    /* 功能色 */
    --ws-amber:        var(--c-gold);
    --ws-amber-hover:  var(--c-gold-light);
    --ws-error:        var(--c-error);

    /* 渐变流彩：金色系 */
    --ws-irid-1:       var(--c-gold);
    --ws-irid-2:       var(--c-gold-warm);
    --ws-irid-3:       var(--c-gold-rich);

    /* 模糊核心 */
    --ws-blur:         blur(20px) saturate(120%);
    --ws-blur-heavy:   blur(32px) saturate(150%);
}

/* 加载页深焦覆盖 */
#workspaceLoader {
    background: var(--ws-bg, #1a0a00) !important;
}

/* ============================================================
   工作区 - 加载画面
   ============================================================ */

#workspaceLoader {
    position: fixed;
    inset: 0;
    z-index: var(--z-onboarding);
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse 70% 50% at 30% 20%, rgba(212,175,55,0.06) 0%, transparent 55%),
        radial-gradient(ellipse 50% 40% at 80% 75%, rgba(212,175,55,0.04) 0%, transparent 50%),
        var(--ws-bg, #1a0a00);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-slow) ease;
}

#workspaceLoader.visible {
    opacity: 1;
    pointer-events: all;
}

.loader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    transform-origin: center center;
    transition: transform var(--duration-slower) cubic-bezier(0.4, 0, 0.2, 1),
                border-radius 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.4s ease;
}

/* 翻转+收缩变球动画 */
.loader-inner.flip-to-ball {
    animation: loaderFlipToBall 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes loaderFlipToBall {
    0%   { transform: scale(1) rotateY(0deg);   border-radius: 16px; opacity: 1; }
    40%  { transform: scale(0.8) rotateY(90deg); border-radius: 24px; opacity: 1; }
    70%  { transform: scale(0.3) rotateY(180deg); border-radius: 50%; opacity: 1; }
    100% { transform: scale(0) rotateY(180deg);  border-radius: 50%; opacity: 0; }
}

/* 球放大变回加载画面动画（离开工作区） */
.loader-inner.ball-to-loader {
    animation: ballToLoader 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes ballToLoader {
    0%   { transform: scale(0) rotateY(180deg); border-radius: 50%; opacity: 0; }
    30%  { transform: scale(0.3) rotateY(180deg); border-radius: 50%; opacity: 1; }
    60%  { transform: scale(0.8) rotateY(90deg); border-radius: 12px; opacity: 1; }
    100% { transform: scale(1) rotateY(0deg);   border-radius: 16px; opacity: 1; }
}

/* loader 内 Lottie 容器尺寸（深色全屏遮罩 + 居中 30vmin 动画） */
#workspaceLoader {
    background: var(--ws-bg, #1a0a00);
}
#workspaceLoader .loader-inner {
    width: 30vmin;
    height: 30vmin;
}
#workspaceLoader .lottie-loader {
    width: 100%;
    height: 100%;
}


/* ============================================================
   工作区主体
   ============================================================ */

#workspacePage {
    position: fixed;
    inset: 0;
    z-index: 400;
    background:
        radial-gradient(ellipse 80% 60% at 20% 10%, rgba(212,175,55,0.025) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 85% 80%, rgba(212,175,55,0.018) 0%, transparent 55%),
        var(--ws-bg);
    display: none;
    flex-direction: column;
}

#workspacePage.visible {
    display: flex;
}

/* 顶部栏 — Liquid Glass */
.ws-header {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    background: var(--ws-dark-surface);
    backdrop-filter: var(--ws-blur);
    -webkit-backdrop-filter: var(--ws-blur);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
    position: relative;
}

.ws-logo {
    font-size: 18px;
    font-weight: 700;
    color: var(--ws-text);
    letter-spacing: 2px;
}

.ws-logo span {
    color: var(--ws-gold);
    text-shadow: 0 0 16px rgba(30,41,59,0.5);
}

.ws-header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ws-home-btn {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(245, 240, 232, 0.6);
    font-size: 13px;
    padding: 6px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 200ms ease;
}

.ws-home-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(245, 240, 232, 0.9);
    border-color: rgba(255, 255, 255, 0.18);
    transform: translateY(-1px);
}

.ws-home-btn:focus-visible {
    outline: 2px solid rgba(212, 175, 55, 0.55);
    outline-offset: 2px;
}

/* 工作区内容区 */
.ws-body {
    flex: 1;
    overflow: hidden;
    position: relative;
}

/* 功能面板 */
.ws-panel {
    position: absolute;
    inset: 0;
    padding: 32px;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-normal) ease;
}

.ws-panel.active {
    opacity: 1;
    pointer-events: all;
}

.ws-panel-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--ws-text);
    margin-bottom: 8px;
}

.ws-panel-subtitle {
    font-size: 13px;
    color: var(--ws-text-muted);
    margin-bottom: 32px;
}

/* 占位卡片 — Liquid Glass */
.ws-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(12px);
    color: var(--ws-text-dim);
    font-size: 14px;
    gap: 12px;
}

.ws-placeholder-icon {
    font-size: 48px;
    opacity: 0.3;
}

/* ============================================================
   "我的"面板 — 奢侈品配色原则：95% 深底 · 4% 哑灰 · 1% 金点
   金色只用于：active 竖线 + 保存按钮 + focus 环，其余全部退出
   ============================================================ */

#panel-mine .ws-panel-subtitle { display: none; }
#panel-mine { display: flex; flex-direction: column; }

/* 两栏容器：左窄右宽，留足内部呼吸间距 */
.mine-settings {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 16px;
    flex: 1;
    min-height: 480px;
    align-items: stretch;
}

/* ─── 左侧导航 ───────────────────────────────────
   背景：几乎无边框，与工作区深底融为一体
   金色完全退场：不做边框、不做分隔线
   ─────────────────────────────────────────────── */
.mine-sidebar {
    display: flex;
    flex-direction: column;
    padding: 24px 12px;
    border-radius: 14px;
    /* 比工作区背景稍亮一档，制造层次但不突出 */
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* 用户信息区：头像 + 名字，下方留足静默间距 */
.mine-sidebar-user {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 4px 8px 24px;
    /* 分隔线：极低对比度白色，不抢眼 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    margin-bottom: 16px;
}

/* 头像：哑金渐变 → 圆形，无外发光环（避免过度装饰） */
.mine-sidebar-avatar {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 哑金：明度比正金低 30%，不刺眼 */
    background: linear-gradient(145deg, #9A7B2A 0%, #C8A84B 100%);
    color: rgba(255, 248, 220, 0.9);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* 用户名：暖白主色，中等粗细 */
.mine-sidebar-name {
    font-size: 13.5px;
    font-weight: 500;
    color: rgba(245, 240, 232, 0.85);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.mine-nav {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* 导航项：静默状态 —— 文字很暗，几乎消隐，等待用户注意 */
.mine-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px 9px 12px;
    border: none;
    border-left: 2px solid transparent;
    background: none;
    /* 静默色：40% 透明度，制造「退后」感 */
    color: rgba(245, 240, 232, 0.42);
    font: inherit;
    font-size: 13.5px;
    text-align: left;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    transition: color 180ms ease, background 180ms ease, border-left-color 180ms ease;
}

/* hover：文字提亮至 75%，背景极轻 —— 不用金色 */
.mine-nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-left-color: rgba(255, 255, 255, 0.15);
    color: rgba(245, 240, 232, 0.75);
}

/* active：金色竖线是页面里唯一的金色装饰，因此极醒目 */
.mine-nav-item.active {
    background: rgba(255, 255, 255, 0.055);
    /* 唯一金色出现点 */
    border-left-color: #D4AF37;
    color: rgba(245, 240, 232, 0.95);
    font-weight: 600;
}

.mine-nav-item:focus-visible {
    outline: 2px solid rgba(212, 175, 55, 0.5);
    outline-offset: 2px;
}

.mine-nav-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    color: inherit;
    opacity: 0.8;
}

/* footer：退出按钮低调化，只保留文字色警示 */
.mine-sidebar-footer {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.mine-logout-btn {
    width: 100%;
    background: none;
    border: none;
    color: rgba(255, 100, 80, 0.55);
    padding: 8px 10px;
    border-radius: var(--radius-md);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
    text-align: left;
    transition: color 180ms ease, background 180ms ease;
}

.mine-logout-btn:hover {
    color: rgba(255, 100, 80, 0.85);
    background: rgba(255, 60, 40, 0.06);
}

/* ─── 右侧内容区 ─────────────────────────────────
   大面积留白策略：
   · 上下内边距远大于左右（竖向拉伸感 = 高级感）
   · 背景比左栏再亮半档，视觉焦点自然落在这里
   · 无金色边框，只用极细白色边框分界
   ─────────────────────────────────────────────── */
.mine-content {
    padding: 40px 44px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.25);
    overflow-y: auto;
}

/* header：标题组 —— 留足底部白空间，分隔线极轻 */
.mine-content-header {
    margin-bottom: 36px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* 标题：暖白，字号大、字重轻 —— 反直觉的高级感原则 */
.mine-content-title {
    margin: 0 0 6px;
    font-size: 20px;
    /* 字重 500 而非 700：轻盈 = 自信，不需要靠粗体喊叫 */
    font-weight: 500;
    color: rgba(245, 240, 232, 0.92);
    letter-spacing: 0.2px;
}

/* 副标题：非常低调，只起说明作用 */
.mine-content-sub {
    margin: 0;
    font-size: 12.5px;
    color: rgba(245, 240, 232, 0.35);
    letter-spacing: 0.1px;
}

/* ─── 表单 ───────────────────────────────────────
   行间距加大（28px row-gap）：字段呼吸，不拥挤
   ─────────────────────────────────────────────── */
.mine-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 24px;
}

.mine-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.mine-field-wide { grid-column: 1 / -1; }

/* 标签：极小大写哑灰，退到背景里 —— 让输入值是主角 */
.mine-field-label {
    font-size: 10.5px;
    color: rgba(245, 240, 232, 0.38);
    letter-spacing: 1px;
    font-weight: 600;
    text-transform: uppercase;
}

/* 输入框：无金色边框，用白色低透明度边框
   这样整个表单区域色调统一，不被金边分割成碎片 */
.mine-field input,
.mine-field select {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(245, 240, 232, 0.88);
    font: inherit;
    font-size: 14px;
    transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
    box-sizing: border-box;
}

.mine-field input:hover,
.mine-field select:hover {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.055);
}

/* focus：此刻金色出现 —— 用户正在操作，需要明确指示 */
.mine-field input:focus,
.mine-field select:focus {
    outline: none;
    border-color: rgba(212, 175, 55, 0.55);
    background: rgba(255, 255, 255, 0.055);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.mine-field input::placeholder { color: rgba(245, 240, 232, 0.22); }

.mine-field select option {
    background: #1c1710;
    color: rgba(245, 240, 232, 0.88);
}

/* actions：按钮组向右对齐，与表单顶边留更大间距 */
.mine-form-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 12px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.mine-btn {
    padding: 10px 28px;
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 180ms ease;
    letter-spacing: 0.3px;
}

.mine-btn:active { transform: translateY(1px); }

/* 保存按钮：页面中金色的最终归宿
   · 纯净哑金，无多段渐变噱头
   · 深色文字保证可读性
   · 中等光晕，不过曝                    */
.mine-btn-primary {
    background: #C8A84B;
    color: #18120A;
    font-weight: 600;
    border-color: transparent;
    box-shadow: 0 2px 12px rgba(200, 168, 75, 0.28);
    transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.mine-btn-primary:hover {
    background: #D4B555;
    box-shadow: 0 4px 20px rgba(200, 168, 75, 0.38);
    transform: translateY(-1px);
}

.mine-btn-primary:focus-visible {
    outline: 2px solid rgba(212, 175, 55, 0.7);
    outline-offset: 3px;
}

/* 恢复按钮：完全静默，只有文字 */
.mine-btn-ghost {
    background: transparent;
    color: rgba(245, 240, 232, 0.38);
    border-color: rgba(255, 255, 255, 0.1);
}

.mine-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(245, 240, 232, 0.65);
    border-color: rgba(255, 255, 255, 0.18);
}

.mine-btn-ghost:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.3);
    outline-offset: 3px;
}

.mine-form-hint {
    grid-column: 1 / -1;
    font-size: 12px;
    text-align: right;
    min-height: 16px;
}

.mine-form-hint-ok  { color: var(--c-success); }
.mine-form-hint-err { color: var(--ws-error); }

/* ─── 套餐子页 ─────────────────────────────── */
.mine-plan-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--radius-default);
    margin-bottom: 24px;
    font-size: 14px;
}

.mine-plan-status-paid {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(200, 168, 75, 0.25);
}

.mine-plan-status-free {
    background: color-mix(in srgb, var(--c-white) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-white) 8%, transparent);
}

.mine-plan-text { color: color-mix(in srgb, var(--c-white) 85%, transparent); }
.mine-plan-text b { color: var(--c-gold-cream-light); font-weight: 600; }

.mine-plan-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.5px;
}

.mine-plan-paid {
    background: rgba(200, 168, 75, 0.14);
    color: #C8A84B;
    border: 1px solid rgba(200, 168, 75, 0.35);
}

.mine-plan-free {
    background: color-mix(in srgb, var(--c-white) 4%, transparent);
    color: color-mix(in srgb, var(--c-white) 60%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-white) 12%, transparent);
}

.mine-section { margin-bottom: 24px; }

.mine-section-title {
    font-size: 13px;
    color: color-mix(in srgb, var(--c-white) 55%, transparent);
    margin-bottom: 12px;
    letter-spacing: 0.3px;
}

.mine-pkg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.mine-pkg {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px 14px;
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--c-black) 20%, transparent);
    border: 2px solid color-mix(in srgb, var(--c-white) 8%, transparent);
    cursor: pointer;
    transition: border-color var(--duration-fast) ease, background var(--duration-fast) ease;
}

.mine-pkg:hover { border-color: rgba(200, 168, 75, 0.35); }
.mine-pkg input { display: none; }
.mine-pkg:has(input:checked) {
    border-color: #C8A84B;
    background: rgba(200, 168, 75, 0.08);
}

.mine-pkg-tag {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #C8A84B;
    color: #18120A;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--radius-default);
    white-space: nowrap;
}

.mine-pkg-title { font-size: 14px; font-weight: 500; color: var(--c-white); }
.mine-pkg-price { font-size: 26px; font-weight: 700; color: rgba(245, 240, 232, 0.9); }
.mine-pkg-perday { font-size: 12px; color: color-mix(in srgb, var(--c-white) 45%, transparent); }

.mine-pay-row { display: flex; gap: 12px; }

.mine-pay-opt {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--c-black) 20%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-white) 8%, transparent);
    cursor: pointer;
    color: color-mix(in srgb, var(--c-white) 85%, transparent);
    font-size: 13px;
    transition: border-color var(--duration-fast) ease;
}

.mine-pay-opt:hover { border-color: rgba(200, 168, 75, 0.35); }
.mine-pay-opt:has(input:checked) {
    border-color: #C8A84B;
    background: rgba(200, 168, 75, 0.06);
}
.mine-pay-opt input { accent-color: #C8A84B; }

/* ─── 帮助子页 ─────────────────────────────── */
.mine-help-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
    color: color-mix(in srgb, var(--c-white) 35%, transparent);
    gap: 16px;
}

.mine-help-empty-icon { color: var(--c-overlay-light); }
.mine-help-empty-text { font-size: 14px; }



/* ============================================================
   导航球系统
   ============================================================ */

#navBall {
    position: fixed;
    bottom: 32px;
    left: 32px;
    z-index: var(--z-toast);  /* 工作区悬浮导航球 */
    width: 56px;
    height: 56px;
    cursor: grab;
    user-select: none;
    display: none;
}

#navBall.visible {
    display: block;
}

#navBall.dragging {
    cursor: grabbing;
}

#navBall.hidden-by-nav {
    display: none !important;
}

/* 主球 — Liquid Glass × 暖金熔岩 */
.nav-ball-main {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        var(--ws-irid-1) 0%,
        var(--ws-irid-2) 35%,
        var(--ws-irid-3) 65%,
        var(--ws-irid-1) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: var(--c-text-primary);
    box-shadow:
        0 0 0 1px rgba(30,41,59,0.4),
        0 0 20px rgba(30,41,59,0.5),
        0 0 40px rgba(30,41,59,0.25),
        inset 0 1px 0 rgba(255,255,255,0.25);
    backdrop-filter: var(--ws-blur);
    transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 400ms ease,
                filter 400ms ease;
    animation: lavaGlowPulse 3s ease-in-out infinite;
}

.nav-ball-main:hover {
    transform: scale(1.1);
    box-shadow:
        0 0 0 1px rgba(30,41,59,0.6),
        0 0 28px rgba(30,41,59,0.7),
        0 0 60px rgba(30,41,59,0.35),
        inset 0 1px 0 rgba(255,255,255,0.3);
    filter: brightness(1.15);
}

.nav-ball-main:focus-visible {
    outline: 2px solid var(--ws-text);
    outline-offset: 3px;
}

@keyframes lavaGlowPulse {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(30,41,59,0.4),
            0 0 20px rgba(30,41,59,0.5),
            0 0 40px rgba(30,41,59,0.25),
            inset 0 1px 0 rgba(255,255,255,0.25);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(217,119,6,0.5),
            0 0 28px rgba(217,119,6,0.65),
            0 0 56px rgba(30,41,59,0.3),
            inset 0 1px 0 rgba(255,255,255,0.3);
    }
}

/* 展开状态 */
#navBall.expanded {
    z-index: 1999;
    cursor: pointer;
}

#navBall.expanded .nav-ball-main {
    animation: lavaGlowPulse 1.5s ease-in-out infinite;
}

/* 小球容器 */
.nav-satellites {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 1998;
}

.nav-satellites.visible {
    pointer-events: all;
}

/* 单个小球 — Liquid Glass */
.nav-sat {
    position: absolute;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: rgba(30, 26, 16, 0.92);
    backdrop-filter: var(--ws-blur);
    -webkit-backdrop-filter: var(--ws-blur);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow:
        0 8px 24px var(--ws-dark-shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.3s ease,
                background 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
    font-size: 20px;
}

.nav-sat.show {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.nav-sat:hover {
    background: rgba(40, 35, 20, 0.96);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow:
        0 8px 24px rgba(15,23,42,0.08),
        0 0 16px rgba(30,41,59,0.3),
        inset 0 1px 0 rgba(255,255,255,0.12);
    transform: translate(-50%, -50%) scale(1.08) !important;
}

.nav-sat.active-feature {
    border-color: var(--ws-gold);
    border-width: 2px;
    background: var(--ws-dark-active);
    box-shadow: 0 0 12px var(--ws-dark-glow);
}

.nav-sat:focus-visible {
    outline: 2px solid var(--ws-gold);
    outline-offset: 2px;
}

.nav-sat-label {
    font-size: 9px;
    color: rgba(255,255,255,0.45);
    white-space: nowrap;
    letter-spacing: 0.3px;
}

/* 卫星球矢量图标 */
.nav-sat-icon {
    width: 24px;
    height: 24px;
    color: rgba(240,240,245,0.75);
    transition: color 200ms ease, transform 200ms ease;
    flex-shrink: 0;
}

.nav-sat:hover .nav-sat-icon {
    color: var(--c-text-primary);  /* hover 时底色变青，图标变黑，高对比 */
}

.nav-sat.active-feature .nav-sat-icon {
    color: var(--ws-gold);
}

/* 展开时的遮罩 */
#navOverlay {
    position: fixed;
    inset: 0;
    z-index: 1990;
    background: var(--c-overlay-light);
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

#navOverlay.visible {
    opacity: 1;
    pointer-events: all;
}

/* 中心大球（展开态） */
#navCenterBall {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: 1999;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        var(--ws-irid-1) 0%,
        var(--ws-irid-2) 40%,
        var(--ws-irid-3) 70%,
        var(--ws-irid-1) 100%
    );
    box-shadow:
        0 0 0 2px rgba(30,41,59,0.3),
        0 0 32px rgba(30,41,59,0.5),
        0 0 64px rgba(30,41,59,0.25),
        inset 0 2px 0 rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    color: var(--c-text-primary);
    cursor: pointer;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

#navCenterBall.visible {
    transform: translate(-50%, -50%) scale(1);
    pointer-events: all;
}

#navCenterBall:focus-visible {
    outline: 2px solid var(--ws-text);
    outline-offset: 2px;
}


/* ============================================================
   诊断面板（#panel-diagnosis）— 完整报告布局
   金色仅出现 3 处：锚点 active 竖线 / 置信度环弧 / "确定信息"徽章
   ============================================================ */

/* 报告头部 */
#panel-diagnosis .diag-report-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 28px;
}

#panel-diagnosis .diag-report-eyebrow {
    display: block;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(245, 240, 232, 0.35);
    margin-bottom: 10px;
}

#panel-diagnosis .diag-report-name {
    font-size: 22px;
    font-weight: 500;
    color: var(--ws-dark-text);
    margin: 0 0 14px;
    letter-spacing: 0.3px;
}

#panel-diagnosis .diag-report-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

#panel-diagnosis .diag-report-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(245, 240, 232, 0.75);
}

#panel-diagnosis .diag-report-tag--primary {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--ws-dark-text);
    font-weight: 500;
}

#panel-diagnosis .diag-report-tag--secondary {
    color: rgba(245, 240, 232, 0.6);
}

#panel-diagnosis .diag-report-tag--meta {
    font-size: 11px;
    color: rgba(245, 240, 232, 0.38);
    border-color: rgba(255, 255, 255, 0.05);
}

#panel-diagnosis .diag-report-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

#panel-diagnosis .diag-report-btn {
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: var(--ws-dark-text);
    transition: background var(--duration-normal) ease,
                border-color var(--duration-normal) ease;
}

#panel-diagnosis .diag-report-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

#panel-diagnosis .diag-report-btn--primary {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
}

/* 主体：左锚点 + 右内容 双栏 */
#panel-diagnosis .diag-report-body {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 40px;
    align-items: flex-start;
}

/* 左侧锚点 */
#panel-diagnosis .diag-report-anchor {
    position: sticky;
    top: 24px;
    align-self: flex-start;
}

#panel-diagnosis .diag-report-anchor-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#panel-diagnosis .diag-anchor-lnk {
    display: block;
    padding: 7px 0 7px 14px;
    border-left: 2px solid transparent;
    color: rgba(245, 240, 232, 0.45);
    text-decoration: none;
    font-size: 12px;
    letter-spacing: 0.3px;
    transition: color var(--duration-normal) ease,
                border-color var(--duration-normal) ease;
}

#panel-diagnosis .diag-anchor-lnk:hover {
    color: rgba(245, 240, 232, 0.85);
}

/* 锚点 active — 金色 #1：竖线指示器 */
#panel-diagnosis .diag-anchor-lnk.is-active {
    color: var(--c-gold);
    border-left-color: var(--c-gold);
}

#panel-diagnosis .diag-anchor-sep {
    height: 1px;
    background: rgba(255, 255, 255, 0.07);
    margin: 10px 0;
    list-style: none;
}

/* 右侧内容区 */
#panel-diagnosis .diag-report-content {
    min-width: 0;
    overflow-y: auto;
    max-height: calc(100vh - 180px);
    padding-right: 8px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.08) transparent;
}

/* 章节 */
#panel-diagnosis .diag-sec {
    margin-bottom: 48px;
    scroll-margin-top: 24px;
}

#panel-diagnosis .diag-sec-head {
    margin-bottom: 20px;
}

#panel-diagnosis .diag-sec-num {
    display: block;
    font-size: 11px;
    letter-spacing: 2px;
    color: rgba(245, 240, 232, 0.28);
    margin-bottom: 6px;
}

#panel-diagnosis .diag-sec-title {
    font-size: 17px;
    font-weight: 500;
    color: var(--ws-dark-text);
    margin: 0 0 4px;
}

#panel-diagnosis .diag-sec-sub {
    font-size: 12px;
    color: rgba(245, 240, 232, 0.45);
    margin: 0;
}

/* 通用玻璃卡 */
#panel-diagnosis .diag-glass-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    transition: border-color var(--duration-normal) ease;
}

#panel-diagnosis .diag-glass-card:hover {
    border-color: rgba(255, 255, 255, 0.1);
}

/* KV 键值列表 */
#panel-diagnosis .diag-kv {
    display: grid;
    grid-template-columns: 120px 1fr;
    row-gap: 14px;
    column-gap: 20px;
    margin: 0;
}

#panel-diagnosis .diag-kv dt,
#panel-diagnosis .diag-kv-label {
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(245, 240, 232, 0.38);
    align-self: center;
}

#panel-diagnosis .diag-kv dd {
    margin: 0;
    color: var(--ws-dark-text);
    font-size: 14px;
    line-height: 1.6;
}

/* 类型识别卡 */
#panel-diagnosis .diag-type-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

#panel-diagnosis .diag-type-top {
    display: flex;
    align-items: center;
    gap: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#panel-diagnosis .diag-confidence-ring {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
}

#panel-diagnosis .diag-type-meta {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#panel-diagnosis .diag-type-row {
    display: flex;
    align-items: baseline;
    gap: 14px;
}

#panel-diagnosis .diag-kv-label {
    min-width: 52px;
}

#panel-diagnosis .diag-type-val {
    font-size: 16px;
    font-weight: 500;
    color: var(--ws-dark-text);
}

#panel-diagnosis .diag-type-val--sub {
    font-size: 14px;
    color: rgba(245, 240, 232, 0.65);
}

/* 信号网格 */
#panel-diagnosis .diag-signal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 28px;
}

#panel-diagnosis .diag-signal-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#panel-diagnosis .diag-signal-label {
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(245, 240, 232, 0.35);
}

#panel-diagnosis .diag-signal-value {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(245, 240, 232, 0.82);
}

/* 证据等级徽章 — 金色 #2：确定信息徽章 */
#panel-diagnosis .diag-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-xs);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.5px;
    margin-left: 8px;
    vertical-align: middle;
    flex-shrink: 0;
}

#panel-diagnosis .diag-badge--confirmed {
    background: rgba(212, 175, 55, 0.12);
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: var(--c-gold);
}

#panel-diagnosis .diag-badge--inferred {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(245, 240, 232, 0.7);
}

#panel-diagnosis .diag-badge--pending {
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    color: rgba(245, 240, 232, 0.45);
}

/* 核心结论列表 */
#panel-diagnosis .diag-conclusion-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#panel-diagnosis .diag-conclusion-item {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-default);
    padding: 16px 20px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    transition: border-color var(--duration-normal) ease;
}

#panel-diagnosis .diag-conclusion-item:hover {
    border-color: rgba(255, 255, 255, 0.1);
}

#panel-diagnosis .diag-conclusion-index {
    font-size: 12px;
    color: rgba(245, 240, 232, 0.3);
    flex-shrink: 0;
    padding-top: 2px;
}

#panel-diagnosis .diag-conclusion-body {
    flex: 1;
    font-size: 14px;
    line-height: 1.7;
    color: var(--ws-dark-text);
}

/* 优先诊断方向 */
#panel-diagnosis .diag-priority-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#panel-diagnosis .diag-priority-item {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    transition: border-color var(--duration-normal) ease;
}

#panel-diagnosis .diag-priority-item:hover {
    border-color: rgba(255, 255, 255, 0.1);
}

#panel-diagnosis .diag-priority-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

#panel-diagnosis .diag-priority-rank {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(245, 240, 232, 0.65);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
}

#panel-diagnosis .diag-priority-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--ws-dark-text);
    margin: 0;
}

#panel-diagnosis .diag-priority-detail {
    display: grid;
    grid-template-columns: 90px 1fr;
    row-gap: 10px;
    column-gap: 16px;
}

#panel-diagnosis .diag-priority-detail dt {
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(245, 240, 232, 0.38);
    padding-top: 3px;
}

#panel-diagnosis .diag-priority-detail dd {
    margin: 0;
    color: rgba(245, 240, 232, 0.82);
    font-size: 13px;
    line-height: 1.6;
}

/* 经营规划方向网格 */
#panel-diagnosis .diag-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

#panel-diagnosis .diag-plan-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color var(--duration-normal) ease;
}

#panel-diagnosis .diag-plan-card:hover {
    border-color: rgba(255, 255, 255, 0.12);
}

#panel-diagnosis .diag-plan-direction {
    font-size: 14px;
    font-weight: 500;
    color: var(--ws-dark-text);
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#panel-diagnosis .diag-plan-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

#panel-diagnosis .diag-plan-row-label {
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(245, 240, 232, 0.35);
}

#panel-diagnosis .diag-plan-row-value {
    font-size: 12px;
    line-height: 1.6;
    color: rgba(245, 240, 232, 0.82);
}

/* 不建议方向 */
#panel-diagnosis .diag-skip-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#panel-diagnosis .diag-skip-item {
    background: rgba(255, 255, 255, 0.015);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-default);
    padding: 14px 18px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

#panel-diagnosis .diag-skip-direction {
    font-size: 13px;
    color: rgba(245, 240, 232, 0.65);
    font-weight: 500;
    min-width: 120px;
    flex-shrink: 0;
}

#panel-diagnosis .diag-skip-reason {
    font-size: 12px;
    line-height: 1.6;
    color: rgba(245, 240, 232, 0.45);
}

/* 待补充数据 */
#panel-diagnosis .diag-data-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
}

#panel-diagnosis .diag-data-item {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-default);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

#panel-diagnosis .diag-data-marker {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    flex-shrink: 0;
}

#panel-diagnosis .diag-data-name {
    font-size: 13px;
    color: rgba(245, 240, 232, 0.82);
    flex: 1;
}

#panel-diagnosis .diag-data-hint {
    font-size: 11px;
    color: rgba(245, 240, 232, 0.38);
}

/* 下一步建议 */
#panel-diagnosis .diag-next-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: diag-next;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#panel-diagnosis .diag-next-item {
    counter-increment: diag-next;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: 18px 22px 18px 56px;
    position: relative;
    font-size: 14px;
    line-height: 1.65;
    color: var(--ws-dark-text);
}

#panel-diagnosis .diag-next-item::before {
    content: counter(diag-next);
    position: absolute;
    left: 18px;
    top: 18px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(245, 240, 232, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* 排期时间轴 */
#panel-diagnosis .diag-timeline-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    position: relative;
}

#panel-diagnosis .diag-timeline-grid::before {
    content: '';
    position: absolute;
    top: 26px;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(
        to right,
        rgba(255,255,255,0.04) 0%,
        rgba(255,255,255,0.1) 50%,
        rgba(255,255,255,0.04) 100%
    );
    z-index: 0;
    pointer-events: none;
}

#panel-diagnosis .diag-stage {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    padding: 22px 20px 20px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color var(--duration-normal) ease,
                transform var(--duration-normal) ease;
}

#panel-diagnosis .diag-stage:hover {
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}

#panel-diagnosis .diag-stage-num {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 44px;
    font-weight: 200;
    line-height: 1;
    color: rgba(255, 255, 255, 0.04);
    pointer-events: none;
}

#panel-diagnosis .diag-stage-head {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

#panel-diagnosis .diag-stage-period {
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(245, 240, 232, 0.38);
}

#panel-diagnosis .diag-stage-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--ws-dark-text);
    margin: 0;
}

#panel-diagnosis .diag-stage-goal {
    font-size: 12px;
    line-height: 1.55;
    color: rgba(245, 240, 232, 0.55);
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#panel-diagnosis .diag-stage-tasks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#panel-diagnosis .diag-stage-task {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(245, 240, 232, 0.82);
}

#panel-diagnosis .diag-stage-task::before {
    content: '';
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    margin-top: 7px;
    flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
    #panel-diagnosis .diag-stage { transition: none; }
    #panel-diagnosis .diag-stage:hover { transform: none; }
    #panel-diagnosis .diag-report-btn { transition: none; }
    #panel-diagnosis .diag-anchor-lnk { transition: none; }
    #panel-diagnosis .diag-glass-card { transition: none; }
}

/* ── 统一轻提示条 ─────────────────────────────────────────────── */
.ws-toast {
    position: fixed;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    padding: 10px 20px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    color: white;
    background: var(--c-success);
    border: 1px solid var(--c-success-border);
    z-index: var(--z-toast);
    pointer-events: none;
    opacity: 0;
    transition: opacity 200ms ease, transform 200ms ease;
}
.ws-toast--top    { top: 80px; }
.ws-toast--bottom { bottom: 100px; }
.ws-toast--warn   { background: rgba(212, 175, 55, 0.95); border-color: rgba(212, 175, 55, 0.6); color: var(--c-text-primary); }
.ws-toast--info   { background: var(--c-info); border-color: color-mix(in srgb, var(--c-info) 35%, transparent); }
.ws-toast--in {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}


/* ============================================================
   通知中心浮窗（我的）
   ============================================================ */

#notificationModal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-overlay);
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
}

#notificationModal.visible {
    opacity: 1;
    pointer-events: all;
}

.notif-modal-box {
    width: 480px;
    max-height: 70vh;
    background: var(--c-bg-deep);
    backdrop-filter: var(--ws-blur-heavy);
    -webkit-backdrop-filter: var(--ws-blur-heavy);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.55);
    transform: scale(0.95) translateY(8px);
    transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 300ms ease;
}

#notificationModal.visible .notif-modal-box {
    transform: scale(1) translateY(0);
}

#notificationModal.visible .notif-modal-box {
    transform: scale(1);
}

.notif-header {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--ws-border);
}

.notif-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--ws-text);
}

.notif-close {
    background: none;
    border: none;
    color: var(--ws-text-muted);
    font-size: 20px;
    cursor: pointer;
    transition: color 200ms ease;
}

.notif-close:hover {
    color: var(--ws-text);
}

.notif-close:focus-visible {
    outline: 2px solid var(--ws-gold);
    outline-offset: 2px;
}

.notif-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 0;
}

.notif-item {
    padding: 14px 24px;
    border-bottom: 1px solid color-mix(in srgb, var(--c-white) 4%, transparent);
    transition: background var(--duration-normal) ease;
    cursor: pointer;
}

.notif-item:hover {
    background: color-mix(in srgb, var(--c-white) 4%, transparent);
}

.notif-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.notif-badge {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 20px;
    font-weight: 500;
}

.notif-badge.user    { background: color-mix(in srgb, var(--c-info) 20%, transparent);  color: #4a90d9; }
.notif-badge.system  { background: color-mix(in srgb, var(--c-info) 20%, transparent); color: #9090e0; }
.notif-badge.platform{ background: rgba(200, 168, 75, 0.15); color: #C8A84B; }
.notif-badge.warning { background: color-mix(in srgb, var(--c-error) 20%, transparent);   color: var(--ws-error); }

.notif-item-time {
    font-size: 11px;
    color: color-mix(in srgb, var(--c-white) 25%, transparent);
    margin-left: auto;
}

.notif-item-content {
    font-size: 13px;
    color: color-mix(in srgb, var(--c-white) 60%, transparent);
    line-height: 1.5;
}


/* ============================================================
   上传资料面板
   ============================================================ */

/* Tab 导航 */
.upload-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    border-bottom: 1px solid color-mix(in srgb, var(--c-white) 8%, transparent);
    padding-bottom: 0;
    overflow-x: auto;
}

.upload-tab {
    background: none;
    border: none;
    padding: 12px 20px;
    color: color-mix(in srgb, var(--c-white) 50%, transparent);
    font-size: 14px;
    cursor: pointer;
    transition: all var(--duration-normal) ease;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    font-family: inherit;
}

.upload-tab:hover {
    color: color-mix(in srgb, var(--c-white) 85%, transparent);
}

.upload-tab.active {
    color: #C8A84B;
    border-bottom-color: #C8A84B;
    font-weight: 500;
}

/* Tab 内容容器 */
.upload-tab-content {
    display: none;
    animation: uploadFadeIn var(--duration-normal) ease;
}

.upload-tab-content.active {
    display: block;
}

@keyframes uploadFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 分组卡片 */
.upload-section {
    background: color-mix(in srgb, var(--c-white) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-white) 4%, transparent);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    margin-bottom: 16px;
}

.upload-section-sensitive {
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(255, 255, 255, 0.08);
}

.upload-section-title {
    font-size: 15px;
    font-weight: 600;
    color: color-mix(in srgb, var(--c-white) 90%, transparent);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.upload-section-subtitle {
    font-size: 12px;
    color: color-mix(in srgb, var(--c-white) 50%, transparent);
    margin: 16px 0 12px 0;
    font-weight: 500;
}

.upload-section-desc {
    font-size: 12px;
    color: color-mix(in srgb, var(--c-white) 40%, transparent);
    margin-bottom: 16px;
    margin-top: -8px;
}

.upload-sensitive-tag {
    font-size: 11px;
    background: color-mix(in srgb, var(--c-error) 16%, transparent);
    color: var(--ws-error);
    padding: 2px 8px;
    border-radius: 20px;
    font-weight: 500;
}

.upload-api-tag {
    display: inline-block;
    font-size: 9px;
    background: color-mix(in srgb, var(--c-info) 16%, transparent);
    color: var(--c-link);
    padding: 1px 6px;
    border-radius: var(--radius-md);
    margin-left: 6px;
    font-weight: 500;
    letter-spacing: 0.5px;
    vertical-align: middle;
}

/* 字段网格 */
.upload-grid-1 { display: grid; grid-template-columns: 1fr; gap: 14px 16px; }
.upload-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.upload-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px 16px; }


/* 单字段 */
.upload-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.upload-field-full {
    grid-column: 1 / -1;
    margin-top: 4px;
}

.upload-field-label {
    font-size: 12px;
    color: color-mix(in srgb, var(--c-white) 55%, transparent);
    display: flex;
    align-items: center;
}

.upload-field-input,
.upload-field-textarea {
    background: color-mix(in srgb, var(--c-white) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-white) 12%, transparent);
    border-radius: 8px;
    padding: 9px 12px;
    color: var(--c-white);
    font-size: 13px;
    outline: none;
    transition: border-color var(--duration-normal) ease, background var(--duration-normal) ease;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}

.upload-field-input:focus,
.upload-field-textarea:focus {
    border-color: rgba(212, 175, 55, 0.55);
    background: rgba(255, 255, 255, 0.055);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.upload-field-textarea {
    resize: vertical;
    min-height: 70px;
    line-height: 1.5;
}

.upload-field-input::placeholder,
.upload-field-textarea::placeholder {
    color: color-mix(in srgb, var(--c-white) 25%, transparent);
}

select.upload-field-input {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, color-mix(in srgb, var(--c-white) 50%, transparent) 50%),
                      linear-gradient(135deg, color-mix(in srgb, var(--c-white) 50%, transparent) 50%, transparent 50%);
    background-position: calc(100% - 14px) center, calc(100% - 9px) center;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    padding-right: 28px;
    cursor: pointer;
}

select.upload-field-input option {
    background: var(--c-bg-deep);
    color: var(--c-white);
}

input[type="time"].upload-field-input {
    color-scheme: dark;
}

/* 输入框带单位 */
.upload-input-with-unit {
    display: flex;
    align-items: center;
    gap: 8px;
}

.upload-input-with-unit .upload-field-input {
    flex: 1;
}

.upload-unit {
    font-size: 12px;
    color: color-mix(in srgb, var(--c-white) 45%, transparent);
    flex-shrink: 0;
    min-width: 24px;
}

.upload-unit-select {
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-sm);
    padding: 6px 22px 6px 10px;
    color: rgba(245, 240, 232, 0.75);
    font-size: 12px;
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, rgba(245,240,232,0.4) 50%),
                      linear-gradient(135deg, rgba(245,240,232,0.4) 50%, transparent 50%);
    background-position: calc(100% - 12px) center, calc(100% - 7px) center;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    transition: border-color var(--duration-normal) ease, background-color var(--duration-normal) ease;
    font-family: inherit;
}

.upload-unit-select:hover,
.upload-unit-select:focus {
    border-color: rgba(212, 175, 55, 0.55);
    background-color: rgba(255, 255, 255, 0.08);
}

.upload-unit-select option {
    background: var(--c-bg-deep);
    color: var(--c-white);
}

/* Switch 按钮组（单选）—— 紧凑卡片自适应，按内容宽度排列 */
.upload-switch-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
}

/* 每个字段独立小卡片：label + 按钮紧挨，整体宽度按内容自适应 */
.upload-switch-item {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px 6px 12px;
    gap: 10px;
    background: color-mix(in srgb, var(--c-white) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-white) 12%, transparent);
    border-radius: var(--radius-sm);
    transition: border-color var(--duration-normal) ease, background var(--duration-normal) ease;
    min-width: 0;
}

.upload-switch-item:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
}

/* 行内 inline 版本（早餐"是否提供"等）保持横排但不需要卡片背景 */
.upload-switch-inline {
    background: none;
    border: none;
    padding: 4px 0 12px;
    border-bottom: 1px dashed color-mix(in srgb, var(--c-white) 8%, transparent);
    border-radius: 0;
    margin-bottom: 12px;
    justify-content: space-between;
}

.upload-switch-inline:hover {
    background: none;
    border-color: color-mix(in srgb, var(--c-white) 8%, transparent);
    border-bottom-color: color-mix(in srgb, var(--c-white) 8%, transparent);
}

/* inline 版本不要虚线连接，用 space-between 即可 */
.upload-switch-inline::after { display: none; }

.upload-switch-label {
    font-size: 13px;
    color: color-mix(in srgb, var(--c-white) 85%, transparent);
    flex: 0 0 auto;
    line-height: 1.3;
    white-space: nowrap;
}

.upload-switch-group {
    display: inline-flex;
    background: color-mix(in srgb, var(--c-white) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-white) 8%, transparent);
    border-radius: var(--radius-xl);
    padding: 2px;
    flex-shrink: 0;
}

.upload-switch-btn {
    background: none;
    border: none;
    padding: 5px 14px;
    border-radius: var(--radius-lg);
    font-size: 12px;
    cursor: pointer;
    transition: all var(--duration-normal) ease;
    color: color-mix(in srgb, var(--c-white) 40%, transparent);
    font-family: inherit;
    white-space: nowrap;
}

.upload-switch-btn.active {
    background: #C8A84B;
    color: #18120A;
    box-shadow: 0 2px 8px rgba(200, 168, 75, 0.28);
}

.upload-switch-btn.inactive:hover {
    color: color-mix(in srgb, var(--c-white) 70%, transparent);
}

/* 多选 Tag */
.upload-tag-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.upload-tag-btn {
    background: color-mix(in srgb, var(--c-white) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-white) 12%, transparent);
    border-radius: var(--radius-xl);
    padding: 5px 14px;
    color: color-mix(in srgb, var(--c-white) 55%, transparent);
    font-size: 12px;
    cursor: pointer;
    transition: all var(--duration-normal) ease;
    font-family: inherit;
}

.upload-tag-btn:hover {
    border-color: rgba(255, 255, 255, 0.22);
    color: rgba(245, 240, 232, 0.88);
}

.upload-tag-btn.active {
    background: rgba(200, 168, 75, 0.14);
    border-color: #C8A84B;
    color: #C8A84B;
}

/* 条件显示区 */
.upload-conditional {
    margin-top: 0;
    padding-top: 4px;
    transition: opacity var(--duration-normal) ease, max-height var(--duration-normal) ease;
    overflow: hidden;
}

.upload-conditional.hidden {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    margin-top: 0;
}

/* 图片素材库 */
.upload-image-zone {
    border: 1px solid color-mix(in srgb, var(--c-white) 8%, transparent);
    border-radius: var(--radius-lg);
    padding: 14px;
    transition: background var(--duration-normal) ease;
    background: transparent;
}

.upload-image-zone.dragging {
    border-color: rgba(200, 168, 75, 0.5);
    background: rgba(200, 168, 75, 0.04);
}

.upload-image-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

/* 添加图片占位卡（网格里和缩略图同尺寸） */
.upload-image-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    aspect-ratio: 1;
    border: 2px dashed color-mix(in srgb, var(--c-white) 16%, transparent);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration-normal) ease;
    color: color-mix(in srgb, var(--c-white) 50%, transparent);
    text-align: center;
    padding: 8px;
    grid-column: auto;
}

.upload-image-zone:hover .upload-image-add,
.upload-image-add:hover {
    border-color: rgba(200, 168, 75, 0.5);
    color: #C8A84B;
    background: rgba(200, 168, 75, 0.04);
}

.upload-image-icon {
    font-size: 32px;
    line-height: 1;
    opacity: 0.7;
}

.upload-image-hint {
    font-size: 12px;
}

.upload-image-sub {
    font-size: 10px;
    color: color-mix(in srgb, var(--c-white) 35%, transparent);
    line-height: 1.4;
}

/* 让"添加"卡片排在网格最后 */
.upload-image-list,
.upload-image-zone {
    position: relative;
}

.upload-image-zone {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    align-content: start;
}

.upload-image-zone .upload-image-list {
    display: contents;
}

.upload-image-thumb {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: color-mix(in srgb, var(--c-black) 30%, transparent);
}

.upload-image-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.upload-image-thumb-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--c-black) 70%, transparent);
    border: none;
    color: var(--c-white);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--duration-normal) ease;
}

.upload-image-thumb:hover .upload-image-thumb-remove {
    opacity: 1;
}

/* 提交按钮 */
.upload-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--ws-dark-divider);
}

.upload-btn-secondary,
.upload-btn-primary {
    border: none;
    border-radius: var(--radius-md);
    padding: 10px 24px;
    font-size: 13px;
    cursor: pointer;
    transition: all var(--duration-normal) ease;
    font-family: inherit;
    font-weight: 500;
}

.upload-btn-secondary {
    background: color-mix(in srgb, var(--c-white) 4%, transparent);
    color: color-mix(in srgb, var(--c-white) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-white) 12%, transparent);
}

.upload-btn-secondary:hover {
    background: color-mix(in srgb, var(--c-white) 12%, transparent);
    color: var(--c-white);
}

.upload-btn-primary {
    background: #C8A84B;
    color: #18120A;
    box-shadow: 0 2px 12px rgba(200, 168, 75, 0.28);
}

.upload-btn-primary:hover {
    background: #D4B555;
    box-shadow: 0 4px 18px rgba(200, 168, 75, 0.38);
}


/* ============================================================
   工作区分屏（split mode）
   ============================================================ */

/* 分屏开启时，.ws-body 改为左右 flex 布局 */
.ws-body.split-mode {
    display: flex;
    flex-direction: row;
    --split-left-pct: 50%;
}

/* 左右两个容器：默认单屏只用左容器，宽度 100% */
.ws-split-pane {
    position: relative;
    flex: 0 0 100%;
    height: 100%;
    overflow: hidden;
    min-width: 0;
}

.ws-body.split-mode .ws-split-pane.ws-split-left {
    flex: 0 0 var(--split-left-pct);
}

.ws-body.split-mode .ws-split-pane.ws-split-right {
    flex: 1 1 auto;
    border-left: 1px solid color-mix(in srgb, var(--c-white) 8%, transparent);
}

/* 单屏时右容器隐藏 */
.ws-body:not(.split-mode) .ws-split-right {
    display: none;
}

/* panel 在容器里仍然 absolute inset:0，原行为保留 */

/* 分隔条 */
.ws-splitter {
    flex: 0 0 6px;
    background: color-mix(in srgb, var(--c-white) 4%, transparent);
    cursor: col-resize;
    position: relative;
    z-index: 5;
    transition: background var(--duration-normal) ease;
    display: none;
}

.ws-body.split-mode .ws-splitter {
    display: block;
}

.ws-splitter:hover,
.ws-splitter.dragging,
.ws-splitter:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    outline: none;
}

.ws-splitter::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 36px;
    background: color-mix(in srgb, var(--c-white) 16%, transparent);
    border-radius: var(--radius-xs);
    transform: translate(-50%, -50%);
}

/* 拖动期间：两侧 pane 内的所有子内容禁用 pointer-events，避免 hover/iframe/拖拽干扰，
   也避免每帧重排导致复杂面板（视频/图片生成）卡顿 */
.ws-body.split-resizing .ws-split-pane > * {
    pointer-events: none;
}
.ws-body.split-resizing {
    cursor: col-resize;
    user-select: none;
}

/* 面板标题栏右侧操作区（侵入式插入到 .ws-panel-title） */
.ws-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 8px;
}

.ws-panel-title-text {
    flex: 1 1 auto;
    min-width: 0;
}

.ws-panel-actions {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.ws-panel-action-btn {
    background: color-mix(in srgb, var(--c-white) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-white) 12%, transparent);
    color: color-mix(in srgb, var(--c-white) 60%, transparent);
    border-radius: var(--radius-sm);
    width: 30px;
    height: 30px;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration-normal) ease;
    font-family: inherit;
    line-height: 1;
    padding: 0;
}

.ws-panel-action-btn:hover {
    border-color: rgba(255, 255, 255, 0.25);
    color: rgba(245, 240, 232, 0.9);
    background: rgba(255, 255, 255, 0.06);
}

/* 关闭按钮仅在分屏状态显示 */
.ws-panel-action-close {
    display: none;
}

.ws-body.split-mode .ws-panel-action-close {
    display: inline-flex;
}

/* 分屏选择菜单 */
.ws-split-menu {
    position: absolute;
    top: 56px;
    right: 24px;
    z-index: var(--z-header);
    min-width: 180px;
    background: linear-gradient(135deg, var(--c-bg-deep) 0%, var(--c-bg-deep) 100%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-default);
    padding: 6px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity var(--duration-normal) ease, transform var(--duration-normal) ease;
}

.ws-split-menu.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

.ws-split-menu-title {
    font-size: 11px;
    color: color-mix(in srgb, var(--c-white) 40%, transparent);
    padding: 6px 10px 4px;
    letter-spacing: 0.5px;
}

.ws-split-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: color-mix(in srgb, var(--c-white) 80%, transparent);
    font-size: 13px;
    cursor: pointer;
    transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
}

.ws-split-menu-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(245, 240, 232, 0.9);
}

.ws-split-menu-item .ws-split-menu-icon {
    font-size: 16px;
    flex-shrink: 0;
}

/* 卫星长按提示气泡（一次性 onboarding） */
.ws-longpress-hint {
    position: fixed;
    z-index: var(--z-dropdown);  /* 长按提示 tooltip */
    background: rgba(24, 20, 12, 0.95);
    border: 1px solid rgba(200, 168, 75, 0.35);
    color: rgba(245, 240, 232, 0.9);
    padding: 10px 14px;
    border-radius: var(--radius-default);
    font-size: 12px;
    line-height: 1.4;
    max-width: 200px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--duration-normal) ease, transform var(--duration-normal) ease;
    pointer-events: none;
}

.ws-longpress-hint.visible {
    opacity: 1;
    transform: translateY(0);
}

.ws-longpress-hint::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 24px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-top-color: rgba(24, 20, 12, 0.95);
    border-bottom: 0;
}


/* ─── 长按卫星 → 拖拽分屏 ────────────────────────────────────── */

/* 拖拽中跟随光标的 ghost */
.ws-drag-ghost {
    position: fixed;
    z-index: 1002;  /* 拖拽影子（在浮窗之上） */
    transform: translate(-50%, -50%);
    pointer-events: none;
    background: color-mix(in srgb, var(--c-bg-deep) 90%, transparent);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--c-white);
    padding: 8px 14px;
    border-radius: var(--radius-xl);
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--c-black) 40%, transparent);
    transition: transform var(--duration-fast) linear;
}
.ws-drag-ghost-icon { width: 18px; height: 18px; display: inline-flex; }
.ws-drag-ghost-icon svg { width: 100%; height: 100%; color: rgba(245, 240, 232, 0.7); }

/* 拖拽进行中：禁用 body 内文字选中、改变光标 */
.ws-body.drag-active {
    cursor: grabbing;
    user-select: none;
}

/* 长按等待阶段（pointerdown 到 500ms 触发拖拽之前）：
   禁用全局文本选择，避免 mousedown 长按引发 text selection */
body.ws-longpress-pending,
body.ws-longpress-pending * {
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* drop zone 高亮：落点侧整 pane 加金色内描边 */
.ws-body.drop-target-left  .ws-split-left,
.ws-body.drop-target-right .ws-split-right {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18);
    transition: box-shadow var(--duration-fast) ease;
}
/* 单屏态下 ws-split-right 是 display:none，需要在拖拽时显出来作为 drop zone 提示 */
.ws-body.drag-active:not(.split-mode) .ws-split-right {
    display: block;
    position: absolute;
    top: 0; right: 0;
    width: 50%;
    height: 100%;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.03);
}
/* 单屏态拖到左侧时由通用规则给左 pane 加金色内描边，无需额外样式 */


/* ============================================================
   视频生成面板
   Mobile-first + min-width 媒体查询
   ============================================================ */

/* 视频生成面板：禁掉 ws-panel 自身滚动，改成 flex 列填满，左右独立滚 */
/* 左边 padding 设 0，让 sidebar 折叠态的窄边能贴到 ws-body 边缘；
   其他元素用 padding-left 单独补回 24px。 */
#panel-video-gen.ws-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 24px 24px 24px 0;
}
#panel-video-gen .ws-panel-title,
#panel-video-gen .ws-panel-subtitle {
    padding-left: 24px;
}
/* .vg-stream-header-right 已 absolute 定位，无需额外样式 */
/* layout 内部的中部 stream 自己控制 padding；sidebar 仍贴 left:0 */
#panel-video-gen .vg-stream {
    padding-left: 24px;
}

#panel-video-gen .ws-panel-title,
#panel-video-gen .ws-panel-subtitle {
    flex-shrink: 0;
}

/* 整体两栏布局 —— 320px 基础：单列堆叠（小屏允许整面板内滚） */
/* ── 视频生成：三栏布局（仿即梦）──
 *   小屏：左侧栏与中部对话流上下堆叠
 *   ≥768px：左侧素材库 + 中部对话流（顶筛选 / 中任务流 / 底输入坞）
 */
.vg-layout {
    position: relative;          /* sidebar 悬浮的定位参照 */
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* 左侧素材库栏（绝对悬浮，不挤占中部宽度） */
.vg-sidebar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 280px;
    z-index: 8;
    background: color-mix(in srgb, var(--c-bg-deep) 70%, transparent);
    -webkit-backdrop-filter: blur(28px) saturate(170%);
            backdrop-filter: blur(28px) saturate(170%);
    border: 1px solid color-mix(in srgb, var(--c-white) 8%, transparent);
    border-radius: var(--radius-xl);
    box-shadow:
        0 16px 40px -12px color-mix(in srgb, var(--c-black) 50%, transparent),
        0 4px 14px color-mix(in srgb, var(--c-black) 30%, transparent);
    min-height: 0;
    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.3s ease,
        box-shadow 0.3s ease;
    transform: translateX(0);
    opacity: 1;
}

/* 内容包裹层：折叠时整体淡出 */
.vg-sidebar-inner {
    height: 100%;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    overflow: hidden;
    opacity: 1;
    transition: opacity var(--duration-normal) ease var(--duration-fast);   /* 比抽屉慢一点淡出，更自然 */
}

.vg-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 4px 10px;
    border-bottom: none;
}

.vg-sidebar-title {
    font-size: 13px;
    font-weight: 600;
    color: color-mix(in srgb, var(--c-white) 85%, transparent);
    letter-spacing: 0.3px;
}

/* ── 折叠把手：完整半圆，整体浮在 sidebar 容器外（左边贴容器右边线） ── */
.vg-sidebar-handle {
    position: absolute;
    top: 50%;
    /* 把手完全浮在容器外，左侧贴容器右边线 */
    left: 100%;
    transform: translateY(-50%);
    z-index: 10;
    width: 18px;
    height: 56px;
    /* 半圆：右两角完全圆，左两角直角，整体形如一个左侧贴边的半圆形门把手 */
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background: color-mix(in srgb, var(--c-white) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-white) 12%, transparent);
    border-left: none;
    color: color-mix(in srgb, var(--c-white) 60%, transparent);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 2px 0 8px color-mix(in srgb, var(--c-black) 20%, transparent);
    transition: background var(--duration-normal) ease, color var(--duration-normal) ease, width var(--duration-normal) ease;
}

.vg-sidebar-handle:hover {
    background: color-mix(in srgb, var(--c-gold) 16%, transparent);
    color: var(--c-gold);
    width: 22px;
}

.vg-sidebar-handle-icon {
    transition: transform var(--duration-normal) ease;
}

/* 折叠态：sidebar 向左滑出大部分，留 16px 窄边贴 layout 边
   右上/右下圆角与展开态一致（16px），让窄边像"容器侧边凸起" */
.vg-layout[data-sidebar="folded"] .vg-sidebar {
    transform: translateX(calc(-100% + 16px));
    box-shadow: 2px 0 8px color-mix(in srgb, var(--c-black) 20%, transparent);
    border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
    border-left: none;
}

/* 把手脱离 sidebar 滑出：折叠态把把手贴到那条窄边右侧 */
.vg-layout[data-sidebar="folded"] .vg-sidebar-handle {
    /* sidebar 已滑到 -100%+6px，把手继承后位置在 layout 左边内 6px。
       不需要再补 transform，把手自然贴在那条窄边右侧。 */
    transform: translateY(-50%);
    pointer-events: auto;
}

.vg-layout[data-sidebar="folded"] .vg-sidebar-handle-icon {
    transform: rotate(180deg);
}

.vg-sidebar-handle {
    transition: background var(--duration-normal) ease, color var(--duration-normal) ease, transform var(--duration-slow) cubic-bezier(0.22, 1, 0.36, 1);
}

/* 中部对话流容器：顶部筛选 + 中部历史 + 底部输入坞 */
.vg-stream {
    position: relative;
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    flex: 1 1 auto;
    overflow: hidden;
}

.vg-stream-header {
    display: flex;
    justify-content: flex-start;    /* 日期靠左 */
    align-items: center;
    gap: 12px;
    padding: 16px 16px 8px;
    border-bottom: none;
    background: transparent;
    flex-wrap: wrap;
    position: relative;
}

.vg-stream-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 筛选组：固定到整个视频生成面板右上角，分屏按钮正下方 */
#panel-video-gen .vg-stream-header-right {
    position: absolute;
    top: 76px;          /* 标题(22px) + margin(8) + 副标题(~18) + 间距 ≈ 紧贴分屏按钮下方 */
    right: 40px;        /* 与分屏按钮右对齐：ws-panel padding 32 + actions padding-right 8 */
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.vg-stream-date {
    font-size: 40px;
    font-weight: 600;
    color: color-mix(in srgb, var(--c-white) 85%, transparent);
    letter-spacing: 0.3px;
}

/* 顶部筛选：整体一个胶囊，内部 时间｜值｜分隔｜类型｜值 */
.vg-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: color-mix(in srgb, var(--c-white) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-white) 12%, transparent);
    border-radius: var(--radius-lg);
    padding: 4px 8px;
    transition: border-color var(--duration-normal) ease, background-color var(--duration-normal) ease;
}

.vg-filter-pill:hover {
    border-color: color-mix(in srgb, var(--c-gold) 40%, transparent);
    background: color-mix(in srgb, var(--c-white) 8%, transparent);
}

.vg-filter-pill:focus-within {
    border-color: color-mix(in srgb, var(--c-gold) 70%, transparent);
}

.vg-filter-label {
    color: color-mix(in srgb, var(--c-white) 50%, transparent);
    font-size: 13px;
    padding: 0 6px;
    user-select: none;
}

.vg-filter-sep {
    color: color-mix(in srgb, var(--c-white) 18%, transparent);
    font-size: 13px;
    margin: 0 4px;
    user-select: none;
}

.vg-filter-input {
    appearance: none;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    padding: 6px 22px 6px 4px;
    color: color-mix(in srgb, var(--c-white) 92%, transparent);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 10px) center, calc(100% - 5px) center;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    transition: color var(--duration-normal) ease, background-color var(--duration-normal) ease;
}

.vg-filter-input:hover {
    color: var(--c-gold);
    background-color: color-mix(in srgb, var(--c-gold) 8%, transparent);
}

.vg-filter-input option {
    background: var(--c-bg-deep);
    color: var(--c-white);
}

.vg-filter-input option {
    background: var(--c-bg-deep);
    color: var(--c-white);
}

.vg-stream-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px 16px 280px;    /* 底部留白避免被悬浮坞挡，顶部 24 给呼吸 */
    min-height: 0;
}

/* 主轴限宽居中：视频带 720px；输入框 940px（720×1.3）；两侧自然留白 */
.vg-stream-body .vg-task-list,
.vg-stream-body .vg-task-empty,
.vg-stream-body .vg-stream-date-row {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.vg-stream-date-row {
    padding: 0 0 12px;
}

/* 顶部日期与视频带同宽居中 */
.vg-stream-header {
    max-width: 940px;
    width: 100%;
    margin: 0 auto;
}

/* 底部输入坞（悬浮玻璃风，限宽 940 = 视频带 720 × 1.3） */
.vg-input-dock {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 940px;
    z-index: 5;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: transparent;
    border: none;
    pointer-events: none;
}

.vg-input-dock > * {
    pointer-events: auto;
}

.vg-dock-bubble {
    /* 白底 + 浅描边 + 柔和阴影，深色背景上明显悬浮 */
    background: var(--c-white);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
            backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid color-mix(in srgb, var(--c-black) 4%, transparent);
    border-radius: 28px;
    padding: 16px 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--ws-text, #0F172A);
    box-shadow:
        0 16px 48px -12px color-mix(in srgb, var(--c-black) 40%, transparent),
        0 4px 14px color-mix(in srgb, var(--c-black) 16%, transparent);
    transition:
        padding 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        border-radius 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        gap 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.3s ease-out,
        box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 紧凑态：单行 pill（用 40px 而非 999px，避免过渡时角度变化滞后） */
.vg-dock-bubble.is-empty:not(.is-focused) {
    padding: 8px 8px 8px 22px;
    border-radius: 40px;
    gap: 8px;
    background: var(--c-white);
    box-shadow:
        0 10px 28px -10px color-mix(in srgb, var(--c-black) 30%, transparent),
        0 2px 8px color-mix(in srgb, var(--c-black) 16%, transparent);
    overflow: hidden;
    flex-direction: row;
    align-items: center;
}

/* 子元素（胶囊/参考图段）：默认展开态 — 已显示，opacity 1，可平滑淡出 */
.vg-dock-bubble .vg-mode-tabs,
.vg-dock-bubble .vg-dock-chips,
.vg-dock-bubble .vg-presets-drawer,
.vg-dock-bubble .vg-submit-hint,
.vg-dock-bubble .vg-compose-refs {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.3s ease-out,
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 紧凑态：子元素淡出 + 上移一点（与气泡形变同步进行） */
.vg-dock-bubble.is-empty:not(.is-focused) .vg-mode-tabs,
.vg-dock-bubble.is-empty:not(.is-focused) .vg-dock-chips,
.vg-dock-bubble.is-empty:not(.is-focused) .vg-presets-drawer,
.vg-dock-bubble.is-empty:not(.is-focused) .vg-submit-hint {
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    /* 关键：保留 display 但用 max-height 收成 0，避免占据高度撑大气泡 */
    max-height: 0 !important;
    margin: 0;
    padding: 0;
    overflow: hidden;
    transition:
        opacity 0.2s ease-out,
        transform 0.3s ease-out,
        max-height 0.3s ease-out;
}

.vg-input-dock:has(.vg-dock-bubble.is-empty:not(.is-focused)) .vg-compose-refs {
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    max-height: 0;
    margin: 0;
    padding: 0;
    border-bottom-color: transparent;
    overflow: hidden;
}

/* 紧凑态：横排，textarea 占满左侧、积分 + 圆形 ↑ 贴右 */
.vg-dock-bubble.is-empty:not(.is-focused) .vg-prompt-wrap {
    flex: 1;
    min-width: 0;
}
.vg-dock-bubble.is-empty:not(.is-focused) .vg-dock-toolbar {
    width: auto;
    flex-shrink: 0;
    padding: 0;
    border: none;
}

.vg-dock-bubble.is-empty:not(.is-focused) .vg-prompt {
    height: 28px;
    min-height: 28px;
    max-height: 28px;
    padding: 4px 0;
    font-size: 14px;
    line-height: 20px;
    vertical-align: top;
    overflow: hidden;
}

.vg-dock-bubble:focus-within {
    background: var(--c-white);
    box-shadow:
        0 20px 56px -14px color-mix(in srgb, var(--c-black) 40%, transparent),
        0 5px 16px color-mix(in srgb, var(--c-black) 20%, transparent),
        0 0 0 1px color-mix(in srgb, var(--c-gold) 20%, transparent);
}

/* 参考图段：内嵌于输入气泡顶部，与文本框共用一个白色容器 */
.vg-dock-bubble .vg-compose-refs {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    padding: 0 0 10px 0;
    margin: 0 0 4px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--c-black) 4%, transparent);   /* 浅灰分隔线 */
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vg-dock-bubble .vg-compose-refs-head {
    padding: 0 4px;
}

.vg-dock-bubble .vg-compose-refs-title {
    color: var(--c-text-card-primary);
    font-weight: 500;
    font-size: 11px;
}

.vg-dock-bubble .vg-section-count {
    color: var(--c-text-card-muted);
}

/* 参考图为空时的提示 */
.vg-dock-bubble .vg-ref-empty {
    background: transparent;
    border: 1px dashed color-mix(in srgb, var(--c-bg-deep) 16%, transparent);
    color: var(--c-text-card-dim);
    font-size: 11px;
    padding: 10px 12px;
}

.vg-dock-hint {
    margin-left: auto;
    align-self: center;
}

.vg-dock-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 10px;
    border-top: 1px solid color-mix(in srgb, var(--c-black) 8%, transparent);
}

/* 紧凑态下隐藏分割线（textarea 和工具栏紧贴） */
.vg-dock-bubble.is-empty:not(.is-focused):not(.is-expanding) .vg-dock-toolbar {
    border-top-color: transparent;
    padding-top: 0;
}

.vg-dock-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.vg-dock-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: color-mix(in srgb, var(--c-white) 60%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-black) 12%, transparent);
    border-radius: var(--radius-full);
    padding: 4px 11px;
    color: var(--c-text-card-primary);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--duration-normal) ease, color var(--duration-normal) ease, border-color var(--duration-normal) ease;
}

.vg-dock-chip:hover {
    background: color-mix(in srgb, var(--c-black) 4%, transparent);
    border-color: color-mix(in srgb, var(--c-black) 20%, transparent);
    color: var(--ws-text, #0F172A);
}

.vg-dock-chip:focus-within {
    border-color: color-mix(in srgb, var(--c-gold) 60%, transparent);
    background: var(--c-white);
}

/* 带原生 select 的 chip：自动在尾部加 ▾，提示"可下拉" */
.vg-dock-chip:has(select)::after {
    content: '▾';
    font-size: 9px;
    color: var(--c-text-card-muted);
    margin-left: 2px;
    line-height: 1;
}

.vg-dock-chip-label {
    color: var(--c-text-card-muted);
    font-size: 11px;
}

.vg-dock-chip-input {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--ws-text, #0F172A);
    font-size: 12px;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    padding: 0 2px;
    max-width: 64px;
}

.vg-dock-chip-input::-webkit-inner-spin-button,
.vg-dock-chip-input::-webkit-outer-spin-button { appearance: none; margin: 0; }

.vg-dock-chip-input option {
    background: var(--c-white);
    color: var(--ws-text, #0F172A);
}

.vg-dock-chip-input::placeholder {
    color: var(--c-text-card-dim);
}

.vg-dock-chip-seed .vg-dock-chip-input {
    width: 56px;
}

.vg-dock-chip-presets {
    color: var(--c-text-primary);
}

.vg-dock-chip-presets:hover {
    background: color-mix(in srgb, var(--c-gold) 12%, transparent);
    color: var(--c-gold);
}

.vg-dock-chip-presets.open {
    background: color-mix(in srgb, var(--c-gold) 16%, transparent);
    color: var(--c-gold);
}

/* 输入坞内：发送按钮圆形 icon */
.vg-dock-toolbar .vg-submit-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 4px 12px color-mix(in srgb, var(--c-gold) 40%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--c-white) 16%, transparent);
}

.vg-dock-toolbar .vg-submit-btn:hover:not(:disabled) {
    transform: translateY(-1px) scale(1.04);
    box-shadow:
        0 6px 18px color-mix(in srgb, var(--c-gold) 60%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--c-white) 20%, transparent);
}

.vg-dock-toolbar .vg-submit-btn .vg-submit-icon {
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

/* 积分装饰位 */
.vg-credits {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--c-text-card-secondary);
    font-size: 13px;
    font-weight: 500;
    padding: 0 6px;
    user-select: none;
}
.vg-credits-icon {
    color: var(--c-gold);
    font-size: 12px;
}

.vg-dock-chip-arrow {
    font-size: 10px;
    color: var(--c-text-card-muted);
}

.vg-presets-drawer {
    border-top: 1px dashed color-mix(in srgb, var(--c-white) 12%, transparent);
    padding-top: 8px;
}

/* 旧 .vg-form / .vg-result 类已不再使用，留空规则避免历史样式残留 */
.vg-form,
.vg-result { display: none !important; }

/* 区段 */
.vg-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vg-section-title {
    font-size: 13px;
    font-weight: 600;
    color: color-mix(in srgb, var(--c-white) 85%, transparent);
    letter-spacing: 0.3px;
}

/* ① 模式 Tab */
.vg-mode-tabs {
    display: inline-flex;
    background: color-mix(in srgb, var(--c-white) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-white) 8%, transparent);
    border-radius: var(--radius-default);
    padding: 3px;
    gap: 2px;
    align-self: flex-start;
}

.vg-mode-tab {
    background: transparent;
    border: none;
    color: color-mix(in srgb, var(--c-white) 55%, transparent);
    padding: 7px 16px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    transition: background var(--duration-normal) ease, color var(--duration-normal) ease;
}

.vg-mode-tab:hover {
    color: color-mix(in srgb, var(--c-white) 85%, transparent);
}

.vg-mode-tab.active {
    background: color-mix(in srgb, var(--c-gold) 16%, transparent);
    color: var(--c-gold);
}

/* 输入坞内的模式 Tab：白底配深字 */
.vg-dock-bubble .vg-mode-tabs {
    background: transparent;
    border: none;
    padding: 0;
    gap: 4px;
}

.vg-dock-bubble .vg-mode-tab {
    padding: 5px 12px;
    font-size: 12px;
    color: var(--c-text-card-secondary);
}

.vg-dock-bubble .vg-mode-tab:hover {
    color: var(--ws-text, #0F172A);
    background: color-mix(in srgb, var(--c-black) 4%, transparent);
}

.vg-dock-bubble .vg-mode-tab.active {
    background: color-mix(in srgb, var(--c-gold) 16%, transparent);
    color: var(--c-text-gold);
}

/* 模式胶囊：与其他 dock-chip 同款外观，内部两个分段按钮 */
.vg-dock-chip.vg-dock-chip-mode {
    padding: 2px;
    gap: 0;
    background: color-mix(in srgb, var(--c-black) 4%, transparent);
}
.vg-dock-chip.vg-dock-chip-mode:hover {
    background: color-mix(in srgb, var(--c-black) 4%, transparent);
}
.vg-dock-chip.vg-dock-chip-mode .vg-mode-tab {
    border: none;
    background: transparent;
    color: var(--c-text-card-secondary);
    font-size: 12px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
}
.vg-dock-chip.vg-dock-chip-mode .vg-mode-tab:hover {
    color: var(--ws-text, #0F172A);
    background: color-mix(in srgb, var(--c-black) 4%, transparent);
}
.vg-dock-chip.vg-dock-chip-mode .vg-mode-tab.active {
    background: color-mix(in srgb, var(--c-gold) 16%, transparent);
    color: var(--c-text-gold);
    font-weight: 600;
}

/* ② 预设模板按钮组 */
.vg-presets {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.vg-preset {
    background: color-mix(in srgb, var(--c-white) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-white) 8%, transparent);
    border-radius: var(--radius-default);
    padding: 12px 8px;
    cursor: pointer;
    color: color-mix(in srgb, var(--c-white) 85%, transparent);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    transition: background var(--duration-normal) ease, border-color var(--duration-normal) ease, transform var(--duration-normal) ease;
}

.vg-preset:hover {
    background: color-mix(in srgb, var(--c-gold) 8%, transparent);
    border-color: color-mix(in srgb, var(--c-gold) 40%, transparent);
    transform: translateY(-1px);
}

.vg-preset.selected {
    background: color-mix(in srgb, var(--c-gold) 16%, transparent);
    border-color: color-mix(in srgb, var(--c-gold) 70%, transparent);
}

.vg-preset-icon {
    font-size: 22px;
}

.vg-preset-label {
    font-size: 12px;
    color: color-mix(in srgb, var(--c-white) 85%, transparent);
}

.vg-presets-loading,
.vg-presets-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: color-mix(in srgb, var(--c-white) 40%, transparent);
    padding: 16px;
    font-size: 12px;
}

/* ③ 参考图区（多图，最多 9 张）+ 添加抽屉 */
.vg-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.vg-section-count,
.vg-section-hint {
    font-size: 11px;
    color: color-mix(in srgb, var(--c-white) 40%, transparent);
    font-weight: 400;
}

/* 参考图缩略图：在底部输入坞内，固定小尺寸横向排列（仿即梦），溢出可横滚 */
.vg-ref-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vg-ref-card {
    position: relative;
    width: 72px;
    height: 72px;
    flex: 0 0 auto;
    border-radius: var(--radius-default);
    overflow: hidden;
    background: var(--c-black);
    border: 1px solid color-mix(in srgb, var(--c-white) 12%, transparent);
}

.vg-ref-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vg-ref-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 10px;
    background: color-mix(in srgb, var(--c-gold) 80%, transparent);
    color: var(--c-white);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    letter-spacing: 0.3px;
}

.vg-ref-insert,
.vg-ref-remove {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-white);
    transition: background var(--duration-fast) ease, transform var(--duration-fast) ease;
}

.vg-ref-insert {
    top: 6px;
    right: 32px;
    background: color-mix(in srgb, var(--c-black) 60%, transparent);
    font-weight: 700;
}

.vg-ref-insert:hover {
    background: color-mix(in srgb, var(--c-gold) 80%, transparent);
    transform: scale(1.08);
}

.vg-ref-remove {
    top: 6px;
    right: 6px;
    background: color-mix(in srgb, var(--c-black) 60%, transparent);
    font-size: 16px;
}

.vg-ref-remove:hover {
    background: color-mix(in srgb, var(--c-error) 80%, transparent);
    transform: scale(1.08);
}

.vg-ref-full {
    width: 72px;
    height: 72px;
    flex: 0 0 auto;
    background: transparent;
    border: 1px dashed color-mix(in srgb, var(--c-white) 8%, transparent);
    border-radius: var(--radius-default);
    color: color-mix(in srgb, var(--c-white) 30%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 10px;
    padding: 4px;
    line-height: 1.2;
}

/* 参考图区为空时的提示（占满整行） */
.vg-ref-empty {
    flex: 1 1 100%;
    background: transparent;
    border: 1px dashed color-mix(in srgb, var(--c-white) 12%, transparent);
    border-radius: var(--radius-default);
    color: color-mix(in srgb, var(--c-white) 40%, transparent);
    text-align: center;
    font-size: 12px;
    padding: 14px 12px;
    line-height: 1.5;
}

/* 素材库右上角"上传图片"小按钮 */
.vg-upload-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    padding: 3px 8px;
    color: var(--c-text-primary);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--duration-normal) ease, color var(--duration-normal) ease;
}

.vg-upload-inline:hover {
    background: color-mix(in srgb, var(--c-gold) 12%, transparent);
    color: var(--c-gold);
}

.vg-upload-inline-icon {
    font-weight: 700;
}

.vg-upload-hint {
    font-size: 11px;
    color: color-mix(in srgb, var(--c-white) 35%, transparent);
    line-height: 1.5;
    margin-top: 6px;
}

/* 参考图区（位于输入坞内 / 坞之上独立卡片） */
.vg-compose-refs {
    background: color-mix(in srgb, var(--c-white) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-white) 8%, transparent);
    border-radius: var(--radius-lg);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vg-compose-refs-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.vg-compose-refs-title {
    font-size: 12px;
    color: color-mix(in srgb, var(--c-white) 65%, transparent);
    font-weight: 600;
    letter-spacing: 0.3px;
}

.vg-compose-prompt {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vg-compose-prompt-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.vg-compose-prompt-title {
    font-size: 13px;
    color: color-mix(in srgb, var(--c-white) 85%, transparent);
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* ④ Prompt 文本框（位于白底输入坞内） */
.vg-prompt {
    width: 100%;
    box-sizing: border-box;
    display: block;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    padding: 6px 4px;
    color: var(--ws-text, #0F172A);
    font-size: 14px;
    font-family: inherit;
    resize: none;
    min-height: 56px;
    max-height: 200px;
    line-height: 1.5;
    outline: none;
    caret-color: var(--c-gold);
}

.vg-prompt:focus {
    background: transparent;
}

.vg-prompt::placeholder {
    color: var(--c-text-card-dim);
}

/* ⑤ 参数网格 */
.vg-params-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.vg-param {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vg-param-label {
    font-size: 12px;
    color: color-mix(in srgb, var(--c-white) 55%, transparent);
}

.vg-param-input {
    background: color-mix(in srgb, var(--c-white) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-white) 12%, transparent);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    color: var(--c-white);
    font-size: 13px;
    outline: none;
    font-family: inherit;
    transition: border-color var(--duration-normal) ease, background var(--duration-normal) ease;
    width: 100%;
    box-sizing: border-box;
}

.vg-param-input:focus {
    border-color: color-mix(in srgb, var(--c-gold) 60%, transparent);
    background: color-mix(in srgb, var(--c-white) 4%, transparent);
}

select.vg-param-input {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, color-mix(in srgb, var(--c-white) 50%, transparent) 50%),
                      linear-gradient(135deg, color-mix(in srgb, var(--c-white) 50%, transparent) 50%, transparent 50%);
    background-position: calc(100% - 14px) center, calc(100% - 9px) center;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    padding-right: 28px;
    cursor: pointer;
}

select.vg-param-input option {
    background: var(--c-bg-deep);
    color: var(--c-white);
}

/* ⑥ 提交按钮 */
.vg-submit-btn {
    background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-dark) 100%);
    color: var(--c-white);
    border: none;
    border-radius: var(--radius-default);
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    transition: transform var(--duration-normal) ease, box-shadow var(--duration-normal) ease, opacity var(--duration-normal) ease;
    box-shadow: 0 2px 12px color-mix(in srgb, var(--c-gold) 20%, transparent);
}

.vg-submit-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 18px color-mix(in srgb, var(--c-gold) 40%, transparent);
}

.vg-submit-btn.disabled,
.vg-submit-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

.vg-submit-btn.loading .vg-submit-icon {
    animation: vgSpin 1s linear infinite;
}

@keyframes vgSpin {
    to { transform: rotate(360deg); }
}

.vg-submit-icon {
    font-size: 12px;
    display: inline-block;
}

.vg-submit-hint {
    font-size: 12px;
    color: var(--c-error);
    min-height: 16px;
    text-align: center;
}

/* 任务列表（位于 vg-stream-body 内，由父容器控制滚动） */
.vg-task-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.vg-task-empty {
    text-align: center;
    color: color-mix(in srgb, var(--c-white) 35%, transparent);
    padding: 40px 12px;
    font-size: 13px;
    border: 1px dashed color-mix(in srgb, var(--c-white) 8%, transparent);
    border-radius: var(--radius-default);
}

.vg-task-card {
    background: transparent;
    border: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vg-task-card.list-mode {
    background: transparent;
    max-width: 600px;
}

/* 任务流：卡之间用大间距代替分隔线 */
.vg-task-list {
    gap: 48px;
}

.vg-task-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}

.vg-task-status {
    padding: 2px 8px;
    border-radius: var(--radius-default);
    font-weight: 600;
    letter-spacing: 0.3px;
}

.vg-task-status-queued {
    background: color-mix(in srgb, var(--c-white) 8%, transparent);
    color: color-mix(in srgb, var(--c-white) 65%, transparent);
}

.vg-task-status-processing {
    background: color-mix(in srgb, var(--c-info) 16%, transparent);
    color: var(--c-link);
}

.vg-task-status-succeeded {
    background: color-mix(in srgb, var(--c-success) 16%, transparent);
    color: var(--c-success);
}

.vg-task-status-failed {
    background: color-mix(in srgb, var(--c-error) 16%, transparent);
    color: var(--ws-error);
}

.vg-task-spec {
    color: color-mix(in srgb, var(--c-white) 50%, transparent);
}

.vg-task-time {
    color: color-mix(in srgb, var(--c-white) 40%, transparent);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.vg-task-prompt {
    font-size: 12px;
    color: color-mix(in srgb, var(--c-white) 70%, transparent);
    line-height: 1.5;
}

.vg-task-video {
    width: 100%;
    border-radius: var(--radius-md);
    background: var(--c-black);
    max-height: 280px;
}

.vg-task-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vg-task-progress-bar {
    height: 6px;
    background: color-mix(in srgb, var(--c-white) 8%, transparent);
    border-radius: var(--radius-xs);
    overflow: hidden;
}

.vg-task-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--c-gold) 0%, var(--c-gold-warm) 100%);
    transition: width var(--duration-normal) ease;
}

.vg-task-progress-text {
    font-size: 11px;
    color: color-mix(in srgb, var(--c-white) 50%, transparent);
    text-align: right;
}

.vg-task-failed {
    background: color-mix(in srgb, var(--c-error) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-error) 20%, transparent);
    border-radius: var(--radius-md);
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ws-error);
    font-size: 12px;
}

.vg-task-retry {
    align-self: flex-end;
    background: color-mix(in srgb, var(--c-gold) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-gold) 40%, transparent);
    color: var(--c-gold);
    border-radius: var(--radius-sm);
    padding: 5px 12px;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    transition: background var(--duration-normal) ease;
}

.vg-task-retry:hover {
    background: color-mix(in srgb, var(--c-gold) 20%, transparent);
}

/* 素材库网格（位于添加抽屉内） */
.vg-asset-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
}

.vg-asset-loading,
.vg-asset-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: color-mix(in srgb, var(--c-white) 40%, transparent);
    padding: 18px 12px;
    font-size: 12px;
}

.vg-asset-item {
    position: relative;
    background: transparent;
    border: none;
    border-radius: var(--radius-default);
    padding: 4px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: inherit;
    transition: background var(--duration-normal) ease;
}

.vg-asset-item:hover:not([disabled]) {
    background: color-mix(in srgb, var(--c-white) 4%, transparent);
}

.vg-asset-item.used {
    opacity: 0.45;
    cursor: not-allowed;
}

/* 素材库末尾的"+"上传占位卡：虚线边框 + 虚线十字 */
.vg-asset-upload {
    aspect-ratio: 1 / 1;
    background: transparent;
    border: 1px dashed color-mix(in srgb, var(--c-white) 20%, transparent);
    border-radius: var(--radius-default);
    color: color-mix(in srgb, var(--c-white) 40%, transparent);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-family: inherit;
    transition: border-color var(--duration-normal) ease, color var(--duration-normal) ease, background var(--duration-normal) ease;
}

.vg-asset-upload:hover {
    border-color: color-mix(in srgb, var(--c-gold) 60%, transparent);
    color: var(--c-gold);
    background: color-mix(in srgb, var(--c-gold) 4%, transparent);
}

.vg-asset-upload svg {
    display: block;
}

.vg-asset-item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--c-black);
}

.vg-asset-name {
    font-size: 10px;
    color: color-mix(in srgb, var(--c-white) 70%, transparent);
    text-align: center;
    word-break: break-all;
    line-height: 1.3;
}

.vg-asset-used-tag {
    position: absolute;
    top: 8px;
    right: 8px;
    background: color-mix(in srgb, var(--c-black) 70%, transparent);
    color: var(--c-white);
    font-size: 10px;
    padding: 2px 6px;
    border-radius: var(--radius-xs);
}

/* @ 引用浮层（悬浮在 textarea 中 @ 字符上方，由 JS 定位） */
.vg-prompt-wrap {
    position: relative;
    width: 100%;
}

.vg-mention-popover {
    position: absolute;
    /* top / left 由 JS 根据光标位置计算 */
    width: 240px;
    background: var(--c-bg-deep);
    border: 1px solid color-mix(in srgb, var(--c-gold) 30%, transparent);
    border-radius: var(--radius-default);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--c-black) 40%, transparent);
    z-index: 50;
    max-height: 240px;
    overflow-y: auto;
    padding: 4px;
}

.vg-mention-empty {
    text-align: center;
    color: color-mix(in srgb, var(--c-white) 40%, transparent);
    font-size: 12px;
    padding: 16px;
}

.vg-mention-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vg-mention-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
    color: var(--c-white);
    font-family: inherit;
    transition: background var(--duration-fast) ease;
}

.vg-mention-item:hover {
    background: color-mix(in srgb, var(--c-gold) 16%, transparent);
}

.vg-mention-item img {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--c-black);
    flex-shrink: 0;
}

.vg-mention-label {
    color: var(--c-gold);
    font-weight: 600;
    font-size: 12px;
    flex-shrink: 0;
}

.vg-mention-name {
    font-size: 11px;
    color: color-mix(in srgb, var(--c-white) 50%, transparent);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

/* ── 响应式断点（笔记本/桌面端） ── */

/* 1366px+（老笔记本，基础档）：三栏布局 + 双列素材库，sidebar 280px */
@media (min-width: 1366px) {
    .vg-layout {
        flex: 1;
    }
    .vg-sidebar {
        width: 280px;
        max-height: 100%;
    }
    .vg-sidebar-inner {
        overflow-y: auto;
        padding: 16px;
    }
    .vg-stream {
        max-height: 100%;
    }
    .vg-stream-header {
        padding: 14px 20px;
    }
    .vg-stream-body {
        padding: 28px 24px 300px;
    }
    .vg-task-list {
        max-height: none;
    }
    .vg-presets {
        grid-template-columns: repeat(4, 1fr);
    }
    .vg-params-grid {
        grid-template-columns: 1fr 1fr;
    }
    .vg-asset-grid {
        grid-template-columns: repeat(2, 1fr);
        max-height: none;
    }
    .vg-input-dock {
        bottom: 28px;
        width: calc(100% - 48px);
    }
}

/* 1440px+ (MacBook Air) */
@media (min-width: 1440px) {
    .vg-sidebar {
        width: 285px;
    }
}

/* 1536px+ (Win 笔记本) */
@media (min-width: 1536px) {
    .vg-sidebar {
        width: 295px;
    }
}

/* 1600px+ (普通笔记本) */
@media (min-width: 1600px) {
    .vg-sidebar {
        width: 300px;
    }
}

/* 1920px+ (主流) */
@media (min-width: 1920px) {
    .vg-sidebar {
        width: 320px;
    }
    .vg-asset-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .vg-presets {
        grid-template-columns: repeat(4, 1fr);
    }
    .vg-section-title {
        font-size: 14px;
    }
    .vg-prompt {
        font-size: 15px;
    }
}

/* 2560px+ (2K) */
@media (min-width: 2560px) {
    .vg-sidebar {
        width: 360px;
    }
    .vg-sidebar-inner {
        padding: 20px;
    }
    .vg-input-dock {
        bottom: 32px;
    }
    .vg-asset-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 2880px+ (MacBook Pro 14/16) */
@media (min-width: 2880px) {
    .vg-sidebar {
        width: 390px;
    }
    .vg-sidebar-inner {
        padding: 21px;
    }
}

/* 3024px+ (MacBook Pro 14 新款) */
@media (min-width: 3024px) {
    .vg-sidebar {
        width: 400px;
    }
    .vg-sidebar-inner {
        padding: 22px;
    }
}

/* 3456px+ (MacBook Pro 16 新款) */
@media (min-width: 3456px) {
    .vg-sidebar {
        width: 420px;
    }
    .vg-sidebar-inner {
        padding: 23px;
    }
}

/* 3840px+ (4K) */
@media (min-width: 3840px) {
    .vg-sidebar {
        width: 440px;
        border-radius: var(--radius-xl);
    }
    .vg-sidebar-inner {
        padding: 24px;
    }
    .vg-stream {
        border-radius: var(--radius-xl);
    }
    .vg-asset-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .vg-section-title {
        font-size: 18px;
    }
    .vg-prompt,
    .vg-mode-tab,
    .vg-preset-label {
        font-size: 16px;
    }
    .vg-submit-btn {
        font-size: 18px;
        padding: 12px 22px;
    }
}

/* ── 拖拽上传遮罩 ── */
.vg-drop-overlay {
    position: absolute;
    inset: 0;
    z-index: 60;
    background: var(--ws-dark-border);
    backdrop-filter: blur(4px);
    border: 2px dashed color-mix(in srgb, var(--c-gold) 70%, transparent);
    border-radius: var(--radius-xl);
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* 让 dragover 事件穿透到面板，避免闪烁 */
    animation: vgDropFadeIn var(--duration-normal) ease;
}

.vg-drop-overlay.visible {
    display: flex;
}

@keyframes vgDropFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.vg-drop-overlay-inner {
    text-align: center;
    color: var(--c-gold);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.vg-drop-overlay-icon {
    font-size: 48px;
    line-height: 1;
    animation: vgDropBounce 1s ease-in-out infinite;
}

@keyframes vgDropBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

.vg-drop-overlay-text {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.vg-result-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ── 任务卡片：删除按钮 ── */
.vg-task-delete {
    background: transparent;
    border: none;
    color: var(--ws-dark-text-dim);
    width: 22px;
    height: 22px;
    border-radius: var(--radius-xs);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
}

.vg-task-delete:hover {
    background: color-mix(in srgb, var(--c-error) 16%, transparent);
    color: var(--ws-error);
}

/* meta 行：靠左对齐、字号放大 */
.vg-task-card.list-mode .vg-task-meta {
    justify-content: flex-start;
    align-items: center;
    color: var(--ws-dark-text-muted);
    font-size: 15px;
    gap: 12px;
}

/* list 气泡：状态徽章变成纯文字小字（去背景胶囊） */
.vg-task-card.list-mode .vg-task-status {
    background: transparent;
    padding: 0;
    font-weight: 500;
    color: inherit;
}

.vg-task-card.list-mode .vg-task-status-succeeded {
    color: var(--c-success);
    background: transparent;
}
.vg-task-card.list-mode .vg-task-status-processing {
    color: var(--c-link);
    background: transparent;
}
.vg-task-card.list-mode .vg-task-status-failed {
    color: var(--c-error);
    background: transparent;
}
.vg-task-card.list-mode .vg-task-status-queued {
    color: var(--ws-dark-text-dim);
    background: transparent;
}

/* 提示词：作为视频上方的简短说明 */
.vg-task-card.list-mode .vg-task-prompt {
    font-size: 20px;
    color: var(--ws-dark-text);
    line-height: 1.55;
    padding: 0;
    font-weight: 500;
}

/* 视频：大圆角铺底，更像即梦的视频网格中的一格 */
.vg-task-card.list-mode .vg-task-video {
    border-radius: var(--radius-md);
    max-width: 300px;
    max-height: 200px;
    background: color-mix(in srgb, var(--c-black) 40%, transparent);
}

/* 删除按钮：移到 meta 行最右侧 */
.vg-task-card.list-mode .vg-task-delete {
    margin-left: auto;
    background: transparent;
    color: var(--ws-dark-text-muted);
}
.vg-task-card.list-mode .vg-task-delete:hover {
    background: color-mix(in srgb, var(--c-error) 16%, transparent);
    color: var(--ws-error);
}

/* ============================================================
   图片生成面板
   Mobile-first + min-width 媒体查询
   ============================================================ */

/* 图片生成面板：禁掉 ws-panel 自身滚动，改成 flex 列填满，左右独立滚 */
/* 左边 padding 设 0，让 sidebar 折叠态的窄边贴 ws-body 边缘；其他元素单独补回 24px。 */
#panel-image-gen.ws-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 24px 24px 24px 0;
}
#panel-image-gen .ws-panel-title,
#panel-image-gen .ws-panel-subtitle {
    padding-left: 24px;
}
#panel-image-gen .ig-stream {
    padding-left: 24px;
}

#panel-image-gen .ws-panel-title,
#panel-image-gen .ws-panel-subtitle {
    flex-shrink: 0;
}

/* 整体两栏布局 —— 320px 基础：单列堆叠（小屏允许整面板内滚） */
/* ── 视频生成：三栏布局（仿即梦）──
 *   小屏：左侧栏与中部对话流上下堆叠
 *   ≥768px：左侧素材库 + 中部对话流（顶筛选 / 中任务流 / 底输入坞）
 */
.ig-layout {
    position: relative;          /* sidebar 悬浮的定位参照 */
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* 左侧素材库栏（绝对悬浮，不挤占中部宽度） */
.ig-sidebar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 280px;
    z-index: 8;
    background: color-mix(in srgb, var(--c-bg-deep) 70%, transparent);
    -webkit-backdrop-filter: blur(28px) saturate(170%);
            backdrop-filter: blur(28px) saturate(170%);
    border: 1px solid color-mix(in srgb, var(--c-white) 8%, transparent);
    border-radius: var(--radius-xl);
    box-shadow:
        0 16px 40px -12px color-mix(in srgb, var(--c-black) 50%, transparent),
        0 4px 14px color-mix(in srgb, var(--c-black) 30%, transparent);
    min-height: 0;
    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.3s ease,
        box-shadow 0.3s ease;
    transform: translateX(0);
    opacity: 1;
}

/* 内容包裹层：折叠时整体淡出 */
.ig-sidebar-inner {
    height: 100%;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    overflow: hidden;
    opacity: 1;
    transition: opacity var(--duration-normal) ease var(--duration-fast);   /* 比抽屉慢一点淡出，更自然 */
}

.ig-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 4px 10px;
    border-bottom: none;
}

.ig-sidebar-title {
    font-size: 13px;
    font-weight: 600;
    color: color-mix(in srgb, var(--c-white) 85%, transparent);
    letter-spacing: 0.3px;
}

/* ── 折叠把手：完整半圆，整体浮在 sidebar 容器外（左边贴容器右边线） ── */
.ig-sidebar-handle {
    position: absolute;
    top: 50%;
    /* 把手完全浮在容器外，左侧贴容器右边线 */
    left: 100%;
    transform: translateY(-50%);
    z-index: 10;
    width: 18px;
    height: 56px;
    /* 半圆：右两角完全圆，左两角直角，整体形如一个左侧贴边的半圆形门把手 */
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background: color-mix(in srgb, var(--c-white) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-white) 12%, transparent);
    border-left: none;
    color: color-mix(in srgb, var(--c-white) 60%, transparent);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 2px 0 8px color-mix(in srgb, var(--c-black) 20%, transparent);
    transition: background var(--duration-normal) ease, color var(--duration-normal) ease, width var(--duration-normal) ease;
}

.ig-sidebar-handle:hover {
    background: color-mix(in srgb, var(--c-gold) 16%, transparent);
    color: var(--c-gold);
    width: 22px;
}

.ig-sidebar-handle-icon {
    transition: transform var(--duration-normal) ease;
}

/* 折叠态：sidebar 向左滑出大部分，留 16px 窄边贴 layout 边
   右上/右下圆角与展开态一致（16px） */
.ig-layout[data-sidebar="folded"] .ig-sidebar {
    transform: translateX(calc(-100% + 16px));
    box-shadow: 2px 0 8px color-mix(in srgb, var(--c-black) 20%, transparent);
    border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
    border-left: none;
}

/* 把手脱离 sidebar 滑出：折叠态把把手贴到那条窄边右侧 */
.ig-layout[data-sidebar="folded"] .ig-sidebar-handle {
    transform: translateY(-50%);
    pointer-events: auto;
}

.ig-layout[data-sidebar="folded"] .ig-sidebar-handle-icon {
    transform: rotate(180deg);
}

.ig-sidebar-handle {
    transition: background var(--duration-normal) ease, color var(--duration-normal) ease, transform var(--duration-slow) cubic-bezier(0.22, 1, 0.36, 1);
}

/* 中部对话流容器：顶部筛选 + 中部历史 + 底部输入坞 */
.ig-stream {
    position: relative;
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    flex: 1 1 auto;
    overflow: hidden;
}

.ig-stream-header {
    display: flex;
    justify-content: flex-start;    /* 日期靠左 */
    align-items: center;
    gap: 12px;
    padding: 16px 16px 8px;
    border-bottom: none;
    background: transparent;
    flex-wrap: wrap;
    position: relative;
}

.ig-stream-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 筛选组：固定到整个图片生成面板右上角，分屏按钮正下方 */
#panel-image-gen .ig-stream-header-right {
    position: absolute;
    top: 76px;          /* 标题(22px) + margin(8) + 副标题(~18) + 间距 ≈ 紧贴分屏按钮下方 */
    right: 40px;        /* 与分屏按钮右对齐：ws-panel padding 32 + actions padding-right 8 */
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.ig-stream-date {
    font-size: 40px;
    font-weight: 600;
    color: var(--ws-dark-text);
    letter-spacing: 0.3px;
}

/* 顶部筛选：整体一个胶囊，内部 时间｜值｜分隔｜类型｜值 */
.ig-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: color-mix(in srgb, var(--c-white) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-white) 12%, transparent);
    border-radius: var(--radius-lg);
    padding: 4px 8px;
    transition: border-color var(--duration-normal) ease, background-color var(--duration-normal) ease;
}

.ig-filter-pill:hover {
    border-color: color-mix(in srgb, var(--c-gold) 40%, transparent);
    background: color-mix(in srgb, var(--c-white) 8%, transparent);
}

.ig-filter-pill:focus-within {
    border-color: color-mix(in srgb, var(--c-gold) 70%, transparent);
}

.ig-filter-label {
    color: color-mix(in srgb, var(--c-white) 50%, transparent);
    font-size: 13px;
    padding: 0 6px;
    user-select: none;
}

.ig-filter-sep {
    color: color-mix(in srgb, var(--c-white) 18%, transparent);
    font-size: 13px;
    margin: 0 4px;
    user-select: none;
}

.ig-filter-input {
    appearance: none;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    padding: 6px 22px 6px 4px;
    color: color-mix(in srgb, var(--c-white) 92%, transparent);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 10px) center, calc(100% - 5px) center;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    transition: color var(--duration-normal) ease, background-color var(--duration-normal) ease;
}

.ig-filter-input:hover {
    color: var(--c-gold);
    background-color: color-mix(in srgb, var(--c-gold) 8%, transparent);
}

.ig-filter-input option {
    background: var(--c-bg-deep);
    color: var(--c-white);
}

.ig-filter-input option {
    background: var(--c-bg-deep);
    color: var(--c-white);
}

.ig-stream-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px 16px 280px;    /* 底部留白避免被悬浮坞挡，顶部 24 给呼吸 */
    min-height: 0;
}

/* 主轴限宽居中：视频带 720px；输入框 940px（720×1.3）；两侧自然留白 */
.ig-stream-body .ig-task-list,
.ig-stream-body .ig-task-empty,
.ig-stream-body .ig-stream-date-row {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.ig-stream-date-row {
    padding: 0 0 12px;
}

/* 顶部日期与视频带同宽居中 */
.ig-stream-header {
    max-width: 940px;
    width: 100%;
    margin: 0 auto;
}

/* 底部输入坞（悬浮玻璃风，限宽 940 = 视频带 720 × 1.3） */
.ig-input-dock {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 940px;
    z-index: 5;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: transparent;
    border: none;
    pointer-events: none;
}

.ig-input-dock > * {
    pointer-events: auto;
}

.ig-dock-bubble {
    /* 白底 + 浅描边 + 柔和阴影，深色背景上明显悬浮 */
    background: var(--c-white);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
            backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid color-mix(in srgb, var(--c-black) 4%, transparent);
    border-radius: 28px;
    padding: 16px 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--ws-text, #0F172A);
    box-shadow:
        0 16px 48px -12px color-mix(in srgb, var(--c-black) 40%, transparent),
        0 4px 14px color-mix(in srgb, var(--c-black) 16%, transparent);
    transition:
        padding 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        border-radius 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        gap 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.3s ease-out,
        box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 紧凑态：单行 pill（用 40px 而非 999px，避免过渡时角度变化滞后） */
.ig-dock-bubble.is-empty:not(.is-focused) {
    padding: 8px 8px 8px 22px;
    border-radius: 40px;
    gap: 8px;
    background: var(--c-white);
    box-shadow:
        0 10px 28px -10px color-mix(in srgb, var(--c-black) 30%, transparent),
        0 2px 8px color-mix(in srgb, var(--c-black) 16%, transparent);
    overflow: hidden;
    flex-direction: row;
    align-items: center;
}

/* 子元素（胶囊/参考图段）：默认展开态 — 已显示，opacity 1，可平滑淡出 */
.ig-dock-bubble .ig-mode-tabs,
.ig-dock-bubble .ig-dock-chips,
.ig-dock-bubble .ig-presets-drawer,
.ig-dock-bubble .ig-submit-hint,
.ig-dock-bubble .ig-compose-refs {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.3s ease-out,
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 紧凑态：子元素淡出 + 上移一点（与气泡形变同步进行） */
.ig-dock-bubble.is-empty:not(.is-focused) .ig-mode-tabs,
.ig-dock-bubble.is-empty:not(.is-focused) .ig-dock-chips,
.ig-dock-bubble.is-empty:not(.is-focused) .ig-presets-drawer,
.ig-dock-bubble.is-empty:not(.is-focused) .ig-submit-hint {
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    /* 关键：保留 display 但用 max-height 收成 0，避免占据高度撑大气泡 */
    max-height: 0 !important;
    margin: 0;
    padding: 0;
    overflow: hidden;
    transition:
        opacity 0.2s ease-out,
        transform 0.3s ease-out,
        max-height 0.3s ease-out;
}

.ig-input-dock:has(.ig-dock-bubble.is-empty:not(.is-focused)) .ig-compose-refs {
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    max-height: 0;
    margin: 0;
    padding: 0;
    border-bottom-color: transparent;
    overflow: hidden;
}

/* 紧凑态：横排，textarea 占满左侧、积分 + 圆形 ↑ 贴右 */
.ig-dock-bubble.is-empty:not(.is-focused) .ig-prompt-wrap {
    flex: 1;
    min-width: 0;
}
.ig-dock-bubble.is-empty:not(.is-focused) .ig-dock-toolbar {
    width: auto;
    flex-shrink: 0;
    padding: 0;
    border: none;
}

.ig-dock-bubble.is-empty:not(.is-focused) .ig-prompt {
    height: 28px;
    min-height: 28px;
    max-height: 28px;
    padding: 4px 0;
    font-size: 14px;
    line-height: 20px;
    vertical-align: top;
    overflow: hidden;
}

.ig-dock-bubble:focus-within {
    background: var(--c-white);
    box-shadow:
        0 20px 56px -14px color-mix(in srgb, var(--c-black) 40%, transparent),
        0 5px 16px color-mix(in srgb, var(--c-black) 20%, transparent),
        0 0 0 1px color-mix(in srgb, var(--c-gold) 20%, transparent);
}

/* 参考图段：内嵌于输入气泡顶部，与文本框共用一个白色容器 */
.ig-dock-bubble .ig-compose-refs {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    padding: 0 0 10px 0;
    margin: 0 0 4px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--c-black) 4%, transparent);   /* 浅灰分隔线 */
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ig-dock-bubble .ig-compose-refs-head {
    padding: 0 4px;
}

.ig-dock-bubble .ig-compose-refs-title {
    color: var(--c-text-card-primary);
    font-weight: 500;
    font-size: 11px;
}

.ig-dock-bubble .ig-section-count {
    color: var(--c-text-card-muted);
}

/* 参考图为空时的提示 */
.ig-dock-bubble .ig-ref-empty {
    background: transparent;
    border: 1px dashed color-mix(in srgb, var(--c-bg-deep) 16%, transparent);
    color: var(--c-text-card-dim);
    font-size: 11px;
    padding: 10px 12px;
}

.ig-dock-hint {
    margin-left: auto;
    align-self: center;
}

.ig-dock-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 10px;
    border-top: 1px solid color-mix(in srgb, var(--c-black) 8%, transparent);
}

/* 紧凑态下隐藏分割线（textarea 和工具栏紧贴） */
.ig-dock-bubble.is-empty:not(.is-focused):not(.is-expanding) .ig-dock-toolbar {
    border-top-color: transparent;
    padding-top: 0;
}

.ig-dock-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.ig-dock-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: color-mix(in srgb, var(--c-white) 60%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-black) 12%, transparent);
    border-radius: var(--radius-full);
    padding: 4px 11px;
    color: var(--c-text-card-primary);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--duration-normal) ease, color var(--duration-normal) ease, border-color var(--duration-normal) ease;
}

.ig-dock-chip:hover {
    background: color-mix(in srgb, var(--c-black) 4%, transparent);
    border-color: color-mix(in srgb, var(--c-black) 20%, transparent);
    color: var(--ws-text, #0F172A);
}

.ig-dock-chip:focus-within {
    border-color: color-mix(in srgb, var(--c-gold) 60%, transparent);
    background: var(--c-white);
}

/* 带原生 select 的 chip：自动在尾部加 ▾，提示"可下拉" */
.ig-dock-chip:has(select)::after {
    content: '▾';
    font-size: 9px;
    color: var(--c-text-card-muted);
    margin-left: 2px;
    line-height: 1;
}

.ig-dock-chip-label {
    color: var(--c-text-card-muted);
    font-size: 11px;
}

.ig-dock-chip-input {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--ws-text, #0F172A);
    font-size: 12px;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    padding: 0 2px;
    max-width: 64px;
}

.ig-dock-chip-input::-webkit-inner-spin-button,
.ig-dock-chip-input::-webkit-outer-spin-button { appearance: none; margin: 0; }

.ig-dock-chip-input option {
    background: var(--c-white);
    color: var(--ws-text, #0F172A);
}

.ig-dock-chip-input::placeholder {
    color: var(--c-text-card-dim);
}

.ig-dock-chip-seed .ig-dock-chip-input {
    width: 56px;
}

.ig-dock-chip-presets {
    color: var(--c-text-primary);
}

.ig-dock-chip-presets:hover {
    background: color-mix(in srgb, var(--c-gold) 12%, transparent);
    color: var(--c-gold);
}

.ig-dock-chip-presets.open {
    background: color-mix(in srgb, var(--c-gold) 16%, transparent);
    color: var(--c-gold);
}

/* 输入坞内：发送按钮圆形 icon */
.ig-dock-toolbar .ig-submit-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 4px 12px color-mix(in srgb, var(--c-gold) 40%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--c-white) 16%, transparent);
}

.ig-dock-toolbar .ig-submit-btn:hover:not(:disabled) {
    transform: translateY(-1px) scale(1.04);
    box-shadow:
        0 6px 18px color-mix(in srgb, var(--c-gold) 60%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--c-white) 20%, transparent);
}

.ig-dock-toolbar .ig-submit-btn .ig-submit-icon {
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

/* 积分装饰位 */
.ig-credits {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--c-text-card-secondary);
    font-size: 13px;
    font-weight: 500;
    padding: 0 6px;
    user-select: none;
}
.ig-credits-icon {
    color: var(--c-gold);
    font-size: 12px;
}

.ig-dock-chip-arrow {
    font-size: 10px;
    color: var(--c-text-card-muted);
}

.ig-presets-drawer {
    border-top: 1px dashed color-mix(in srgb, var(--c-white) 12%, transparent);
    padding-top: 8px;
}

/* 旧 .ig-form / .ig-result 类已不再使用，留空规则避免历史样式残留 */
.ig-form,
.ig-result { display: none !important; }

/* 区段 */
.ig-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ig-section-title {
    font-size: 13px;
    font-weight: 600;
    color: color-mix(in srgb, var(--c-white) 85%, transparent);
    letter-spacing: 0.3px;
}

/* ① 模式 Tab */
.ig-mode-tabs {
    display: inline-flex;
    background: color-mix(in srgb, var(--c-white) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-white) 8%, transparent);
    border-radius: var(--radius-default);
    padding: 3px;
    gap: 2px;
    align-self: flex-start;
}

.ig-mode-tab {
    background: transparent;
    border: none;
    color: color-mix(in srgb, var(--c-white) 55%, transparent);
    padding: 7px 16px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    transition: background var(--duration-normal) ease, color var(--duration-normal) ease;
}

.ig-mode-tab:hover {
    color: color-mix(in srgb, var(--c-white) 85%, transparent);
}

.ig-mode-tab.active {
    background: color-mix(in srgb, var(--c-gold) 16%, transparent);
    color: var(--c-gold);
}

/* 输入坞内的模式 Tab：白底配深字 */
.ig-dock-bubble .ig-mode-tabs {
    background: transparent;
    border: none;
    padding: 0;
    gap: 4px;
}

.ig-dock-bubble .ig-mode-tab {
    padding: 5px 12px;
    font-size: 12px;
    color: var(--c-text-card-secondary);
}

.ig-dock-bubble .ig-mode-tab:hover {
    color: var(--ws-text, #0F172A);
    background: color-mix(in srgb, var(--c-black) 4%, transparent);
}

.ig-dock-bubble .ig-mode-tab.active {
    background: color-mix(in srgb, var(--c-gold) 16%, transparent);
    color: var(--c-text-gold);
}

/* 模式胶囊：与其他 dock-chip 同款外观，内部两个分段按钮 */
.ig-dock-chip.ig-dock-chip-mode {
    padding: 2px;
    gap: 0;
    background: color-mix(in srgb, var(--c-black) 4%, transparent);
}
.ig-dock-chip.ig-dock-chip-mode:hover {
    background: color-mix(in srgb, var(--c-black) 4%, transparent);
}
.ig-dock-chip.ig-dock-chip-mode .ig-mode-tab {
    border: none;
    background: transparent;
    color: var(--c-text-card-secondary);
    font-size: 12px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
}
.ig-dock-chip.ig-dock-chip-mode .ig-mode-tab:hover {
    color: var(--ws-text, #0F172A);
    background: color-mix(in srgb, var(--c-black) 4%, transparent);
}
.ig-dock-chip.ig-dock-chip-mode .ig-mode-tab.active {
    background: color-mix(in srgb, var(--c-gold) 16%, transparent);
    color: var(--c-text-gold);
    font-weight: 600;
}

/* ② 预设模板按钮组 */
.ig-presets {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.ig-preset {
    background: color-mix(in srgb, var(--c-white) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-white) 8%, transparent);
    border-radius: var(--radius-default);
    padding: 12px 8px;
    cursor: pointer;
    color: color-mix(in srgb, var(--c-white) 85%, transparent);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    transition: background var(--duration-normal) ease, border-color var(--duration-normal) ease, transform var(--duration-normal) ease;
}

.ig-preset:hover {
    background: color-mix(in srgb, var(--c-gold) 8%, transparent);
    border-color: color-mix(in srgb, var(--c-gold) 40%, transparent);
    transform: translateY(-1px);
}

.ig-preset.selected {
    background: color-mix(in srgb, var(--c-gold) 16%, transparent);
    border-color: color-mix(in srgb, var(--c-gold) 70%, transparent);
}

.ig-preset-icon {
    font-size: 22px;
}

.ig-preset-label {
    font-size: 12px;
    color: color-mix(in srgb, var(--c-white) 85%, transparent);
}

.ig-presets-loading,
.ig-presets-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: color-mix(in srgb, var(--c-white) 40%, transparent);
    padding: 16px;
    font-size: 12px;
}

/* ③ 参考图区（多图，最多 9 张）+ 添加抽屉 */
.ig-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ig-section-count,
.ig-section-hint {
    font-size: 11px;
    color: color-mix(in srgb, var(--c-white) 40%, transparent);
    font-weight: 400;
}

/* 参考图缩略图：在底部输入坞内，固定小尺寸横向排列（仿即梦），溢出可横滚 */
.ig-ref-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ig-ref-card {
    position: relative;
    width: 72px;
    height: 72px;
    flex: 0 0 auto;
    border-radius: var(--radius-default);
    overflow: hidden;
    background: var(--c-black);
    border: 1px solid color-mix(in srgb, var(--c-black) 12%, transparent);
}

.ig-ref-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ig-ref-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 10px;
    background: color-mix(in srgb, var(--c-gold) 80%, transparent);
    color: var(--ws-text, #0F172A);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    letter-spacing: 0.3px;
}

.ig-ref-insert,
.ig-ref-remove {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ws-text, #0F172A);
    transition: background var(--duration-fast) ease, transform var(--duration-fast) ease;
}

.ig-ref-insert {
    top: 6px;
    right: 32px;
    background: color-mix(in srgb, var(--c-black) 60%, transparent);
    font-weight: 700;
}

.ig-ref-insert:hover {
    background: color-mix(in srgb, var(--c-gold) 80%, transparent);
    transform: scale(1.08);
}

.ig-ref-remove {
    top: 6px;
    right: 6px;
    background: color-mix(in srgb, var(--c-black) 60%, transparent);
    font-size: 16px;
}

.ig-ref-remove:hover {
    background: color-mix(in srgb, var(--c-error) 80%, transparent);
    transform: scale(1.08);
}

.ig-ref-full {
    width: 72px;
    height: 72px;
    flex: 0 0 auto;
    background: transparent;
    border: 1px dashed color-mix(in srgb, var(--c-black) 12%, transparent);
    border-radius: var(--radius-default);
    color: var(--c-text-card-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 10px;
    padding: 4px;
    line-height: 1.2;
}

/* 参考图区为空时的提示（占满整行） */
.ig-ref-empty {
    flex: 1 1 100%;
    background: transparent;
    border: 1px dashed color-mix(in srgb, var(--c-black) 12%, transparent);
    border-radius: var(--radius-default);
    color: var(--c-text-card-dim);
    text-align: center;
    font-size: 12px;
    padding: 14px 12px;
    line-height: 1.5;
}

/* 素材库右上角"上传图片"小按钮 */
.ig-upload-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    padding: 3px 8px;
    color: var(--c-text-card-primary);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--duration-normal) ease, color var(--duration-normal) ease;
}

.ig-upload-inline:hover {
    background: color-mix(in srgb, var(--c-gold) 12%, transparent);
    color: var(--c-gold);
}

.ig-upload-inline-icon {
    font-weight: 700;
}

.ig-upload-hint {
    font-size: 11px;
    color: var(--c-text-card-dim);
    line-height: 1.5;
    margin-top: 6px;
}

/* 参考图区（位于输入坞内 / 坞之上独立卡片） */
.ig-compose-refs {
    background: var(--c-white);
    border: 1px solid color-mix(in srgb, var(--c-black) 8%, transparent);
    border-radius: var(--radius-lg);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ig-compose-refs-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ig-compose-refs-title {
    font-size: 12px;
    color: var(--c-text-card-muted);
    font-weight: 600;
    letter-spacing: 0.3px;
}

.ig-compose-prompt {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ig-compose-prompt-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ig-compose-prompt-title {
    font-size: 13px;
    color: var(--ws-text, #0F172A);
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* ④ Prompt 文本框（位于白底输入坞内） */
.ig-prompt {
    width: 100%;
    box-sizing: border-box;
    display: block;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    padding: 6px 4px;
    color: var(--ws-text, #0F172A);
    font-size: 14px;
    font-family: inherit;
    resize: none;
    min-height: 56px;
    max-height: 200px;
    line-height: 1.5;
    outline: none;
    caret-color: var(--c-gold);
}

.ig-prompt:focus {
    background: transparent;
}

.ig-prompt::placeholder {
    color: var(--c-text-card-dim);
}

/* ⑤ 参数网格 */
.ig-params-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.ig-param {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ig-param-label {
    font-size: 12px;
    color: color-mix(in srgb, var(--c-white) 55%, transparent);
}

.ig-param-input {
    background: color-mix(in srgb, var(--c-white) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-white) 12%, transparent);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    color: var(--c-white);
    font-size: 13px;
    outline: none;
    font-family: inherit;
    transition: border-color var(--duration-normal) ease, background var(--duration-normal) ease;
    width: 100%;
    box-sizing: border-box;
}

.ig-param-input:focus {
    border-color: color-mix(in srgb, var(--c-gold) 60%, transparent);
    background: color-mix(in srgb, var(--c-white) 4%, transparent);
}

select.ig-param-input {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, color-mix(in srgb, var(--c-white) 50%, transparent) 50%),
                      linear-gradient(135deg, color-mix(in srgb, var(--c-white) 50%, transparent) 50%, transparent 50%);
    background-position: calc(100% - 14px) center, calc(100% - 9px) center;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    padding-right: 28px;
    cursor: pointer;
}

select.ig-param-input option {
    background: var(--c-bg-deep);
    color: var(--c-white);
}

/* ⑥ 提交按钮 */
.ig-submit-btn {
    background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-dark) 100%);
    color: var(--c-white);
    border: none;
    border-radius: var(--radius-default);
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    transition: transform var(--duration-normal) ease, box-shadow var(--duration-normal) ease, opacity var(--duration-normal) ease;
    box-shadow: 0 2px 12px color-mix(in srgb, var(--c-gold) 20%, transparent);
}

.ig-submit-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 18px color-mix(in srgb, var(--c-gold) 40%, transparent);
}

.ig-submit-btn.disabled,
.ig-submit-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

.ig-submit-btn.loading .ig-submit-icon {
    animation: vgSpin 1s linear infinite;
}

@keyframes vgSpin {
    to { transform: rotate(360deg); }
}

.ig-submit-icon {
    font-size: 12px;
    display: inline-block;
}

.ig-submit-hint {
    font-size: 12px;
    color: var(--c-error);
    min-height: 16px;
    text-align: center;
}

/* 任务列表（位于 ig-stream-body 内，由父容器控制滚动） */
.ig-task-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ig-task-empty {
    text-align: center;
    color: var(--c-text-card-dim);
    padding: 40px 12px;
    font-size: 13px;
    border: 1px dashed color-mix(in srgb, var(--c-black) 12%, transparent);
    border-radius: var(--radius-default);
}

.ig-task-card {
    background: transparent;
    border: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ig-task-card.list-mode {
    background: transparent;
    max-width: 600px;
}

/* 任务流：卡之间用大间距代替分隔线 */
.ig-task-list {
    gap: 48px;
}

.ig-task-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}

.ig-task-status {
    padding: 2px 8px;
    border-radius: var(--radius-default);
    font-weight: 600;
    letter-spacing: 0.3px;
}

.ig-task-status-queued {
    background: var(--ws-dark-surface);
    color: var(--ws-dark-text-muted);
}

.ig-task-status-processing {
    background: color-mix(in srgb, var(--c-info) 16%, transparent);
    color: var(--c-link);
}

.ig-task-status-succeeded {
    background: color-mix(in srgb, var(--c-success) 16%, transparent);
    color: var(--c-success);
}

.ig-task-status-failed {
    background: color-mix(in srgb, var(--c-error) 16%, transparent);
    color: var(--ws-error);
}

.ig-task-spec {
    color: var(--ws-dark-text-dim);
}

.ig-task-time {
    color: var(--ws-dark-text-dim);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.ig-task-prompt {
    font-size: 12px;
    color: var(--ws-dark-text-muted);
    line-height: 1.5;
}

.ig-task-video {
    width: 100%;
    border-radius: var(--radius-md);
    background: var(--c-black);
    max-height: 280px;
}

.ig-task-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ig-task-progress-bar {
    height: 6px;
    background: var(--ws-dark-surface);
    border-radius: var(--radius-xs);
    overflow: hidden;
}

.ig-task-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--c-gold) 0%, var(--c-gold-warm) 100%);
    transition: width var(--duration-normal) ease;
}

.ig-task-progress-text {
    font-size: 11px;
    color: var(--ws-dark-text-dim);
    text-align: right;
}

.ig-task-failed {
    background: color-mix(in srgb, var(--c-error) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-error) 20%, transparent);
    border-radius: var(--radius-md);
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ws-error);
    font-size: 12px;
}

.ig-task-retry {
    align-self: flex-end;
    background: color-mix(in srgb, var(--c-gold) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-gold) 40%, transparent);
    color: var(--c-gold);
    border-radius: var(--radius-sm);
    padding: 5px 12px;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    transition: background var(--duration-normal) ease;
}

.ig-task-retry:hover {
    background: color-mix(in srgb, var(--c-gold) 20%, transparent);
}

/* 素材库网格（位于添加抽屉内） */
.ig-asset-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
}

.ig-asset-loading,
.ig-asset-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: color-mix(in srgb, var(--c-white) 35%, transparent);
    padding: 18px 12px;
    font-size: 12px;
}

.ig-asset-item {
    position: relative;
    background: transparent;
    border: none;
    border-radius: var(--radius-default);
    padding: 4px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: inherit;
    transition: background var(--duration-normal) ease;
}

.ig-asset-item:hover:not([disabled]) {
    background: color-mix(in srgb, var(--c-white) 6%, transparent);
}

.ig-asset-item.used {
    opacity: 0.45;
    cursor: not-allowed;
}

/* 素材库末尾的"+"上传占位卡：虚线边框 + 虚线十字 */
.ig-asset-upload {
    aspect-ratio: 1 / 1;
    background: transparent;
    border: 1px dashed color-mix(in srgb, var(--c-white) 20%, transparent);
    border-radius: var(--radius-default);
    color: color-mix(in srgb, var(--c-white) 35%, transparent);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-family: inherit;
    transition: border-color var(--duration-normal) ease, color var(--duration-normal) ease, background var(--duration-normal) ease;
}

.ig-asset-upload:hover {
    border-color: color-mix(in srgb, var(--c-gold) 50%, transparent);
    color: var(--c-gold);
    background: color-mix(in srgb, var(--c-gold) 4%, transparent);
}

.ig-asset-upload svg {
    display: block;
}

.ig-asset-item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--c-black);
}

.ig-asset-name {
    font-size: 10px;
    color: color-mix(in srgb, var(--c-white) 60%, transparent);
    text-align: center;
    word-break: break-all;
    line-height: 1.3;
}

.ig-asset-used-tag {
    position: absolute;
    top: 8px;
    right: 8px;
    background: color-mix(in srgb, var(--c-black) 70%, transparent);
    color: color-mix(in srgb, var(--c-white) 85%, transparent);
    font-size: 10px;
    padding: 2px 6px;
    border-radius: var(--radius-xs);
}

/* @ 引用浮层（悬浮在 textarea 中 @ 字符上方，由 JS 定位） */
.ig-prompt-wrap {
    position: relative;
    width: 100%;
}

.ig-mention-popover {
    position: absolute;
    /* top / left 由 JS 根据光标位置计算 */
    width: 240px;
    background: var(--c-bg-deep);
    border: 1px solid color-mix(in srgb, var(--c-gold) 30%, transparent);
    border-radius: var(--radius-default);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--c-black) 40%, transparent);
    z-index: 50;
    max-height: 240px;
    overflow-y: auto;
    padding: 4px;
}

.ig-mention-empty {
    text-align: center;
    color: var(--ws-dark-text-dim);
    font-size: 12px;
    padding: 16px;
}

.ig-mention-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ig-mention-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
    color: var(--ws-dark-text);
    font-family: inherit;
    transition: background var(--duration-fast) ease;
}

.ig-mention-item:hover {
    background: color-mix(in srgb, var(--c-gold) 16%, transparent);
}

.ig-mention-item img {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--c-black);
    flex-shrink: 0;
}

.ig-mention-label {
    color: var(--c-gold);
    font-weight: 600;
    font-size: 12px;
    flex-shrink: 0;
}

.ig-mention-name {
    font-size: 11px;
    color: var(--ws-dark-text-dim);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

/* ── 响应式断点（笔记本/桌面端） ── */

/* 1366px+（老笔记本，基础档）：三栏布局 + 双列素材库，sidebar 280px */
@media (min-width: 1366px) {
    .ig-layout {
        flex: 1;
    }
    .ig-sidebar {
        width: 280px;
        max-height: 100%;
    }
    .ig-sidebar-inner {
        overflow-y: auto;
        padding: 16px;
    }
    .ig-stream {
        max-height: 100%;
    }
    .ig-stream-header {
        padding: 14px 20px;
    }
    .ig-stream-body {
        padding: 28px 24px 300px;
    }
    .ig-task-list {
        max-height: none;
    }
    .ig-presets {
        grid-template-columns: repeat(4, 1fr);
    }
    .ig-params-grid {
        grid-template-columns: 1fr 1fr;
    }
    .ig-asset-grid {
        grid-template-columns: repeat(2, 1fr);
        max-height: none;
    }
    .ig-input-dock {
        bottom: 28px;
        width: calc(100% - 48px);
    }
}

/* 1440px+ (MacBook Air) */
@media (min-width: 1440px) {
    .ig-sidebar {
        width: 285px;
    }
}

/* 1536px+ (Win 笔记本) */
@media (min-width: 1536px) {
    .ig-sidebar {
        width: 295px;
    }
}

/* 1600px+ (普通笔记本) */
@media (min-width: 1600px) {
    .ig-sidebar {
        width: 300px;
    }
}

/* 1920px+ (主流) */
@media (min-width: 1920px) {
    .ig-sidebar {
        width: 320px;
    }
    .ig-asset-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .ig-presets {
        grid-template-columns: repeat(4, 1fr);
    }
    .ig-section-title {
        font-size: 14px;
    }
    .ig-prompt {
        font-size: 15px;
    }
}

/* 2560px+ (2K) */
@media (min-width: 2560px) {
    .ig-sidebar {
        width: 360px;
    }
    .ig-sidebar-inner {
        padding: 20px;
    }
    .ig-input-dock {
        bottom: 32px;
    }
    .ig-asset-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 2880px+ (MacBook Pro 14/16) */
@media (min-width: 2880px) {
    .ig-sidebar {
        width: 390px;
    }
    .ig-sidebar-inner {
        padding: 21px;
    }
}

/* 3024px+ (MacBook Pro 14 新款) */
@media (min-width: 3024px) {
    .ig-sidebar {
        width: 400px;
    }
    .ig-sidebar-inner {
        padding: 22px;
    }
}

/* 3456px+ (MacBook Pro 16 新款) */
@media (min-width: 3456px) {
    .ig-sidebar {
        width: 420px;
    }
    .ig-sidebar-inner {
        padding: 23px;
    }
}

/* 3840px+ (4K) */
@media (min-width: 3840px) {
    .ig-sidebar {
        width: 440px;
        border-radius: var(--radius-xl);
    }
    .ig-sidebar-inner {
        padding: 24px;
    }
    .ig-stream {
        border-radius: var(--radius-xl);
    }
    .ig-asset-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .ig-section-title {
        font-size: 18px;
    }
    .ig-prompt,
    .ig-mode-tab,
    .ig-preset-label {
        font-size: 16px;
    }
    .ig-submit-btn {
        font-size: 18px;
        padding: 12px 22px;
    }
}

/* ── 拖拽上传遮罩 ── */
.ig-drop-overlay {
    position: absolute;
    inset: 0;
    z-index: 60;
    background: var(--ws-dark-border);
    backdrop-filter: blur(4px);
    border: 2px dashed color-mix(in srgb, var(--c-gold) 70%, transparent);
    border-radius: var(--radius-xl);
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* 让 dragover 事件穿透到面板，避免闪烁 */
    animation: vgDropFadeIn var(--duration-normal) ease;
}

.ig-drop-overlay.visible {
    display: flex;
}

@keyframes vgDropFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.ig-drop-overlay-inner {
    text-align: center;
    color: var(--c-gold);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.ig-drop-overlay-icon {
    font-size: 48px;
    line-height: 1;
    animation: vgDropBounce 1s ease-in-out infinite;
}

@keyframes vgDropBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

.ig-drop-overlay-text {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.ig-result-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ── 任务卡片：删除按钮 ── */
.ig-task-delete {
    background: transparent;
    border: none;
    color: var(--ws-dark-text-dim);
    width: 22px;
    height: 22px;
    border-radius: var(--radius-xs);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
}

.ig-task-delete:hover {
    background: color-mix(in srgb, var(--c-error) 16%, transparent);
    color: var(--ws-error);
}

/* meta 行：靠左对齐、字号放大 */
.ig-task-card.list-mode .ig-task-meta {
    justify-content: flex-start;
    align-items: center;
    color: var(--ws-dark-text-muted);
    font-size: 15px;
    gap: 12px;
}

/* list 气泡：状态徽章变成纯文字小字（去背景胶囊） */
.ig-task-card.list-mode .ig-task-status {
    background: transparent;
    padding: 0;
    font-weight: 500;
    color: inherit;
}

.ig-task-card.list-mode .ig-task-status-succeeded {
    color: var(--c-success);
    background: transparent;
}
.ig-task-card.list-mode .ig-task-status-processing {
    color: var(--c-link);
    background: transparent;
}
.ig-task-card.list-mode .ig-task-status-failed {
    color: var(--c-error);
    background: transparent;
}
.ig-task-card.list-mode .ig-task-status-queued {
    color: var(--ws-dark-text-dim);
    background: transparent;
}

/* 提示词：作为视频上方的简短说明 */
.ig-task-card.list-mode .ig-task-prompt {
    font-size: 20px;
    color: var(--ws-dark-text);
    line-height: 1.55;
    padding: 0;
    font-weight: 500;
}

/* 视频：大圆角铺底，更像即梦的视频网格中的一格 */
.ig-task-card.list-mode .ig-task-video {
    border-radius: var(--radius-lg);
    max-height: 420px;
    background: color-mix(in srgb, var(--c-black) 40%, transparent);
}

/* 删除按钮：移到 meta 行最右侧 */
.ig-task-card.list-mode .ig-task-delete {
    margin-left: auto;
    background: transparent;
    color: var(--ws-dark-text-muted);
}
.ig-task-card.list-mode .ig-task-delete:hover {
    background: color-mix(in srgb, var(--c-error) 16%, transparent);
    color: var(--ws-error);
}

/* ── 图片全屏查看浮层 ── */
.ig-image-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);  /* 图片放大查看弹窗 */
    display: none;
    align-items: center;
    justify-content: center;
}

.ig-image-modal.visible {
    display: flex;
}

.ig-image-modal-mask {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--c-black) 80%, transparent);
    backdrop-filter: blur(6px);
}

.ig-image-modal-box {
    position: relative;
    width: calc(100% - 48px);
    max-width: 1280px;
    max-height: 85vh;
}

.ig-image-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ws-dark-surface-2);
    border: none;
    color: var(--ws-dark-text);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--duration-fast) ease;
}

.ig-image-modal-close:hover {
    background: color-mix(in srgb, var(--c-error) 80%, transparent);
}

.ig-image-modal-player {
    width: 100%;
    max-height: 85vh;
    border-radius: var(--radius-md);
    background: var(--c-black);
}

/* ============================================================
   图片任务卡：图片网格（1/2/4 张）
   ============================================================ */
.ig-task-image-grid {
    display: grid;
    gap: 8px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    max-width: 300px;
    max-height: 300px;
}
.ig-task-image-grid-1 { grid-template-columns: 1fr; }
.ig-task-image-grid-2 { grid-template-columns: 1fr 1fr; }
.ig-task-image-grid-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.ig-task-image-grid .ig-task-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-default);
    cursor: zoom-in;
    transition: transform var(--duration-normal) ease;
}
.ig-task-image-grid .ig-task-image:hover {
    transform: scale(1.02);
}

/* ==========================================================================
   Windows 跨平台兼容修复
   - Mac 滚动条默认 overlay/透明，Windows Chrome/Edge 默认是白色粗滚动条
   - Windows 上 <select> 仅靠 appearance:none 不够，需要 -webkit-/-moz- 前缀
     否则胶囊 chip 的圆角会被原生方块控件覆盖
   ========================================================================== */

/* —— ① 视频/图片生成面板内所有可滚动容器：细暗色滚动条（Firefox） —— */
#panel-video-gen,
#panel-video-gen *,
#panel-image-gen,
#panel-image-gen * {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--c-gold) 30%, transparent) transparent;
}

/* —— ② 视频/图片生成面板内所有可滚动容器：细暗色滚动条（Chrome/Edge/Safari） —— */
#panel-video-gen ::-webkit-scrollbar,
#panel-image-gen ::-webkit-scrollbar,
#panel-video-gen::-webkit-scrollbar,
#panel-image-gen::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background: transparent;
}

#panel-video-gen ::-webkit-scrollbar-track,
#panel-image-gen ::-webkit-scrollbar-track,
#panel-video-gen::-webkit-scrollbar-track,
#panel-image-gen::-webkit-scrollbar-track {
    background: transparent;
    border: none;
}

#panel-video-gen ::-webkit-scrollbar-thumb,
#panel-image-gen ::-webkit-scrollbar-thumb,
#panel-video-gen::-webkit-scrollbar-thumb,
#panel-image-gen::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--c-gold) 30%, transparent);
    border-radius: var(--radius-xs);
    border: 2px solid transparent;
    background-clip: padding-box;
}

#panel-video-gen ::-webkit-scrollbar-thumb:hover,
#panel-image-gen ::-webkit-scrollbar-thumb:hover,
#panel-video-gen::-webkit-scrollbar-thumb:hover,
#panel-image-gen::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--c-gold) 60%, transparent);
    background-clip: padding-box;
}

#panel-video-gen ::-webkit-scrollbar-corner,
#panel-image-gen ::-webkit-scrollbar-corner,
#panel-video-gen::-webkit-scrollbar-corner,
#panel-image-gen::-webkit-scrollbar-corner {
    background: transparent;
}

/* —— ③ 所有 select 控件强制清除 Windows 原生方块外观 —— */
.vg-dock-chip-input,
.ig-dock-chip-input,
select.vg-param-input,
select.ig-param-input,
select.upload-field-input,
.upload-unit-select,
.mine-field select,
.vg-filter-input,
.ig-filter-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* —— ④ Firefox 下隐藏 select 默认下拉箭头（避免和我们的 ▾ 重复） —— */
@-moz-document url-prefix() {
    .vg-dock-chip-input,
    .ig-dock-chip-input {
        text-indent: 0.01px;
        text-overflow: '';
    }
}

/* —— ⑤ 胶囊 chip 在 Windows 下 select 焦点时强制保持圆角和透明背景 —— */
.vg-dock-chip select,
.ig-dock-chip select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
}

.vg-dock-chip select:focus,
.ig-dock-chip select:focus,
.vg-dock-chip select::-ms-expand,
.ig-dock-chip select::-ms-expand {
    outline: none;
    box-shadow: none;
}

/* IE/旧 Edge：去掉 select 自带下拉箭头 */
.vg-dock-chip-input::-ms-expand,
.ig-dock-chip-input::-ms-expand,
select.vg-param-input::-ms-expand,
select.ig-param-input::-ms-expand,
select.upload-field-input::-ms-expand,
.upload-unit-select::-ms-expand,
.mine-field select::-ms-expand {
    display: none;
}

/* ==========================================================================
   ChipSelect：跨平台一致的圆弧玻璃下拉控件
   被 ChipSelect.enhance() 增强的 <select> 会被隐藏，
   外层 .chip-select-trigger 接管显示与点击，
   .chip-select-popover 是点击后弹出的圆角玻璃浮层。
   ========================================================================== */

/* —— ① 隐藏被增强的原生 select（仍占位，仍参与表单提交、change 事件） —— */
select.chip-select-native {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

/* —— ② trigger：和原 select 显示文本一致的视觉，跟着父 chip 走样式 —— */
.chip-select-trigger {
    display: inline-flex;
    align-items: center;
    color: var(--ws-dark-text);
    font-size: 12px;
    font-family: inherit;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
    user-select: none;
    outline: none;
    border-radius: var(--radius-xs);
}

.chip-select-trigger-label {
    white-space: nowrap;
}

.chip-select-trigger:focus-visible {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-gold) 30%, transparent);
}

.chip-select-trigger--open {
    color: var(--ws-dark-text);
}

/* —— ③ 浮层：白底毛玻璃 + 大圆角，和 .vg-dock-bubble 同系 —— */
.chip-select-popover {
    position: fixed;
    z-index: var(--z-dropdown);  /* 标签下拉浮窗 */
    min-width: 96px;
    max-width: 280px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--ws-dark-surface);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
            backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid var(--ws-dark-border);
    border-radius: var(--radius-lg);
    padding: 6px;
    box-shadow:
        0 16px 48px -12px color-mix(in srgb, var(--c-black) 30%, transparent),
        0 4px 14px color-mix(in srgb, var(--c-black) 16%, transparent);
    font-size: 13px;
    color: var(--ws-dark-text);
    opacity: 0;
    transform: scale(0.96);
    transition: opacity var(--duration-fast) ease-out, transform var(--duration-normal) cubic-bezier(0.22, 1, 0.36, 1);

    /* 浮层自身也用细滚动条（菜单项过多时） */
    scrollbar-width: thin;
    scrollbar-color: var(--ws-dark-border) transparent;
}

.chip-select-popover::-webkit-scrollbar {
    width: 6px;
    background: transparent;
}
.chip-select-popover::-webkit-scrollbar-thumb {
    background: var(--ws-dark-border);
    border-radius: var(--radius-xs);
}

.chip-select-popover--in {
    opacity: 1;
    transform: scale(1);
}

/* —— ④ 选项：圆角按钮风，hover/选中态金色高亮 —— */
.chip-select-option {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    cursor: pointer;
    line-height: 1.2;
    color: var(--ws-dark-text);
    transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
    white-space: nowrap;
}

.chip-select-option--active {
    background: color-mix(in srgb, var(--c-gold) 16%, transparent);
    color: var(--c-text-gold);
}

.chip-select-option--selected {
    color: var(--c-text-gold);
    font-weight: 600;
}

.chip-select-option--selected.chip-select-option--active {
    background: color-mix(in srgb, var(--c-gold) 20%, transparent);
}

.chip-select-option--disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* —— ⑤ 暗色变体：用在深色背景里的 select（如视频/图片筛选 pill） —— */
.chip-select-popover.chip-select-popover--dark {
    background: var(--ws-dark-border);
    border: 1px solid var(--ws-dark-border);
    color: var(--ws-dark-text);
    scrollbar-color: var(--ws-dark-border) transparent;
}

.chip-select-popover--dark::-webkit-scrollbar-thumb {
    background: var(--ws-dark-border);
}

.chip-select-popover--dark .chip-select-option {
    color: var(--ws-dark-text);
}

.chip-select-popover--dark .chip-select-option--active {
    background: rgba(200, 168, 75, 0.16);
    color: #C8A84B;
}

.chip-select-popover--dark .chip-select-option--selected {
    color: var(--c-gold-light);
}

.chip-select-popover--dark .chip-select-option--selected.chip-select-option--active {
    background: color-mix(in srgb, var(--c-gold) 30%, transparent);
}

/* ==========================================================================
   视频/图片生成面板：右上角筛选胶囊（时间 / 类型）整体加大一倍
   ChipSelect 增强后 trigger 默认用深色字，在深色背景下看不见，这里覆盖成白色
   ========================================================================== */

/* —— ① 胶囊外壳：padding / border-radius 加大 —— */
.vg-filter-pill,
.ig-filter-pill {
    border-radius: var(--radius-xl);
    padding: 8px 16px;
    border-width: 1.5px;
}

/* —— ② "时间" "类型" label：字号加大、左右留白增大 —— */
.vg-filter-label,
.ig-filter-label {
    font-size: 15px;
    padding: 0 10px;
    color: var(--ws-dark-text-muted);
}

/* —— ③ 中间分隔符 | 也跟着放大 —— */
.vg-filter-sep,
.ig-filter-sep {
    font-size: 15px;
    margin: 0 8px;
}

/* —— ④ 原 select（即使没被增强或回退时）字号/内边距加大 —— */
.vg-filter-input,
.ig-filter-input {
    font-size: 15px;
    padding: 8px 24px 8px 6px;
}

/* —— ⑤ ChipSelect 增强后的 trigger：在筛选胶囊里强制白色 + 加大 —— */
.vg-filter-pill .chip-select-trigger,
.ig-filter-pill .chip-select-trigger {
    color: var(--ws-dark-text);
    font-size: 15px;
    font-weight: 500;
    padding: 4px 8px;
}

.vg-filter-pill .chip-select-trigger:hover,
.ig-filter-pill .chip-select-trigger:hover,
.vg-filter-pill .chip-select-trigger--open,
.ig-filter-pill .chip-select-trigger--open {
    color: var(--c-gold-light);
}

/* ============================================================
   一键发布面板（panel-publish）
   ============================================================ */
#panel-publish .pub-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.4fr);
    gap: 24px;
    align-items: start;
}

#panel-publish .pub-sidebar,
#panel-publish .pub-compose {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    padding: 20px 22px;
}

#panel-publish .pub-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0;
}

#panel-publish .pub-history-wrap {
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

/* —— 步骤区块 —— */
#panel-publish .pub-section {
    padding: 14px 0 18px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
}
#panel-publish .pub-section:last-child {
    border-bottom: none;
    padding-bottom: 4px;
}
#panel-publish .pub-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
#panel-publish .pub-section-num {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #C8A84B;
    color: #18120A;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#panel-publish .pub-section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ws-dark-text);
}
#panel-publish .pub-section-hint {
    margin-left: auto;
    font-size: 12px;
    color: var(--ws-dark-text-dim);
}
#panel-publish .pub-draft-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(245, 240, 232, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: help;
}
#panel-publish .pub-over { color: var(--ws-error); }

/* —— 媒体来源 Tab —— */
#panel-publish .pub-media-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}
#panel-publish .pub-media-tab {
    flex: 1;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-default);
    color: rgba(245, 240, 232, 0.5);
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    transition: all var(--duration-normal) ease;
}
#panel-publish .pub-media-tab:hover {
    color: rgba(245, 240, 232, 0.8);
    border-color: rgba(255, 255, 255, 0.16);
}
#panel-publish .pub-media-tab.active {
    background: rgba(255, 255, 255, 0.07);
    border-color: #C8A84B;
    color: #C8A84B;
}

/* —— 素材网格 —— */
#panel-publish .pub-asset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    max-height: 280px;
    overflow-y: auto;
    padding: 2px;
}
#panel-publish .pub-asset-loading,
#panel-publish .pub-asset-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--ws-dark-text-dim);
    font-size: 13px;
    padding: 24px;
}
#panel-publish .pub-asset-card {
    background: var(--ws-dark-surface);
    border: 2px solid transparent;
    border-radius: var(--radius-default);
    padding: 6px;
    cursor: pointer;
    text-align: left;
    transition: all var(--duration-normal) ease;
    color: inherit;
    overflow: hidden;
}
#panel-publish .pub-asset-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.04);
}
#panel-publish .pub-asset-card.selected {
    border-color: #C8A84B;
    background: rgba(200, 168, 75, 0.12);
    box-shadow: 0 0 0 3px rgba(200, 168, 75, 0.12);
}
#panel-publish .pub-asset-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--ws-dark-input-bg);
}
#panel-publish .pub-asset-thumb img,
#panel-publish .pub-asset-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
#panel-publish .pub-asset-type-badge {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: color-mix(in srgb, var(--c-black) 70%, transparent);
    color: var(--ws-dark-text);
    font-size: 10px;
    padding: 2px 6px;
    border-radius: var(--radius-default);
}
#panel-publish .pub-asset-meta {
    margin-top: 6px;
    font-size: 11px;
    color: var(--ws-dark-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#panel-publish .pub-asset-card.uploading {
    cursor: wait;
}
#panel-publish .pub-asset-uploading-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    color: rgba(245, 240, 232, 0.8);
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

/* —— 本地上传区 —— */
#panel-publish .pub-upload-zone {
    border: 2px dashed rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: 28px;
    text-align: center;
    cursor: pointer;
    transition: all var(--duration-normal) ease;
    margin-bottom: 12px;
}
#panel-publish .pub-upload-zone:hover,
#panel-publish .pub-upload-zone.drag-over {
    border-color: rgba(200, 168, 75, 0.5);
    background: rgba(200, 168, 75, 0.04);
}
#panel-publish .pub-upload-zone-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
#panel-publish .pub-upload-zone-icon {
    font-size: 28px;
}
#panel-publish .pub-upload-zone-text {
    font-size: 13px;
    color: var(--ws-dark-text-muted);
}
#panel-publish .pub-upload-zone-sub {
    font-size: 11px;
    color: var(--ws-dark-text-dim);
}

/* —— 平台块 + 多账号选择 —— */
#panel-publish .pub-platform-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#panel-publish .pub-platform-block {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    padding: 10px 12px;
    /* 平台色作为左侧竖线，遵循「唯一金点」原则 */
    border-left: 2px solid var(--pub-pf-color, #C8A84B);
}
#panel-publish .pub-platform-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
#panel-publish .pub-platform-icon { font-size: 16px; }
#panel-publish .pub-platform-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ws-dark-text);
}
#panel-publish .pub-platform-count {
    font-size: 11px;
    color: var(--ws-dark-text-dim);
    margin-left: 4px;
}
#panel-publish .pub-platform-toggle-all {
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--ws-dark-border);
    color: var(--ws-dark-text-muted);
    border-radius: var(--radius-sm);
    padding: 2px 10px;
    font-size: 11px;
    cursor: pointer;
    transition: all var(--duration-normal) ease;
}
#panel-publish .pub-platform-toggle-all:hover:not(:disabled) {
    color: var(--pub-pf-color, #C8A84B);
    border-color: var(--pub-pf-color, #C8A84B);
}
#panel-publish .pub-platform-toggle-all:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
#panel-publish .pub-account-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 6px;
}
#panel-publish .pub-account-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1.5px solid transparent;
    background: var(--ws-dark-surface);
    border-radius: var(--radius-default);
    cursor: pointer;
    transition: all var(--duration-normal) ease;
    min-width: 0;
}
#panel-publish .pub-account-row:hover:not(.disabled) {
    border-color: var(--ws-dark-border);
    background: var(--ws-dark-surface);
}
#panel-publish .pub-account-row.selected {
    border-color: var(--pub-pf-color, #C8A84B);
    background: color-mix(in srgb, var(--pub-pf-color, #C8A84B) 14%, transparent);
}
#panel-publish .pub-account-row.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
#panel-publish .pub-account-check {
    width: 14px; height: 14px;
    border-radius: var(--radius-xs);
    border: 1.5px solid color-mix(in srgb, var(--c-white) 30%, transparent);
    flex-shrink: 0;
    transition: all var(--duration-normal) ease;
    position: relative;
}
#panel-publish .pub-account-row.selected .pub-account-check {
    background: var(--pub-pf-color, #C8A84B);
    border-color: var(--pub-pf-color, #C8A84B);
}
#panel-publish .pub-account-row.selected .pub-account-check::after {
    content: '✓';
    position: absolute;
    inset: 0;
    color: var(--ws-dark-text);
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
#panel-publish .pub-account-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--ws-dark-input-bg);
}
#panel-publish .pub-account-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
#panel-publish .pub-account-nick {
    font-size: 12px;
    color: var(--ws-dark-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#panel-publish .pub-account-handle {
    font-size: 10px;
    color: var(--ws-dark-text-dim);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#panel-publish .pub-account-tag {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--c-error-soft) 16%, transparent);
    color: var(--ws-error);
    flex-shrink: 0;
}
#panel-publish .pub-account-empty {
    font-size: 12px;
    color: var(--ws-dark-text-dim);
    padding: 6px 10px;
}
#panel-publish .pub-account-bind-link {
    color: #C8A84B;
    cursor: pointer;
}

/* —— 文案表单 —— */
#panel-publish .pub-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#panel-publish .pub-form-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
#panel-publish .pub-form-label {
    font-size: 12px;
    color: var(--ws-dark-text-dim);
}
#panel-publish .pub-form-input,
#panel-publish .pub-form-textarea {
    background: var(--ws-dark-input-bg);
    border: 1px solid var(--ws-dark-border);
    border-radius: var(--radius-md);
    color: var(--ws-dark-text);
    font-size: 13px;
    padding: 9px 12px;
    font-family: inherit;
    transition: border-color var(--duration-normal) ease;
    width: 100%;
    box-sizing: border-box;
}
#panel-publish .pub-form-textarea {
    resize: vertical;
    min-height: 90px;
    line-height: 1.6;
}
#panel-publish .pub-form-input:focus,
#panel-publish .pub-form-textarea:focus {
    outline: none;
    border-color: rgba(212, 175, 55, 0.55);
    background: rgba(255, 255, 255, 0.055);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

/* —— 话题输入框下方的实时提示 —— */
#panel-publish .pub-tags-hint {
    font-size: 11px;
    color: var(--ws-dark-text-dim);
    margin-top: 4px;
    line-height: 1.6;
}
#panel-publish .pub-tags-over {
    color: var(--c-text-gold);
    font-weight: 500;
}

/* —— 发布方式 —— */
#panel-publish .pub-mode-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
#panel-publish .pub-mode-radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ws-dark-text);
    font-size: 13px;
    cursor: pointer;
}
#panel-publish .pub-mode-radio input { accent-color: #C8A84B; }
#panel-publish .pub-schedule-input {
    width: auto;
    flex: 0 0 220px;
    color-scheme: dark;
}
#panel-publish .pub-schedule-input:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* —— 提交按钮 —— */
#panel-publish .pub-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}
#panel-publish .pub-submit-hint {
    font-size: 12px;
    color: var(--ws-dark-text-dim);
}
#panel-publish .pub-submit-btn {
    background: #C8A84B;
    color: #18120A;
    border: none;
    border-radius: var(--radius-default);
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
    box-shadow: 0 2px 12px rgba(200, 168, 75, 0.28);
}
#panel-publish .pub-submit-btn:hover:not(:disabled) {
    background: #D4B555;
    transform: translateY(-1px);
    box-shadow: 0 4px 18px rgba(200, 168, 75, 0.38);
}
#panel-publish .pub-submit-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

/* —— 发布历史 —— */
#panel-publish .pub-history-head {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
}
#panel-publish .pub-history-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ws-dark-text);
}
#panel-publish .pub-history-refresh {
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--ws-dark-border);
    color: var(--ws-dark-text-muted);
    border-radius: var(--radius-md);
    width: 28px; height: 28px;
    cursor: pointer;
    transition: all var(--duration-normal) ease;
    font-size: 14px;
}
#panel-publish .pub-history-refresh:hover {
    color: rgba(245, 240, 232, 0.85);
    border-color: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}
#panel-publish .pub-history-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 480px;
    overflow-y: auto;
    padding-right: 4px;
}
#panel-publish .pub-history-card {
    display: flex;
    gap: 10px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-default);
    padding: 10px;
}
#panel-publish .pub-history-thumb {
    flex: 0 0 64px;
    width: 64px; height: 64px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--ws-dark-input-bg);
    display: flex; align-items: center; justify-content: center;
}
#panel-publish .pub-history-thumb img {
    width: 100%; height: 100%; object-fit: cover;
}
#panel-publish .pub-history-thumb-empty {
    font-size: 28px;
    color: var(--ws-dark-text-dim);
}
#panel-publish .pub-history-body {
    flex: 1; min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
#panel-publish .pub-history-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--ws-dark-text-dim);
}
#panel-publish .pub-history-time {
    flex-shrink: 0;
}
#panel-publish .pub-history-status {
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 500;
}
#panel-publish .pub-history-status-queued     { background: rgba(255,255,255,0.05); color: rgba(245,240,232,0.45); }
#panel-publish .pub-history-status-publishing { background: color-mix(in srgb, var(--c-info) 16%, transparent); color: #6ca8ff; }
#panel-publish .pub-history-status-scheduled  { background: rgba(200, 168, 75, 0.14); color: #C8A84B; }
#panel-publish .pub-history-status-succeeded  { background: color-mix(in srgb, var(--c-success-light) 16%, transparent); color: var(--c-positive); }
#panel-publish .pub-history-status-partial    { background: rgba(200, 168, 75, 0.12); color: #C8A84B; }
#panel-publish .pub-history-status-failed     { background: color-mix(in srgb, var(--c-error-soft) 16%, transparent); color: var(--ws-error); }
#panel-publish .pub-history-delete {
    margin-left: auto;
    background: transparent;
    border: none;
    color: var(--ws-dark-text-dim);
    font-size: 16px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
#panel-publish .pub-history-delete:hover {
    color: var(--ws-error);
}
#panel-publish .pub-history-title-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--ws-dark-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#panel-publish .pub-history-content {
    font-size: 12px;
    color: var(--ws-dark-text-muted);
    line-height: 1.5;
    word-break: break-word;
}
#panel-publish .pub-history-schedule {
    font-size: 11px;
    color: #C8A84B;
}
#panel-publish .pub-history-accts {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}
#panel-publish .pub-history-acct {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--ws-dark-text-muted);
    padding: 3px 6px;
    border-radius: var(--radius-sm);
    background: var(--ws-dark-surface);
}
#panel-publish .pub-history-acct-platform {
    width: 18px; height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    background: color-mix(in srgb, var(--pub-pf-color, #888) 22%, transparent);
}
#panel-publish .pub-history-acct-avatar {
    width: 18px; height: 18px;
    border-radius: 50%;
    object-fit: cover;
}
#panel-publish .pub-history-acct-nick {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 110px;
}
#panel-publish .pub-history-acct-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--ws-dark-border);
    flex-shrink: 0;
}
#panel-publish .pub-history-acct-ok  .pub-history-acct-dot { background: var(--c-success-light); box-shadow: 0 0 6px color-mix(in srgb, var(--c-success-light) 50%, transparent); }
#panel-publish .pub-history-acct-bad .pub-history-acct-dot { background: var(--c-error-soft); box-shadow: 0 0 6px color-mix(in srgb, var(--c-error-soft) 50%, transparent); }
#panel-publish .pub-history-acct-run .pub-history-acct-dot { background: var(--c-info); box-shadow: 0 0 6px color-mix(in srgb, var(--c-info) 50%, transparent); animation: pub-history-pulse 1s ease-in-out infinite; }
@keyframes pub-history-pulse {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}
#panel-publish .pub-history-acct-bad { color: var(--c-negative); }
#panel-publish .pub-history-acct-trunc {
    color: var(--c-text-gold);
    font-size: 13px;
    font-weight: 700;
    cursor: help;
    line-height: 1;
    margin-left: -2px;
}
#panel-publish .pub-history-acct-link {
    margin-left: auto;
    color: var(--ws-dark-text-muted);
    text-decoration: none;
    font-size: 10px;
}
#panel-publish .pub-history-acct-link:hover { color: rgba(245, 240, 232, 0.8); }
#panel-publish .pub-history-retry {
    align-self: flex-start;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(245, 240, 232, 0.65);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    font-size: 11px;
    cursor: pointer;
    margin-top: 4px;
    transition: all var(--duration-normal) ease;
}
#panel-publish .pub-history-retry:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.25);
}


/* ══════════════════════════════════════════════════════════════
   账号中心面板  #panel-monitor  ── 三区布局重构版
══════════════════════════════════════════════════════════════ */

/* —— 面板整体：flex 列，撑满工作区高度 —— */
#panel-monitor.mon-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    padding: 0;
    gap: 0;
}

/* —— 标题行覆写（给标题加内边距） —— */
#panel-monitor .mon-panel-title-row {
    padding: 18px 22px 0;
    flex-shrink: 0;
}

/* —— 告警条 —— */
#panel-monitor .mon-alert-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 22px 0;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.04);
    border-left: 2px solid #C8A84B;
    border-radius: var(--radius-default);
    flex-shrink: 0;
}
#panel-monitor .mon-alert-bar[hidden] { display: none; }
#panel-monitor .mon-alert-icon {
    width: 16px; height: 16px;
    color: #C8A84B;
    flex-shrink: 0;
}
#panel-monitor .mon-alert-text {
    font-size: 12px;
    color: var(--ws-dark-text-muted);
    flex: 1;
}
#panel-monitor .mon-alert-btn {
    background: transparent;
    border: 1px solid rgba(200, 168, 75, 0.4);
    color: #C8A84B;
    border-radius: var(--radius-sm);
    padding: 4px 12px;
    font-size: 11px;
    cursor: pointer;
    transition: all var(--duration-normal) ease;
    white-space: nowrap;
    flex-shrink: 0;
}
#panel-monitor .mon-alert-btn:hover {
    background: rgba(200, 168, 75, 0.12);
}

/* —— 全局 KPI 条 —— */
#panel-monitor .mon-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 12px 22px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
#panel-monitor .mon-kpi-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: border-color var(--duration-normal) ease, background var(--duration-normal) ease;
}
#panel-monitor .mon-kpi-card:hover {
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(255, 255, 255, 0.15);
}
#panel-monitor .mon-kpi-card.skeleton {
    min-height: 64px;
    animation: mon-skeleton-pulse 1.4s ease-in-out infinite;
}
@keyframes mon-skeleton-pulse {
    0%, 100% { opacity: 0.35; }
    50%       { opacity: 0.7; }
}
#panel-monitor .mon-kpi-icon {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-default);
    background: rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    color: rgba(245, 240, 232, 0.6);
}
#panel-monitor .mon-kpi-icon svg { width: 18px; height: 18px; }
#panel-monitor .mon-kpi-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#panel-monitor .mon-kpi-label { font-size: 11px; color: var(--ws-dark-text-dim); white-space: nowrap; }
#panel-monitor .mon-kpi-val {
    font-size: 20px; font-weight: 700; color: var(--c-white);
    font-variant-numeric: tabular-nums; line-height: 1.2;
}
#panel-monitor .mon-kpi-val.pos { color: #4ADE80; }
#panel-monitor .mon-kpi-val.neg { color: #F87171; }
#panel-monitor .mon-kpi-sub { font-size: 10px; color: var(--ws-dark-text-dim); }

/* —— 主体区：左侧栏 + 右侧详情 —— */
#panel-monitor .mon-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* —— 左侧账号栏 —— */
#panel-monitor .mon-sidebar {
    width: 260px; min-width: 260px;
    display: flex; flex-direction: column;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.02);
    transition: width var(--duration-normal) cubic-bezier(0.4,0,0.2,1),
                min-width var(--duration-normal) cubic-bezier(0.4,0,0.2,1);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
#panel-monitor .mon-sidebar.collapsed { width: 48px; min-width: 48px; }

#panel-monitor .mon-sidebar-toggle {
    position: absolute; top: 10px; right: 8px;
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    color: var(--ws-dark-text-dim);
    cursor: pointer; z-index: 2;
    transition: all var(--duration-normal) ease;
}
#panel-monitor .mon-sidebar-toggle svg { width: 14px; height: 14px; transition: transform var(--duration-normal) ease; }
#panel-monitor .mon-sidebar.collapsed .mon-sidebar-toggle { right: 12px; }
#panel-monitor .mon-sidebar.collapsed .mon-sidebar-toggle svg { transform: rotate(180deg); }
#panel-monitor .mon-sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(245, 240, 232, 0.85);
}

#panel-monitor .mon-sidebar-inner {
    flex: 1; overflow-y: auto; overflow-x: hidden;
    padding: 44px 0 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}

#panel-monitor .mon-tree-all {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px 8px 14px;
    cursor: pointer; border-left: 2px solid transparent;
    transition: background var(--duration-normal) ease;
    user-select: none;
}
#panel-monitor .mon-tree-all:hover { background: rgba(255, 255, 255, 0.05); }
#panel-monitor .mon-tree-all.selected {
    border-left-color: #C8A84B;
    background: rgba(200, 168, 75, 0.1);
}
#panel-monitor .mon-tree-item-icon { width: 16px; height: 16px; color: var(--ws-dark-text-dim); flex-shrink: 0; }
#panel-monitor .mon-tree-all.selected .mon-tree-item-icon { color: #C8A84B; }
#panel-monitor .mon-tree-all-label { font-size: 13px; font-weight: 500; color: var(--ws-dark-text-muted); white-space: nowrap; overflow: hidden; }
#panel-monitor .mon-tree-all.selected .mon-tree-all-label { color: #C8A84B; }

/* 收起时隐藏文字 */
#panel-monitor .mon-sidebar.collapsed .mon-tree-all-label,
#panel-monitor .mon-sidebar.collapsed .mon-platform-name,
#panel-monitor .mon-sidebar.collapsed .mon-platform-count,
#panel-monitor .mon-sidebar.collapsed .mon-platform-add-btn,
#panel-monitor .mon-sidebar.collapsed .mon-acct-list,
#panel-monitor .mon-sidebar.collapsed .mon-add-acct-label,
#panel-monitor .mon-sidebar.collapsed .mon-platform-chevron { display: none; }

#panel-monitor .mon-platform-list { display: flex; flex-direction: column; padding: 4px 0; }
#panel-monitor .mon-platform-block { display: flex; flex-direction: column; }

#panel-monitor .mon-platform-head {
    display: flex; align-items: center; gap: 7px;
    padding: 7px 12px 7px 14px;
    cursor: pointer; border-left: 2px solid transparent;
    transition: background var(--duration-normal) ease;
    user-select: none;
}
#panel-monitor .mon-platform-head:hover { background: rgba(255, 255, 255, 0.04); }
#panel-monitor .mon-platform-head.selected {
    border-left-color: var(--mon-pf-color, #C8A84B);
    background: color-mix(in srgb, var(--mon-pf-color, #C8A84B) 10%, transparent);
}
#panel-monitor .mon-platform-chevron {
    width: 12px; height: 12px; color: var(--ws-dark-text-dim);
    flex-shrink: 0; margin-left: auto;
    transition: transform var(--duration-normal) ease;
}
#panel-monitor .mon-platform-block.open .mon-platform-chevron { transform: rotate(90deg); }
#panel-monitor .mon-platform-icon { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
#panel-monitor .mon-platform-icon svg { width: 18px; height: 18px; }
#panel-monitor .mon-platform-name { font-size: 13px; font-weight: 600; color: var(--ws-dark-text); white-space: nowrap; overflow: hidden; flex: 1; min-width: 0; }
#panel-monitor .mon-platform-count { font-size: 11px; color: var(--ws-dark-text-dim); background: rgba(255, 255, 255, 0.07); border-radius: var(--radius-full); padding: 1px 7px; white-space: nowrap; flex-shrink: 0; }
#panel-monitor .mon-platform-add-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(245, 240, 232, 0.6);
    border-radius: var(--radius-sm); padding: 2px 8px; font-size: 10px; cursor: pointer;
    transition: all var(--duration-normal) ease; white-space: nowrap; flex-shrink: 0;
}
#panel-monitor .mon-platform-add-btn:hover { background: rgba(255, 255, 255, 0.08); }

#panel-monitor .mon-acct-list {
    display: flex; flex-direction: column; overflow: hidden;
    max-height: 0; transition: max-height 0.25s ease;
}
#panel-monitor .mon-platform-block.open .mon-acct-list { max-height: 600px; }
#panel-monitor .mon-acct-empty { font-size: 11px; color: var(--ws-dark-text-dim); padding: 5px 14px 5px 36px; }

#panel-monitor .mon-acct-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px 6px 36px;
    cursor: pointer; border-left: 2px solid transparent;
    transition: background var(--duration-normal) ease;
}
#panel-monitor .mon-acct-row:hover { background: rgba(255, 255, 255, 0.04); }
#panel-monitor .mon-acct-row.selected {
    border-left-color: #C8A84B;
    background: rgba(200, 168, 75, 0.1);
}
#panel-monitor .mon-acct-row.expired { opacity: 0.75; }

#panel-monitor .mon-acct-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: #4ADE80; }
#panel-monitor .mon-acct-dot.expired { background: #F87171; }
#panel-monitor .mon-acct-dot.expiring { background: #C8A84B; }

#panel-monitor .mon-acct-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
#panel-monitor .mon-acct-nick { font-size: 12px; font-weight: 500; color: var(--ws-dark-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
#panel-monitor .mon-acct-row.selected .mon-acct-nick { color: #C8A84B; }

#panel-monitor .mon-acct-reauth-inline {
    display: none; background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(245, 240, 232, 0.6); border-radius: var(--radius-sm);
    padding: 2px 8px; font-size: 10px; cursor: pointer;
    white-space: nowrap; flex-shrink: 0;
    transition: all var(--duration-normal) ease;
}
#panel-monitor .mon-acct-row.expired:hover .mon-acct-reauth-inline { display: block; }
#panel-monitor .mon-acct-reauth-inline:hover { background: rgba(255, 255, 255, 0.07); }

#panel-monitor .mon-sidebar-footer { padding: 10px 12px; border-top: 1px solid rgba(255, 255, 255, 0.07); flex-shrink: 0; }
#panel-monitor .mon-add-acct-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; padding: 8px 12px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(245, 240, 232, 0.6);
    border-radius: var(--radius-default); font-size: 12px; cursor: pointer;
    transition: all var(--duration-normal) ease;
}
#panel-monitor .mon-add-acct-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
#panel-monitor .mon-add-acct-btn:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.25); }
#panel-monitor .mon-sidebar.collapsed .mon-add-acct-btn { padding: 8px; justify-content: center; }

/* —— 右侧详情区 —— */
#panel-monitor .mon-detail { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

#panel-monitor .mon-detail-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 12px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07); flex-shrink: 0;
}
#panel-monitor .mon-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ws-dark-text-dim); }
#panel-monitor .mon-breadcrumb span:last-child { color: var(--ws-dark-text-muted); font-weight: 500; }
#panel-monitor .mon-bc-sep { opacity: 0.4; }
#panel-monitor .mon-range-btns {
    display: flex; border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-default); overflow: hidden; flex-shrink: 0;
}
#panel-monitor .mon-range-btn {
    background: transparent; border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    color: var(--ws-dark-text-dim); padding: 5px 14px; font-size: 12px; cursor: pointer;
    transition: all var(--duration-normal) ease;
}
#panel-monitor .mon-range-btn:last-child { border-right: none; }
#panel-monitor .mon-range-btn:hover { color: var(--ws-dark-text-muted); }
#panel-monitor .mon-range-btn.active { background: rgba(200, 168, 75, 0.14); color: #C8A84B; }

#panel-monitor .mon-detail-body {
    flex: 1; overflow-y: auto; padding: 16px 20px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
@keyframes mon-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
#panel-monitor .mon-detail-body.fade-in { animation: mon-fade-in 0.2s ease forwards; }

/* —— 图表卡片通用 —— */
#panel-monitor .mon-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg); padding: 16px 18px;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
#panel-monitor .mon-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
#panel-monitor .mon-card-title { font-size: 13px; font-weight: 600; color: var(--ws-dark-text-muted); flex: 1; }
#panel-monitor .mon-chart-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }
#panel-monitor .mon-legend-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ws-dark-text-muted); }
#panel-monitor .mon-legend-item i { display: inline-block; width: 20px; height: 3px; border-radius: 8px; }
#panel-monitor .mon-chart-canvas { width: 100%; display: block; }

#panel-monitor .mon-charts-row {
    display: grid; grid-template-columns: 1fr 240px;
    gap: 12px; margin-bottom: 14px; align-items: start;
}

/* 横向条形图（互动占比） */
#panel-monitor .mon-bar-list { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; }
#panel-monitor .mon-bar-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
#panel-monitor .mon-bar-label { font-size: 11px; color: var(--ws-dark-text-dim); }
#panel-monitor .mon-bar-value { font-size: 11px; font-weight: 600; color: var(--ws-dark-text-muted); font-variant-numeric: tabular-nums; }
#panel-monitor .mon-bar-track { height: 6px; background: rgba(255, 255, 255, 0.06); border-radius: 8px; overflow: hidden; }
#panel-monitor .mon-bar-fill { height: 100%; border-radius: 8px; transition: width 0.6s cubic-bezier(0.4,0,0.2,1); }

/* 账号对比卡片网格 */
#panel-monitor .mon-acct-cards {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px;
}
#panel-monitor .mon-acct-stat-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 2px solid var(--card-color, #C8A84B);
    border-radius: var(--radius-lg); padding: 12px 14px;
    cursor: pointer; transition: all 0.15s ease;
}
#panel-monitor .mon-acct-stat-card:hover {
    background: color-mix(in srgb, var(--card-color, rgba(200,168,75,1)) 8%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--card-color, #888) 20%, transparent);
}
#panel-monitor .mon-acct-stat-card.selected {
    background: color-mix(in srgb, var(--card-color, rgba(200,168,75,1)) 12%, transparent);
    border-color: var(--card-color, #C8A84B);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--card-color, #888) 35%, transparent);
}
#panel-monitor .mon-acct-stat-card.inactive { opacity: 0.5; }
#panel-monitor .mon-acct-stat-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
#panel-monitor .mon-acct-stat-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
#panel-monitor .mon-acct-stat-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
#panel-monitor .mon-acct-stat-nick { font-size: 12px; font-weight: 600; color: var(--ws-dark-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#panel-monitor .mon-acct-stat-pf { font-size: 10px; color: var(--ws-dark-text-dim); }
#panel-monitor .mon-stat-expired-tag {
    font-size: 9px; padding: 1px 6px; border-radius: var(--radius-full);
    background: color-mix(in srgb, #F87171 14%, transparent); color: #F87171; flex-shrink: 0;
}
#panel-monitor .mon-acct-stat-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 4px; }
#panel-monitor .mon-acct-stat-item { display: flex; flex-direction: column; gap: 1px; }
#panel-monitor .mon-acct-stat-val { font-size: 14px; font-weight: 700; color: var(--ws-dark-text); font-variant-numeric: tabular-nums; }
#panel-monitor .mon-acct-stat-val.pos { color: #4ADE80; }
#panel-monitor .mon-acct-stat-val.neg { color: #F87171; }
#panel-monitor .mon-acct-stat-lbl { font-size: 10px; color: var(--ws-dark-text-dim); white-space: nowrap; }

/* 账号管理操作条（选中账号时显示在详情区顶部） */
#panel-monitor .mon-acct-manage-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-default); margin-bottom: 14px;
}
#panel-monitor .mon-acct-manage-info { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
#panel-monitor .mon-acct-manage-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
#panel-monitor .mon-acct-manage-name { font-size: 13px; font-weight: 600; color: var(--ws-dark-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#panel-monitor .mon-acct-manage-meta { font-size: 11px; color: var(--ws-dark-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#panel-monitor .mon-acct-tag { font-size: 10px; padding: 2px 8px; border-radius: var(--radius-full); flex-shrink: 0; }
#panel-monitor .mon-acct-tag.active { background: color-mix(in srgb, #4ADE80 14%, transparent); color: #4ADE80; }
#panel-monitor .mon-acct-tag.expired { background: color-mix(in srgb, #F87171 14%, transparent); color: #F87171; }
#panel-monitor .mon-acct-unbind,
#panel-monitor .mon-acct-reauth {
    background: transparent; border: 1px solid var(--ws-dark-border);
    color: var(--ws-dark-text-muted); border-radius: var(--radius-sm);
    padding: 4px 12px; font-size: 11px; cursor: pointer;
    transition: all var(--duration-normal) ease; white-space: nowrap; flex-shrink: 0;
}
#panel-monitor .mon-acct-unbind:hover { border-color: color-mix(in srgb, #F87171 60%, transparent); color: #F87171; }
#panel-monitor .mon-acct-reauth { border-color: rgba(255, 255, 255, 0.15); color: rgba(245, 240, 232, 0.6); }
#panel-monitor .mon-acct-reauth:hover { background: rgba(255, 255, 255, 0.07); }

/* 响应式 */
@media (max-width: 768px) {
    #panel-monitor .mon-sidebar { width: 48px; min-width: 48px; }
    #panel-monitor .mon-kpi-row { grid-template-columns: repeat(2, 1fr); }
    #panel-monitor .mon-charts-row { grid-template-columns: 1fr; }
}
@media (min-width: 1440px) {
    #panel-monitor .mon-acct-cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

/* —— 保留：绑定弹窗样式（未修改） —— */
#panel-monitor .mon-add-btn {
    background: rgba(200, 168, 75, 0.1);
    border: 1px solid rgba(200, 168, 75, 0.35);
    color: #C8A84B;
    border-radius: var(--radius-default);
    padding: 7px 18px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-normal) ease;
}
#panel-monitor .mon-add-btn:hover {
    background: rgba(200, 168, 75, 0.18);
}

#panel-monitor .mon-platform-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
#panel-monitor .mon-platform-block {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 2px solid var(--mon-pf-color, #C8A84B);
    border-radius: var(--radius-lg);
    padding: 12px 14px;
}
#panel-monitor .mon-platform-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
#panel-monitor .mon-platform-icon { font-size: 16px; }
#panel-monitor .mon-platform-name { font-size: 13px; font-weight: 600; color: var(--ws-dark-text); }
#panel-monitor .mon-platform-count { font-size: 11px; color: var(--ws-dark-text-dim); margin-left: 2px; }
#panel-monitor .mon-platform-add-btn {
    margin-left: auto;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(245, 240, 232, 0.6);
    border-radius: var(--radius-sm);
    padding: 3px 12px;
    font-size: 11px;
    cursor: pointer;
    transition: all var(--duration-normal) ease;
}
#panel-monitor .mon-platform-add-btn:hover {
    background: rgba(255, 255, 255, 0.07);
}

#panel-monitor .mon-acct-list { display: flex; flex-direction: column; gap: 6px; }
#panel-monitor .mon-acct-empty {
    font-size: 12px;
    color: var(--ws-dark-text-dim);
    padding: 4px 8px;
}
#panel-monitor .mon-acct-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-default);
    padding: 8px 12px;
}
#panel-monitor .mon-acct-row.expired { opacity: 0.7; }
#panel-monitor .mon-acct-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--ws-dark-input-bg);
}
#panel-monitor .mon-acct-info {
    display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0;
}
#panel-monitor .mon-acct-nick {
    font-size: 13px; font-weight: 500;
    color: var(--ws-dark-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#panel-monitor .mon-acct-meta {
    font-size: 11px;
    color: var(--ws-dark-text-dim);
}
#panel-monitor .mon-acct-status {
    display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0;
}
#panel-monitor .mon-acct-tag {
    font-size: 10px; padding: 2px 8px; border-radius: var(--radius-full);
}
#panel-monitor .mon-acct-tag.active {
    background: color-mix(in srgb, var(--c-success-light) 14%, transparent);
    color: var(--c-positive);
}
#panel-monitor .mon-acct-tag.expired {
    background: color-mix(in srgb, var(--c-error-soft) 14%, transparent);
    color: var(--ws-error);
}
#panel-monitor .mon-acct-expire {
    font-size: 10px;
    color: var(--ws-dark-text-dim);
}
#panel-monitor .mon-acct-actions {
    display: flex; gap: 6px; flex-shrink: 0;
}
#panel-monitor .mon-acct-unbind,
#panel-monitor .mon-acct-reauth {
    background: transparent;
    border: 1px solid var(--ws-dark-border);
    color: var(--ws-dark-text-muted);
    border-radius: var(--radius-sm);
    padding: 3px 10px;
    font-size: 11px;
    cursor: pointer;
    transition: all var(--duration-normal) ease;
}
#panel-monitor .mon-acct-unbind:hover {
    border-color: color-mix(in srgb, var(--c-error-soft) 60%, transparent);
    color: var(--ws-error);
}
#panel-monitor .mon-acct-reauth {
    border-color: color-mix(in srgb, var(--c-gold-light) 40%, transparent);
    color: var(--c-gold-light);
}
#panel-monitor .mon-acct-reauth:hover {
    background: color-mix(in srgb, var(--c-gold-light) 12%, transparent);
}

/* —— 数据监控 Tab —— */
#panel-monitor .mon-stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}
#panel-monitor .mon-stat-card {
    background: var(--ws-dark-surface);
    border: 1px solid var(--ws-dark-border);
    border-top: 3px solid var(--card-color, var(--c-gold-light));
    border-radius: var(--radius-lg);
    padding: 14px 16px;
}
#panel-monitor .mon-stat-card.inactive { opacity: 0.55; }
#panel-monitor .mon-stat-card-top {
    display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
#panel-monitor .mon-stat-avatar {
    width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
#panel-monitor .mon-stat-card-info {
    display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1;
}
#panel-monitor .mon-stat-nick {
    font-size: 13px; font-weight: 600;
    color: var(--ws-dark-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#panel-monitor .mon-stat-platform {
    font-size: 11px; color: var(--ws-dark-text-dim);
}
#panel-monitor .mon-stat-expired-tag {
    font-size: 10px; padding: 2px 7px; border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--c-error-soft) 14%, transparent);
    color: var(--ws-error); flex-shrink: 0;
}
#panel-monitor .mon-stat-nums {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
}
#panel-monitor .mon-stat-num-item {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
}
#panel-monitor .mon-stat-num-val {
    font-size: 16px; font-weight: 700;
    color: var(--ws-dark-text);
}
#panel-monitor .mon-stat-num-val.pos { color: var(--c-positive); }
#panel-monitor .mon-stat-num-val.neg { color: var(--ws-error); }
#panel-monitor .mon-stat-num-label {
    font-size: 10px; color: var(--ws-dark-text-dim);
    white-space: nowrap;
}

/* —— 折线图 —— */
#panel-monitor .mon-chart-wrap {
    background: var(--ws-dark-surface);
    border: 1px solid var(--ws-dark-border);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    margin-bottom: 24px;
}
#panel-monitor .mon-chart-head {
    display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
#panel-monitor .mon-chart-title {
    font-size: 13px; font-weight: 600;
    color: var(--ws-dark-text-muted);
}
#panel-monitor .mon-chart-legend {
    display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto;
}
#panel-monitor .mon-legend-item {
    display: flex; align-items: center; gap: 5px;
    font-size: 11px; color: var(--ws-dark-text-muted);
}
#panel-monitor .mon-legend-item i {
    display: inline-block; width: 20px; height: 3px; border-radius: 8px;
}
#panel-monitor .mon-chart-canvas {
    width: 100%; height: 220px; display: block;
}

/* —— 内容表现 —— */
#panel-monitor .mon-perf-wrap {
    background: var(--ws-dark-surface);
    border: 1px solid var(--ws-dark-border);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
}
#panel-monitor .mon-perf-head {
    display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap;
}
#panel-monitor .mon-perf-title {
    font-size: 13px; font-weight: 600;
    color: var(--ws-dark-text-muted);
}
#panel-monitor .mon-perf-filters {
    display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto;
}
#panel-monitor .mon-perf-filter {
    background: transparent;
    border: 1px solid var(--ws-dark-border);
    color: var(--ws-dark-text-muted);
    border-radius: var(--radius-full);
    padding: 3px 12px; font-size: 11px; cursor: pointer;
    transition: all var(--duration-normal) ease;
}
#panel-monitor .mon-perf-filter:hover {
    border-color: var(--ws-dark-border);
    color: var(--ws-dark-text-muted);
}
#panel-monitor .mon-perf-filter.active {
    background: color-mix(in srgb, var(--chip-color, var(--c-gold-light)) 14%, transparent);
    border-color: color-mix(in srgb, var(--chip-color, var(--c-gold-light)) 50%, transparent);
    color: var(--chip-color, var(--c-gold-light));
}
#panel-monitor .mon-perf-table-wrap { overflow-x: auto; }
#panel-monitor .mon-perf-table {
    width: 100%; border-collapse: collapse; font-size: 12px;
}
#panel-monitor .mon-perf-table th {
    text-align: left; padding: 6px 10px;
    color: var(--ws-dark-text-dim);
    border-bottom: 1px solid var(--ws-dark-border);
    font-weight: 500; white-space: nowrap;
}
#panel-monitor .mon-perf-table td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--ws-dark-border);
    color: var(--ws-dark-text-muted);
    vertical-align: middle;
}
#panel-monitor .mon-perf-table tr:last-child td { border-bottom: none; }
#panel-monitor .mon-perf-title-cell {
    max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--ws-dark-text);
}
#panel-monitor .mon-perf-platform {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11px; padding: 2px 8px; border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--chip-color, #888) 14%, transparent);
    color: var(--chip-color, #888);
}
#panel-monitor .mon-perf-time { font-size: 11px; white-space: nowrap; }
#panel-monitor .mon-perf-num { text-align: right; font-variant-numeric: tabular-nums; }

/* —— 绑定弹窗 —— */
#panel-monitor .mon-modal-overlay {
    position: absolute; inset: 0;
    background: var(--c-overlay);
    display: flex; align-items: center; justify-content: center;
    z-index: 100;
    border-radius: var(--radius-xl);
}
#panel-monitor .mon-modal {
    background: var(--ws-dark-surface);
    border: 1px solid var(--ws-dark-border);
    border-radius: var(--radius-xl);
    width: 420px; max-width: 92%;
    box-shadow: 0 20px 60px var(--c-overlay-light);
}
#panel-monitor .mon-modal-head {
    display: flex; align-items: center;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--ws-dark-border);
}
#panel-monitor .mon-modal-title {
    font-size: 15px; font-weight: 600;
    color: var(--ws-dark-text);
}
#panel-monitor .mon-modal-close {
    margin-left: auto; background: transparent; border: none;
    color: var(--ws-dark-text-dim);
    font-size: 14px; cursor: pointer; padding: 4px 6px;
    border-radius: var(--radius-sm);
    transition: all var(--duration-normal) ease;
}
#panel-monitor .mon-modal-close:hover { color: var(--ws-dark-text-muted); }
#panel-monitor .mon-modal-body { padding: 20px 22px; min-height: 140px; }
#panel-monitor .mon-bind-label {
    font-size: 12px; color: var(--ws-dark-text-dim);
    margin: 0 0 12px;
}
#panel-monitor .mon-platform-chips {
    display: flex; flex-wrap: wrap; gap: 10px;
}
#panel-monitor .mon-platform-chip {
    display: flex; align-items: center; gap: 6px;
    background: var(--ws-dark-surface);
    border: 1.5px solid var(--ws-dark-border);
    color: var(--ws-dark-text-muted);
    border-radius: var(--radius-default);
    padding: 8px 18px; font-size: 13px; cursor: pointer;
    transition: all var(--duration-normal) ease;
}
#panel-monitor .mon-platform-chip:hover {
    border-color: color-mix(in srgb, var(--chip-color, var(--c-gold-light)) 50%, transparent);
}
#panel-monitor .mon-platform-chip.selected {
    background: color-mix(in srgb, var(--chip-color, var(--c-gold-light)) 14%, transparent);
    border-color: var(--chip-color, var(--c-gold-light));
    color: var(--chip-color, var(--c-gold-light));
}
#panel-monitor .mon-bind-form { display: flex; flex-direction: column; gap: 12px; }
#panel-monitor .mon-bind-row {
    display: flex; flex-direction: column; gap: 5px;
}
#panel-monitor .mon-bind-field-label {
    font-size: 11px; color: var(--ws-dark-text-dim);
}
#panel-monitor .mon-bind-input {
    background: var(--ws-dark-surface);
    border: 1px solid var(--ws-dark-border);
    color: var(--ws-dark-text);
    border-radius: var(--radius-default);
    padding: 8px 12px; font-size: 13px;
    transition: border-color var(--duration-normal) ease;
}
#panel-monitor .mon-bind-input:focus {
    outline: none;
    border-color: var(--ws-dark-input-focus);
}
#panel-monitor .mon-bind-oauth-hint {
    display: flex; align-items: center; gap: 8px;
    margin-top: 14px; padding: 10px 14px;
    background: color-mix(in srgb, var(--c-info, #4a9eff) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-info, #4a9eff) 20%, transparent);
    border-radius: var(--radius-default);
    font-size: 12px; color: var(--ws-dark-text-muted);
}
#panel-monitor .mon-bind-step-done {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 10px; padding: 20px 0;
}
#panel-monitor .mon-bind-done-icon { font-size: 36px; }
#panel-monitor .mon-bind-done-text {
    font-size: 15px; font-weight: 600;
    color: var(--ws-dark-text);
}
#panel-monitor .mon-modal-foot {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    padding: 14px 22px 18px;
    border-top: 1px solid var(--ws-dark-border);
}
#panel-monitor .mon-modal-btn-ghost {
    background: transparent;
    border: 1px solid var(--ws-dark-border);
    color: var(--ws-dark-text-muted);
    border-radius: var(--radius-default);
    padding: 8px 18px; font-size: 13px; cursor: pointer;
    transition: all var(--duration-normal) ease;
}
#panel-monitor .mon-modal-btn-ghost:hover {
    border-color: var(--ws-dark-border);
    color: var(--ws-dark-text);
}
#panel-monitor .mon-modal-btn-primary {
    background: linear-gradient(135deg, var(--c-gold-light), var(--c-gold-warm, #f0a020));
    border: none; color: var(--ws-dark-text);
    border-radius: var(--radius-default);
    padding: 8px 22px; font-size: 13px; font-weight: 600; cursor: pointer;
    transition: all var(--duration-normal) ease;
}
#panel-monitor .mon-modal-btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--c-gold-light) 40%, transparent);
}
#panel-monitor .mon-modal-btn-primary:disabled {
    opacity: 0.5; cursor: not-allowed;
}

/* —— 绑定弹窗：扫码等待步骤 —— */
#panel-monitor .mon-bind-waiting {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 8px 0;
}
#panel-monitor .mon-bind-qr-mock {
    width: 140px; height: 140px;
    background: var(--ws-dark-surface);
    border-radius: var(--radius-lg);
    display: flex; align-items: center; justify-content: center;
    padding: 10px;
    box-shadow: 0 4px 20px var(--c-overlay-light);
}
#panel-monitor .mon-bind-qr-inner {
    position: relative;
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
}
#panel-monitor .mon-bind-qr-grid {
    width: 100%; height: 100%;
    background-image:
        repeating-linear-gradient(0deg,   #e0e0e0 0, #e0e0e0 1px, transparent 1px, transparent 8px),
        repeating-linear-gradient(90deg,  #e0e0e0 0, #e0e0e0 1px, transparent 1px, transparent 8px);
    border-radius: 4px;
    opacity: 0.5;
}
#panel-monitor .mon-bind-qr-icon {
    position: absolute;
    font-size: 32px;
    filter: drop-shadow(0 1px 3px rgba(15,23,42,0.05));
}
#panel-monitor .mon-bind-waiting-tip {
    font-size: 13px;
    color: var(--ws-dark-text);
    margin: 0; text-align: center;
}
#panel-monitor .mon-bind-waiting-sub {
    font-size: 11px;
    color: var(--ws-dark-text-dim);
    margin: 0; text-align: center;
}
#panel-monitor .mon-bind-progress {
    width: 100%;
    height: 3px;
    background: var(--ws-dark-surface-2);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 4px;
}
#panel-monitor .mon-bind-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #C8A84B, #A8861C);
    border-radius: 8px;
}

/* —— 绑定成功补充 —— */
#panel-monitor .mon-bind-done-sub {
    font-size: 12px;
    color: var(--ws-dark-text-dim);
    margin-top: -4px;
}