/* ============================================================================
 * Mira 觅画 · 视觉收尾 polish v1
 *
 * 涵盖：
 *   D. 4 个生成 tab "未开始" 空状态
 *   E. Pro tab 段卡片
 *   F. 中文衬线字体层级
 *   G. 全局 hover/focus/active 动效一致
 *   H. ≤960px 响应式
 *
 * 必须在所有 tokens / buttons / icons 之后加载（覆盖优先级最高）。
 * ============================================================================ */

/* ----------------------------------------------------------------------------
 * D. 创作/广告/宠物 panel-right "未开始" 空状态
 *    现 panel-right 在没生成内容时是空白 — 给个引导
 * ---------------------------------------------------------------------------- */

.panel-right .empty-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    color: var(--text-muted);
    text-align: center;
    min-height: 320px;
    gap: var(--space-4);
}
.panel-right .empty-stage .ico {
    width: 64px;
    height: 64px;
    color: var(--paper-300);
}
.panel-right .empty-stage .empty-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--text-secondary);
    letter-spacing: 0.06em;
    font-weight: 500;
}
.panel-right .empty-stage .empty-hint {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    max-width: 360px;
    color: var(--text-muted);
}
.panel-right .empty-stage .empty-steps {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--text-disabled);
}
.panel-right .empty-stage .empty-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--paper-200);
    color: var(--text-muted);
    font-weight: 600;
}

/* gallery / asset / kb 老 empty 已有，再覆盖一层让图标颜色变得朱砂淡 */
.gallery-empty,
.asset-empty,
.kb-empty {
    font-family: var(--font-display);
    letter-spacing: 0.05em;
}
.gallery-empty::before,
.asset-empty::before,
.kb-empty::before {
    background: var(--paper-300) !important;
}

/* ----------------------------------------------------------------------------
 * E. Pro tab 段卡片
 * ---------------------------------------------------------------------------- */

/* Pro 段卡 容器 */
[id^="proSegment_"],
.pro-seg-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--motion-base) var(--ease-out);
}
[id^="proSegment_"]:hover,
.pro-seg-card:hover {
    box-shadow: var(--shadow-sm);
}

/* Pro 卡内 按钮排 */
.pro-seg-card .pro-seg-toolbar,
[id^="proSegment_"] .pro-seg-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px dashed var(--border-subtle);
}

/* Pro "试看" video 缩略 */
.pro-preview-thumb,
[id^="proPreview_"] {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--ink-900);
    border-radius: var(--radius-md);
    overflow: hidden;
    object-fit: cover;
}

/* Pro 状态徽标 */
.pro-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: var(--text-xs);
    font-family: var(--font-display);
    border-radius: var(--radius-pill);
    border: 1px solid;
}
.pro-status-pending { color: var(--text-muted); border-color: var(--border-default); background: var(--surface-sunken); }
.pro-status-running { color: var(--accent-base); border-color: var(--accent-line); background: var(--accent-soft); }
.pro-status-ok      { color: var(--gold-700); border-color: var(--gold-100); background: var(--gold-50); }
.pro-status-failed  { color: var(--seal-700); border-color: var(--seal-100); background: var(--seal-50); }

/* ----------------------------------------------------------------------------
 * F. 中文衬线字体层级（思源宋体 + Source Serif 4 数字）
 *    为 h1~h4 + body 设统一字距 / 行高
 * ---------------------------------------------------------------------------- */

h1, .ad-h1, .panel-title, .gallery-header h2, .asset-header h2, .kb-header h2 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: var(--leading-tight);
}
h2, h3 {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: var(--leading-tight);
}
h4 {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: 0.03em;
}
body {
    font-family: var(--font-body);
    font-size: var(--text-md);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
/* 数字 + 货币 + 计费用 mono 衬线（古铜金色） */
code, .mono, .ad-mono,
.credit-amount, .price-tag, .cost-display, .metric-value,
.gallery-card-credits, .gallery-count, .asset-count, .kb-count,
.video-status, .step-time {
    font-family: var(--font-mono);
    font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ----------------------------------------------------------------------------
 * G. 全局 hover / focus / active 一致
 *    - 所有可交互元素：keyboard focus 显示朱砂 ring
 *    - cursor 类型一致
 * ---------------------------------------------------------------------------- */

:focus-visible {
    outline: none;
    box-shadow: var(--shadow-ring);
    border-radius: var(--radius-sm);
}

button:not(:disabled),
a,
.nav-btn,
.gallery-card,
.asset-card,
.kb-card,
[onclick],
[role="button"] {
    cursor: pointer;
}

button:disabled,
.btn:disabled {
    cursor: not-allowed;
}

/* select 加自定义箭头 */
select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b5d4f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 14px;
    padding-right: calc(var(--space-3) * 2 + 14px);
}

/* 链接全局 */
a {
    color: var(--accent-base);
    text-decoration: none;
    transition: color var(--motion-fast) var(--ease-out);
}
a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
    text-decoration-color: var(--accent-line);
    text-underline-offset: 3px;
}

/* ----------------------------------------------------------------------------
 * H. 响应式 ≤960px
 *    panel-left 收缩到 100% + nav 横向滚动
 * ---------------------------------------------------------------------------- */

@media (max-width: 960px) {
    .header {
        padding: var(--space-3) var(--space-4);
        flex-direction: column;
        gap: var(--space-2);
        align-items: stretch;
    }
    .header-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        gap: var(--space-2);
    }
    .header-nav::-webkit-scrollbar { display: none; }
    .nav-btn {
        flex-shrink: 0;
    }
    .panel-left {
        width: 100% !important;
        min-width: 0 !important;
        max-height: 50vh;
        border-right: none !important;
        border-bottom: 1px solid var(--border-subtle);
    }
    .main {
        flex-direction: column;
    }
    .gallery-grid,
    .asset-grid,
    .kb-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: var(--space-3);
    }
    .video-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

@media (max-width: 480px) {
    .gallery-grid,
    .asset-grid,
    .video-grid {
        grid-template-columns: 1fr 1fr;
    }
    .step-progress {
        padding: var(--space-2);
    }
    .step .step-label {
        font-size: 10px;
    }
}

/* ----------------------------------------------------------------------------
 * panel-left / panel-right 强制 light — 覆盖 redesign-evolution 的 dark 半透明
 * (那里用了 rgba(15,15,22,.55) !important，叠在桑皮纸上呈冷灰)
 * ---------------------------------------------------------------------------- */
.panel-left {
    background: var(--surface-card) !important;
    border: 1px solid var(--border-subtle) !important;
    border-left: 3px solid var(--accent-base) !important;
    border-radius: 2px !important;
    box-shadow: var(--shadow-xs) !important;
}
.panel-right {
    background: var(--surface-base) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 2px !important;
    /* 桑皮纸米点纹 */
    background-image: radial-gradient(circle at 1px 1px, rgba(80,60,40,.04) 1px, transparent 0) !important;
    background-size: 24px 24px;
}
.panel-body {
    background: transparent !important;
}

/* ----------------------------------------------------------------------------
 * Pro tab 卡片 + 视频参数分组 — 去灰底
 *
 * 之前 .pro-card 用 bg-secondary = paper-100 米黄；
 * .setting-item 也是块灰白 — 视觉太"卡"，整体显灰
 *
 * 改成：白底 + hairline 桑皮纸边 + 古铜金标题点缀，去除背景色块
 * ---------------------------------------------------------------------------- */

/* Pro 卡片 — 去掉 bg-secondary 米黄底，改成 hairline 卡 */
.pro-card {
    background: var(--surface-card) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-md) !important;
    padding: var(--space-4) var(--space-5) !important;
    margin-bottom: var(--space-3) !important;
    box-shadow: var(--shadow-xs) !important;
    transition: box-shadow var(--motion-base) var(--ease-out);
}
.pro-card:hover {
    box-shadow: var(--shadow-sm) !important;
}

/* Pro 卡标题 — 朱砂下划线点缀 */
.pro-card-title {
    font-family: var(--font-display) !important;
    font-size: var(--text-md) !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    letter-spacing: 0.06em !important;
    margin-bottom: var(--space-3) !important;
    padding-bottom: var(--space-2) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    background: transparent !important;
    border-radius: 0 !important;
    position: relative;
}
.pro-card-title::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 24px;
    height: 1px;
    background: var(--accent-base);
}

/* Pro row — 横排表单行 */
.pro-row {
    align-items: center !important;
    gap: var(--space-3) !important;
    margin-bottom: var(--space-3) !important;
}
.pro-row label {
    color: var(--text-secondary) !important;
    font-family: var(--font-display) !important;
    letter-spacing: 0.04em !important;
    min-width: 72px !important;
}
.pro-row select,
.pro-row input[type="text"],
.pro-row input[type="number"] {
    flex: 1;
    padding: var(--space-2) var(--space-3) !important;
    border: 1px solid var(--input-border) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--input-bg) !important;
    color: var(--input-fg) !important;
    font-size: var(--text-sm) !important;
    font-family: var(--font-body);
}
.pro-row select:focus,
.pro-row input:focus {
    outline: none;
    border-color: var(--input-border-focus) !important;
    box-shadow: var(--shadow-ring);
}

/* 视频参数 (.setting-item / .settings-grid) — 去掉每个项的卡背景 */
.settings-grid {
    gap: var(--space-3) !important;
}
.setting-item {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    border-bottom: 1px dashed var(--border-subtle);
    padding-bottom: var(--space-2) !important;
}
.setting-item label {
    font-family: var(--font-display) !important;
    color: var(--text-secondary) !important;
    font-size: var(--text-xs) !important;
    letter-spacing: 0.06em !important;
    margin-bottom: var(--space-1) !important;
}
.setting-item select,
.setting-item input {
    background: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--input-fg) !important;
    font-family: var(--font-body) !important;
    padding: 6px 10px !important;
}
.setting-item select:focus,
.setting-item input:focus {
    outline: none;
    border-color: var(--input-border-focus) !important;
    box-shadow: var(--shadow-ring);
}

/* details 容器 (视频参数折叠) — 覆盖 redesign-evolution 的 dark 半透明背景 */
details.input-group {
    background: var(--surface-card) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-md) !important;
    padding: var(--space-3) var(--space-4) !important;
    transition: border-color var(--motion-fast) var(--ease-out),
                box-shadow var(--motion-fast) var(--ease-out);
}
details.input-group[open] {
    border-color: var(--accent-line) !important;
    box-shadow: var(--shadow-xs);
}
details.input-group > summary {
    color: var(--text-secondary) !important;
    font-family: var(--font-display) !important;
    letter-spacing: 0.06em !important;
    padding: var(--space-2) 0 !important;
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    transition: color var(--motion-fast) var(--ease-out);
}
details.input-group > summary::-webkit-details-marker { display: none; }
details.input-group > summary::after {
    content: "▾";
    margin-left: auto;
    color: var(--text-disabled);
    font-size: 10px;
    transition: transform var(--motion-fast) var(--ease-out);
}
details.input-group[open] > summary::after {
    transform: rotate(180deg);
}
details.input-group > summary:hover {
    color: var(--accent-base) !important;
}
details.input-group > summary .ico {
    color: var(--accent-base);
    width: 14px;
    height: 14px;
}

/* Pro segments progress — 列表样视觉 */
.pro-segs-progress {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-3);
}

/* model hint (短剧 + Pro 共享) */
.pro-model-hint {
    font-size: var(--text-xs) !important;
    color: var(--text-muted) !important;
    line-height: var(--leading-normal);
    padding: var(--space-2) var(--space-3);
    background: var(--paper-50);
    border-left: 2px solid var(--gold-300);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin-top: var(--space-2);
}
.pro-model-hint:empty { display: none; }

/* ----------------------------------------------------------------------------
 * Pro 重构 v2 — 顶部 sticky toolbar + 单列段卡 + chip 风 refs
 * ---------------------------------------------------------------------------- */

/* pro-grid 改单列 — 删 .pro-grid 即可，HTML 已无 .pro-grid 包装 */
.pro-view {
    padding: var(--space-5) var(--space-6) !important;
}

/* 顶部 sticky 工具栏 */
.pro-toolbar {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
}
.pro-toolbar-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.pro-toolbar-title {
    flex: 1;
    min-width: 200px;
    padding: var(--space-2) var(--space-3) !important;
    border: 1px solid var(--input-border) !important;
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    color: var(--input-fg);
    font-size: var(--text-md);
    font-family: var(--font-display);
    letter-spacing: 0.04em;
}
.pro-toolbar-title:focus {
    outline: none;
    border-color: var(--input-border-focus) !important;
    box-shadow: var(--shadow-ring);
}
.pro-toolbar-controls {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.pro-toolbar-field {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-family: var(--font-display);
    letter-spacing: 0.06em;
}
.pro-toolbar-field span {
    flex-shrink: 0;
}
.pro-toolbar-field select {
    padding: 4px var(--space-3) !important;
    height: 28px;
    border: 1px solid var(--input-border) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--input-bg) !important;
    color: var(--input-fg) !important;
    font-size: var(--text-sm) !important;
    font-family: var(--font-body) !important;
    min-width: 90px;
}
.pro-toolbar-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px var(--space-2);
    border-radius: var(--radius-sm);
    transition: background var(--motion-fast) var(--ease-out);
}
.pro-toolbar-toggle:hover {
    background: var(--surface-raised);
}
.pro-toolbar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

/* ─────────────────────────────────────────────────────────────────────
 * Pro 模块 v3 — 分镜板 Grid + 右滑编辑 drawer
 * ───────────────────────────────────────────────────────────────────── */

.pro-segments-area {
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Grid：宽屏 4 列，1024-1440px 3 列，768-1024 2 列，<768 1 列 */
.pro-storyboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-3);
}

/* 段卡本体：紧凑分镜卡，固定宽高比，hover 朱砂硬阴影 */
.pro-seg-card {
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
    aspect-ratio: 4 / 5;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    cursor: pointer;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    transition: all var(--motion-fast) var(--ease-out);
    position: relative;
}
.pro-seg-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 var(--accent-line);
    border-color: var(--accent-base);
}

/* 段卡顶部缩略图区（16:9）— 4 状态：成片/生成中/失败/空 */
.pro-seg-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--surface-sunken, #f6efe6);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}
.pro-seg-thumb video,
.pro-seg-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pro-seg-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--text-muted);
    font-family: var(--font-display);
    font-size: 48px;
    font-weight: 600;
    background:
        repeating-linear-gradient(45deg,
            transparent, transparent 8px,
            rgba(199, 50, 26, 0.04) 8px,
            rgba(199, 50, 26, 0.04) 9px);
}
.pro-seg-thumb-running {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--accent-base);
    gap: 8px;
}
.pro-seg-thumb-running .spinner-mini {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(199, 50, 26, 0.2);
    border-top-color: var(--accent-base);
    border-radius: 50%;
    animation: btn-spin .9s linear infinite;
}
.pro-seg-thumb-failed {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--seal-700, #c7321a);
    gap: 6px;
    padding: 12px;
    text-align: center;
    font-size: 13px;
}
.pro-seg-thumb-failed .ico {
    width: 28px;
    height: 28px;
}

/* 卡片缩略图右上角播放图标（仅成片显示） */
.pro-seg-thumb-play {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

/* 卡片缩略图左上角"段 N"圆形徽章 */
.pro-seg-num-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 14px;
    background: var(--accent-base, #c7321a);
    color: white;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.04em;
    box-shadow: 1px 1px 0 var(--accent-line, rgba(199, 50, 26, 0.4));
}
.pro-seg-thumb .pro-seg-num-badge {
    position: absolute;
    top: 8px;
    left: 8px;
}

/* 卡片下半区：prompt 摘要 + meta */
.pro-seg-body {
    flex: 1;
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}
.pro-seg-body-prompt {
    flex: 1;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-primary);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    word-break: break-word;
}
.pro-seg-body-prompt-empty {
    color: var(--text-muted);
    font-style: italic;
}
.pro-seg-body-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}
.pro-seg-body-meta .pro-seg-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* 卡片底部 footer 操作行：编辑 / 删除 — 始终显示，hover 高亮 */
.pro-seg-footer {
    display: flex;
    gap: 6px;
    padding: 8px 10px;
    border-top: 1px solid var(--border-subtle);
    background: var(--surface-sunken, #fafafa);
}
.pro-seg-footer .btn-card-action {
    flex: 1;
    padding: 6px 10px;
    font-size: 12px;
    border: 1px solid var(--border-subtle);
    background: var(--surface-card);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all var(--motion-fast) var(--ease-out);
}
.pro-seg-footer .btn-card-action:hover {
    color: var(--accent-base);
    border-color: var(--accent-base);
    background: var(--accent-soft);
}
.pro-seg-footer .btn-card-action.btn-card-danger:hover {
    color: var(--seal-700);
    border-color: var(--seal-700);
    background: rgba(199, 50, 26, 0.08);
}
.pro-seg-footer .btn-card-action .ico {
    width: 12px;
    height: 12px;
}

/* "添加" 按钮行：grid 模式下单独一行居中 */
.pro-add-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
    justify-content: center;
}
.pro-add-row .btn {
    flex: 0 1 200px;
    min-width: 160px;
}

/* Pro 顶部 toolbar：撑满 + 内容居中 */
.pro-toolbar {
    max-width: none;
    margin: 0 0 var(--space-4) !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * Pro 段编辑右滑 drawer
 * ───────────────────────────────────────────────────────────────────── */

.pro-seg-drawer {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 1000);
    pointer-events: none;
    visibility: hidden;
}
.pro-seg-drawer.open {
    pointer-events: auto;
    visibility: visible;
}
.pro-seg-drawer-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity var(--motion-base) var(--ease-out);
}
.pro-seg-drawer.open .pro-seg-drawer-overlay {
    opacity: 1;
}
.pro-seg-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 540px;
    max-width: 92vw;
    height: 100%;
    background: var(--surface-card, #fdfaf3);
    border-left: 1px solid var(--accent-line);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18);
    transform: translateX(100%);
    transition: transform var(--motion-base) var(--ease-out);
    display: flex;
    flex-direction: column;
}
.pro-seg-drawer.open .pro-seg-drawer-panel {
    transform: translateX(0);
}
.pro-seg-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
}
.pro-seg-drawer-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}
.pro-seg-drawer-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--motion-fast) var(--ease-out);
}
.pro-seg-drawer-close:hover {
    color: var(--accent-base);
    border-color: var(--accent-base);
}
.pro-seg-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
/* drawer 内部 textarea / refs / preview 都自然全宽，不再 max-width 限制 */
.pro-seg-drawer-body textarea {
    width: 100%;
    min-height: 120px;
    padding: 10px;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    color: var(--input-fg);
    font-size: 14px;
    line-height: 1.55;
    resize: vertical;
    font-family: inherit;
}
.pro-seg-drawer-body textarea:focus {
    outline: none;
    border-color: var(--input-border-focus);
    box-shadow: var(--shadow-ring);
}
.pro-seg-drawer-body .pro-refs-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.pro-seg-drawer-body .pro-seg-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.pro-seg-drawer-body .pro-seg-trigger-btn {
    width: 100%;
    margin-top: 8px;
}
.pro-seg-drawer-body .pro-seg-status-slot,
.pro-seg-drawer-body .pro-seg-preview-slot {
    width: 100%;
}

/* 进度面板 — 浮动右下角 */
.pro-result-panel {
    position: fixed;
    right: var(--space-5);
    bottom: var(--space-5);
    width: 360px;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--surface-card);
    border: 1px solid var(--accent-line);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-overlay);
}

/* === Chip 风格 refs 引用区 === */
.pro-refs-section-compact {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding: var(--space-2) 0;
}
.pro-refs-section-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-family: var(--font-display);
    letter-spacing: 0.06em;
    flex-shrink: 0;
    min-width: 56px;
}
.pro-refs-section-label small {
    color: var(--text-disabled);
    font-family: var(--font-mono);
    margin-left: 4px;
}
.pro-refs-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    flex: 1;
}

.pro-ref-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 4px 8px 4px 4px;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--motion-fast) var(--ease-out);
    max-width: 200px;
}
.pro-ref-chip:hover {
    border-color: var(--accent-line);
    color: var(--accent-base);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.pro-ref-chip-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--surface-sunken);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pro-ref-chip-thumb img,
.pro-ref-chip-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pro-ref-chip-thumb .ico {
    width: 12px;
    height: 12px;
    color: var(--accent-base);
}
.pro-ref-chip-name {
    font-family: var(--font-mono);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
}
.pro-ref-chip-remove {
    width: 16px;
    height: 16px;
    border: none;
    background: transparent;
    color: var(--text-disabled);
    cursor: pointer;
    border-radius: 50%;
    padding: 0;
    font-size: 10px;
    line-height: 1;
    flex-shrink: 0;
}
.pro-ref-chip-remove:hover {
    background: var(--accent-soft);
    color: var(--accent-base);
}

/* 老 .pro-refs-section / .pro-refs-grid — 兼容旧代码（非段卡内的）*/
.pro-refs-section:not(.pro-refs-section-compact) {
    margin-top: var(--space-2);
}

/* 响应式：窄屏 toolbar 纵向堆叠 */
@media (max-width: 768px) {
    .pro-toolbar-row {
        flex-direction: column;
        align-items: stretch;
    }
    .pro-toolbar-controls {
        justify-content: space-between;
    }
    .pro-toolbar-actions {
        margin-left: 0;
        width: 100%;
        justify-content: flex-end;
    }
    .pro-result-panel {
        right: var(--space-3);
        left: var(--space-3);
        width: auto;
    }
}

/* refs grid (Pro 资产引用区) — 去掉每个 thumb 背景灰 */
.pro-ref-thumb {
    background: var(--surface-card) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-sm) !important;
    transition: border-color var(--motion-fast) var(--ease-out);
}
.pro-ref-thumb:hover {
    border-color: var(--accent-line) !important;
}
.pro-ref-other {
    color: var(--text-muted) !important;
    background: var(--surface-base) !important;
}
.pro-ref-empty,
.pro-refs-empty {
    color: var(--text-muted) !important;
    background: var(--surface-base);
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: var(--space-4) !important;
    font-size: var(--text-xs);
}

/* ----------------------------------------------------------------------------
 * 中断恢复 banner — 取消/停止/错误后显示在 panel-right 顶部
 * ---------------------------------------------------------------------------- */

.resume-banner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: linear-gradient(180deg, var(--seal-50), var(--surface-card));
    border-bottom: 1px solid var(--accent-line);
    border-left: 3px solid var(--accent-base);
    box-shadow: var(--shadow-sm);
    animation: resume-banner-in var(--motion-base) var(--ease-spring);
    flex-shrink: 0;
}
@keyframes resume-banner-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.resume-banner-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    border-radius: 50%;
    color: var(--accent-base);
}
.resume-banner-icon .ico {
    width: 18px;
    height: 18px;
}
.resume-banner-text {
    flex: 1;
    min-width: 0;
}
.resume-banner-title {
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--accent-base);
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}
.resume-banner-hint {
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: var(--leading-normal);
}
.resume-banner-actions {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* ----------------------------------------------------------------------------
 * 顶部用户 badge（覆盖 web_login.js 内联紫色 style）
 * ---------------------------------------------------------------------------- */

#webUserBadge {
    background: var(--surface-card) !important;
    border: 1px solid var(--accent-line) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-display) !important;
    padding: 6px 14px !important;
    border-radius: var(--radius-pill) !important;
    box-shadow: var(--shadow-sm) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: box-shadow var(--motion-fast) var(--ease-out);
}
#webUserBadge:hover {
    box-shadow: var(--shadow-md) !important;
}
#webUserBadge b {
    color: var(--gold-500);
    font-family: var(--font-mono);
    font-feature-settings: "tnum" 1, "lnum" 1;
}
#webUserBadge a {
    color: var(--text-muted) !important;
    text-decoration: none !important;
    font-size: 11px !important;
}
#webUserBadge a:hover {
    color: var(--accent-base) !important;
}

/* ----------------------------------------------------------------------------
 * 顶部 nav-btn：放大 + 图标语义 + 印社硬阴影 active 态
 * ---------------------------------------------------------------------------- */
.nav-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: 9px 18px;
    color: var(--text-secondary);
    font-family: var(--font-display);
    font-size: var(--text-base);
    letter-spacing: 0.04em;
    transition: all var(--motion-fast) var(--ease-out);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    line-height: 1;
}
.nav-btn .ico {
    width: 16px;
    height: 16px;
    opacity: 0.78;
}
.nav-btn:hover:not(.active) {
    color: var(--accent-base);
    background: var(--accent-soft);
}
.nav-btn:hover:not(.active) .ico {
    opacity: 1;
}
.nav-btn.active {
    color: var(--accent-base);
    border-color: var(--accent-line);
    background: var(--surface-card);
    font-weight: 600;
    box-shadow: 0 -2px 0 var(--accent-base) inset, 2px 2px 0 var(--accent-line);
    border-radius: var(--radius-md);
}
.nav-btn.active .ico {
    opacity: 1;
}

/* 顶部右侧资源库按钮：放大 + 朱砂边 + 显式文案 */
.header-icon-btn {
    height: 38px;
    padding: 0 16px;
    font-size: var(--text-base);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    border: 1px solid var(--accent-line);
    color: var(--accent-base);
    font-weight: 500;
    gap: 8px;
}
.header-icon-btn .ico {
    width: 16px;
    height: 16px;
}
.header-icon-btn:hover {
    background: var(--accent-base);
    color: white;
    border-color: var(--accent-base);
    box-shadow: 2px 2px 0 var(--accent-line);
    transform: translate(-1px, -1px);
}