:root {
    --bg-sidebar: #f7f8fa;
    --bg-main: #ffffff;
    --bg-chat-bubble-user: #e8f0fe; /* Light blue for user */
    --bg-chat-bubble-bot: #f7f8fa;
    --text-primary: #1f2329;
    --text-secondary: #646a73;
    --border-color: #dee0e3;
    --primary-color: #4e5969; /* Dark grey/blueish */
    --accent-color: #165dff; /* Blue accent like Doubao/Arco Design */
    --topbar-h: 35px; /* 与右侧 tabs 高度一致的顶部留白 */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--text-primary);
    background-color: var(--bg-main);
    height: 100vh;
    overflow: hidden;
}

/* 主页面默认隐藏，等待JavaScript认证后显示 */
body.app-container:not(.auth-checked) {
    visibility: hidden;
}

.app-container {
    display: flex;
    height: 100vh;
    width: 100%;
}

/* Sidebar collapse state */
.app-container.sidebar-collapsed .sidebar {
    width: 0;
    border-right: 0;
    overflow: hidden;
}

.app-container.sidebar-collapsed .sidebar * {
    pointer-events: none;
}

.app-container.sidebar-collapsed .sidebar-resizer {
    display: none;
}

/* Sidebar */
.sidebar {
    width: 260px;
    background-color: var(--bg-sidebar);
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-color);
    flex-shrink: 0;
    transition: width 0.18s ease;
}

.sidebar-header {
    padding: 16px;
}

.new-chat-btn {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--accent-color);
    transition: all 0.2s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.new-chat-btn:hover {
    background: #f0f4ff;
}

.sidebar-split-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevent scroll on container */
}

.agents-list {
    overflow-y: auto;
    padding: 0 12px;
    flex-shrink: 0;
    min-height: 100px;
    /* 默认高度由 JS 初始化为屏幕垂直中间 */
}

.history-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 12px;
    min-height: 100px;
}

.sidebar-resizer {
    height: 12px;
    cursor: row-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s;
}

.sidebar-resizer:hover {
    background: rgba(0,0,0,0.02);
}

.resizer-line {
    width: 40px;
    height: 4px;
    background: #b0b3bf;
    border-radius: 2px;
}

.sidebar-section-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 12px 8px 8px;
}

.history-header{
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--bg-sidebar);
    padding: 12px 12px 8px;
    margin: 0 -12px; /* extend to edges of history list padding */
    border-bottom: 1px solid rgba(222,224,227,0.7);
}

.history-title-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin: 0; /* override sidebar-section-title margin inside sticky header */
}

.history-title-action{
    border: 1px solid var(--border-color);
    background: #fff;
    color: var(--text-secondary);
    border-radius: 10px;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.history-title-action:hover{
    background:#f7f8fa;
    color: var(--text-primary);
    border-color:#d5d7dc;
}

/* Multi-select toolbar: minimal + compact (Doubao-like) */
.history-toolbar{
    position: static;
    margin: 8px 0 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    display:flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    box-shadow: none;
}

.history-toolbar-left{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
    width: 100%;
}

.history-selected-count{
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space:nowrap;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(222,224,227,0.9);
    background: #fff;
}

.history-toolbar-right{
    display:flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    overflow: visible;
    width: 100%;
}

.history-tool-btn{
    height: 28px;
    border: 1px solid rgba(222,224,227,0.9);
    background: #fff;
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 500;
    cursor:pointer;
    line-height: 28px;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.history-tool-btn.icon{
    width: 28px;
    padding: 0;
    border-radius: 10px;
    line-height: 28px;
    text-align: center;
    font-size: 14px;
}

/* Nice tooltip */
.history-tool-btn[data-tooltip]{
    position: relative;
}
.history-tool-btn[data-tooltip]:hover::after{
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.78);
    color: #fff;
    padding: 6px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.history-tool-btn[data-tooltip]:hover::before{
    content: '';
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(0,0,0,0.78);
    pointer-events: none;
}
.history-tool-btn:hover{
    background:#f7f8fa;
    color: var(--text-primary);
    border-color:#d5d7dc;
}
.history-tool-btn:disabled{
    opacity: 0.5;
    cursor: not-allowed;
}
.history-tool-btn.danger{
    color:#f53f3f;
    border-color: rgba(245,63,63,0.35);
    background: #fff;
}
.history-tool-btn.danger:hover{
    background:#fff1f0;
    border-color: rgba(245,63,63,0.55);
}

.sidebar-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 10px;
    object-fit: cover;
}

.agent-item {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.2;
    margin-bottom: 0;
}

.agent-item:hover {
    background-color: rgba(0,0,0,0.05);
}

.agent-item .icon {
    margin-right: 10px;
    font-size: 16px;
    width: 20px;
    text-align: center;
}

/* History items styling reuse */
.history-group-title {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 16px 8px 8px;
}

.history-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    padding-right: 84px; /* Space for 3 buttons */
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
    color: var(--text-primary);
    font-size: 14px;
    position: relative;
}

.history-item.selected{
    outline: 2px solid rgba(22,93,255,0.25);
    background: rgba(22,93,255,0.06);
}

.history-select{
    width: 16px;
    height: 16px;
    margin-right: 8px;
    accent-color: var(--accent-color);
    display:none;
    flex: 0 0 auto;
}

/* When in multi-select mode */
.history-list.select-mode .history-select{
    display:inline-block;
}
.history-list.select-mode .history-actions{
    display:none;
}

.history-item:hover {
    background-color: rgba(0,0,0,0.05);
}

.history-item.active {
    background-color: #e6f0ff;
    color: var(--accent-color);
}

.history-item .icon {
    margin-right: 10px;
    font-size: 16px;
}

.history-item .text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1; /* Allow text to take available width */
}

/* Action buttons container */
.history-actions {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s;
}

.history-item:hover .history-actions {
    opacity: 1;
}

.history-btn {
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #86909c;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px; /* Icon size */
    transition: all 0.15s;
}

.history-btn:hover {
    background: rgba(0,0,0,0.06);
    color: #4e5969;
}

.history-btn.pinned {
    color: var(--accent-color);
    opacity: 1; /* Always show if pinned? Maybe not, keep clean */
}

/* If pinned, maybe show a small indicator on the left or just rely on position */
.history-item.is-pinned .text {
    font-weight: 500;
}

.history-group-header {
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    font-size: 12px;
    color: var(--text-secondary);
    margin: 16px 8px 8px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.history-group-header:hover {
    color: var(--text-primary);
}

.history-group-arrow {
    display: inline-block;
    width: 16px;
    text-align: center;
    margin-right: 4px;
    font-size: 10px;
    transition: transform 0.2s;
}

.history-group-header.collapsed .history-group-arrow {
    transform: rotate(-90deg);
}

.history-empty {
    padding: 8px 12px 16px;
    color: var(--text-secondary);
    font-size: 12px;
}

.sidebar-footer {
    padding: 16px;
    border-top: 1px solid var(--border-color);
    position: relative;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
}

.user-profile-menu {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.user-profile-menu-item {
    border: 1px solid var(--border-color);
    background: #fff;
    border-radius: 8px;
    padding: 8px 10px;
    text-align: left;
    font-size: 12px;
    color: var(--text-primary);
    cursor: pointer;
}

.user-profile-menu-item:hover {
    background: rgba(24, 144, 255, 0.06);
    border-color: rgba(24, 144, 255, 0.35);
}

.avatar-small {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

/* Main Content */
.main-content {
    flex: 1;
    display: flex;
    position: relative;
    min-width: 0;
    overflow: hidden;
}

/* Resizer between chat and preview */
.main-resizer{
    flex: 0 0 10px; /* 热区稍窄一些 */
    display: none; /* only show when preview is active */
    align-items: center;
    justify-content: center;
    cursor: col-resize;
    user-select: none;
    background: transparent;
    transition: background 0.15s;
}

.main-resizer:hover{
    background: rgba(0,0,0,0.015);
}

.main-resizer-line{
    width: 1px;                 /* 图二那种细线 */
    height: 100%;               /* 贯穿全高更像阅读器分割线 */
    border-radius: 0;
    background: rgba(31,35,41,0.10);
    box-shadow: none;           /* 只要一条细线 */
}

/* Chat (沟通区) scrollbar: 平时隐藏，仅滚动时显示 */
.chat-messages{
    /* Reserve gutter to avoid layout "flashing" while toggling */
    scrollbar-gutter: stable;
    /* Firefox: keep gutter but hide thumb by default */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.chat-messages.is-scrolling{
    scrollbar-color: rgba(31,35,41,0.18) transparent;
}

/* WebKit: default hidden (no gutter), show while scrolling */
.chat-messages::-webkit-scrollbar{
    width: 6px;   /* keep stable width to prevent reflow */
    height: 6px;
}
.chat-messages.is-scrolling::-webkit-scrollbar{
    width: 6px;
}
.chat-messages::-webkit-scrollbar-track{
    background: transparent;
}
.chat-messages::-webkit-scrollbar-thumb{
    background: transparent;
    border-radius: 999px;
}
.chat-messages.is-scrolling::-webkit-scrollbar-thumb{
    background: rgba(31,35,41,0.12);
}

.main-content.preview-active .main-resizer{
    display: flex;
}

/* Smooth resizing: disable transitions while dragging */
.main-content.is-resizing .chat-section,
.main-content.is-resizing .preview-section{
    transition: none !important;
}

.main-content.is-resizing{
    user-select: none;
}

/* Sidebar toggle button (top-left of main content) */
.sidebar-toggle {
    position: absolute;
    top: 4px; /* 放进顶部 35px 留白区域 */
    left: 12px;
    z-index: 50;
    width: 28px;
    height: 28px;
    border-radius: 10px; /* 保留点击热区圆角，但不画外框 */
    border: none;        /* 与右侧一致：无外框 */
    background: transparent; /* 平时透明 */
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none; /* 无阴影外框 */
    transition: background 0.15s, color 0.15s;
}

.sidebar-toggle:hover {
    background: rgba(0,0,0,0.04); /* 仅 hover 提示 */
    color: var(--text-primary);
}

.sidebar-toggle-icon {
    font-size: 14px;
    line-height: 1;
    transform: translateY(-1px);
}

/* Chat Section (40%) */
.chat-section {
    flex: 1; /* Initially take full width */
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-color);
    background-color: #fff;
    min-width: 350px;
    min-height: 0; /* 允许 flex 子项正确收缩 */
    position: relative;
    transition: flex 0.3s ease;
    overflow: hidden; /* 防止内容溢出 */
}

/* 左侧顶栏（35px）：用于居中显示"职位-名字" */
.chat-topbar{
    flex: 0 0 var(--topbar-h);
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    /* 给左上角 sidebar-toggle 预留空间，避免标题被遮挡 */
    padding: 0 56px;
    position: relative;
}
.chat-topbar.is-hidden{
    display: none;
}
.chat-topbar-title{
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    pointer-events: none;
}

/* 侧边栏折叠按钮（chat-topbar 右上角） */
.chat-topbar-collapse-btn{
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s, color 0.15s;
}
.chat-topbar-collapse-btn:hover{
    background: rgba(0,0,0,0.06);
    color: var(--text-primary);
}
.chat-topbar-collapse-btn svg{
    display: block;
}

/* When using the middle resizer, avoid "triple lines" (chat border + preview border + resizer line) */
.main-content.preview-active .chat-section{
    border-right: none;
}
.main-content.preview-active .preview-section{
    border-left: none;
}

/* When preview is active, chat section shrinks */
.chat-section.shrunk {
    flex: 4;
}

.chat-header {
    /* Removed as requested, but keeping class for reference if needed later, or simply remove from HTML */
    display: none; 
}

.chat-messages {
    flex: 1 1 0; /* 三值语法确保正确收缩 */
    min-height: 0; /* 关键：允许 flex 子项收缩以启用滚动 */
    height: 0; /* 强制通过 flex 计算高度 */
    overflow-y: auto;
    overflow-x: hidden;
    /* 对话内容最大宽度 800px 居中（与豆包一致） */
    padding: 20px max(20px, calc(50% - 400px));
    display: block; /* 改为 block 布局，避免 flex 子项高度计算问题 */
}

/* Agent welcome: truly center the welcome/input block in the available viewport */
.chat-messages.welcome-centered{
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
}

/* Welcome Screen */
.welcome-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    text-align: center;
    padding-top: clamp(60px, 15vh, 180px);
    padding-bottom: 40px; /* Space for input area */
}

/* Agent selected (non-home): center the input vertically, hide duplicated function cards */
.welcome-screen.agent-chat{
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
    gap: 14px;
    transform: translateY(-60px); /* 整体上移：头像+输入框一起移动 */
}
.welcome-screen.agent-chat .avatar-large{
    display: block; /* 保留头像 */
}
.welcome-screen.agent-chat .avatar-large img{
    margin-bottom: 10px; /* 减少头像占位 */
}
.welcome-screen.agent-chat .avatar-large.agent-mode img{
    width: 96px;
    height: 96px;
}
.welcome-screen.agent-chat .subtitle{
    margin: 0 0 10px;
}
.welcome-screen.agent-chat .function-grid{
    display: none !important; /* 删除左侧下方那排功能卡 */
}
.welcome-screen.agent-chat .agent-grid{
    display: none !important;
}
.welcome-screen.agent-chat .chat-input-area{
    margin: 0;
}
/* Move agent area slightly downward (requested) */
.welcome-screen .agent-grid,
.welcome-screen .function-grid {
    margin-top: 20px;
}

/* When input is placed in welcome screen (above functions) */
.welcome-screen .chat-input-area {
    width: 100%;
    max-width: 800px;
    padding: 0;
    margin: 4px 0 16px;
}

.welcome-screen .input-wrapper {
    padding: 16px 16px;
    border-radius: 18px;
}

.welcome-screen textarea {
    height: 64px;
    max-height: 160px;
    font-size: 15px;
}

.welcome-screen button#send-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
}

.welcome-screen button#send-btn svg {
    width: 20px;
    height: 20px;
}

.welcome-screen #welcome-input-slot {
    padding: 0 12px;
}

/* Welcome: make cards smaller, 4 per row */
.welcome-screen .agent-grid,
.welcome-screen .function-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    max-width: 860px;
}

.welcome-screen .agent-card,
.welcome-screen .function-card {
    border-radius: 10px;
    padding: 10px 12px;
}

.welcome-screen .agent-card {
    display: flex;
    align-items: center;
    gap: 12px;
}

.agent-card-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0; /* allow ellipsis */
}

.welcome-screen .agent-icon {
    font-size: 18px;
    margin-bottom: 6px;
}

.welcome-screen .agent-name,
.welcome-screen .function-card-title {
    font-size: 13px;
    margin-bottom: 4px;
}

.welcome-screen .agent-desc,
.welcome-screen .function-card-desc {
    font-size: 11px;
    line-height: 1.35;
}

/* Welcome: treat chips as a compact 4-col grid too */
.welcome-screen .skill-chips {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 0;
}

.welcome-screen .skill-chip {
    width: 100%;
    text-align: center;
    border-radius: 12px;
    padding: 8px 10px;
    font-size: 12px;
}

.avatar-large img {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 22px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: all 0.3s;
}

/* Logo mode for 紫龙欢迎页（避免被裁成圆形） */
.avatar-large.logo-mode{
    width: 100%;
    display: flex;
    justify-content: center;
}

.avatar-large.logo-mode img {
    width: 260px;
    max-width: 70vw;
    display: block;
    height: auto;
    border-radius: 4px;
    object-fit: contain;
    background: transparent;
    box-shadow: none;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
}

/* Larger avatar for specific agents */
.avatar-large.agent-mode img {
    width: 128px;
    height: 128px;
}

.welcome-screen h2 {
    margin-bottom: 10px;
    font-size: 32px;
    font-weight: 600;
}

.subtitle {
    color: var(--text-secondary);
    margin: 6px 0 18px;
    font-size: 14px;
    width: 100%;
    max-width: 860px;
    text-align: center;
    padding: 0 12px;
}

.agent-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
    max-width: 500px;
}


.agent-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
}

.agent-card:hover {
    border-color: var(--accent-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transform: translateY(-2px);
}

.agent-icon {
    font-size: 24px;
    margin-bottom: 8px;
}

.agent-icon-img {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    object-fit: cover;
    display: block;
}

.welcome-screen .agent-icon-img {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.agent-name {
    font-weight: 600;
    margin-bottom: 4px;
}

.agent-desc {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Function Grid (agent-specific capabilities) */
.function-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
    max-width: 520px;
}

.function-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.function-card:hover {
    border-color: var(--accent-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transform: translateY(-2px);
}

.function-card.disabled {
    opacity: 0.6;
    cursor: pointer; /* 允许点击触发“申请开通” */
    border-style: dashed;
    transform: none;
    box-shadow: none;
}

.function-card.disabled:hover {
    border-color: rgba(134,144,156,0.7);
    box-shadow: none;
    transform: none;
}

.rbac-lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    color: #ff7d00;
    background: #fff7e8;
    border: 1px solid rgba(255,125,0,0.35);
    border-radius: 999px;
    vertical-align: middle;
}

.function-card-title {
    font-weight: 600;
    margin-bottom: 6px;
}

.function-card-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.preview-kv {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 10px 16px;
    font-size: 14px;
}

.preview-kv .k {
    color: var(--text-secondary);
}

.code-block {
    background: #0b1020;
    color: #e6edf3;
    border-radius: 10px;
    padding: 14px 16px;
    overflow: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 13px;
    line-height: 1.5;
    max-width: 100%;
    box-sizing: border-box;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ===== Media Gallery ===== */
.media-gallery {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bg-main, #f7f8fa);
    overflow: hidden;
}
.media-gallery-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--text-secondary);
    font-size: 15px;
}
.media-gallery-empty .empty-icon { font-size: 48px; margin-bottom: 12px; }

.mg-stage {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 0;
    padding: 16px 48px;
    overflow: hidden;
}
.mg-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(6px);
    color: #555;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.08);
    z-index: 2;
    pointer-events: none;
}
.mg-main {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    min-width: 0;
}
.mg-main-img, .mg-main-video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 12px;
    display: block;
    width: auto;
    height: auto;
}
.mg-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.85);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: opacity 0.15s, background 0.15s;
    color: #333;
}
.mg-arrow:hover { background: #fff; }
.mg-arrow.disabled { opacity: 0.3; cursor: default; pointer-events: none; }
.mg-arrow-left { left: 8px; }
.mg-arrow-right { right: 8px; }
.mg-counter {
    position: absolute;
    bottom: 8px;
    right: 16px;
    font-size: 12px;
    color: var(--text-secondary);
}

.mg-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 16px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}
.mg-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card, #fff);
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
}
.mg-tool-btn:hover { background: var(--bg-hover, #f0f0f0); }
.mg-tool-btn.danger { color: #e53e3e; border-color: #fed7d7; }
.mg-tool-btn.danger:hover { background: #fff5f5; }

.mg-thumbs-strip {
    flex-shrink: 0;
    padding: 6px 16px 8px;
    overflow-x: auto;
    border-top: 1px solid var(--border-color);
}
.mg-thumbs-track {
    display: flex;
    gap: 1px;
    justify-content: center;
}
.mg-thumb {
    height: 64px;
    width: auto;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
    border: 2px solid transparent;
    transition: border-color 0.15s, opacity 0.15s;
    opacity: 0.6;
}
.mg-thumb:hover { opacity: 0.9; }
.mg-thumb.active { border-color: var(--accent, #4a90d9); opacity: 1; }
.mg-thumb img {
    height: 100%;
    width: auto;
    object-fit: contain;
    display: block;
}

.preview-image {
    width: 100%;
    border-radius: 10px;
    display: block;
}

/* Chat Messages */
.message {
    display: flex;
    gap: 12px;
    max-width: 95%;
    margin-bottom: 24px;
}

.message:last-child {
    margin-bottom: 0;
}

.message.user {
    margin-left: auto; /* 用户消息靠右 */
    flex-direction: row-reverse;
}

.message-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.message-avatar.user-avatar-placeholder {
    background: #e0e0e0;
}

.message-avatar.bot-avatar-placeholder {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

.message-avatar img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.message-content {
    background: var(--bg-chat-bubble-bot);
    padding: 12px 16px;
    border-radius: 12px;
    border-top-left-radius: 2px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-primary);
    flex: 0 1 auto;
    min-width: 0;
    max-width: calc(100% - 48px);
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: anywhere;
    overflow: hidden;
}

.message.user .message-content {
    background: var(--bg-chat-bubble-user);
    border-top-left-radius: 12px;
    border-top-right-radius: 2px;
    flex: 0 1 auto;
}

/* Chat Input */
.chat-input-area {
    /* 与对话区同宽居中 */
    padding: 20px max(20px, calc(50% - 400px));
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.input-wrapper {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 10px 14px 6px;
    display: flex;
    flex-direction: column;
    gap: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    transition: border-color 0.2s;
}

.input-wrapper:focus-within {
    border-color: var(--accent-color);
}

textarea {
    width: 100%;
    border: none;
    outline: none;
    resize: none;
    height: 44px; /* Default height */
    max-height: 120px;
    padding: 6px 0;
    font-family: inherit;
    font-size: 15px;
    box-sizing: border-box;
}

.input-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0 4px;
}

button#send-btn {
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.2s;
    margin-left: auto;
    flex-shrink: 0;
}

button#send-btn:hover {
    opacity: 0.9;
}

button#send-btn svg {
    width: 18px;
    height: 18px;
}

/* 中断按钮状态 */
button#send-btn.is-stop {
    background: #ef4444;
    animation: stop-btn-pulse 1.5s ease-in-out infinite;
}
button#send-btn.is-stop:hover {
    background: #dc2626;
    opacity: 1;
}
@keyframes stop-btn-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
    50% { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}

/* 10分钟长等待弹窗 */
.long-wait-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s;
}
.long-wait-dialog {
    background: #fff;
    border-radius: 12px;
    padding: 28px 32px 24px;
    min-width: 340px;
    max-width: 420px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    text-align: center;
}
.long-wait-title {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 8px;
}
.long-wait-desc {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
    line-height: 1.5;
}
.long-wait-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.long-wait-btn {
    padding: 8px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: background 0.2s, color 0.2s;
}
.long-wait-continue {
    background: var(--accent-color, #4f6ef7);
    color: #fff;
}
.long-wait-continue:hover {
    opacity: 0.9;
}
.long-wait-abort {
    background: #f3f4f6;
    color: #333;
}
.long-wait-abort:hover {
    background: #e5e7eb;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 人事助手气泡：正文 + 下方仅图标操作条（悬停黑底胶囊提示） */
.message-stack--hr-bot {
    flex: 0 1 auto;
    min-width: 0;
    max-width: calc(100% - 48px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.message-stack--hr-bot .message-content {
    max-width: 100%;
}
.hr-bot-msg-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 0 2px;
}
/* 流式生成中隐藏复制/下载，结束后由 JS 去掉此类 */
.hr-bot-msg-actions--pending {
    display: none !important;
}
.hr-msg-ico-btn {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #f3f4f6;
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.hr-msg-ico-btn:hover {
    background: #e5e7eb;
    color: #374151;
}
.hr-msg-ico-btn:focus {
    outline: none;
}
.hr-msg-ico-btn:focus-visible {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(79, 110, 247, 0.45);
}
.hr-msg-ico-svg {
    display: block;
    flex-shrink: 0;
}
.hr-msg-ico-btn__tip {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 12px;
    background: #111827;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    border-radius: 999px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease, visibility 0.12s;
    z-index: 20;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.hr-msg-ico-btn:hover .hr-msg-ico-btn__tip,
.hr-msg-ico-btn:focus-visible .hr-msg-ico-btn__tip {
    opacity: 1;
    visibility: visible;
}

/* Chat Input */
.chat-input-area {
    /* 与对话区同宽居中 */
    padding: 20px max(20px, calc(50% - 400px));
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.input-wrapper {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 10px 14px 6px;
    display: flex;
    flex-direction: column;
    gap: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    transition: border-color 0.2s;
}

.input-wrapper:focus-within {
    border-color: var(--accent-color);
}

textarea {
    width: 100%;
    border: none;
    outline: none;
    resize: none;
    height: 44px; /* Default height */
    max-height: 120px;
    padding: 6px 0;
    font-family: inherit;
    font-size: 15px;
    box-sizing: border-box;
}

.input-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0 4px;
}

button#send-btn {
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.2s;
    margin-left: auto;
    flex-shrink: 0;
}

button#send-btn:hover {
    opacity: 0.9;
}

button#send-btn svg {
    width: 18px;
    height: 18px;
}

/* 中断按钮状态 */
button#send-btn.is-stop {
    background: #ef4444;
    animation: stop-btn-pulse 1.5s ease-in-out infinite;
}
button#send-btn.is-stop:hover {
    background: #dc2626;
    opacity: 1;
}
@keyframes stop-btn-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
    50% { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}

/* 10分钟长等待弹窗 */
.long-wait-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s;
}
.long-wait-dialog {
    background: #fff;
    border-radius: 12px;
    padding: 28px 32px 24px;
    min-width: 340px;
    max-width: 420px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    text-align: center;
}
.long-wait-title {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 8px;
}
.long-wait-desc {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
    line-height: 1.5;
}
.long-wait-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.long-wait-btn {
    padding: 8px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: background 0.2s, color 0.2s;
}
.long-wait-continue {
    background: var(--accent-color, #4f6ef7);
    color: #fff;
}
.long-wait-continue:hover {
    opacity: 0.9;
}
.long-wait-abort {
    background: #f3f4f6;
    color: #333;
}
.long-wait-abort:hover {
    background: #e5e7eb;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ===== 人事-快速生成JD弹窗（白色主题） ===== */
.hr-jd-dialog {
    background: #fff;
    border-radius: 14px;
    padding: 28px 32px;
    width: 420px;
    max-width: 92vw;
    box-shadow: 0 8px 32px rgba(0,0,0,.15);
    color: #1a1a1a;
    font-family: inherit;
}
.hr-jd-dialog.hr-resume-dialog {
    width: 520px;
    max-width: 96vw;
    max-height: 90vh;
    overflow-y: auto;
}
.hr-resume-hint {
    font-size: 13px;
    color: #666;
    margin: 0 0 8px;
    line-height: 1.5;
}
.hr-resume-textarea {
    min-height: 100px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.45;
}
.hr-resume-file-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
    margin-bottom: 4px;
}
.hr-resume-att-btn {
    padding: 6px 12px !important;
    font-size: 13px !important;
    background: #f3f4f6 !important;
    color: #333 !important;
    border: 1px solid #d9d9d9 !important;
}
.hr-resume-file-names {
    font-size: 12px;
    color: #888;
    flex: 1;
    min-width: 0;
    word-break: break-all;
}
.hr-jd-header {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #1a1a1a;
}
.hr-jd-label {
    display: block;
    font-size: 13px;
    color: #666;
    margin-bottom: 6px;
    margin-top: 16px;
}
.hr-jd-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #d9d9d9;
    background: #fafafa;
    color: #1a1a1a;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.hr-jd-input:focus {
    border-color: var(--accent-color, #4f6ef7);
    box-shadow: 0 0 0 3px rgba(79,110,247,0.1);
    background: #fff;
}
.hr-jd-input::placeholder {
    color: #bbb;
}
/* ===== 绩效方案岗位搜索下拉 ===== */
.hr-perf-select-wrap {
    position: relative;
}
.hr-perf-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 180px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    z-index: 10;
}
.hr-perf-option {
    padding: 8px 14px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: background 0.15s;
}
.hr-perf-option:hover {
    background: #f0f0ff;
    color: var(--accent-color, #4f6ef7);
}

.hr-jd-location-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.hr-jd-radio {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    white-space: nowrap;
}
.hr-jd-radio input[type="radio"] {
    accent-color: var(--accent-color, #4f6ef7);
}
.hr-jd-location-other {
    min-width: 120px;
}
.hr-jd-btn {
    padding: 9px 28px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: background 0.2s, color 0.2s;
}
.hr-jd-cancel {
    background: #f0f0f0;
    color: #666;
}
.hr-jd-cancel:hover {
    background: #e0e0e0;
    color: #333;
}
.hr-jd-confirm {
    background: var(--accent-color, #4f6ef7);
    color: #fff;
}
.hr-jd-confirm:hover {
    opacity: 0.9;
}

/* ===== 人事快捷弹窗：统一壳（简洁 / 与 long-wait-overlay 同级） ===== */
.hr-modal-overlay.long-wait-overlay {
    align-items: center;
    justify-content: center;
}
.hr-modal.hr-jd-dialog {
    display: flex;
    flex-direction: column;
    padding: 0;
    max-height: 90vh;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
}
.hr-modal.hr-jd-dialog.hr-resume-dialog {
    /* 四弹窗统一宽度（与原「试用期考核方案」弹窗一致） */
    width: min(560px, 96vw);
}
/* 简历初筛：单列两行（简历 → 岗位 JD）；高度随内容收紧 */
.hr-modal.hr-jd-dialog.hr-resume-dialog.hr-modal--resume-screen {
    width: min(640px, 96vw);
    max-height: min(900px, 92vh);
    min-height: unset;
    height: auto;
}
.hr-modal--resume-screen .hr-modal__body {
    flex: 0 1 auto;
    min-height: 0;
    max-height: calc(92vh - 200px);
    overflow-y: auto;
}
@media (max-width: 480px) {
    .hr-modal.hr-jd-dialog.hr-resume-dialog.hr-modal--resume-screen {
        width: min(560px, 96vw);
        max-height: 92vh;
    }
    .hr-modal--resume-screen .hr-modal__body {
        max-height: calc(92vh - 200px);
    }
}
.hr-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px 12px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}
.hr-modal__header-text {
    min-width: 0;
}
.hr-modal__title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #111827;
    line-height: 1.35;
}
.hr-modal__subtitle {
    margin: 8px 0 0;
    font-size: 13px;
    font-weight: 400;
    color: #6b7280;
    line-height: 1.5;
}
.hr-modal__close {
    flex-shrink: 0;
    margin: -4px -8px 0 0;
    padding: 6px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #9ca3af;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}
.hr-modal__close:hover {
    color: #374151;
    background: #f3f4f6;
}
.hr-modal__body {
    padding: 16px 24px 8px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}
/* 弹窗内输入与多行框：字号与试用期一致；默认白底（可输入态） */
.hr-modal .hr-jd-input,
.hr-modal textarea.hr-jd-input {
    background-color: #fff;
}
.hr-modal .hr-jd-input:focus,
.hr-modal textarea.hr-jd-input:focus {
    background-color: #fff;
}
.hr-modal .hr-jd-input,
.hr-modal .hr-jd-radio span {
    font-size: 14px;
    font-weight: 400;
}
.hr-modal .hr-resume-file-row {
    position: relative;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
/* 简历初筛：附件 chip 与「添加附件」同一行；chip 横排优先，排满再换行；文件名前 10 + … + 后 6 字由 JS 生成 */
.hr-modal--resume-screen .hr-resume-file-row--resume-inline {
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
    margin-bottom: 2px;
}
.hr-modal--resume-screen .hr-attach-chips--resume-inline {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 0;
    min-width: 0;
    flex: 1 1 auto;
    max-width: 100%;
}
.hr-modal--resume-screen .hr-attach-chips--resume-inline .hr-chip {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}
.hr-modal--resume-screen .hr-attach-chips--resume-inline .hr-chip-name {
    max-width: none;
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
}
.hr-modal--resume-screen .hr-resume-file-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
@media (max-width: 400px) {
    .hr-modal--resume-screen .hr-resume-file-actions {
        width: 100%;
        justify-content: flex-end;
    }
}
.hr-modal .hr-resume-att-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}
.hr-modal .hr-resume-att-btn::before {
    content: '';
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    background: no-repeat center / contain
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E");
}
.hr-modal .hr-pill span {
    font-size: 14px;
    font-weight: 400;
}
.hr-modal .hr-jd-input.hr-resume-textarea,
.hr-modal textarea.hr-jd-input {
    min-height: 88px;
    max-height: 220px;
    overflow-y: auto;
    resize: vertical;
    line-height: 1.5;
}
/* 简历初筛：须在通用多行规则之后，保证高度不被覆盖 */
.hr-modal.hr-modal--resume-screen .hr-jd-input.hr-resume-textarea,
.hr-modal.hr-modal--resume-screen textarea.hr-jd-input {
    min-height: 96px;
    max-height: min(36vh, 280px);
}
@media (max-width: 720px) {
    .hr-modal.hr-modal--resume-screen .hr-jd-input.hr-resume-textarea,
    .hr-modal.hr-modal--resume-screen textarea.hr-jd-input {
        max-height: 200px;
    }
}
.hr-modal .hr-resume-hint {
    font-size: 13px;
    font-weight: 400;
    color: #6b7280;
    margin: 0 0 14px;
    line-height: 1.55;
}
.hr-modal__footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 24px 18px;
    border-top: 1px solid #e5e7eb;
    flex-shrink: 0;
    background: #fff;
    position: sticky;
    bottom: 0;
}
.hr-modal__footer .hr-jd-btn:disabled,
.hr-modal__footer .hr-jd-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}
.hr-modal--loading .hr-modal__btn-confirm {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.hr-field {
    margin-top: 0;
}
.hr-field + .hr-field {
    margin-top: 18px;
}
/* 人事弹窗内字段标签（岗位名称等）：半粗，比正文标签略大一号 */
.hr-modal .hr-field__label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
    letter-spacing: 0;
}
.hr-field__label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #4b5563;
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}
.hr-modal .hr-section__title {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 10px;
}
.hr-field__hint {
    font-size: 12px;
    color: #9ca3af;
    margin: 4px 0 0;
    line-height: 1.45;
}
.hr-modal .hr-field__hint {
    font-size: 13px;
    font-weight: 400;
    color: #6b7280;
}
.hr-field__error {
    font-size: 12px;
    color: #dc2626;
    margin-top: 6px;
    line-height: 1.4;
}
.hr-field__error[hidden] {
    display: none !important;
}
.hr-req {
    color: #dc2626;
    text-decoration: none;
    font-weight: 600;
}
.hr-opt {
    color: #9ca3af;
    font-weight: 400;
    font-size: 11px;
    margin-left: 6px;
}
.hr-modal .hr-opt {
    font-size: 12px;
    font-weight: 400;
    color: #9ca3af;
}
.hr-modal .hr-jd-location-other {
    flex: 1;
    min-width: 120px;
    margin: 0;
}
.hr-input-invalid {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.12) !important;
}
.hr-section {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}
.hr-section:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.hr-section__title {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 12px;
}
.hr-attach-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    min-height: 0;
}
.hr-attach-meta {
    font-size: 12px;
    color: #9ca3af;
    align-self: center;
    white-space: nowrap;
}
.hr-file-input-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.hr-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 4px 8px 4px 10px;
    font-size: 12px;
    color: #374151;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    box-sizing: border-box;
}
.hr-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}
.hr-chip-remove {
    flex-shrink: 0;
    padding: 0 4px;
    border: none;
    background: none;
    color: #9ca3af;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
}
.hr-chip-remove:hover {
    color: #dc2626;
    background: #fee2e2;
}
.hr-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: hrSpin 0.7s linear infinite;
}
@keyframes hrSpin {
    to {
        transform: rotate(360deg);
    }
}
.hr-resume-columns {
    display: grid;
    gap: 20px;
}
.hr-resume-columns .hr-col {
    min-width: 0;
}
@media (min-width: 640px) {
    .hr-resume-columns {
        grid-template-columns: 1fr 1fr;
    }
}
.hr-accordion {
    margin-top: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fafafa;
    overflow: hidden;
}
.hr-accordion:first-of-type {
    margin-top: 0;
}
.hr-accordion__summary {
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.hr-accordion__summary::-webkit-details-marker {
    display: none;
}
.hr-accordion__summary::after {
    content: '';
    float: right;
    width: 8px;
    height: 8px;
    margin-top: 4px;
    border-right: 2px solid #9ca3af;
    border-bottom: 2px solid #9ca3af;
    transform: rotate(45deg);
    transition: transform 0.15s;
}
.hr-accordion[open] > .hr-accordion__summary::after {
    transform: rotate(-135deg);
    margin-top: 8px;
}
.hr-accordion__body {
    padding: 0 14px 14px;
    background: #fff;
    border-top: 1px solid #e5e7eb;
}
.hr-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.hr-pill {
    position: relative;
    cursor: pointer;
}
.hr-pill input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.hr-pill span {
    display: inline-block;
    padding: 8px 14px;
    font-size: 13px;
    color: #4b5563;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.hr-pill input:focus-visible + span {
    outline: 2px solid var(--accent-color, #4f6ef7);
    outline-offset: 2px;
}
.hr-pill input:checked + span {
    background: rgba(79, 110, 247, 0.08);
    border-color: var(--accent-color, #4f6ef7);
    color: var(--accent-color, #4f6ef7);
    font-weight: 500;
}
.hr-pill:hover span {
    border-color: #d1d5db;
}

/* Attach button (paperclip) */
.attach-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}
.attach-btn:hover {
    color: var(--accent-color);
    background: var(--bg-hover, #f0f0f0);
}

/* Input divider */
.input-divider {
    width: 1px;
    height: 16px;
    background: #ddd;
    flex-shrink: 0;
}

/* Deep think button */
.deep-think-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
}
.deep-think-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover, #f0f0f0);
}
.deep-think-btn.active {
    color: var(--accent-color);
}
.deep-think-btn.active svg {
    stroke: var(--accent-color);
}

/* Thinking block (reasoning/deep-think) */
.thinking-block {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 10px 14px;
    font-size: 13px;
    contain: layout;          /* 帮助浏览器更快重排 */
}
.thinking-block summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    color: #888;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
}
.thinking-block summary::-webkit-details-marker { display: none; }
.thinking-block summary::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid #999;
    border-bottom: 1.5px solid #999;
    transform: rotate(-45deg);
    transition: transform 0.15s;
    flex-shrink: 0;
}
.thinking-block[open] summary::before {
    transform: rotate(45deg);
}
.thinking-block .thinking-content {
    color: #666;
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    margin-top: 8px;
    max-height: 300px;
    overflow-y: auto;
}

/* Attachment preview strip (above input) */
.attachment-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px 0;
}
.att-item {
    position: relative;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    background: var(--bg-card, #fff);
    display: flex;
    align-items: center;
    max-width: 200px;
}
.att-item.att-image {
    width: 72px;
    height: 72px;
}
.att-item.att-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.att-item.att-file {
    padding: 8px 10px;
    gap: 6px;
    font-size: 12px;
    color: var(--text-primary);
}
.att-item.att-file .att-file-icon {
    font-size: 20px;
    flex-shrink: 0;
}
.att-item.att-file .att-file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
    line-height: 1.3;
}
.att-item.att-file .att-file-size {
    font-size: 11px;
    color: var(--text-secondary);
}
.att-item .att-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    padding: 0;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 2; /* 确保在 .att-progress 覆盖层之上 */
}
.att-item:hover .att-remove,
.att-item:has(.att-upload-overlay) .att-remove,
.att-item:has(.att-status) .att-remove {
    opacity: 1;
}

/* === Upload progress bar overlay === */
.att-upload-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.80);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    z-index: 1;
}
.att-upload-bar-wrap {
    width: 70%;
    height: 5px;
    background: rgba(0,0,0,0.10);
    border-radius: 3px;
    overflow: hidden;
}
.att-upload-bar {
    height: 100%;
    background: var(--accent-color, #4a6cf7);
    border-radius: 3px;
    transition: width 0.25s ease;
    min-width: 0;
}
.att-upload-label {
    font-size: 10px;
    color: var(--text-secondary, #888);
    line-height: 1;
}

/* === Upload status badges === */
.att-status {
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    line-height: 1;
    padding: 1px 6px;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 1;
}
.att-status-ok {
    color: #22c55e;
    background: rgba(255,255,255,0.85);
    font-weight: 600;
}
.att-status-err {
    color: #e53e3e;
    background: rgba(255,255,255,0.85);
    cursor: pointer;
    font-weight: 500;
}
.att-status-err:hover {
    text-decoration: underline;
}

/* Drag-over visual on input wrapper */
.input-wrapper.drag-over {
    border-color: var(--accent-color);
    background: rgba(74,108,247,0.04);
}

/* Attachments shown in sent messages */
.msg-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}
.msg-att-img {
    width: 120px;
    height: 90px;
    border-radius: 8px;
    object-fit: cover;
    cursor: pointer;
}
.msg-att-file {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 8px;
    background: var(--bg-hover, #f5f5f5);
    font-size: 12px;
    color: var(--text-primary);
}
.msg-att-file .att-file-icon {
    font-size: 16px;
}

/* 行政 xingzheng：机器人侧文档下载卡片 */
.msg-attachments.msg-attachments-bot {
    margin-top: 10px;
    flex-direction: column;
    align-items: stretch;
}
.msg-att-download-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 360px;
    text-decoration: none;
    color: inherit;
    border-radius: 10px;
    border: 1px solid var(--border-color, #e8e8e8);
    padding: 10px 12px;
    background: var(--bg-hover, #f7f8fa);
    transition: background 0.15s, border-color 0.15s;
}
a.msg-att-download-card:hover {
    background: rgba(74, 108, 247, 0.06);
    border-color: var(--accent-color, #4a6cf7);
}
.msg-att-download-card.is-disabled {
    cursor: default;
    opacity: 0.85;
}

/* Skill Chips */
.skill-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0 4px;
}

.skill-chip {
    background: #f2f3f5;
    border: 1px solid transparent;
    border-radius: 16px;
    padding: 6px 12px;
    font-size: 12px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
}

.skill-chip:hover {
    background: #e5e6eb;
    border-color: #dcdedf;
}

/* Preview Section (60%) */
.preview-section {
    flex: 6;
    background-color: var(--bg-sidebar); /* Slightly distinct bg */
    display: none; /* Initially hidden */
    flex-direction: column;
    border-left: 1px solid var(--border-color);
    min-width: 0;
    overflow: hidden;
}

.preview-section.active {
    display: flex;
}

.preview-header {
    background: #fff;
    padding: 0 16px 0 4px;
    height: 35px; /* 更紧凑：按需求约 35px */
    display: flex;
    align-items: center;
    border-bottom: none; /* 按需求：不要这条横线 */
    gap: 16px;
}

/* Header toolbar for media action buttons (download / send / delete) */
.mg-header-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto; /* push to far right */
}
.mg-header-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 0;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: color 0.15s;
    white-space: nowrap;
    line-height: 1;
}
.mg-header-btn:hover { color: var(--accent-color, #4a6cf7); }
.mg-header-btn.danger { color: #e53e3e; }
.mg-header-btn.danger:hover { color: #c53030; }

.tab {
    padding: 8px 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    position: relative;
}

.tab.active {
    color: var(--accent-color);
}

.tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px; /* Overlap border */
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent-color);
}

.preview-content {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
    overflow-x: hidden; /* 防止右侧列表/卡片造成横向溢出 */
    display: flex;
    justify-content: stretch;
    align-items: stretch;
}

/* Preview tab: make it look like a document viewer (sidebar + main) */
.preview-content.preview-mode-doc{
    padding: 0;
    overflow: hidden; /* 内部自己滚动，避免双滚条 */
}
.preview-content.preview-mode-doc > *{
    width: 100%;
}

.preview-doc{
    height: 100%;
    width: 100%;
    display: flex;
    background: #fff;
    overflow: hidden; /* 防止内容溢出 */
}

/* Left sidebar (outline) */
.saved-sidebar{
    flex-shrink: 0;
    width: 240px;
    border-right: none; /* 用更接近阅读器的分割线（伪元素） */
    background: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
}
.saved-sidebar::after{
    display: none; /* 按需求：分割线也不要 */
}
.saved-sidebar.collapsed{
    width: 0;
    overflow: hidden;
}
.saved-sidebar.collapsed::after{
    display: none;
}
.saved-sidebar-head{
    height: 35px; /* 与顶部“预览/代码/引用”同高度，更贴上去 */
    display:flex;
    align-items:center;
    gap: 10px;
    padding: 0 10px;
    border-bottom: none; /* 按需求：不要这条横线 */
    background: #fff;
    flex-wrap: nowrap; /* 不换行，避免按钮挤成两行 */
}
.saved-sidebar-actions{
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    white-space: nowrap;
}
.saved-sidebar-action{
    height: 28px;
    padding: 0 6px; /* 无外框：更像文字按钮 */
    border: none;   /* 按需求：不要外框 */
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 12px;
    line-height: 28px;
    white-space: nowrap;
}
.saved-sidebar-action:hover{
    color: var(--text-primary);
    background: rgba(0,0,0,0.04);
}
.saved-sidebar-action.danger{
    color: #f53f3f;
}
.saved-sidebar-action.danger:hover{
    background: rgba(245,63,63,0.06);
}
.saved-sidebar-action.disabled{
    opacity: 0.5;
    cursor: not-allowed;
}
.saved-sidebar-action:focus-visible{
    outline: none;
    box-shadow: 0 0 0 2px rgba(22,93,255,0.25);
}
.saved-sidebar.collapsed .saved-sidebar-head{
    display:none;
}
.saved-sidebar-toggle{
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-1px); /* 视觉微调：与旁边文字同一水平线 */
}
.saved-sidebar-toggle:hover{
    color: var(--text-primary);
    background: transparent;
}
.saved-sidebar-title{
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
    height: auto;        /* 交给 flex 居中，避免与 head 高度冲突 */
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.saved-sidebar.collapsed .saved-sidebar-title{
    display: none;
}
.saved-sidebar-list{
    flex: 1;
    overflow-y: auto;
    padding: 4px 8px; /* 整体更靠上 */
    display:flex;
    flex-direction: column;
    gap: 0px; /* 缩短行间距 */
}
.saved-sidebar.collapsed .saved-sidebar-list{
    display:none;
}
.saved-sidebar-item{
    width: 100%;
    text-align: left;
    border: 1px solid transparent;
    background: transparent;
    color: #1f2329;
    padding: 6px 10px; /* 缩短每行高度 */
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.saved-sidebar-row{
    display: flex;
    align-items: center;
    gap: 4px; /* 更紧凑 */
}
.saved-sidebar-check{
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin: 0 2px 0 2px;
    accent-color: var(--accent-color);
}
.saved-sidebar-row .saved-sidebar-item{
    flex: 1;
    min-width: 0;
}

/* Cite sidebar button (in Cite tab) */
.cite-sidebar-item{
    width: 100%;
    flex: 1;
    min-width: 0;
    text-align: left;
    border: 1px solid transparent;
    background: transparent;
    color: #1f2329;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cite-sidebar-item:hover{
    background: rgba(22,93,255,0.06);
    border-color: rgba(22,93,255,0.14);
}
.cite-sidebar-item.active{
    color: var(--accent-color);
    font-weight: 700;
}
.cite-badge-icon{
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
    line-height: 1;
}

/* Media sidebar button (in Media tab) */
.media-sidebar-item{
    width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    border: 1px solid transparent;
    background: transparent;
    color: #1f2329;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
}
.media-sidebar-item:hover{
    background: rgba(22,93,255,0.06);
    border-color: rgba(22,93,255,0.14);
}
.media-sidebar-item.active{
    color: var(--accent-color);
    font-weight: 700;
}
.media-dot{
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(22,93,255,0.7);
    flex-shrink: 0;
}
.media-dot.v{
    background: rgba(245,63,63,0.75);
}
.media-title{
    overflow: hidden;
    text-overflow: ellipsis;
}
.saved-sidebar-compare{
    flex-shrink: 0;
    height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(22,93,255,0.18);
    border-radius: 10px;
    background: transparent;
    color: rgba(22,93,255,0.9);
    cursor: pointer;
    font-size: 12px;
    line-height: 28px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease, background 120ms ease;
}
.saved-sidebar-compare:hover{
    background: rgba(22,93,255,0.08);
}
.saved-sidebar-compare.active{
    background: rgba(22,93,255,0.12);
    border-color: rgba(22,93,255,0.28);
    font-weight: 700;
}
.saved-sidebar-compare.disabled{
    opacity: 0 !important;
    pointer-events: none !important;
}
.saved-sidebar-del{
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease;
}
.saved-sidebar-row:hover .saved-sidebar-del,
.saved-sidebar-row:hover .saved-sidebar-compare,
.saved-sidebar-compare:focus-visible,
.saved-sidebar-del:focus-visible{
    opacity: 1;
    pointer-events: auto;
}
.saved-sidebar-del:hover{
    background: rgba(245,63,63,0.08);
    color: #f53f3f;
}

.saved-sidebar-row.flash .saved-sidebar-item{
    animation: savedSidebarFlash 650ms ease-out 1;
}
@keyframes savedSidebarFlash{
    0% { background: rgba(22,93,255,0.18); }
    100% { background: transparent; }
}

/* Table toolbar (edit / download) */
.table-preview-head{
    display: none; /* 头部已上移到 fixed top bar 里 */
}
.table-preview-title{
    font-size: 13px; /* 与“已保存的预览”同字号 */
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
}

/* 让右侧内容起始更贴顶，和左侧目录头同一行 */
.preview-selected-area > .table-preview{
    margin-top: 0;
}
.table-preview.is-editing .table-preview-title{
    cursor: text;
    border-radius: 6px;
    padding: 2px 6px;
    margin-left: -6px;
    outline: 1px dashed rgba(22,93,255,0.35);
    outline-offset: 0;
    background: rgba(22,93,255,0.04);
}
.preview-main-title[contenteditable="true"]{
    cursor: text;
    border-radius: 6px;
    padding: 2px 6px;
    margin-left: -6px;
    outline: 1px dashed rgba(22,93,255,0.35);
    background: rgba(22,93,255,0.04);
}
.preview-main-title:focus{
    outline: 2px solid rgba(22,93,255,0.55);
    background: rgba(22,93,255,0.08);
}
.table-preview-title:focus{
    outline: 2px solid rgba(22,93,255,0.55);
    background: rgba(22,93,255,0.08);
}
.preview-table-toolbar{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.ptb-sep{
    width: 1px;
    height: 14px;
    background: rgba(31,35,41,0.12);
    display: inline-block;
    margin: 0 2px;
}
.table-preview:not(.is-editing) .ptb-edit-only{
    display: none !important; /* 未编辑状态隐藏增删行列 */
}
.table-preview-wrap{
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: 6px;
}
.ptb-btn{
    height: 28px;
    padding: 0 6px; /* 无外框：更像文字按钮 */
    border: none;   /* 按需求：不要外框 */
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 12px;
    line-height: 28px;
}
.ptb-btn:hover{
    color: var(--text-primary);
    background: rgba(0,0,0,0.04); /* 仅 hover 轻微提示 */
}
.ptb-btn.danger{
    color: rgba(245,63,63,0.95);
}
.ptb-btn.danger:hover{
    background: rgba(245,63,63,0.08);
    color: #f53f3f;
}
.ptb-btn:disabled{
    opacity: 0.5;
    cursor: not-allowed;
}
.preview-back-workbench-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    min-width: 28px;
}
.preview-back-workbench-btn .preview-back-workbench-icon{
    display: block;
    flex-shrink: 0;
}
.ptb-video-dropdown {
    display: inline-flex;
    gap: 2px;
}
.ptb-btn-video{
    color: #00d4aa;
    font-weight: 600;
}
.ptb-btn-video:hover{
    color: #00f0c0;
    background: rgba(0,212,170,0.08);
}
.ptb-btn-hailuo {
    color: #7c3aed;
    font-weight: 600;
}
.ptb-btn-hailuo:hover {
    color: #6d28d9;
    background: rgba(124,58,237,0.08);
}
.ptb-btn-nano {
    color: #e67e22;
    font-weight: 600;
}
.ptb-btn-nano:hover {
    color: #d35400;
    background: rgba(230,126,34,0.08);
}
.table-preview.is-editing .data-table th,
.table-preview.is-editing .data-table td{
    outline: 1px dashed rgba(22,93,255,0.35);
    outline-offset: -2px;
    background: rgba(22,93,255,0.04);
    cursor: cell;
}
/* 行号/列头/角落：保持原始样式，不加虚线 */
.table-preview.is-editing .data-table .fp-ss-colheader,
.table-preview.is-editing .data-table .fp-ss-corner,
.table-preview.is-editing .data-table .fp-ss-rowheader{
    outline: none !important;
    background: #f0f1f3 !important;
    cursor: default;
}
.table-preview.is-editing .data-table th.selected,
.table-preview.is-editing .data-table td.selected{
    outline: 2px solid rgba(22,93,255,0.7);
    outline-offset: -2px;
    background: rgba(22,93,255,0.10);
}
/* 预览面板表格编辑：电子表格相对定位（给右键菜单用） */
.table-preview.is-editing{
    position: relative;
}
.saved-sidebar-item:hover{
    background: rgba(22,93,255,0.06);
    border-color: rgba(22,93,255,0.14);
}
.saved-sidebar-item.active{
    color: var(--accent-color);
    background: transparent; /* 只要文字变蓝，不要蓝色框/底 */
    border-color: transparent;
    font-weight: 700;
}
.saved-sidebar-empty{
    padding: 12px;
    font-size: 12px;
    color: var(--text-secondary);
}

/* Right document area */
.preview-doc-main{
    flex: 1;
    min-width: 0;
    max-width: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* Fixed top bar in preview main (align with left saved sidebar head) */
.preview-main-head{
    height: 35px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 24px; /* 与表格内容区左右对齐 */
    background: #fff;
    flex-shrink: 0;
    position: relative;
}
.doc-outline-head-btn{
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    transform: translateY(-1px);
    position: absolute;  /* 不占位，避免把标题往右顶 */
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}
.doc-outline-head-btn:hover{
    color: var(--text-primary);
    background: rgba(0,0,0,0.04);
}
.preview-main-title{
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.preview-main-tools{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    white-space: nowrap;
}
.preview-main-tools:not(.is-editing) .ptb-edit-only{
    display: none !important;
}

/* 侧边栏收起时：标题仍与表格对齐，但给左侧按钮留视觉空间 */
.preview-doc-main.has-outline-fab .preview-main-head{
    padding-left: 64px;
    padding-right: 24px;
}

/* Collapsed sidebar button (like doc/PDF viewer) */
.doc-outline-fab{
    position: absolute;
    left: 12px;
    top: 4px; /* 再往上贴一点 */
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px; /* 保留点击热区的圆角，但不画框 */
    background: transparent; /* 不要外框/底色 */
    color: var(--text-secondary);
    cursor: pointer;
    box-shadow: none; /* 去掉外部框阴影 */
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.doc-outline-fab:hover{
    color: var(--text-primary);
    background: rgba(0,0,0,0.04); /* 仅 hover 轻微提示 */
}
.preview-doc-body{
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 24px 24px;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* When sidebar is collapsed, reserve whitespace for the outline button */
.preview-doc-main.has-outline-fab .preview-doc-body{
    padding-left: 64px;  /* 与顶部标题行保持一致 */
    padding-right: 24px; /* 右侧与顶部一致，保证“下载Excel”对齐表格右边 */
    padding-top: 0;
}

/* 仅人事（renshi）工作台 intro：左对齐与收紧左侧留白；其它工种仍用默认 padding 与 .wb 居中 */
.preview-doc-main.hr-renshi-wb-layout .preview-main-head {
    padding: 0 24px 0 12px;
}
.preview-doc-main.hr-renshi-wb-layout .preview-doc-body {
    padding: 0 24px 24px 12px;
}
.preview-doc-main.hr-renshi-wb-layout .preview-doc-body .wb{
    margin: 0;
    margin-right: auto;
}

/* In doc mode, content cards should look flat (like viewer) */
.preview-content.preview-mode-doc .content-card{
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}

/* Right workbench (intro) redesign */
.preview-doc-body .wb{
    max-width: 920px;
    margin: 0 auto;
}
.preview-doc-body .wb-head{
    display:flex;
    align-items:center;
    gap: 14px;
    margin: 8px 0 18px;
}
.preview-doc-body .wb-avatar{
    width: 44px;
    height: 44px;
    border-radius: 14px;
    object-fit: cover;
    border: 1px solid rgba(222,224,227,0.9);
}
.preview-doc-body .wb-title{
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}
.preview-doc-body .wb-desc{
    margin-top: 4px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}
.preview-doc-body .wb-section-title{
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 12px 0 10px;
}
.preview-doc-body .wb-fn-list{
    display:flex;
    flex-direction: column;
    gap: 10px;
}
.preview-doc-body .wb-fn-row.function-card{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(222,224,227,0.9);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
}
.preview-doc-body .wb-fn-row.function-card:hover{
    border-color: rgba(22,93,255,0.35);
    box-shadow: 0 6px 18px rgba(22,93,255,0.08);
}
.preview-doc-body .wb-fn-main{
    min-width: 0;
    flex: 1;
}
.preview-doc-body .wb-fn-title{
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    display:flex;
    align-items:center;
    gap: 8px;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.preview-doc-body .wb-fn-desc{
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
    overflow: hidden;
    line-clamp: 2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.preview-doc-body .wb-fn-cta{
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-color);
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(22,93,255,0.08);
    border: 1px solid rgba(22,93,255,0.18);
}
.preview-doc-body .wb-fn-row.function-card.disabled{
    opacity: 0.6;
    cursor: not-allowed;
}

/* Quote popover */
.quote-popover{
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    padding: 6px;
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(222,224,227,0.95);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.14);
    backdrop-filter: blur(10px);
}

/* Compare popover */
.compare-popover{
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    padding: 6px;
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(222,224,227,0.95);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.14);
    backdrop-filter: blur(10px);
}
.compare-btn{
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(222,224,227,0.9);
    background: #fff;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.compare-btn:hover{
    background: #f7f8fa;
}

/* Compare area under main table */
.preview-compare-area{
    margin-top: 18px;
    padding-top: 10px;
}
.preview-compare-head{
    font-size: 13px;
    font-weight: 800;
    color: var(--text-secondary);
    margin: 0 0 10px;
}
.preview-compare-item{
    border: 1px solid rgba(222,224,227,0.9);
    border-radius: 12px;
    padding: 12px 12px 4px;
    background: #fff;
    margin-bottom: 12px;
}
.preview-compare-item-head{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.preview-compare-item-head .t{
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.preview-compare-item-head .x{
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}
.preview-compare-item-head .x:hover{
    background: rgba(0,0,0,0.04);
    color: var(--text-primary);
}

.quote-btn{
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(222,224,227,0.9);
    background: #fff;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.quote-btn:hover{
    background: #f7f8fa;
}

/* Citations list */
.cite-list{
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cite-item{
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}
.cite-head{
    display:flex;
    align-items:center;
    gap:10px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(222,224,227,0.7);
    background: #fafbfc;
}
.cite-badge{
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-color);
    background: rgba(22,93,255,0.08);
    border: 1px solid rgba(22,93,255,0.18);
    padding: 2px 8px;
    border-radius: 999px;
}
.cite-meta{
    font-size: 12px;
    color: var(--text-secondary);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cite-remove{
    width: 28px;
    height: 28px;
    border: 1px solid rgba(222,224,227,0.9);
    background: #fff;
    border-radius: 10px;
    cursor: pointer;
    color: var(--text-secondary);
}
.cite-remove:hover{
    background:#f2f3f5;
    color: var(--text-primary);
}
.cite-body{
    padding: 12px;
}
.cite-text{
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    display: block;
    overflow: hidden;
}
/* 引用中的代码块 */
.cite-code{
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
    overflow-x: auto;
    max-width: 100%;
}
.cite-image{
    display:flex;
    flex-direction: column;
    gap: 10px;
}
.cite-thumb{
    width: 100%;
    max-width: 520px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    display:block;
}
.cite-caption{
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.empty-state {
    /* 让“引用为空/暂无内容”在面板里居中显示 */
    text-align: center;
    color: var(--text-secondary);
    width: 100%;
    max-width: 720px;
    margin: auto;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 0; /* 统一媒体/引用空态的垂直位置 */
}

.empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

/* Content Card Styles (for injected content) */
.content-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    width: 100%;
    max-width: 100%;
    padding: 24px;
    align-self: stretch; /* expand with preview width */
    overflow-x: hidden;
    overflow: hidden;
    box-sizing: border-box;
}

/* Preview panel:
   - 表格/当前预览：不做内部滚动，不裁剪（完整展示，超出屏幕由右侧整体滚动查看）
   - 已保存的预览：独立滚动，不影响表格宽度/布局
*/
.preview-panel{
    position: relative;
}
.preview-selected-area{
    /* 表格需要完整展示，但文本内容需要限制宽度 */
    overflow: visible;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}
/* 引用内容需要限制溢出 */
.preview-selected-area > .content-card{
    overflow-x: hidden;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}
.preview-saved-area{
    border-top: 1px solid var(--border-color);
    padding-top: 16px;
    margin-top: 16px;
    /* 独立滚动区域 */
    max-height: 42vh;
    overflow-y: auto;
}

/* (removed) older saved-sidebar card styles (replaced by doc viewer sidebar) */

/* Right panel: saved previews list should never overflow horizontally */
.preview-saved-list{
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-x: hidden;
}
.preview-saved-list .file-card-placeholder{
    width: 100%;
    max-width: 100% !important;
    margin: 0 !important;
}
.preview-saved-list .file-card-info{
    min-width: 0;
}
.preview-saved-list .file-card-title,
.preview-saved-list .file-card-meta{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.content-card h3 {
    margin-bottom: 16px;
    font-size: 18px;
}

table.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

table.data-table th, table.data-table td {
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    text-align: left;
    font-size: 12px;
    /* 窄宽度时自动换行：保证文字不被截断/省略 */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

table.data-table th {
    background-color: #f8f9fb;
    font-weight: 600;
}

/* File Card Placeholder */
.file-card-placeholder {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #dee0e3;
    border-radius: 12px;
    margin: 12px 0;
    max-width: 320px;
    width: fit-content;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

/* Ensure file cards in message content don't cause overflow */
.message-content .file-card-placeholder {
    max-width: 100%;
    width: fit-content;
    min-width: 280px;
}

/* Fix for empty paragraphs or divs that might cause whitespace */
.message-content p:empty,
.message-content div:empty {
    display: none;
}

/* Ensure message content doesn't have excessive whitespace */
.message-content {
    white-space: normal;
}

.file-card-placeholder:hover {
    border-color: var(--accent-color);
    box-shadow: 0 4px 12px rgba(22, 93, 255, 0.1);
}

/* 行政：会议室查询卡片（点击复制；无会务 API 时不展示实时占用） */
.msg-xingzheng-meeting-card--interactive:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}
.msg-xingzheng-meeting-card--interactive.is-disabled {
    cursor: not-allowed;
    opacity: 0.88;
}
.msg-xingzheng-collect-card--interactive:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.file-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #e8f3ff;
    color: #165dff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.file-card-info {
    flex: 1;
    overflow: hidden;
}

.file-card-title {
    font-size: 14px;
    font-weight: 500;
    color: #1d2129;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-card-meta {
    font-size: 12px;
    color: #86909c;
}

.management-badge {
    color: #f53f3f;
    font-size: 10px;
    margin-left: 4px;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.management-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.management-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
}

.management-content {
    position: relative;
    width: 90%;
    max-width: 800px;
    max-height: 85vh;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.management-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    background: #fafbfc;
}

.management-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.management-user-badge {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    background: #f2f3f5;
    padding: 4px 10px;
    border-radius: 999px;
}

.management-close-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 20px;
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.management-close-btn:hover {
    background: #f2f3f5;
    color: var(--text-primary);
}

.management-logout-btn{
    height: 32px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid rgba(222,224,227,0.9);
    background: #fff;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.management-logout-btn:hover{
    background:#f7f8fa;
    color: var(--text-primary);
    border-color:#d5d7dc;
}

/* =============================================
   Auth Panel (登录)
   ============================================= */
.auth-locked .app-container{
    pointer-events: none;
    user-select: none;
    filter: blur(1px);
}

.auth-panel{
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: none;
    align-items: center;
    justify-content: center;
}

.auth-panel.active{
    display: flex;
}

.auth-overlay{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(6px);
}

/* Hide overlay when using full-screen split layout */
.auth-panel:has(.auth-split) .auth-overlay{
    display: none;
}

.auth-content{
    position: relative;
    width: min(520px, calc(100vw - 40px));
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.22);
    border: 1px solid rgba(222,224,227,0.9);
    overflow: hidden;
}

/* Split layout for server auth (left image + right form) — full screen */
.auth-content:has(.auth-split){
    width: 100vw;
    height: 100vh;
    max-height: none;
    border-radius: 0;
    border: none;
    box-shadow: none;
}

.auth-split{
    display: flex;
    height: 100vh;
    gap: 0;
}

.auth-split-left{
    flex: 0 0 65%;
    position: relative;
    background: #000;
    overflow: hidden;
    margin-right: -1px;
}

.auth-split-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    inset: 0;
}

.auth-split-video{
    object-fit: cover;
    z-index: 0;
}

.auth-split-left-overlay{
    display: none;
}

.auth-split-right{
    flex: 0 0 35%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    overflow-y: auto;
}

.auth-split-right-inner{
    width: 100%;
    max-width: 360px;
    padding: 40px 32px;
}

.auth-split-right-inner .auth-header{
    border-bottom: none;
    background: transparent;
    padding: 0 0 20px 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.auth-split-right-inner .auth-title{
    font-size: 22px;
}

.auth-subtitle{
    font-size: 13px;
    color: var(--text-secondary);
}

.auth-split-right-inner .auth-body{
    padding: 0;
}

.auth-header{
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-color);
    background: #fafbfc;
    display:flex;
    align-items:center;
    justify-content: space-between;
}

.auth-title{
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    display:flex;
    align-items:center;
    gap: 10px;
}

.auth-body{
    padding: 18px;
    display:flex;
    flex-direction: column;
    gap: 12px;
}

.auth-hint{
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.6;
    background: #f7f8fa;
    border: 1px solid rgba(222,224,227,0.7);
    border-radius: 12px;
    padding: 10px 12px;
}

.auth-field{
    display:flex;
    flex-direction: column;
    gap: 6px;
}

.auth-label{
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.auth-input{
    height: 38px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    padding: 0 12px;
    outline: none;
    font-size: 14px;
}

.auth-input:focus{
    border-color: var(--accent-color);
}

.auth-actions{
    margin-top: 6px;
    display:flex;
    gap: 10px;
    justify-content: flex-end;
}

.auth-btn{
    height: 36px;
    border-radius: 12px;
    border: 1px solid rgba(222,224,227,0.9);
    background: #fff;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    padding: 0 14px;
}

.auth-btn.primary{
    background: var(--accent-color);
    color: #fff;
    border-color: transparent;
}

.auth-btn:disabled{
    opacity: 0.6;
    cursor: not-allowed;
}

.auth-tab-btn{
    flex: 1;
    height: 40px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: #fff;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.auth-tab-btn.active{
    background: var(--accent-color);
    color: #fff;
    border-color: transparent;
}
.auth-tab-btn:hover:not(.active){
    background: #f0f4ff;
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.management-tabs {
    display: flex;
    gap: 0;
    padding: 0 20px;
    border-bottom: 1px solid var(--border-color);
    background: #fff;
}

.management-tab {
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    transition: color 0.15s;
}

.management-tab:hover {
    color: var(--text-primary);
}

.management-tab.active {
    color: var(--accent-color);
}

.management-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent-color);
}

.workspace-panel-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 70vh;
}

.workspace-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.workspace-path {
    font-size: 12px;
    color: var(--text-secondary);
    word-break: break-all;
}

.workspace-list {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: auto;
    flex: 1;
    background: #fff;
}

.workspace-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px dashed var(--border-color);
}

.workspace-row:last-child {
    border-bottom: none;
}

.workspace-row-main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.workspace-row-name {
    font-size: 13px;
    color: var(--text-primary);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.workspace-row-meta {
    font-size: 11px;
    color: var(--text-secondary);
}

.workspace-link-btn {
    border: 1px solid var(--border-color);
    background: #fff;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
}

.management-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* Requests Section */
.requests-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.requests-actions h4,
.requests-list-section h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.requests-list-section h4 .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #f53f3f;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    margin-left: 8px;
}

.request-action-btns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.request-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.request-action-btn:hover {
    border-color: var(--accent-color);
    background: #f7f9ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.request-action-btn .btn-icon {
    font-size: 24px;
}

.request-action-btn .btn-text {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    text-align: center;
}

.requests-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.request-item {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px 16px;
    transition: border-color 0.15s;
}

.request-item:hover {
    border-color: #d5d7dc;
}

.request-item.status-approved {
    border-left: 3px solid #00b42a;
}

.request-item.status-rejected {
    border-left: 3px solid #f53f3f;
}

.request-item.status-pending {
    border-left: 3px solid #ff7d00;
}

.request-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.request-type {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.request-status {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
}

.request-status.status-pending {
    background: #fff7e8;
    color: #ff7d00;
}

.request-status.status-approved {
    background: #e8ffea;
    color: #00b42a;
}

.request-status.status-rejected {
    background: #ffece8;
    color: #f53f3f;
}

.request-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: var(--text-secondary);
}

.request-from {
    font-weight: 500;
}

.request-detail {
    color: var(--text-primary);
}

.request-time {
    font-size: 12px;
    color: #86909c;
}

.request-decision {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border-color);
    font-size: 12px;
    color: #86909c;
}

.request-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.approve-btn, .reject-btn {
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 500;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}

.approve-btn {
    background: #00b42a;
    color: #fff;
}

.approve-btn:hover {
    background: #009a23;
}

.reject-btn {
    background: #fff;
    color: #f53f3f;
    border: 1px solid #f53f3f;
}

.reject-btn:hover {
    background: #ffece8;
}

/* Audit Section */
.audit-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.audit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.audit-header h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.audit-header .scope-hint {
    font-weight: 400;
    color: var(--text-secondary);
    font-size: 12px;
}

.audit-count {
    font-size: 12px;
    color: var(--text-secondary);
}

.audit-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.audit-item {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 14px;
    transition: border-color 0.15s;
}

.audit-item:hover {
    border-color: #d5d7dc;
}

.audit-item-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.audit-action {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-color);
    background: rgba(22, 93, 255, 0.08);
    padding: 2px 8px;
    border-radius: 6px;
}

.audit-resource {
    font-size: 12px;
    color: var(--text-secondary);
    background: #f2f3f5;
    padding: 2px 8px;
    border-radius: 6px;
}

.audit-time {
    font-size: 12px;
    color: #86909c;
    margin-left: auto;
}

.audit-item-body {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    font-size: 12px;
    color: var(--text-secondary);
}

.audit-actor {
    font-weight: 500;
}

.audit-meta {
    color: #86909c;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.empty-hint {
    padding: 24px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
    background: #f7f8fa;
    border-radius: 10px;
}

/* Responsive for smaller screens */
@media (max-width: 768px) {
    .request-action-btns {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .management-content {
        width: 95%;
        max-height: 90vh;
    }
}

/* =============================================
   Markdown Styles within Chat
   ============================================= */
.message-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0;
    font-size: 13px;
    /* 
       Force table within message bubble to not overflow horizontally 
       if too wide, use horizontal scroll or let it wrap. 
       Usually `table-layout: fixed;` helps or `display: block; overflow-x: auto;`
       But message bubbles are flex items.
    */
    display: block;
    overflow-x: auto;
    max-width: 100%;
}

.message-content table th,
.message-content table td {
    border: 1px solid var(--border-color);
    padding: 6px 10px;
    text-align: left;
}

.message-content table th {
    background-color: #f2f3f5;
    font-weight: 600;
}

/* 「载入预览」按钮 —— 出现在消息气泡里的原始表格下方 */
.table-load-preview-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 4px 0 10px 0;
    padding: 4px 12px;
    font-size: 12px;
    line-height: 1.6;
    color: #1677ff;
    background: #e6f4ff;
    border: 1px solid #91caff;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    user-select: none;
}
.table-load-preview-btn:hover {
    background: #bae0ff;
    border-color: #4096ff;
}
.table-load-preview-btn:active {
    background: #91caff;
}

.message-content ul, .message-content ol {
    padding-left: 20px;
    margin: 8px 0;
}

.message-content p {
    margin-bottom: 8px;
}

.message-content p:last-child {
    margin-bottom: 0;
}

.message-content code {
    background: rgba(0,0,0,0.06);
    padding: 2px 4px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.9em;
}

.message-content pre {
    background: #f5f7fa;
    padding: 10px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 8px 0;
    max-width: 100%;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-word;
}

.message-content pre code {
    background: none;
    padding: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.message-content h1, .message-content h2, .message-content h3, .message-content h4 {
    margin-top: 12px;
    margin-bottom: 8px;
    font-weight: 600;
}

.message-content blockquote {
    border-left: 3px solid rgba(0, 0, 0, 0.15);
    margin: 8px 0;
    padding: 4px 12px;
    color: #666;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 0 6px 6px 0;
}

.message-content a {
    color: #165dff;
    text-decoration: none;
}

.message-content a:hover {
    text-decoration: underline;
}

.message-content hr {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin: 10px 0;
}

.message-content img {
    max-width: 100%;
    border-radius: 8px;
    margin: 4px 0;
}

/* =============================================
   用户消息气泡中的 Markdown 元素样式适配
   ============================================= */
.message.user .message-content code {
    background: rgba(0, 0, 0, 0.08);
}

.message.user .message-content pre {
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.message.user .message-content blockquote {
    border-left: 3px solid rgba(0, 0, 0, 0.2);
    margin: 8px 0;
    padding: 4px 12px;
    color: #555;
}

.message.user .message-content a {
    color: #1a56db;
    text-decoration: underline;
}

.message.user .message-content a:hover {
    color: #1041a3;
}

.message.user .message-content table {
    border-collapse: collapse;
    margin: 8px 0;
    font-size: 12px;
    width: 100%;
}

.message.user .message-content table th,
.message.user .message-content table td {
    border: 1px solid rgba(0, 0, 0, 0.12);
    padding: 6px 10px;
    text-align: left;
}

.message.user .message-content table th {
    background: rgba(0, 0, 0, 0.05);
    font-weight: 600;
}

.message.user .message-content img {
    max-width: 100%;
    border-radius: 8px;
    margin: 4px 0;
}

.message.user .message-content hr {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    margin: 10px 0;
}

/* =============================================
   File Panel (右侧"文件"标签页)
   ============================================= */
.fp-editor-wrap,
.fp-viewer-wrap {
    width: 100%;
    height: 100%;
    min-height: 300px;
    display: flex;
    flex-direction: column;
}

.fp-editor {
    width: 100%;
    flex: 1;
    min-height: 300px;
    padding: 14px 16px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-primary, #1a202c);
    background: #fff;
    resize: vertical;
    outline: none;
    tab-size: 4;
    white-space: pre;
    overflow: auto;
    transition: border-color 0.2s;
}
.fp-editor:focus {
    border-color: var(--accent-color, #4a6cf7);
    box-shadow: 0 0 0 2px rgba(74, 108, 247, 0.1);
}

.fp-viewer {
    width: 100%;
    padding: 14px 16px;
    margin: 0;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-primary, #1a202c);
    background: #f8f9fb;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: auto;
    max-height: calc(100vh - 200px);
}

.fp-binary-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}
.fp-binary-icon {
    font-size: 56px;
    margin-bottom: 16px;
}
.fp-binary-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary, #1a202c);
    margin-bottom: 6px;
    word-break: break-all;
}
.fp-binary-size {
    font-size: 13px;
    color: var(--text-secondary, #718096);
}

/* HTML 渲染查看器 (DOCX / Excel) — 居中页面布局 */
.fp-html-viewer {
    max-width: 780px;
    margin: 24px auto;    /* 水平居中 */
    padding: 40px 50px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-primary, #1a202c);
    background: #fff;
    box-sizing: border-box;
    overflow: visible;
}
.fp-html-viewer h1, .fp-html-viewer h2, .fp-html-viewer h3, .fp-html-viewer h4 {
    margin: 16px 0 8px;
    font-weight: 600;
}
.fp-html-viewer p { margin: 0 0 10px; }
.fp-html-viewer ul, .fp-html-viewer ol { padding-left: 20px; margin: 8px 0; }
.fp-html-viewer table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13px; }
.fp-html-viewer table th, .fp-html-viewer table td {
    border: 1px solid var(--border-color, #e2e8f0);
    padding: 6px 10px;
    text-align: left;
}
.fp-html-viewer table th { background: #f2f3f5; font-weight: 600; }
.fp-html-viewer table tr:nth-child(even) { background: #f8f9fb; }
.fp-html-viewer table tr:hover { background: #eef2ff; }
.fp-html-viewer img { max-width: 100%; height: auto; border-radius: 4px; margin: 8px 0; }

/* ========== 电子表格模式 (Excel) ========== */
.fp-spreadsheet {
    overflow: auto;
    width: 100%;
    height: 100%;
    padding: 0;
    font-size: 13px;
    line-height: 1.4;
}
.fp-spreadsheet table {
    border-collapse: collapse;
    min-width: 100%;
    table-layout: auto;
}
.fp-spreadsheet td,
.fp-spreadsheet th {
    border: 1px solid #d0d3d9;
    padding: 4px 8px;
    white-space: pre-wrap;       /* 允许换行 */
    word-break: break-word;
    min-width: 60px;
    vertical-align: middle;
    font-size: 13px;
}
.fp-spreadsheet td[contenteditable] {
    cursor: cell;
    outline: none;
}
/* 选中单元格 — Excel 蓝色边框 */
.fp-spreadsheet td.fp-ss-active,
.fp-spreadsheet th.fp-ss-active {
    outline: 2px solid #1a73e8;
    outline-offset: -1px;
    background: #e8f0fe;
    z-index: 1;
    position: relative;
}
/* 列头 A B C */
.fp-ss-colheader-row {
    position: sticky;
    top: 0;
    z-index: 3;
}
.fp-ss-colheader,
.fp-ss-corner {
    background: #f0f1f3 !important;
    color: #5f6368;
    font-weight: 600;
    font-size: 12px;
    text-align: center;
    padding: 3px 8px;
    border: 1px solid #d0d3d9;
    position: sticky;
    top: 0;
    user-select: none;
    cursor: default;
}
.fp-ss-corner {
    width: 40px;
    min-width: 40px;
    position: sticky;
    left: 0;
    z-index: 4;
}
/* 行号 1 2 3 */
.fp-ss-rowheader {
    background: #f0f1f3 !important;
    color: #5f6368;
    font-weight: 500;
    font-size: 12px;
    text-align: center;
    padding: 3px 6px;
    border: 1px solid #d0d3d9;
    width: 40px;
    min-width: 40px;
    position: sticky;
    left: 0;
    z-index: 2;
    user-select: none;
    cursor: default;
}
/* 行号/列头不可编辑（contenteditable 需在 HTML 属性上设置） */

/* 右键菜单 */
.fp-ss-ctx-menu {
    position: absolute;
    z-index: 100;
    background: #fff;
    border: 1px solid #d0d3d9;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.14);
    padding: 4px 0;
    min-width: 150px;
    font-size: 13px;
    color: #333;
}
.fp-ss-ctx-item {
    padding: 7px 16px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.1s;
}
.fp-ss-ctx-item:hover {
    background: #e8f0fe;
    color: #1a73e8;
}
.fp-ss-ctx-danger {
    color: #d93025;
}
.fp-ss-ctx-danger:hover {
    background: #fce8e6;
    color: #d93025;
}
.fp-ss-ctx-sep {
    height: 1px;
    background: #e8eaed;
    margin: 4px 8px;
}

/* HTML 编辑模式 */
.fp-html-viewer.fp-html-editing {
    border: 2px solid var(--accent-color, #4a6cf7);
    border-radius: 8px;
    outline: none;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.1);
    cursor: text;
}
.fp-html-viewer.fp-html-editing:focus {
    box-shadow: 0 0 0 4px rgba(74, 108, 247, 0.18);
}

/* PPTX 全屏查看器 */
.preview-doc-main.fp-pptx-mode {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: visible;
}
.fp-pptx-viewer {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0;
    background: #fff;
}
.fp-pptx-slide {
    position: relative;
    border-bottom: 1px solid #e8e8e8;
}
.fp-pptx-slide:last-child {
    border-bottom: none;
}
.fp-pptx-slide-num {
    position: absolute;
    top: 6px;
    left: 6px;
    background: rgba(0,0,0,0.45);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    z-index: 1;
    line-height: 1.5;
}
.fp-pptx-slide-images {
    line-height: 0;
}
.fp-pptx-slide-images img {
    width: 100%;
    height: auto;
    display: block;
}
.fp-pptx-slide-text {
    padding: 8px 14px;
    font-size: 13px;
    line-height: 1.6;
    color: #1a202c;
    background: #fafafa;
    border-top: 1px solid #e8e8e8;
}
.fp-pptx-slide-text p {
    margin: 0 0 2px;
}
.fp-pptx-slide-empty {
    padding: 30px 20px;
    text-align: center;
    font-size: 13px;
    color: #a0aec0;
    font-style: italic;
}
/* 复用 PDF 的侧边栏浮动按钮 */
.preview-doc-main.fp-pptx-mode .fp-pdf-sidebar-fab {
    top: 8px;
}
.preview-doc-main.fp-pptx-mode.has-outline-fab .fp-pdf-sidebar-fab {
    opacity: 0.7;
}
.preview-doc-main.fp-pptx-mode.has-outline-fab:hover .fp-pdf-sidebar-fab {
    opacity: 1;
}

/* 图片预览 */
.fp-image-viewer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: auto;
    max-height: calc(100vh - 160px);
    background: #f8f9fb;
}
.fp-image-viewer img {
    max-width: 100%;
    max-height: calc(100vh - 200px);
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

/* PDF 全屏展示 — 无头部栏，工具栏顶置 */
.preview-doc-main.fp-pdf-mode {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: visible; /* 覆盖父级 hidden，确保滚动条可见 */
}
.fp-pdf-fullscreen {
    width: 100%;
    height: 100%;
    flex: 1;
    min-height: 0;
    border: none;
    background: #525659;
}
/* 侧边栏展开按钮（悬浮在 PDF 工具栏下方，避免与 PDF 自带按钮重叠） */
.fp-pdf-sidebar-fab {
    position: absolute;
    top: 44px;
    left: 6px;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-secondary, #718096);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s;
    z-index: 5;
}
/* 仅在侧边栏收起时显示 */
.preview-doc-main.fp-pdf-mode.has-outline-fab .fp-pdf-sidebar-fab {
    opacity: 0.7;
}
.preview-doc-main.fp-pdf-mode.has-outline-fab:hover .fp-pdf-sidebar-fab {
    opacity: 1;
}
.fp-pdf-sidebar-fab:hover {
    background: rgba(255,255,255,0.85);
    color: var(--accent-color, #4a6cf7);
}

/* ========== PDF.js 查看器（Linux 兼容） ========== */
.fp-pdfjs-viewer {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #e8e8e8;
}
.fp-pdfjs-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #323639;
    color: #ccc;
    font-size: 13px;
    flex-shrink: 0;
    z-index: 2;
}
.fp-pdfjs-toolbar button {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: #ddd;
    border-radius: 4px;
    width: 28px;
    height: 28px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s;
}
.fp-pdfjs-toolbar button:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
}
.fp-pdfjs-pageinfo {
    min-width: 60px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.fp-pdfjs-zoom {
    min-width: 42px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.fp-pdfjs-pages {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
}
.fp-pdfjs-pages canvas {
    display: block;
    box-shadow: 0 1px 6px rgba(0,0,0,0.18);
    background: #fff;
    max-width: 100%;
}

/* ============================================
   Kling Video Studio (视频工坊) Styles
   ============================================ */

/* ═══════════════════════════════════════════════════════
   Kling Video Editor — Embedded Panel (.ke-*)
   Vertical layout inside preview-section tab
   ═══════════════════════════════════════════════════════ */
.ke-panel { display:flex; flex-direction:column; gap:0; color:#2d3436; font-family:inherit; height:100%; width:100%; overflow-y:auto; overflow-x:hidden; background:#F0FAF5; border-radius:0; }
.ke-panel::-webkit-scrollbar { width:4px; }
.ke-panel::-webkit-scrollbar-thumb { background:rgba(0,0,0,.12); border-radius:2px; }

/* When video tab is active, remove padding and set dark bg */
.preview-content.ke-active { padding:0 !important; background:#FFFFFF !important; flex-direction:column !important; }

/* Top section: sidebar + controls side by side */
.ke-top { display:flex; flex-direction:row; flex-shrink:0; border-bottom:none; overflow:hidden; transition:max-height .3s ease, opacity .2s ease; }
.ke-top.ke-collapsed { max-height:0 !important; opacity:0; pointer-events:none; }
.ke-grid-tabs.ke-collapsed { max-height:0 !important; opacity:0; pointer-events:none; overflow:hidden; }

/* Collapse toggle button (inside results header) */
.ke-collapse-toggle { display:flex; align-items:center; justify-content:center; width:18px; height:18px; border:1px solid rgba(0,0,0,.15); background:transparent; color:rgba(0,0,0,.6); cursor:pointer; transition:all .2s; padding:0; border-radius:4px; flex-shrink:0; }
.ke-collapse-toggle:hover { color:#333; background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.25); }
.ke-collapse-arrow { transition:transform .3s ease; }
.ke-collapse-toggle.ke-collapsed .ke-collapse-arrow { transform:rotate(180deg); }

/* Sidebar: vertical tabs on the left inside top section */
/* Grid layout: 2 columns × 3 rows — ensures horizontal alignment */
.ke-grid { display:grid; grid-template-columns:1fr 75px; grid-template-rows:auto auto 1fr; flex:1; min-height:0; overflow:hidden; }
.ke-grid-controls { grid-column:1; grid-row:1; overflow:hidden; }
.ke-grid-tabs { grid-column:2; grid-row:1; background:#E5F2EB; border-left:1px solid rgba(0,0,0,.06); display:flex; flex-direction:column; align-items:center; padding:6px 4px; box-sizing:border-box; }
.ke-grid-header { grid-column:1 / -1; grid-row:2; }
.ke-grid-tasks { grid-column:1; grid-row:3; overflow-y:auto; }
.ke-grid-history { grid-column:2; grid-row:3; border-left:1px solid rgba(0,0,0,.06); background:#E5F2EB; }
.ke-sidebar-tabs { display:flex; flex-direction:column; gap:2px; width:100%; }


/* History panel (right side of results) */
.ke-history-panel { flex:1; overflow-y:auto; overflow-x:hidden; padding:6px; box-sizing:border-box; display:flex; flex-direction:column; gap:6px; scrollbar-width:thin; scrollbar-color:rgba(0,0,0,.15) transparent; }
.ke-history-panel::-webkit-scrollbar { width:3px; }
.ke-history-panel::-webkit-scrollbar-track { background:transparent; }
.ke-history-panel::-webkit-scrollbar-thumb { background:rgba(0,0,0,.15); border-radius:3px; }
.ke-history-empty { font-size:9px; color:#999; text-align:center; padding:8px 0; }
.ke-history-item { position:relative; width:100%; border-radius:6px; overflow:hidden; cursor:pointer; flex-shrink:0; transition:box-shadow .2s; }
.ke-history-item:hover { box-shadow:0 0 0 2px rgba(0,212,170,.6); }
.ke-history-item video { width:100%; aspect-ratio:16/9; object-fit:contain; background:#1a1a2e; display:block; pointer-events:none; min-height:42px; }
.ke-history-item video::-webkit-media-controls { display:none !important; }
.ke-history-item video::-webkit-media-controls-enclosure { display:none !important; }

/* History click highlight */
.ke-task-video.ke-highlight { box-shadow:0 0 0 2px rgba(0,212,170,.7); border-radius:5px; animation:ke-flash .75s ease 2; }
@keyframes ke-flash { 0%,100%{ box-shadow:0 0 0 2px rgba(0,212,170,.7); } 50%{ box-shadow:0 0 8px 3px rgba(0,212,170,.4); } }
.ke-tab { display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 4px; border:none; background:transparent; color:#888; font-size:9px; border-radius:8px; cursor:pointer; transition:all .2s; font-weight:500; width:100%; box-sizing:border-box; }
.ke-tab svg { flex-shrink:0; }
.ke-tab span { line-height:1; }
.ke-tab:hover { color:#555; background:rgba(0,0,0,.06); }
.ke-tab.active { background:rgba(0,180,148,.15); color:#00a080; }

/* Controls area: right of sidebar in top section */
.ke-controls { display:flex; flex-direction:column; flex:1; min-width:0; overflow-y:auto; overflow-x:hidden; }
.ke-controls::-webkit-scrollbar { width:4px; }
.ke-controls::-webkit-scrollbar-thumb { background:rgba(0,0,0,.12); border-radius:2px; }

.ke-icon-btn { background:none; border:none; color:#777; cursor:pointer; padding:4px; border-radius:5px; transition:all .2s; display:flex; align-items:center; }
.ke-icon-btn:hover { color:#333; background:rgba(0,0,0,.06); }

/* Model selector */
.ke-model-row { display:flex; align-items:center; gap:8px; padding:8px 10px; border-bottom:1px solid rgba(0,0,0,.04); background:#E5F2EB; }
.ke-model-badge { background:linear-gradient(135deg,#00d4aa,#00b894); color:#fff; font-weight:700; font-size:10px; padding:2px 6px; border-radius:4px; }
.ke-model-select { flex:1; background:#fff; border:1px solid rgba(0,0,0,.12); color:#333; padding:5px 8px; border-radius:7px; font-size:11px; cursor:pointer; outline:none; }
.ke-model-select:focus { border-color:rgba(0,180,148,.5); }
.ke-extend-model-tip { font-size:9px; color:#e67e22; white-space:nowrap; opacity:.85; }
.ke-model-select option { background:#fff; color:#333; }

/* Tab body */
.ke-tab-body { padding:8px 10px; background:#F0FAF5; }

/* Two-column layout for t2v/i2v tab */
.ke-tab-columns { display:flex; flex-direction:row; gap:10px; }
.ke-col-left { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.ke-col-right { flex:0 0 auto; width:220px; min-width:180px; display:flex; flex-direction:column; gap:6px; }
.ke-col-left .ke-field { margin-bottom:0; }
.ke-col-left .ke-model-row { padding:0 0 4px 0; border-bottom:none; background:transparent; }
.ke-col-right .ke-params { margin-bottom:0; }
.ke-col-right .ke-collapse { margin-bottom:0; }
.ke-col-right .ke-gen-bar { margin-top:auto; padding:0; border-top:none; background:transparent; }

/* Extend & Lipsync tabs — side-by-side row */
.ke-extend-row { display:flex; flex-direction:row; gap:10px; align-items:stretch; }
.ke-extend-left, .ke-extend-right { flex:1; min-width:0; display:flex; flex-direction:column; }
.ke-small-label { font-size:11px; color:#777; line-height:16px; height:16px; margin-bottom:4px; flex-shrink:0; }
.ke-extend-row .ke-source-slot { flex-direction:column; align-items:center; justify-content:center; flex:1; margin-top:0; }
.ke-extend-row .ke-source-preview { flex:1; }
.ke-extend-row .ke-source-preview video { max-height:160px; object-fit:contain; }
.ke-extend-textarea { width:100%; resize:vertical; background:#fff; border:1px dashed rgba(0,0,0,.15); border-radius:7px; color:#333; padding:10px; font-size:12px; box-sizing:border-box; flex:1; margin:0; }
.ke-extend-textarea:focus { border-color:rgba(0,180,148,.5); outline:none; }
.ke-extend-right .ke-source-slot { flex:1; margin-top:0; flex-direction:column; align-items:center; justify-content:center; }

/* Multi-image grid */
.ke-multi-images { display:flex; flex-wrap:wrap; gap:6px; flex:1; align-content:flex-start; }
.ke-multi-add { width:70px; height:70px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border:1px dashed rgba(0,0,0,.15); border-radius:6px; cursor:pointer; color:#999; font-size:9px; transition:all .2s; background:rgba(0,0,0,.02); }
.ke-multi-add:hover { border-color:rgba(0,180,148,.5); color:#00a080; background:rgba(0,180,148,.05); }
.ke-multi-thumb { position:relative; width:70px; height:70px; border-radius:6px; overflow:hidden; border:1px solid rgba(0,0,0,.1); }
.ke-multi-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.ke-multi-remove { position:absolute; top:2px; right:2px; width:16px; height:16px; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; border:none; cursor:pointer; font-size:10px; display:flex; align-items:center; justify-content:center; line-height:1; padding:0; opacity:0; transition:opacity .15s; }
.ke-multi-thumb:hover .ke-multi-remove { opacity:1; }

/* Fields */
.ke-field { margin-bottom:6px; }
.ke-field label { display:block; font-size:11px; color:#666; margin-bottom:4px; }
.ke-field textarea { width:100%; background:#fff; border:1px solid rgba(0,0,0,.12); color:#333; padding:8px; border-radius:7px; font-size:11px; resize:vertical; outline:none; font-family:inherit; line-height:1.5; box-sizing:border-box; }
.ke-field textarea:focus { border-color:rgba(0,180,148,.5); }
.ke-field textarea::placeholder { color:#aaa; }

/* Collapse (details/summary) */
.ke-collapse { border:1px solid rgba(0,0,0,.08); border-radius:7px; margin-bottom:6px; overflow:hidden; }
.ke-collapse summary { padding:5px 8px; font-size:11px; color:#666; cursor:pointer; user-select:none; }
.ke-collapse textarea { width:100%; background:#fff; border:none; border-top:1px solid rgba(0,0,0,.06); color:#555; padding:6px 8px; font-size:11px; resize:vertical; min-height:32px; outline:none; font-family:inherit; box-sizing:border-box; }

/* Params */
.ke-params { padding:4px 0; display:flex; flex-direction:column; gap:8px; }
.ke-param-row { display:flex; gap:10px; }
.ke-param-group { flex:1; display:flex; flex-direction:column; gap:3px; }
.ke-param-label { font-size:10px; color:#666; }
.ke-toggle-group { display:flex; gap:2px; background:rgba(0,0,0,.04); border-radius:5px; padding:2px; }
.ke-toggle-btn { flex:1; padding:4px 6px; background:transparent; border:none; color:#888; font-size:10px; border-radius:4px; cursor:pointer; transition:all .2s; text-align:center; }
.ke-toggle-btn:hover { color:#555; }
.ke-toggle-btn.active { background:rgba(0,180,148,.15); color:#00a080; }
.ke-slider { width:100%; accent-color:#00a080; height:4px; }
.ke-slider-val { font-size:10px; color:#00a080; text-align:center; }

/* Camera */
.ke-camera-grid { display:flex; flex-wrap:wrap; gap:4px; padding:6px 0; }
.ke-camera-btn { padding:4px 8px; background:rgba(0,0,0,.03); border:1px solid rgba(0,0,0,.1); color:#777; font-size:10px; border-radius:4px; cursor:pointer; transition:all .2s; }
.ke-camera-btn:hover { border-color:rgba(0,180,148,.4); color:#555; }
.ke-camera-btn.active { background:rgba(0,180,148,.12); border-color:rgba(0,180,148,.4); color:#00a080; }

/* Image upload */
.ke-image-area { padding:6px 0; }
.ke-image-upload-zone { display:flex; align-items:center; gap:8px; justify-content:center; }
.ke-image-slot { width:100px; height:75px; border:2px dashed rgba(0,0,0,.15); border-radius:7px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s; position:relative; overflow:hidden; background:rgba(0,0,0,.02); }
.ke-image-slot:hover { border-color:rgba(0,180,148,.5); background:rgba(0,180,148,.05); }
.ke-image-slot.ke-slot-disabled { border-color:rgba(0,0,0,.06); background:rgba(0,0,0,.02); cursor:not-allowed; }
.ke-image-slot.ke-slot-disabled:hover { border-color:rgba(0,0,0,.06); background:rgba(0,0,0,.02); }
.ke-tail-disabled-tip { position:absolute; bottom:2px; left:0; right:0; text-align:center; font-size:8px; color:#f59e0b; line-height:1.2; pointer-events:none; }
.ke-image-placeholder { display:flex; flex-direction:column; align-items:center; gap:3px; color:#999; font-size:10px; }
.ke-image-placeholder svg { opacity:.5; }
.ke-image-preview { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:5px; }
.ke-image-remove { position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:50%; background:rgba(0,0,0,.7); color:#fff; border:none; cursor:pointer; font-size:12px; display:flex; align-items:center; justify-content:center; z-index:2; }
.ke-image-arrow { color:#bbb; flex-shrink:0; }

/* Source slots (extend/lipsync) */
.ke-source-slot { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px; background:rgba(0,0,0,.02); border:1px dashed rgba(0,0,0,.12); border-radius:7px; margin-top:4px; }
.ke-source-btn { padding:5px 12px; background:rgba(0,180,148,.1); border:1px solid rgba(0,180,148,.3); color:#00a080; font-size:11px; border-radius:5px; cursor:pointer; transition:all .2s; }
.ke-source-btn:hover { background:rgba(0,180,148,.2); }
.ke-hint { font-size:10px; color:#999; margin:0; }
.ke-source-preview { position:relative; margin-top:6px; border-radius:7px; overflow:hidden; background:#000; }
.ke-source-preview video { width:100%; max-height:100px; object-fit:cover; display:block; }
.ke-remove-btn { position:absolute; top:3px; right:3px; width:20px; height:20px; border-radius:50%; background:rgba(0,0,0,.7); color:#fff; border:none; cursor:pointer; font-size:13px; display:flex; align-items:center; justify-content:center; }
.ke-audio-info { display:flex; align-items:center; gap:8px; margin-top:6px; padding:6px 10px; background:rgba(0,0,0,.03); border-radius:5px; font-size:11px; color:#555; }

/* Generate bar */
.ke-gen-bar { display:flex; align-items:center; gap:6px; padding:8px 10px; border-top:1px solid rgba(0,0,0,.06); border-bottom:1px solid rgba(0,0,0,.06); flex-shrink:0; background:#E5F2EB; }
.ke-small-select { background:#fff; border:1px solid rgba(0,0,0,.12); color:#555; padding:3px 5px; border-radius:4px; font-size:10px; cursor:pointer; outline:none; }
.ke-small-select option { background:#fff; color:#333; }
.ke-gen-label { font-size:10px; color:#777; }
.ke-gen-btn { margin-left:auto; display:flex; align-items:center; gap:4px; padding:6px 16px; background:linear-gradient(135deg,#00d4aa,#00b894); color:#fff; border:none; border-radius:14px; font-size:12px; font-weight:600; cursor:pointer; transition:all .2s; }
.ke-gen-btn:hover { box-shadow:0 3px 12px rgba(0,180,148,.4); }
.ke-gen-btn:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; }

/* Results header */
.ke-results-header { display:flex; align-items:center; justify-content:center; padding:6px 10px; font-size:12px; color:#666; font-weight:500; border-bottom:1px solid rgba(0,0,0,.06); background:#E5F2EB; position:relative; }
.ke-results-header > span { margin-right:auto; }
.ke-results-header .he-header-actions { display:flex; align-items:center; gap:4px; margin-left:auto; }
.ke-results-header > .ke-icon-btn { margin-left:0; }
.ke-results-header > .ke-collapse-toggle { position:absolute; left:50%; transform:translateX(-50%); }

/* Task list */
.ke-task-list { padding:6px 10px; overflow-y:auto; flex:1; }
.ke-task-list::-webkit-scrollbar { width:3px; }
.ke-task-list::-webkit-scrollbar-thumb { background:rgba(0,0,0,.1); border-radius:2px; }
.ke-task-empty { font-size:11px; color:#999; text-align:center; padding:24px 0; }
.ke-task-item { padding:8px; margin-bottom:6px; background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:7px; }
.ke-task-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:3px; gap:4px; }
.ke-task-delete { background:none; border:none; color:#999; cursor:pointer; padding:2px; border-radius:4px; display:flex; align-items:center; transition:all .2s; flex-shrink:0; }
.ke-task-delete:hover { color:#f44336; background:rgba(244,67,54,.1); }
.ke-task-type { font-size:9px; color:#00a080; background:rgba(0,180,148,.1); padding:1px 5px; border-radius:3px; font-weight:500; }
.ke-task-status { font-size:9px; font-weight:500; }
.ke-task-status.succeed { color:#00a080; }
.ke-task-status.failed { color:#f44336; }
.ke-task-status.processing { color:#42a5f5; animation:ke-pulse 1.5s infinite; }
@keyframes ke-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.ke-task-prompt { font-size:10px; color:#777; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:4px; }
.ke-task-videos { display:flex; flex-wrap:wrap; gap:4px; }
.ke-task-video { position:relative; width:100%; border-radius:5px; overflow:hidden; background:#000; }
.ke-task-video video { width:100%; aspect-ratio:16/9; object-fit:contain; cursor:pointer; display:block; border-radius:4px; transition:box-shadow .2s; }
.ke-task-video video:hover { box-shadow:0 0 0 2px rgba(0,200,255,.5); }
.ke-task-video-actions { display:flex; gap:2px; padding:3px; background:rgba(0,0,0,.35); }
.ke-vid-btn { flex:1; padding:3px 0; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.2); color:#eee; font-size:10px; border-radius:3px; cursor:pointer; transition:all .15s; text-align:center; }
.ke-vid-btn:hover { background:rgba(255,255,255,.25); color:#fff; }
.ke-vid-btn[data-act="extend"] { color:#ffc107; border-color:rgba(255,193,7,.3); }
.ke-vid-btn[data-act="extend"]:hover { background:rgba(255,193,7,.15); }
.ke-vid-btn[data-act="lipsync"] { color:#e040fb; border-color:rgba(224,64,251,.3); }
.ke-vid-btn[data-act="lipsync"]:hover { background:rgba(224,64,251,.15); }

/* Settings Modal */
.ke-settings-modal { position:fixed; inset:0; z-index:10200; display:flex; align-items:center; justify-content:center; }
.ke-settings-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.7); }
.ke-settings-content { position:relative; z-index:1; background:#fff; border:1px solid rgba(0,0,0,.12); border-radius:12px; padding:20px; width:380px; max-width:90vw; box-shadow:0 8px 30px rgba(0,0,0,.15); }
.ke-settings-content h3 { font-size:14px; color:#333; margin:0 0 14px; }
.ke-settings-form { display:flex; flex-direction:column; gap:10px; }
.ke-form-group { display:flex; flex-direction:column; gap:3px; }
.ke-form-group label { font-size:11px; color:#666; }
.ke-form-group input, .ke-form-group select { background:#f8f9fa; border:1px solid rgba(0,0,0,.12); color:#333; padding:7px 9px; border-radius:6px; font-size:11px; outline:none; }
.ke-form-group input:focus, .ke-form-group select:focus { border-color:rgba(0,180,148,.5); }
.ke-form-group select option { background:#fff; }
.ke-form-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:4px; }
.ke-btn-secondary { padding:6px 16px; background:rgba(0,0,0,.04); border:1px solid rgba(0,0,0,.12); color:#666; border-radius:6px; font-size:11px; cursor:pointer; transition:all .2s; }
.ke-btn-secondary:hover { background:rgba(0,0,0,.08); }
.ke-btn-primary { padding:6px 16px; background:linear-gradient(135deg,#00d4aa,#00b894); border:none; color:#fff; border-radius:6px; font-size:11px; font-weight:600; cursor:pointer; transition:all .2s; }
.ke-btn-primary:hover { box-shadow:0 2px 12px rgba(0,180,148,.3); }

/* Video preview overlay */
.ke-video-overlay { position:fixed; inset:0; z-index:19000; display:flex; align-items:center; justify-content:center; }
.ke-video-overlay-bg { position:absolute; inset:0; background:rgba(0,0,0,.85); }
.ke-video-overlay-wrap { position:relative; max-width:90vw; max-height:85vh; z-index:1; }
.ke-video-overlay-player { max-width:90vw; max-height:85vh; border-radius:8px; background:#000; outline:none; box-shadow:0 8px 40px rgba(0,0,0,.6); }
.ke-video-overlay-close { position:absolute; top:-12px; right:-12px; width:28px; height:28px; border-radius:50%; border:none; background:rgba(255,255,255,.15); color:#fff; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; backdrop-filter:blur(4px); }
.ke-video-overlay-close:hover { background:rgba(255,255,255,.3); }

/* Batch Generation Tab */
.ke-batch-section { padding:6px 0; }
.ke-batch-section + .ke-batch-section { border-top:1px solid rgba(0,0,0,.06); padding-top:8px; margin-top:4px; }
.ke-batch-textarea { width:100%; background:#fff; border:1px solid rgba(0,0,0,.12); color:#333; padding:8px; border-radius:7px; font-size:11px; resize:vertical; outline:none; font-family:'Consolas','Monaco',monospace; line-height:1.5; box-sizing:border-box; }
.ke-batch-textarea:focus { border-color:rgba(0,180,148,.5); }
.ke-batch-textarea::placeholder { color:#aaa; }
.ke-batch-actions { display:flex; gap:6px; margin-top:6px; }
.ke-batch-btn { padding:5px 14px; background:rgba(0,180,148,.1); border:1px solid rgba(0,180,148,.3); color:#00a080; font-size:11px; border-radius:5px; cursor:pointer; transition:all .2s; }
.ke-batch-btn:hover { background:rgba(0,180,148,.2); }
.ke-batch-btn-sec { background:transparent; border-color:rgba(0,0,0,.12); color:#888; }
.ke-batch-btn-sec:hover { background:rgba(0,0,0,.04); color:#555; }

/* Batch image list */
.ke-batch-image-list { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.ke-batch-img-item { display:flex; align-items:center; gap:4px; padding:3px 8px; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:5px; font-size:10px; color:#777; position:relative; cursor:pointer; transition:all .15s; }
.ke-batch-img-item:not(.is-url):hover { border-color:rgba(0,0,0,.18); background:rgba(0,0,0,.02); }
.ke-batch-img-item.selected { border-color:#42a5f5; background:rgba(66,165,245,.08); color:#42a5f5; box-shadow:0 0 0 1px rgba(66,165,245,.3); }
.ke-batch-img-item.uploaded { border-color:rgba(0,180,148,.3); color:#00a080; }
.ke-batch-img-item.uploaded.selected { border-color:#42a5f5; }
.ke-batch-img-thumb { width:20px; height:20px; border-radius:3px; object-fit:cover; flex-shrink:0; }
/* Batch image grouping by shot */
.ke-batch-img-group { margin-bottom:8px; }
.ke-batch-img-group-label { font-size:10px; font-weight:600; color:#42a5f5; margin-bottom:4px; padding:2px 8px; background:rgba(66,165,245,.08); border-radius:4px; display:inline-block; }
.ke-batch-img-group-items { display:flex; flex-wrap:wrap; gap:6px; margin-left:4px; padding-left:8px; border-left:2px solid rgba(66,165,245,.25); }
.ke-batch-img-role { font-size:8px; color:#777; background:rgba(0,0,0,.05); border-radius:3px; padding:0 4px; line-height:16px; flex-shrink:0; }
.ke-batch-img-missing { width:20px; height:20px; border-radius:3px; background:rgba(244,67,54,.15); color:#f44336; display:flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0; }
.ke-batch-img-name { max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ke-batch-img-remove { width:14px; height:14px; border-radius:50%; background:rgba(0,0,0,.06); color:#999; border:none; cursor:pointer; font-size:9px; display:flex; align-items:center; justify-content:center; padding:0; line-height:1; transition:all .15s; }
.ke-batch-img-remove:hover { background:rgba(244,67,54,.2); color:#f44336; }

/* Batch shots list */
.ke-batch-shots { display:flex; flex-direction:column; gap:4px; max-height:280px; overflow-y:auto; margin-top:4px; }
.ke-batch-shots::-webkit-scrollbar { width:3px; }
.ke-batch-shots::-webkit-scrollbar-thumb { background:rgba(0,0,0,.1); border-radius:2px; }
.ke-batch-shot { padding:6px 8px; background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:6px; transition:all .2s; }
.ke-batch-shot.running { border-color:rgba(66,165,245,.4); background:rgba(66,165,245,.05); }
.ke-batch-shot.succeed { border-color:rgba(0,180,148,.3); background:rgba(0,180,148,.05); }
.ke-batch-shot.failed { border-color:rgba(244,67,54,.3); background:rgba(244,67,54,.04); }
.ke-batch-shot-header { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.ke-batch-shot-idx { font-size:11px; font-weight:600; color:#333; min-width:24px; }
.ke-batch-shot-type { font-size:9px; color:#00a080; background:rgba(0,180,148,.1); padding:1px 5px; border-radius:3px; font-weight:500; }
.ke-batch-shot-model { font-size:9px; color:#777; background:rgba(0,0,0,.05); padding:1px 5px; border-radius:3px; }
.ke-batch-shot-status { font-size:9px; font-weight:500; margin-left:auto; }
.ke-batch-shot-status.pending { color:#999; }
.ke-batch-shot-status.processing { color:#42a5f5; animation:ke-pulse 1.5s infinite; }
.ke-batch-shot-status.succeed { color:#00a080; }
.ke-batch-shot-status.failed { color:#f44336; }
.ke-batch-shot-prompt { font-size:10px; color:#777; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ke-batch-shot-error { font-size:9px; color:#f44336; margin-top:2px; padding:2px 6px; background:rgba(244,67,54,.08); border-radius:3px; }
.ke-batch-progress-text { font-size:11px; color:#777; }
/* Interactive shot card — inline selects & image slots */
.ke-shot-type-select,.ke-shot-model-select { font-size:9px; padding:1px 3px; border:1px solid rgba(0,0,0,.12); border-radius:3px; background:#fff; color:#444; cursor:pointer; max-width:90px; }
.ke-shot-type-select:focus,.ke-shot-model-select:focus { outline:none; border-color:#42a5f5; }
.ke-dep-info { font-size:9px; color:#ffc107; }
.ke-batch-shot-images { display:flex; flex-wrap:wrap; gap:6px; margin-top:5px; padding-top:5px; border-top:1px solid rgba(0,0,0,.05); }
.ke-batch-shot-img-group { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.ke-batch-shot-img-label { font-size:8px; color:#888; white-space:nowrap; }
.ke-batch-shot-img-slot { width:40px; height:40px; border:1.5px dashed rgba(0,0,0,.18); border-radius:5px; display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; overflow:hidden; transition:border-color .15s,background .15s; }
.ke-batch-shot-img-slot.empty:hover { border-color:#42a5f5; background:rgba(66,165,245,.06); }
.ke-batch-shot-img-slot.empty span { font-size:8px; color:#aaa; text-align:center; line-height:1.2; padding:2px; pointer-events:none; }
.ke-batch-shot-img-slot.has-img { border-style:solid; border-color:rgba(0,180,148,.35); }
.ke-batch-shot-img-thumb { width:100%; height:100%; object-fit:cover; display:block; }
.ke-batch-slot-remove { position:absolute; top:1px; right:1px; width:14px; height:14px; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; border:none; cursor:pointer; font-size:10px; line-height:1; display:flex; align-items:center; justify-content:center; padding:0; z-index:2; }
.ke-batch-slot-remove:hover { background:rgba(244,67,54,.85); }
.ke-batch-shot-refs { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.ke-batch-shot-ref-item { position:relative; width:40px; height:40px; border-radius:5px; overflow:hidden; border:1px solid rgba(0,180,148,.35); }
.ke-batch-ref-remove { position:absolute; top:1px; right:1px; width:14px; height:14px; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; border:none; cursor:pointer; font-size:10px; line-height:1; display:flex; align-items:center; justify-content:center; padding:0; z-index:2; }
.ke-batch-ref-remove:hover { background:rgba(244,67,54,.85); }
/* Editable prompt textarea inside shot card */
.ke-batch-shot-prompt-edit { display:block; width:100%; box-sizing:border-box; margin-top:4px; padding:3px 5px; border:1px solid transparent; border-radius:3px; background:transparent; font-size:10px; color:#555; font-family:inherit; line-height:1.5; resize:vertical; min-height:34px; transition:border-color .15s,background .15s; }
.ke-batch-shot-prompt-edit:hover { border-color:rgba(0,0,0,.14); background:rgba(0,0,0,.02); }
.ke-batch-shot-prompt-edit:focus { outline:none; border-color:rgba(66,165,245,.5); background:rgba(66,165,245,.03); }

/* Toast */
.ke-toast { position:fixed; bottom:40px; left:50%; transform:translateX(-50%); background:rgba(255,255,255,.97); color:#333; padding:8px 20px; border-radius:8px; font-size:12px; z-index:20000; border:1px solid rgba(0,0,0,.1); box-shadow:0 4px 20px rgba(0,0,0,.12); animation:ke-toastIn .25s ease; }
.ke-toast.error { border-color:rgba(244,67,54,.4); color:#e74c3c; }
@keyframes ke-toastIn { from{opacity:0;transform:translateX(-50%) translateY(10px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }

/* Back button in ke/he sidebar tabs */
.ke-tab-back, .he-tab-back { margin-top:auto !important; border-top:1px solid rgba(0,0,0,.08); padding-top:10px !important; opacity:.6; }
.he-tab-back { border-top-color:rgba(0,0,0,.08) !important; }
.ke-tab-back:hover, .he-tab-back:hover { opacity:1; }

/* ═══════════════════════════════════════════════════════
   Video Platform Selector
   ═══════════════════════════════════════════════════════ */
.video-platform-selector { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:32px; background:#FFFFFF; }
.vps-title { font-size:16px; color:#333; font-weight:500; }
.vps-cards { display:flex; gap:24px; }
.vps-card { display:flex; flex-direction:column; align-items:center; gap:12px; padding:32px 40px; border-radius:16px; cursor:pointer; transition:all .3s ease; border:2px solid transparent; }
.vps-card-icon { width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all .3s; }
.vps-card-name { font-size:16px; font-weight:600; transition:color .2s; }
.vps-card-desc { font-size:11px; opacity:.6; transition:color .2s; }

/* 可灵 card — teal */
.vps-card-kling { background:#EBF9F7; }
.vps-card-kling .vps-card-icon { background:rgba(0,212,170,.12); color:#00d4aa; }
.vps-card-kling .vps-card-name { color:#00d4aa; }
.vps-card-kling .vps-card-desc { color:#777; }
.vps-card-kling:hover { border-color:rgba(0,180,148,.4); background:#EBF9F7; box-shadow:0 4px 24px rgba(0,180,148,.15); }

/* 海螺 card — blue-indigo */
.vps-card-hailuo { background:rgba(74,108,247,.06); }
.vps-card-hailuo .vps-card-icon { background:rgba(74,108,247,.12); color:#4a6cf7; }
.vps-card-hailuo .vps-card-name { color:#4a6cf7; }
.vps-card-hailuo .vps-card-desc { color:#777; }
.vps-card-hailuo:hover { border-color:rgba(74,108,247,.4); background:rgba(74,108,247,.08); box-shadow:0 4px 24px rgba(74,108,247,.15); }

/* Jimeng card */
.vps-card-jimeng { background:#F1FAFD; }
.vps-card-jimeng .vps-card-icon { background:rgba(31,91,122,.08); color:#1f5b7a; }
.vps-card-jimeng .vps-card-name { color:#1f5b7a; }
.vps-card-jimeng .vps-card-desc { color:#777; }
.vps-card-jimeng:hover { border-color:rgba(31,91,122,.35); background:#F1FAFD; box-shadow:0 4px 24px rgba(31,91,122,.12); }

/* Nano card — warm orange */
.vps-card-nano { background:#FFF5EB; }
.vps-card-nano .vps-card-icon { background:rgba(255,159,64,.12); color:#FF9F40; }
.vps-card-nano .vps-card-name { color:#FF9F40; }
.vps-card-nano .vps-card-desc { color:#777; }
.vps-card-nano:hover { border-color:rgba(255,159,64,.4); background:#FFF5EB; box-shadow:0 4px 24px rgba(255,159,64,.15); }

/* Docmee 模板选择器 - 左侧预览 + 右侧挑选（像官网） */
.docmee-template-panel { display:flex; flex-direction:row; height:100%; min-height:0; background:#fff; border-radius:0; overflow:hidden; }
.docmee-template-panel .dtp-preview-section { flex:1; min-width:0; padding:0; background:linear-gradient(135deg,#f8fafc 0%,#f1f5f9 100%); display:flex; align-items:center; justify-content:flex-start; overflow:hidden; }
.docmee-template-panel .dtp-preview-layout { flex:1 1 0; min-width:0; min-height:0; display:flex; flex-direction:column; gap:12px; align-items:stretch; width:100%; max-width:100%; overflow:hidden; padding:0; margin:0; }
.docmee-template-panel .dtp-preview-main { width:100%; aspect-ratio:16/9; max-height:none; border-radius:0; overflow:hidden; background:#e2e8f0; box-shadow:none; }
.docmee-template-panel .dtp-preview-main img { width:100%; height:100%; object-fit:contain; display:block; }
.docmee-template-panel .dtp-preview-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#94a3b8; font-size:14px; }
.docmee-template-panel .dtp-preview-others { display:flex; flex-direction:row; justify-content:center; gap:10px; width:100%; flex-shrink:0; }
.docmee-template-panel .dtp-preview-other { width:90px; height:51px; padding:0; border:2px solid transparent; border-radius:8px; overflow:hidden; cursor:pointer; background:#fff; transition:border-color .2s; box-shadow:0 2px 8px rgba(0,0,0,.06); flex-shrink:0; }
.docmee-template-panel .dtp-preview-other:hover { border-color:#94a3b8; }
.docmee-template-panel .dtp-preview-other.active { border-color:#4a6cf7; }
.docmee-template-panel .dtp-preview-other img { width:100%; height:100%; object-fit:cover; display:block; }
.docmee-template-panel .dtp-sidebar { width:360px; min-width:300px; flex-shrink:0; display:flex; flex-direction:column; border-left:1px solid #eee; background:#fff; }
.docmee-template-panel .dtp-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid #eee; }
.docmee-template-panel .dtp-title { font-size:16px; font-weight:600; color:#1a202c; }
.docmee-template-panel .dtp-tabs { display:flex; gap:4px; }
.docmee-template-panel .dtp-tab { padding:6px 14px; font-size:13px; border:none; background:transparent; color:#6b7280; border-radius:8px; cursor:pointer; transition:all .2s; }
.docmee-template-panel .dtp-tab:hover { color:#4a6cf7; }
.docmee-template-panel .dtp-tab.active { background:#4a6cf7; color:#fff; }
.docmee-template-panel .dtp-filters { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px 20px; border-bottom:1px solid #eee; }
.docmee-template-panel .dtp-select-wrap { flex:1; min-width:0; max-width:100px; }
.docmee-template-panel .dtp-select { width:100%; padding:8px 12px; font-size:13px; border:1px solid #e2e8f0; border-radius:6px; background:#fff; cursor:pointer; }
.docmee-template-panel .dtp-color-icon { font-size:18px; opacity:.7; cursor:default; }
.docmee-template-panel .dtp-upload-wrap { margin-left:auto; }
.docmee-template-panel .dtp-upload-btn { padding:8px 14px; font-size:13px; border:1px solid #4a6cf7; background:#fff; color:#4a6cf7; border-radius:6px; cursor:pointer; white-space:nowrap; }
.docmee-template-panel .dtp-upload-btn:hover:not(:disabled) { background:#4a6cf7; color:#fff; }
.docmee-template-panel .dtp-upload-btn:disabled { opacity:.6; cursor:not-allowed; }
.docmee-template-panel .dtp-grid-wrap { flex:1; min-height:120px; overflow-y:auto; overflow-x:hidden; padding:20px; scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.docmee-template-panel .dtp-grid-wrap::-webkit-scrollbar { width:8px; }
.docmee-template-panel .dtp-grid-wrap::-webkit-scrollbar-track { background:#f1f5f9; border-radius:4px; }
.docmee-template-panel .dtp-grid-wrap::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:4px; }
.docmee-template-panel .dtp-grid-wrap::-webkit-scrollbar-thumb:hover { background:#94a3b8; }
.docmee-template-panel .dtp-loading, .docmee-template-panel .dtp-error, .docmee-template-panel .dtp-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:60px 20px; color:#6b7280; }
.docmee-template-panel .dtp-spinner { width:32px; height:32px; border:3px solid #e2e8f0; border-top-color:#4a6cf7; border-radius:50%; animation:dtp-spin .8s linear infinite; }
@keyframes dtp-spin { to { transform:rotate(360deg); } }
.docmee-template-panel .dtp-retry { padding:8px 20px; font-size:13px; border:1px solid #4a6cf7; background:#fff; color:#4a6cf7; border-radius:6px; cursor:pointer; }
.docmee-template-panel .dtp-retry:hover { background:#4a6cf7; color:#fff; }
.docmee-template-panel .dtp-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:12px; }
.docmee-template-panel .dtp-card { cursor:pointer; border-radius:8px; overflow:hidden; transition:all .2s; }
.docmee-template-panel .dtp-card-pages { display:flex; gap:2px; padding:2px; background:#f1f5f9; border-top:1px solid #e2e8f0; }
.docmee-template-panel .dtp-card-pages img { flex:1; min-width:0; height:24px; object-fit:cover; display:block; border-radius:2px; }
.docmee-template-panel .dtp-card:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.08); }
.docmee-template-panel .dtp-card.selected .dtp-card-inner { border:2px solid #4a6cf7; box-shadow:0 0 0 2px rgba(74,108,247,.2); }
.docmee-template-panel .dtp-card-inner { position:relative; border:2px solid transparent; border-radius:8px; overflow:hidden; transition:border-color .2s; }
.docmee-template-panel .dtp-card-cover { aspect-ratio:16/9; background:#f1f5f9; overflow:hidden; }
.docmee-template-panel .dtp-card-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.docmee-template-panel .dtp-card-cover.error { display:flex; align-items:center; justify-content:center; font-size:24px; }
.docmee-template-panel .dtp-card-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:32px; background:#e2e8f0; }
.docmee-template-panel .dtp-card-check { position:absolute; bottom:8px; right:8px; width:22px; height:22px; background:#4a6cf7; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:bold; }
.docmee-template-panel .dtp-card-del {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:30px;
  border:0;
  border-top:1px solid #e2e8f0;
  background:rgba(255,255,255,.98);
  color:#dc2626;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:12px;
  cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.docmee-template-panel .dtp-card-del:hover { background:#fee2e2; color:#b91c1c; }
.docmee-template-panel .dtp-card-del:disabled { opacity:.6; cursor:not-allowed; }
.docmee-template-panel .dtp-card-del-icon { font-size:13px; line-height:1; }
.docmee-template-panel .dtp-card-del-text { line-height:1; }
.dtp-confirm-overlay {
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.35);
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
}
.dtp-confirm-modal {
  width:min(420px, calc(100vw - 32px));
  background:#fff;
  border-radius:10px;
  box-shadow:0 16px 40px rgba(15,23,42,.25);
  padding:16px 18px 14px;
}
.dtp-confirm-title { font-size:16px; font-weight:600; color:#0f172a; margin-bottom:10px; }
.dtp-confirm-message { font-size:14px; color:#334155; line-height:1.5; word-break:break-word; }
.dtp-confirm-actions { margin-top:16px; display:flex; justify-content:flex-end; gap:8px; }
.dtp-confirm-btn { min-width:72px; height:34px; border-radius:6px; border:1px solid #cbd5e1; background:#fff; color:#334155; cursor:pointer; }
.dtp-confirm-btn-ok { border-color:#2563eb; background:#2563eb; color:#fff; }
.dtp-confirm-btn-ok:hover { background:#1d4ed8; border-color:#1d4ed8; }
.dtp-confirm-btn-cancel:hover { background:#f8fafc; }
.docmee-template-panel .dtp-card-name { padding:8px 0 0; font-size:12px; color:#4a5568; line-height:1.4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.docmee-template-panel .dtp-sidebar-history-bar {
    flex-shrink:0;
    padding:12px 20px 0;
    border-top:1px solid #eee;
}
.docmee-template-panel .dtp-history-open-btn {
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px 14px;
    font-size:13px;
    font-weight:500;
    border:1px solid #e2e8f0;
    border-radius:8px;
    background:#f8fafc;
    color:#334155;
    cursor:pointer;
    transition:border-color .2s, color .2s, background .2s;
}
.docmee-template-panel .dtp-history-open-btn:hover {
    border-color:#4a6cf7;
    color:#4a6cf7;
    background:#fff;
}
.docmee-template-panel .dtp-history-badge {
    min-width:20px;
    padding:2px 7px;
    font-size:11px;
    font-weight:600;
    line-height:1.3;
    background:#4a6cf7;
    color:#fff;
    border-radius:999px;
}
.docmee-template-panel.dtp-flow-step-content .dtp-sidebar-history-bar { border-top:1px dashed #e2e8f0; }

.dtp-history-overlay {
    position:fixed;
    inset:0;
    z-index:100020;
    display:none;
    align-items:stretch;
    justify-content:stretch;
    font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
.dtp-history-overlay.dtp-history-overlay--open { display:flex; }
.dtp-history-overlay-backdrop {
    position:absolute;
    inset:0;
    background:rgba(15,23,42,.45);
}
.dtp-history-overlay-panel {
    position:relative;
    flex:1;
    margin:24px;
    min-height:0;
    display:flex;
    align-items:stretch;
    justify-content:center;
    pointer-events:none;
}
.dtp-history-overlay-panel > * { pointer-events:auto; }

.dtp-history-modal {
    width:min(1100px, 96vw);
    max-height:min(90vh, 900px);
    height:100%;
    min-height:420px;
    background:#fff;
    border-radius:12px;
    box-shadow:0 25px 50px -12px rgba(0,0,0,.25);
    display:flex;
    flex-direction:column;
    overflow:hidden;
}
.dtp-history-modal-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:16px 20px;
    border-bottom:1px solid #e2e8f0;
    flex-shrink:0;
    background:#f8fafc;
}
.dtp-history-modal-title-wrap { display:flex; flex-direction:column; gap:2px; }
.dtp-history-modal-title { margin:0; font-size:18px; font-weight:600; color:#0f172a; }
.dtp-history-modal-count { font-size:12px; color:#64748b; }
.dtp-history-modal-actions { display:flex; align-items:center; gap:10px; }
.dtp-history-btn-close {
    width:40px;
    height:40px;
    border:none;
    border-radius:8px;
    background:#fff;
    font-size:22px;
    line-height:1;
    color:#64748b;
    cursor:pointer;
    border:1px solid #e2e8f0;
}
.dtp-history-btn-close:hover { color:#0f172a; border-color:#cbd5e1; }
.dtp-history-btn-secondary {
    padding:8px 14px;
    font-size:13px;
    border:1px solid #e2e8f0;
    border-radius:8px;
    background:#fff;
    color:#64748b;
    cursor:pointer;
}
.dtp-history-btn-secondary:hover { border-color:#f97316; color:#c2410c; }
.dtp-history-modal-body {
    flex:1;
    min-height:0;
    display:flex;
    flex-direction:row;
}
.dtp-gh-list-col {
    width:min(280px, 32vw);
    flex-shrink:0;
    border-right:1px solid #e2e8f0;
    overflow-y:auto;
    background:#fafafa;
    scrollbar-width:thin;
}
.dtp-gh-list-col::-webkit-scrollbar { width:6px; }
.dtp-gh-list-col::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:3px; }
.dtp-gh-item {
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    padding:12px 14px;
    border:none;
    border-bottom:1px solid #eee;
    background:transparent;
    cursor:pointer;
    text-align:left;
    transition:background .15s;
}
.dtp-gh-item:hover { background:#f1f5f9; }
.dtp-gh-item.active { background:#e0e7ff; box-shadow:inset 3px 0 0 #4a6cf7; }
.dtp-gh-item-time { font-size:11px; color:#94a3b8; }
.dtp-gh-item-title { font-size:13px; font-weight:600; color:#1e293b; }
.dtp-gh-item-sub { font-size:12px; color:#64748b; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.dtp-gh-item-badge { font-size:10px; font-weight:600; padding:2px 6px; border-radius:4px; align-self:flex-start; }
.dtp-gh-item-badge--ok { background:#dcfce7; color:#166534; }
.dtp-gh-item-badge--fail { background:#fee2e2; color:#b91c1c; }
.dtp-gh-empty { margin:16px; font-size:13px; color:#94a3b8; line-height:1.5; }

.dtp-gh-detail-col {
    flex:1;
    min-width:0;
    overflow-y:auto;
    padding:20px 24px;
    scrollbar-width:thin;
}
.dtp-gh-detail-empty { padding:48px 24px; text-align:center; color:#94a3b8; font-size:14px; }

.dtp-gh-detail-meta { margin-bottom:16px; }
.dtp-gh-meta-row {
    display:flex;
    flex-wrap:wrap;
    gap:8px 16px;
    padding:8px 0;
    border-bottom:1px solid #f1f5f9;
    font-size:13px;
    color:#334155;
}
.dtp-gh-k { font-weight:600; color:#64748b; min-width:72px; }
.dtp-gh-id { color:#94a3b8; font-size:12px; }
.dtp-gh-code { font-size:11px; background:#f1f5f9; padding:2px 6px; border-radius:4px; }

.dtp-gh-detail-section { margin-bottom:20px; }
.dtp-gh-h3 { margin:0 0 10px; font-size:14px; font-weight:600; color:#0f172a; }
.dtp-gh-field { margin-bottom:12px; }
.dtp-gh-v { font-size:13px; color:#475569; }
.dtp-gh-pre {
    margin:6px 0 0;
    padding:10px 12px;
    font-size:12px;
    line-height:1.5;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:8px;
    white-space:pre-wrap;
    word-break:break-word;
    max-height:min(240px, 30vh);
    overflow:auto;
}
.dtp-gh-pre--md { max-height:min(320px, 36vh); }
.dtp-gh-error .dtp-gh-pre { background:#fef2f2; border-color:#fecaca; color:#991b1b; max-height:min(360px, 40vh); }

.dtp-gh-preview-section .dtp-gh-preview-row {
    display:flex;
    flex-direction:row;
    gap:20px;
    flex-wrap:wrap;
    align-items:flex-start;
}
.dtp-gh-preview-template,
.dtp-gh-preview-ppt {
    flex:1;
    min-width:min(100%, 280px);
}
.dtp-gh-subh { font-size:12px; font-weight:600; color:#64748b; margin-bottom:8px; }
.dtp-gh-cover-img {
    width:100%;
    max-width:320px;
    aspect-ratio:16/9;
    object-fit:cover;
    border-radius:8px;
    border:1px solid #e2e8f0;
    background:#f1f5f9;
}
.dtp-gh-ppt-iframe {
    width:100%;
    min-height:min(360px, 45vh);
    height:50vh;
    max-height:520px;
    border:1px solid #e2e8f0;
    border-radius:8px;
    background:#f8fafc;
}
.dtp-gh-embed-hint { font-size:11px; color:#94a3b8; margin:8px 0 0; line-height:1.4; }
.dtp-gh-ph {
    padding:24px;
    text-align:center;
    font-size:13px;
    color:#94a3b8;
    background:#f8fafc;
    border-radius:8px;
    border:1px dashed #e2e8f0;
}
.dtp-gh-dl-wrap { margin-top:12px; }
.dtp-gh-download {
    display:inline-flex;
    align-items:center;
    font-size:14px;
    font-weight:500;
    color:#4a6cf7;
    text-decoration:underline;
}

@media (max-width:720px) {
    .dtp-history-overlay-panel { margin:12px; }
    .dtp-history-modal-body { flex-direction:column; }
    .dtp-gh-list-col { width:100%; max-height:36vh; border-right:none; border-bottom:1px solid #e2e8f0; }
}

.docmee-template-panel .dtp-footer { padding:16px 20px; border-top:1px solid #eee; flex-shrink:0; }
.docmee-template-panel .dtp-next-btn { width:100%; padding:12px; font-size:14px; font-weight:500; border:none; background:#4a6cf7; color:#fff; border-radius:8px; cursor:pointer; transition:background .2s; }
.docmee-template-panel .dtp-next-btn:hover:not(:disabled) { background:#3b5bdb; }
.docmee-template-panel .dtp-next-btn:disabled { background:#cbd5e0; cursor:not-allowed; }
.docmee-template-panel .dtp-load-more { padding:20px; text-align:center; color:#6b7280; font-size:13px; }
.docmee-template-panel .dtp-load-more .dtp-spinner { margin:0 auto 8px; display:block; }
.docmee-template-panel .dtp-load-more-btn { padding:10px 24px; font-size:13px; border:1px solid #4a6cf7; background:#fff; color:#4a6cf7; border-radius:8px; cursor:pointer; }
.docmee-template-panel .dtp-load-more-btn:hover { background:#4a6cf7; color:#fff; }
.docmee-template-panel .dtp-no-more { padding:16px; text-align:center; color:#9ca3af; font-size:12px; }
.docmee-template-panel .dtp-content-block { padding:12px 20px 0; border-top:1px solid #eee; flex-shrink:0; }
/* 文多多 V2：演示场景 / 受众 / 语言（options 接口） */
.docmee-template-panel .dtp-v2-gen-options { margin-top:14px; padding-top:12px; border-top:1px dashed #e2e8f0; }
.docmee-template-panel .dtp-v2-gen-title { margin-bottom:8px; }
.docmee-template-panel .dtp-v2-opts-warn { font-size:12px; color:#c2410c; margin:0 0 8px; }
.docmee-template-panel .dtp-v2-gen-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px 12px; align-items:end; }
@media (max-width:720px) {
  .docmee-template-panel .dtp-v2-gen-grid { grid-template-columns:1fr; }
}
.docmee-template-panel .dtp-v2-gen-cell .dtp-sublabel { display:block; margin-bottom:4px; }
.docmee-template-panel .dtp-v2-gen-cell-wide { grid-column:1 / -1; }
/* 文多多：生成的大纲展示 */
.docmee-template-panel .dtp-outline-result { margin-top:16px; padding-top:14px; border-top:1px solid #e2e8f0; }
.docmee-template-panel .dtp-outline-hint { margin:6px 0 8px; font-size:12px; color:#64748b; }
.docmee-template-panel .dtp-outline-actions { margin-bottom:8px; }
.docmee-template-panel .dtp-outline-copy-btn {
    padding:6px 14px; font-size:13px; border:1px solid #cbd5e1; border-radius:6px;
    background:#f8fafc; cursor:pointer; color:#334155;
}
.docmee-template-panel .dtp-outline-copy-btn:hover { background:#f1f5f9; border-color:#94a3b8; }
.docmee-template-panel .dtp-outline-textarea {
    width:100%; box-sizing:border-box; min-height:200px; max-height:420px;
    padding:10px 12px; font-size:12px; line-height:1.5; font-family:ui-monospace,Consolas,monospace;
    border:1px solid #e2e8f0; border-radius:8px; resize:vertical; background:#f8fafc; color:#1e293b;
}
.docmee-template-panel.dtp-flow-step-content .dtp-outline-textarea { max-height:min(420px, 40vh); }
.docmee-template-panel .dtp-gen-progress {
    margin-top:10px;
    padding:8px 10px;
    border:1px solid #bfdbfe;
    border-radius:8px;
    background:#eff6ff;
    color:#1d4ed8;
    font-size:13px;
}
.docmee-template-panel .dtp-content-label { font-size:13px; font-weight:600; color:#1a202c; margin-bottom:8px; }
.docmee-template-panel .dtp-content-hint { font-weight:400; color:#94a3b8; font-size:12px; }
.docmee-template-panel .dtp-content-type { display:flex; gap:16px; margin-bottom:6px; flex-wrap:wrap; }
.docmee-template-panel .dtp-content-type-hint { font-size:12px; color:#64748b; line-height:1.45; margin-bottom:8px; }
.docmee-template-panel .dtp-content-type-hint code { font-size:11px; background:rgba(15,23,42,.06); padding:1px 5px; border-radius:4px; font-family:ui-monospace,Consolas,monospace; }
.docmee-template-panel .dtp-radio { font-size:13px; color:#4a5568; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.docmee-template-panel .dtp-ppt-textarea { width:100%; min-height:100px; padding:10px 12px; font-size:13px; line-height:1.5; border:1px solid #e2e8f0; border-radius:8px; resize:vertical; font-family:inherit; box-sizing:border-box; }
.docmee-template-panel .dtp-ppt-textarea:focus { outline:none; border-color:#4a6cf7; box-shadow:0 0 0 2px rgba(74,108,247,.15); }
.docmee-template-panel .dtp-ppt-textarea:disabled { background:#f8fafc; color:#64748b; }
.docmee-template-panel .dtp-gen-error { margin-top:8px; font-size:12px; color:#dc2626; line-height:1.4; max-height:min(420px,50vh); overflow:auto; }
.docmee-template-panel .dtp-gen-error-pre { margin:0; white-space:pre-wrap; word-break:break-word; font-family:ui-monospace,Consolas,monospace; font-size:11px; color:#b91c1c; }

.docmee-template-panel .dtp-gen-success { margin-top:10px; font-size:13px; }
.docmee-template-panel .dtp-download-link { color:#4a6cf7; font-weight:500; text-decoration:underline; }

/* Docmee：第二步「文稿内容」全宽布局 */
.docmee-template-panel.dtp-flow-step-content { flex-direction:column; align-items:stretch; }
.docmee-template-panel.dtp-flow-step-content .dtp-sidebar-content-step {
    width:100%; max-width:100%; min-width:0; border-left:none; flex:1; min-height:0; display:flex; flex-direction:column;
}
.docmee-template-panel .dtp-content-toolbar {
    display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 16px; border-bottom:1px solid #eee; flex-shrink:0;
    background:#f8fafc;
}
.docmee-template-panel .dtp-back-btn {
    padding:8px 14px; font-size:13px; border:1px solid #e2e8f0; background:#fff; color:#334155; border-radius:8px; cursor:pointer;
}
.docmee-template-panel .dtp-back-btn:hover { border-color:#4a6cf7; color:#4a6cf7; }
.docmee-template-panel .dtp-picked-name { font-size:13px; color:#64748b; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.docmee-template-panel.dtp-flow-step-content .dtp-content-block {
    flex:1;
    min-height:180px;
    display:flex;
    flex-direction:column;
    overflow:auto;
    padding-bottom:12px;
    gap:2px;
}
.docmee-template-panel.dtp-flow-step-content .dtp-footer { flex-shrink:0; }
.docmee-template-panel.dtp-flow-step-content .dtp-ppt-textarea { flex:1; min-height:200px; }

/* 结果区和底部按钮分层，避免视觉重叠 */
.docmee-template-panel .dtp-gen-progress,
.docmee-template-panel .dtp-gen-error,
.docmee-template-panel .dtp-gen-success,
.docmee-template-panel .dtp-outline-result {
    position: relative;
    z-index: 1;
}

.docmee-template-panel .dtp-mode-row { margin-bottom:12px; }
.docmee-template-panel .dtp-mode-select { width:100%; max-width:100%; padding:10px 12px; font-size:13px; border:1px solid #e2e8f0; border-radius:8px; background:#fff; }
.docmee-template-panel .dtp-mode-panel { margin-top:8px; }
.docmee-template-panel .dtp-mode-hint { font-size:12px; color:#64748b; line-height:1.5; margin:0 0 10px; }
.docmee-template-panel .dtp-mode-hint code { font-size:11px; background:rgba(15,23,42,.06); padding:1px 4px; border-radius:3px; }
.docmee-template-panel .dtp-sublabel { display:block; font-size:12px; font-weight:600; color:#334155; margin:10px 0 6px; }
.docmee-template-panel .dtp-url-input { width:100%; box-sizing:border-box; padding:10px 12px; font-size:13px; border:1px solid #e2e8f0; border-radius:8px; }
.docmee-template-panel .dtp-file-input { display:block; width:100%; font-size:13px; margin-bottom:4px; }
.docmee-template-panel .dtp-or { text-align:center; color:#94a3b8; font-size:12px; margin:12px 0; }
.docmee-template-panel .dtp-extra-prompt-wrap { margin-top:14px; padding-top:12px; border-top:1px dashed #e2e8f0; }
.docmee-template-panel .dtp-extra-hint { margin-top:4px !important; font-size:11px !important; color:#94a3b8 !important; }
.docmee-template-panel .dtp-textarea-sm { min-height:56px; }

/* ═══════════════════════════════════════════════════════
   Hailuo Video Editor — Embedded Panel (.he-*)
   Light theme matching Hailuo AI official branding
   ═══════════════════════════════════════════════════════ */
.he-panel { display:flex; flex-direction:column; gap:0; color:#333; font-family:inherit; height:100%; width:100%; overflow-y:auto; overflow-x:hidden; background:#F0F0FA; border-radius:0; }
.jm-panel { background:#F1FAFD; }
.jm-panel .he-grid-tabs,
.jm-panel .he-grid-history,
.jm-panel .he-results-header,
.jm-panel .he-gen-bar { background:#F1FAFD; }
.jm-panel .he-top,
.jm-panel .he-controls,
.jm-panel .he-grid,
.jm-panel .he-grid-controls,
.jm-panel .he-grid-tasks,
.jm-panel .he-task-list,
.jm-panel .he-history-panel,
.jm-panel .he-tab-body,
.jm-panel .he-params,
.jm-panel .he-param-row,
.jm-panel .he-batch-toolbar,
.jm-panel .he-batch-section,
.jm-panel .he-batch-shots,
.jm-panel .he-batch-image-list {
  background:#F1FAFD;
}
.jm-panel .he-field textarea,
.jm-panel .he-field input,
.jm-panel .he-small-select,
.jm-panel .he-collapse textarea,
.jm-panel .he-collapse summary,
.jm-panel .he-task-item,
.jm-panel .he-history-item {
  background:#F1FAFD;
}
.he-panel::-webkit-scrollbar { width:4px; }
.he-panel::-webkit-scrollbar-thumb { background:rgba(0,0,0,.12); border-radius:2px; }
.he-top { display:flex; flex-direction:row; flex-shrink:0; border-bottom:none; overflow:hidden; transition:max-height .3s ease, opacity .2s ease; }
.he-top.he-collapsed { max-height:0 !important; opacity:0; pointer-events:none; }
.he-grid-tabs.he-collapsed { max-height:0 !important; opacity:0; pointer-events:none; overflow:hidden; }
.he-collapse-toggle { display:flex; align-items:center; justify-content:center; width:18px; height:18px; border:1px solid rgba(0,0,0,.15); background:transparent; color:rgba(0,0,0,.6); cursor:pointer; transition:all .2s; padding:0; border-radius:4px; flex-shrink:0; }
.he-collapse-toggle:hover { color:#333; background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.25); }
.he-collapse-arrow { transition:transform .3s ease; }
.he-collapse-toggle.he-collapsed .he-collapse-arrow { transform:rotate(180deg); }
/* Grid layout */
.he-grid { display:grid; grid-template-columns:1fr 75px; grid-template-rows:auto auto 1fr; flex:1; min-height:0; overflow:hidden; }
.he-grid-controls { grid-column:1; grid-row:1; overflow:hidden; }
.he-grid-tabs { grid-column:2; grid-row:1; background:#E8E8F4; border-left:1px solid rgba(0,0,0,.06); display:flex; flex-direction:column; align-items:center; padding:6px 4px; box-sizing:border-box; }
.he-grid-header { grid-column:1 / -1; grid-row:2; }
.he-grid-tasks { grid-column:1; grid-row:3; overflow-y:auto; }
.he-grid-history { grid-column:2; grid-row:3; border-left:1px solid rgba(0,0,0,.06); background:#E8E8F4; }
.he-sidebar-tabs { display:flex; flex-direction:column; gap:2px; width:100%; }

/* History panel */
.he-history-panel { flex:1; overflow-y:auto; overflow-x:hidden; padding:6px; box-sizing:border-box; display:flex; flex-direction:column; gap:6px; scrollbar-width:thin; scrollbar-color:rgba(0,0,0,.12) transparent; }
.he-history-panel::-webkit-scrollbar { width:3px; }
.he-history-panel::-webkit-scrollbar-thumb { background:rgba(0,0,0,.12); border-radius:3px; }
.he-history-empty { font-size:9px; color:#999; text-align:center; padding:8px 0; }
.he-history-item { position:relative; width:100%; border-radius:6px; overflow:hidden; cursor:pointer; flex-shrink:0; transition:box-shadow .2s; }
.he-history-item:hover { box-shadow:0 0 0 2px rgba(74,108,247,.6); }
.he-history-item video { width:100%; aspect-ratio:16/9; object-fit:contain; background:#F1FAFD; display:block; pointer-events:none; min-height:42px; }
.he-history-item video::-webkit-media-controls { display:none !important; }
.he-task-video.he-highlight { box-shadow:0 0 0 2px rgba(74,108,247,.7); border-radius:5px; animation:he-flash .75s ease 2; }
@keyframes he-flash { 0%,100%{ box-shadow:0 0 0 2px rgba(74,108,247,.7); } 50%{ box-shadow:0 0 8px 3px rgba(74,108,247,.4); } }

/* Tabs — blue-indigo accent */
.he-tab { display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 4px; border:none; background:transparent; color:#999; font-size:9px; border-radius:8px; cursor:pointer; transition:all .2s; font-weight:500; width:100%; box-sizing:border-box; }
.he-tab svg { flex-shrink:0; }
.he-tab span { line-height:1; }
.he-tab:hover { color:#555; background:rgba(0,0,0,.04); }
.he-tab.active { background:rgba(74,108,247,.1); color:#4a6cf7; }

/* Controls */
.he-controls { display:flex; flex-direction:column; flex:1; min-width:0; overflow-y:auto; overflow-x:hidden; }
.he-controls::-webkit-scrollbar { width:4px; }
.he-controls::-webkit-scrollbar-thumb { background:rgba(0,0,0,.1); border-radius:2px; }
.he-icon-btn { background:none; border:none; color:#999; cursor:pointer; padding:4px; border-radius:5px; transition:all .2s; display:flex; align-items:center; }
.he-icon-btn:hover { color:#333; background:rgba(0,0,0,.06); }

/* Model selector — blue-indigo */
.he-model-row { display:flex; align-items:center; gap:8px; padding:8px 10px; border-bottom:1px solid rgba(0,0,0,.06); background:#E8E8F4; }
.he-model-badge { background:linear-gradient(135deg,#4a6cf7,#7c6ff7); color:#fff; font-weight:700; font-size:10px; padding:2px 6px; border-radius:4px; }
.he-model-select { flex:1; background:#fff; border:1px solid rgba(0,0,0,.12); color:#333; padding:5px 8px; border-radius:7px; font-size:11px; cursor:pointer; outline:none; }
.he-model-select:focus { border-color:rgba(74,108,247,.5); }
.he-model-select option { background:#fff; color:#333; }

/* Tab body */
.he-tab-body { padding:8px 10px; background:#F0F0FA; }
.he-tab-columns { display:flex; flex-direction:row; gap:10px; }
.he-col-left { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.he-col-right { flex:0 0 auto; width:220px; min-width:180px; display:flex; flex-direction:column; gap:6px; }
.he-col-left .he-field { margin-bottom:0; }
.he-col-left .he-model-row { padding:0 0 4px 0; border-bottom:none; background:transparent; }
.he-col-right .he-params { margin-bottom:0; }
.he-col-right .he-collapse { margin-bottom:0; }
.he-col-right .he-gen-bar { margin-top:auto; padding:0; border-top:none; background:transparent; }
/* Extend row layout */
.he-extend-row { display:flex; flex-direction:row; gap:10px; align-items:stretch; }
.he-extend-left, .he-extend-right { flex:1; min-width:0; display:flex; flex-direction:column; }
.he-small-label { font-size:11px; color:#888; line-height:16px; height:16px; margin-bottom:4px; flex-shrink:0; }
.he-extend-textarea { width:100%; resize:vertical; background:#FAFAFF; border:1px dashed rgba(0,0,0,.12); border-radius:7px; color:#333; padding:10px; font-size:12px; box-sizing:border-box; flex:1; margin:0; }
.he-extend-textarea:focus { border-color:rgba(74,108,247,.4); outline:none; }

/* Multi-image grid */
.he-multi-images { display:flex; flex-wrap:wrap; gap:6px; flex:1; align-content:flex-start; }
.he-multi-add { width:70px; height:70px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border:1px dashed rgba(0,0,0,.15); border-radius:6px; cursor:pointer; color:#999; font-size:9px; transition:all .2s; background:rgba(0,0,0,.02); }
.he-multi-add:hover { border-color:rgba(74,108,247,.4); color:#4a6cf7; background:rgba(74,108,247,.05); }
.he-multi-thumb { position:relative; width:70px; height:70px; border-radius:6px; overflow:hidden; border:1px solid rgba(0,0,0,.1); }
.he-multi-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.he-multi-remove { position:absolute; top:2px; right:2px; width:16px; height:16px; border-radius:50%; background:rgba(0,0,0,.7); color:#fff; border:none; cursor:pointer; font-size:10px; display:flex; align-items:center; justify-content:center; line-height:1; padding:0; opacity:0; transition:opacity .15s; }
.he-multi-thumb:hover .he-multi-remove { opacity:1; }
.he-multi-dim { position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,.55); color:#fff; font-size:8px; text-align:center; padding:2px 0; pointer-events:none; white-space:nowrap; overflow:hidden; line-height:1.3; }
.he-image-dim { position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,.55); color:#fff; font-size:8px; text-align:center; padding:2px 0; pointer-events:none; white-space:nowrap; overflow:hidden; line-height:1.3; z-index:1; }

/* Fields — blue focus */
.he-field { margin-bottom:6px; }
.he-field label { display:block; font-size:11px; color:#888; margin-bottom:4px; }
.he-field textarea { width:100%; background:#FAFAFF; border:1px solid rgba(0,0,0,.1); color:#333; padding:8px; border-radius:7px; font-size:11px; resize:vertical; outline:none; font-family:inherit; line-height:1.5; box-sizing:border-box; }
.he-field textarea:focus { border-color:rgba(74,108,247,.4); }
.he-field textarea::placeholder { color:#aaa; }

/* Collapse */
.he-collapse { border:1px solid rgba(0,0,0,.08); border-radius:7px; margin-bottom:6px; overflow:hidden; }
.he-collapse summary { padding:5px 8px; font-size:11px; color:#888; cursor:pointer; user-select:none; }
.he-collapse textarea { width:100%; background:#FAFAFF; border:none; border-top:1px solid rgba(0,0,0,.06); color:#555; padding:6px 8px; font-size:11px; resize:vertical; min-height:32px; outline:none; font-family:inherit; box-sizing:border-box; }

/* Camera control grid */
.he-camera-grid { padding:6px 8px; display:flex; flex-direction:column; gap:4px; }
.he-cam-group { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.he-cam-label { font-size:10px; color:#999; min-width:28px; flex-shrink:0; }
.he-cam-btn { font-size:10px; padding:2px 7px; border:1px solid #d0ccee; border-radius:4px; background:#EEEDF8; color:#5b5b9d; cursor:pointer; transition:all .15s; white-space:nowrap; }
.he-cam-btn:hover { background:#E2E0F2; border-color:#a9a5d6; color:#4a4a8a; }
.he-cam-btn:active { background:#D8D5EE; transform:scale(.95); }
.he-cam-tip { padding:4px 8px; font-size:9px; color:#a78bfa; line-height:1.4; }

/* Params — blue-indigo accent */
.he-params { padding:4px 0; display:flex; flex-direction:column; gap:8px; }
.he-param-row { display:flex; gap:10px; }
.he-param-group { flex:1; display:flex; flex-direction:column; gap:3px; }
.he-param-label { font-size:10px; color:#888; }
.he-toggle-group { display:flex; gap:2px; background:rgba(0,0,0,.04); border-radius:5px; padding:2px; }
.he-toggle-btn { flex:1; padding:4px 6px; background:transparent; border:none; color:#888; font-size:10px; border-radius:4px; cursor:pointer; transition:all .2s; text-align:center; }
.he-toggle-btn:hover { color:#555; }
.he-toggle-btn.active { background:rgba(74,108,247,.1); color:#4a6cf7; }

/* Image upload — blue */
.he-image-area { padding:6px 0; }
.he-image-upload-zone { display:flex; align-items:center; gap:8px; justify-content:center; }
.he-image-slot { width:100px; height:75px; border:2px dashed rgba(0,0,0,.12); border-radius:7px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s; position:relative; overflow:hidden; background:rgba(0,0,0,.02); }
.he-image-slot:hover { border-color:rgba(74,108,247,.4); background:rgba(74,108,247,.05); }
.he-image-placeholder { display:flex; flex-direction:column; align-items:center; gap:3px; color:#999; font-size:10px; }
.he-image-placeholder svg { opacity:.5; }
.he-image-preview { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:5px; }
.he-image-remove { position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:50%; background:rgba(0,0,0,.7); color:#fff; border:none; cursor:pointer; font-size:12px; display:flex; align-items:center; justify-content:center; z-index:2; }
.he-image-arrow { color:#bbb; display:flex; align-items:center; }
.he-slot-disabled { opacity:.4; pointer-events:none; position:relative; }
.he-tail-disabled-tip { position:absolute; bottom:2px; left:0; right:0; text-align:center; font-size:8px; color:#a78bfa; background:rgba(255,255,255,.9); padding:1px 0; }

/* Generate bar — blue-indigo gradient */
.he-gen-bar { display:flex; align-items:center; gap:6px; padding:8px 10px; border-top:1px solid rgba(0,0,0,.06); border-bottom:1px solid rgba(0,0,0,.06); flex-shrink:0; background:#E8E8F4; }
.he-small-select { background:#fff; border:1px solid rgba(0,0,0,.12); color:#555; padding:3px 5px; border-radius:4px; font-size:10px; cursor:pointer; outline:none; }
.he-small-select option { background:#fff; color:#333; }
.he-gen-label { font-size:10px; color:#888; }
.he-gen-btn { margin-left:auto; display:flex; align-items:center; gap:4px; padding:6px 16px; background:linear-gradient(135deg,#4a6cf7,#7c6ff7); color:#fff; border:none; border-radius:14px; font-size:12px; font-weight:600; cursor:pointer; transition:all .2s; }
.he-gen-btn:hover { box-shadow:0 3px 12px rgba(74,108,247,.4); }
.he-gen-btn:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; }
/* Results header */
.he-results-header { display:flex; align-items:center; justify-content:center; padding:6px 10px; font-size:12px; color:#666; font-weight:500; border-bottom:1px solid rgba(0,0,0,.06); background:#E8E8F4; position:relative; }
.he-results-header > span { margin-right:auto; }
.he-results-header .he-header-actions { display:flex; align-items:center; gap:4px; margin-left:auto; }
.he-results-header > .he-icon-btn { margin-left:0; }
.he-results-header > .he-collapse-toggle { position:absolute; left:50%; transform:translateX(-50%); }

/* Batch toolbar in header */
.he-batch-toolbar { display:flex; align-items:center; gap:6px; margin-right:8px; }
.he-batch-selected-count { font-size:11px; color:#4a6cf7; font-weight:600; padding:0 4px; }
.he-batch-action-btn { background:#fff; border:1px solid rgba(0,0,0,.12); color:#666; cursor:pointer; padding:6px 8px; border-radius:6px; transition:all .2s; display:flex; align-items:center; justify-content:center; }
.he-batch-action-btn:hover { background:#f5f5f5; border-color:rgba(74,108,247,.3); color:#4a6cf7; }
.he-batch-action-btn.he-batch-danger:hover { border-color:rgba(239,68,68,.3); color:#ef4444; background:#fef2f2; }

/* Task list — blue-indigo accents */
.he-task-list { padding:6px 10px; overflow-y:auto; flex:1; }
.he-task-list::-webkit-scrollbar { width:3px; }
.he-task-list::-webkit-scrollbar-thumb { background:rgba(0,0,0,.1); border-radius:2px; }
.he-task-empty { font-size:11px; color:#999; text-align:center; padding:24px 0; }
.he-task-item { padding:8px; margin-bottom:6px; background:#FAFAFF; border:1px solid rgba(0,0,0,.06); border-radius:7px; }
.he-task-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:3px; gap:4px; }
.he-task-delete { background:none; border:none; color:#999; cursor:pointer; padding:2px; border-radius:4px; display:flex; align-items:center; transition:all .2s; flex-shrink:0; }
.he-task-delete:hover { color:#f44336; background:rgba(244,67,54,.1); }
.he-task-type { font-size:9px; color:#4a6cf7; background:rgba(74,108,247,.1); padding:1px 5px; border-radius:3px; font-weight:500; }
.he-task-status { font-size:9px; font-weight:500; }
.he-task-status.succeed { color:#22c55e; }
.he-task-status.failed { color:#f44336; }
.he-task-status.processing { color:#5b7bf9; animation:he-pulse 1.5s infinite; }
@keyframes he-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.he-task-prompt { font-size:10px; color:#888; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:4px; }
.he-task-videos { display:flex; flex-wrap:wrap; gap:4px; }
.he-task-video { position:relative; width:100%; border-radius:5px; overflow:hidden; background:#ECECF6; }
.he-task-video video { width:100%; aspect-ratio:16/9; object-fit:contain; cursor:pointer; display:block; border-radius:4px; transition:box-shadow .2s; }
.he-task-video video:hover { box-shadow:0 0 0 2px rgba(74,108,247,.5); }
.he-task-video-actions { display:flex; gap:2px; padding:3px; background:rgba(0,0,0,.04); }
.he-vid-btn { flex:1; padding:3px 0; background:rgba(0,0,0,.04); border:1px solid rgba(0,0,0,.1); color:#666; font-size:10px; border-radius:3px; cursor:pointer; transition:all .15s; text-align:center; }
.he-vid-btn:hover { background:rgba(0,0,0,.08); color:#333; }

/* Batch — blue-indigo accents */
.he-batch-section { padding:6px 0; }
.he-batch-section + .he-batch-section { border-top:1px solid rgba(0,0,0,.06); padding-top:8px; margin-top:4px; }
.he-batch-textarea { width:100%; background:#FAFAFF; border:1px solid rgba(0,0,0,.1); color:#333; padding:8px; border-radius:7px; font-size:11px; resize:vertical; outline:none; font-family:'Consolas','Monaco',monospace; line-height:1.5; box-sizing:border-box; }
.he-batch-textarea:focus { border-color:rgba(74,108,247,.4); }
.he-batch-textarea::placeholder { color:#aaa; }
.he-batch-actions { display:flex; gap:6px; margin-top:6px; }
.he-batch-btn { padding:5px 14px; background:rgba(74,108,247,.1); border:1px solid rgba(74,108,247,.25); color:#4a6cf7; font-size:11px; border-radius:5px; cursor:pointer; transition:all .2s; }
.he-batch-btn:hover { background:rgba(74,108,247,.2); }
.he-batch-btn-sec { background:transparent; border-color:rgba(0,0,0,.12); color:#888; }
.he-batch-btn-sec:hover { background:rgba(0,0,0,.04); color:#555; }

/* Batch image list */
.he-batch-image-list { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.he-batch-img-item { display:flex; align-items:center; gap:4px; padding:3px 8px; background:rgba(0,0,0,.02); border:1px solid rgba(0,0,0,.08); border-radius:5px; font-size:10px; color:#888; position:relative; cursor:pointer; transition:all .15s; }
.he-batch-img-item:not(.is-url):hover { border-color:rgba(0,0,0,.2); background:rgba(0,0,0,.04); }
.he-batch-img-item.selected { border-color:#5b7bf9; background:rgba(74,108,247,.12); color:#5b7bf9; box-shadow:0 0 0 1px rgba(74,108,247,.3); }
.he-batch-img-item.uploaded { border-color:rgba(74,108,247,.25); color:#4a6cf7; }
.he-batch-img-thumb { width:20px; height:20px; border-radius:3px; object-fit:cover; flex-shrink:0; }
.he-batch-img-missing { width:20px; height:20px; border-radius:3px; background:rgba(244,67,54,.15); color:#f44336; display:flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0; }
/* Batch image grouping by shot */
.he-batch-img-group { margin-bottom:8px; }
.he-batch-img-group-label { font-size:10px; font-weight:600; color:#5b7bf9; margin-bottom:4px; padding:2px 8px; background:rgba(74,108,247,.08); border-radius:4px; display:inline-block; }
.he-batch-img-group-items { display:flex; flex-wrap:wrap; gap:6px; margin-left:4px; padding-left:8px; border-left:2px solid rgba(74,108,247,.2); }
.he-batch-img-role { font-size:8px; color:#888; background:rgba(0,0,0,.04); border-radius:3px; padding:0 4px; line-height:16px; flex-shrink:0; }
.he-batch-img-name { max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.he-batch-img-remove { width:14px; height:14px; border-radius:50%; background:rgba(0,0,0,.08); color:#888; border:none; cursor:pointer; font-size:9px; display:flex; align-items:center; justify-content:center; padding:0; line-height:1; transition:all .15s; }
.he-batch-img-remove:hover { background:rgba(244,67,54,.3); color:#f44336; }

/* Batch shots */
.he-batch-shots { display:flex; flex-direction:column; gap:4px; max-height:280px; overflow-y:auto; margin-top:4px; }
.he-batch-shots::-webkit-scrollbar { width:3px; }
.he-batch-shots::-webkit-scrollbar-thumb { background:rgba(0,0,0,.1); border-radius:2px; }
.he-batch-shot { padding:6px 8px; background:#FAFAFF; border:1px solid rgba(0,0,0,.06); border-radius:6px; transition:all .2s; }
.he-batch-shot.running { border-color:rgba(74,108,247,.4); background:rgba(74,108,247,.05); }
.he-batch-shot.succeed { border-color:rgba(34,197,94,.3); background:rgba(34,197,94,.04); }
.he-batch-shot.failed { border-color:rgba(244,67,54,.3); background:rgba(244,67,54,.04); }
.he-batch-shot-header { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.he-batch-shot-idx { font-size:11px; font-weight:600; color:#333; min-width:24px; }
.he-batch-shot-type { font-size:9px; color:#4a6cf7; background:rgba(74,108,247,.1); padding:1px 5px; border-radius:3px; font-weight:500; }
.he-batch-shot-model { font-size:9px; color:#888; background:rgba(0,0,0,.04); padding:1px 5px; border-radius:3px; }
.he-batch-shot-status { font-size:9px; font-weight:500; margin-left:auto; }
.he-batch-shot-status.pending { color:#666; }
.he-batch-shot-status.processing { color:#5b7bf9; animation:he-pulse 1.5s infinite; }
.he-batch-shot-status.succeed { color:#22c55e; }
.he-batch-shot-status.failed { color:#f44336; }
.he-batch-shot-prompt { font-size:10px; color:#888; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.he-batch-shot-error { font-size:9px; color:#f44336; margin-top:2px; padding:2px 6px; background:rgba(244,67,54,.08); border-radius:3px; }
.he-batch-progress-text { font-size:11px; color:#888; }
/* Interactive shot card — hailuo */
.he-shot-type-select,.he-shot-model-select { font-size:9px; padding:1px 3px; border:1px solid rgba(0,0,0,.12); border-radius:3px; background:rgba(255,255,255,.9); color:#444; cursor:pointer; max-width:110px; }
.he-shot-type-select:focus,.he-shot-model-select:focus { outline:none; border-color:#5b7bf9; }
.he-batch-shot-images { display:flex; flex-wrap:wrap; gap:6px; margin-top:5px; padding-top:5px; border-top:1px solid rgba(0,0,0,.05); }
.he-batch-shot-img-group { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.he-batch-shot-img-label { font-size:8px; color:#888; white-space:nowrap; }
.he-batch-shot-img-slot { width:40px; height:40px; border:1.5px dashed rgba(0,0,0,.18); border-radius:5px; display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; overflow:hidden; transition:border-color .15s,background .15s; }
.he-batch-shot-img-slot.empty:hover { border-color:#5b7bf9; background:rgba(74,108,247,.06); }
.he-batch-shot-img-slot.empty span { font-size:8px; color:#aaa; text-align:center; line-height:1.2; padding:2px; pointer-events:none; }
.he-batch-shot-img-slot.has-img { border-style:solid; border-color:rgba(74,108,247,.35); }
.he-batch-shot-img-thumb { width:100%; height:100%; object-fit:cover; display:block; }
.he-batch-slot-remove { position:absolute; top:1px; right:1px; width:14px; height:14px; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; border:none; cursor:pointer; font-size:10px; line-height:1; display:flex; align-items:center; justify-content:center; padding:0; z-index:2; }
.he-batch-slot-remove:hover { background:rgba(244,67,54,.85); }
.he-batch-shot-refs { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.he-batch-shot-ref-item { position:relative; width:40px; height:40px; border-radius:5px; overflow:hidden; border:1px solid rgba(74,108,247,.35); }
.he-batch-ref-remove { position:absolute; top:1px; right:1px; width:14px; height:14px; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; border:none; cursor:pointer; font-size:10px; line-height:1; display:flex; align-items:center; justify-content:center; padding:0; z-index:2; }
.he-batch-ref-remove:hover { background:rgba(244,67,54,.85); }
/* Editable prompt textarea inside Hailuo shot card */
.he-batch-shot-prompt-edit { display:block; width:100%; box-sizing:border-box; margin-top:4px; padding:3px 5px; border:1px solid transparent; border-radius:3px; background:transparent; font-size:10px; color:#555; font-family:inherit; line-height:1.5; resize:vertical; min-height:34px; transition:border-color .15s,background .15s; }
.he-batch-shot-prompt-edit:hover { border-color:rgba(0,0,0,.14); background:rgba(0,0,0,.04); }
.he-batch-shot-prompt-edit:focus { outline:none; border-color:rgba(91,123,249,.5); background:rgba(74,108,247,.03); }

/* Batch shot params row — shared by all three editors */
.ke-batch-shot-params,
.he-batch-shot-params {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px 6px;
    padding: 3px 0 4px;
    border-bottom: 1px solid rgba(0,0,0,.06);
    margin-bottom: 4px;
}
.ke-param-label,
.he-param-label {
    font-size: 10px;
    color: #888;
    white-space: nowrap;
}
.ke-param-select,
.he-param-select {
    font-size: 10px;
    padding: 1px 3px;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 3px;
    background: #fff;
    color: #333;
    cursor: pointer;
    height: 20px;
    max-width: 80px;
}
.ke-param-select:focus,
.he-param-select:focus {
    outline: none;
    border-color: rgba(74,108,247,.5);
}
.ke-param-warning,
.he-param-warning {
    font-size: 10px;
    color: #b45309;
    background: rgba(251,191,36,.15);
    border: 1px solid rgba(251,191,36,.4);
    border-radius: 3px;
    padding: 1px 5px;
    cursor: help;
    white-space: nowrap;
    margin-left: auto;
}
/* Delete & add-shot buttons (shared by Hailuo and Jimeng batch cards) */
.he-batch-shot-del { margin-left:auto; padding:0 5px; height:18px; border:none; border-radius:3px; background:transparent; color:#aaa; font-size:13px; cursor:pointer; line-height:1; transition:color .15s,background .15s; flex-shrink:0; }
.he-batch-shot-del:hover { color:#ef4444; background:rgba(244,67,54,.08); }
.he-batch-add-shot-btn { display:block; width:100%; margin-top:6px; padding:5px; background:rgba(74,108,247,.06); border:1px dashed rgba(74,108,247,.35); border-radius:5px; color:rgba(74,108,247,.8); font-size:11px; cursor:pointer; text-align:center; transition:background .15s,border-color .15s; }
.he-batch-add-shot-btn:hover { background:rgba(74,108,247,.12); border-color:rgba(74,108,247,.6); }
/* Delete & add-shot buttons for Kling batch cards */
.ke-batch-shot-del { margin-left:auto; padding:0 5px; height:18px; border:none; border-radius:3px; background:transparent; color:#aaa; font-size:13px; cursor:pointer; line-height:1; transition:color .15s,background .15s; flex-shrink:0; }
.ke-batch-shot-del:hover { color:#ef4444; background:rgba(244,67,54,.08); }
.ke-batch-add-shot-btn { display:block; width:100%; margin-top:6px; padding:5px; background:rgba(74,108,247,.06); border:1px dashed rgba(74,108,247,.35); border-radius:5px; color:rgba(74,108,247,.8); font-size:11px; cursor:pointer; text-align:center; transition:background .15s,border-color .15s; }
.ke-batch-add-shot-btn:hover { background:rgba(74,108,247,.12); border-color:rgba(74,108,247,.6); }
/* Jimeng batch shot card */
.he-batch-shot-card { background:rgba(255,255,255,.6); border:1px solid rgba(0,0,0,.08); border-radius:6px; padding:6px 8px; margin-bottom:6px; font-size:11px; }
.he-batch-shot-card.done { border-left:3px solid #22c55e; }
.he-batch-shot-card.failed { border-left:3px solid #ef4444; }
.he-batch-shot-card.running { border-left:3px solid rgba(74,108,247,.6); }

/* Toast — blue-indigo */
.he-toast { position:fixed; bottom:40px; left:50%; transform:translateX(-50%); background:rgba(255,255,255,.97); color:#333; padding:8px 20px; border-radius:8px; font-size:12px; z-index:20000; border:1px solid rgba(74,108,247,.3); box-shadow:0 4px 20px rgba(0,0,0,.12); animation:he-toastIn .25s ease; }
.he-toast.error { border-color:rgba(244,67,54,.4); color:#d32f2f; }
@keyframes he-toastIn { from{opacity:0;transform:translateX(-50%) translateY(10px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }

/* ═══════════════════════════════════════════════════════
   Nano Banana Pro — Image Editor (暖橙色主题)
   参考 Nano Banana Pro 官网配色
   ═══════════════════════════════════════════════════════ */
.nano-editor { display:flex; gap:0; height:100%; min-height:500px; background:#FAF8F4; border-radius:8px; overflow:hidden; }
.nano-sidebar { width:340px; min-width:300px; max-width:380px; padding:20px; background:linear-gradient(180deg,#FDFCF8 0%,#F5F3EE 100%); border-right:1px solid #E8E4DC; overflow-y:auto; display:flex; flex-direction:column; gap:16px; }
.nano-main { flex:1; display:flex; flex-direction:column; overflow-y:auto; padding:16px; }

/* Labels */
.nano-label { display:block; font-size:13px; font-weight:600; color:#7a5c2e; margin-bottom:8px; }
.nano-label-sm { display:block; font-size:11px; font-weight:500; color:#9a7b4f; margin-bottom:4px; }
.nano-section { margin-bottom:4px; }

/* Prompt */
.nano-prompt { width:100%; padding:10px 12px; border:1.5px solid #E0DCD4; border-radius:10px; background:#FFFEFB; font-size:13px; line-height:1.5; resize:vertical; color:#4a3a1e; transition:border-color .2s; box-sizing:border-box; font-family:inherit; }
.nano-prompt:focus { outline:none; border-color:#f5a623; box-shadow:0 0 0 3px rgba(245,166,35,.15); }
.nano-prompt::placeholder { color:#c4a97a; }

/* Reference images */
.nano-ref-images { background:#FDFCF8; border:1.5px dashed #DDD8CE; border-radius:10px; padding:12px; }
.nano-ref-list { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.nano-ref-thumb { position:relative; width:64px; height:64px; border-radius:8px; overflow:hidden; border:2px solid #E8E4DC; }
.nano-ref-thumb img { width:100%; height:100%; object-fit:cover; }
.nano-ref-item { position:relative; max-width:200px; border-radius:8px; overflow:hidden; border:2px solid #E8E4DC; }
.nano-ref-item img { width:100%; height:auto; display:block; object-fit:contain; }
.nano-ref-remove { position:absolute; top:-2px; right:-2px; width:20px; height:20px; border-radius:50%; background:#f5a623; color:#fff; border:none; font-size:14px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.nano-ref-remove:hover { background:#e8941a; }
.nano-ref-upload-btn { display:flex; align-items:center; gap:8px; padding:10px; cursor:pointer; color:#b08840; font-size:12px; transition:color .2s; }
.nano-ref-upload-btn:hover { color:#f5a623; }
.nano-ref-upload-btn svg { stroke:#d4a550; }
.nano-ref-hint { font-size:11px; color:#c4a97a; }

/* Controls */
.nano-controls { display:flex; flex-direction:column; gap:10px; }
.nano-ctrl-row { display:flex; gap:12px; }
.nano-ctrl-group { flex:1; }
.nano-select { width:100%; padding:7px 10px; border:1.5px solid #E0DCD4; border-radius:8px; background:#FFFEFB; color:#5a4420; font-size:12px; cursor:pointer; appearance:auto; }
.nano-select:focus { outline:none; border-color:#f5a623; }

/* Count control */
.nano-count-ctrl { display:flex; align-items:center; gap:0; border:1.5px solid #E0DCD4; border-radius:8px; overflow:hidden; background:#FFFEFB; }
.nano-count-btn { width:32px; height:32px; border:none; background:transparent; color:#b08840; font-size:16px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.nano-count-btn:hover { background:#F0EDE6; }
.nano-count-val { flex:1; text-align:center; font-size:13px; font-weight:600; color:#5a4420; min-width:24px; }

/* Generate button */
.nano-generate-btn { width:100%; padding:12px 20px; border:none; border-radius:10px; background:linear-gradient(135deg,#f5a623 0%,#f7c948 100%); color:#fff; font-size:15px; font-weight:600; cursor:pointer; transition:all .25s; box-shadow:0 4px 12px rgba(245,166,35,.3); display:flex; align-items:center; justify-content:center; gap:8px; margin-top:auto; }
.nano-generate-btn:hover:not(:disabled) { background:linear-gradient(135deg,#e8941a 0%,#f5b830 100%); box-shadow:0 6px 20px rgba(245,166,35,.4); transform:translateY(-1px); }
.nano-generate-btn:disabled { opacity:.6; cursor:not-allowed; transform:none; }

/* Mini mode toggle */
.nano-mode-toggle-mini { display:flex; gap:6px; margin-bottom:12px; background:#F5F3EE; padding:4px; border-radius:8px; }
.nano-mode-btn-mini { flex:1; padding:6px 12px; border:none; border-radius:6px; background:transparent; color:#9a7b4f; font-size:12px; font-weight:500; cursor:pointer; transition:all .2s; }
.nano-mode-btn-mini.active { background:#FFFEFB; color:#f5a623; box-shadow:0 2px 4px rgba(0,0,0,.08); }
.nano-mode-btn-mini:hover:not(.active) { background:rgba(255,255,255,.5); }

/* Spinner */
.nano-spinner { width:16px; height:16px; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; display:inline-block; animation:nano-spin .6s linear infinite; }
.nano-spinner-lg { width:36px; height:36px; border:3px solid rgba(245,166,35,.2); border-top-color:#f5a623; border-radius:50%; display:inline-block; animation:nano-spin .8s linear infinite; }
@keyframes nano-spin { to { transform:rotate(360deg); } }

/* Result area */
.nano-result-area { flex:1; position:relative; background:#FDFCF8; border:1.5px solid #E8E4DC; border-radius:12px; min-height:300px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.nano-back-btn {
    position:absolute;
    top:12px;
    right:12px;
    width:28px;
    height:28px;
    border:none;
    border-radius:0;
    background:transparent;
    color:#4e5969;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:2;
    transition:color .15s;
}
.nano-back-btn:hover { background:transparent; color:#1d2129; }
.nano-back-btn svg { display:block; }
.nano-result-placeholder { text-align:center; color:#c4a97a; }
.nano-result-placeholder p { margin-top:12px; font-size:13px; }
.nano-result-loading { text-align:center; color:#b08840; }
.nano-result-loading p { margin-top:16px; font-size:13px; }

.nano-result-grid { display:flex; flex-wrap:wrap; gap:16px; padding:16px; width:100%; height:100%; align-items:center; justify-content:center; }
.nano-result-img-wrap { position:relative; border-radius:10px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.1); max-width:100%; flex:1 1 45%; min-width:200px; }
.nano-result-img { width:100%; display:block; }
.nano-result-item { position:relative; border-radius:10px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.1); max-width:90%; max-height:90%; }
.nano-result-item img { width:100%; height:100%; max-height:calc(100vh - 200px); display:block; object-fit:contain; }
.nano-result-actions { position:absolute; bottom:8px; right:8px; display:flex; gap:6px; opacity:0; transition:opacity .2s; }
.nano-result-img-wrap:hover .nano-result-actions { opacity:1; }
.nano-result-item:hover .nano-result-actions { opacity:1; }
.nano-dl-btn { width:32px; height:32px; border-radius:8px; background:rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center; color:#5a4420; text-decoration:none; box-shadow:0 2px 6px rgba(0,0,0,.15); }
.nano-dl-btn:hover { background:#f5a623; color:#fff; }
.nano-dl-btn svg { stroke:currentColor; }
.nano-result-download { padding:6px 12px; border:none; border-radius:6px; background:rgba(255,255,255,.9); color:#5a4420; font-size:12px; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.15); transition:all .2s; }
.nano-result-download:hover { background:#f5a623; color:#fff; }

/* History */
.nano-history-area { margin-top:16px; }
.nano-history-header { display:flex; justify-content:space-between; align-items:center; padding:0 4px; margin-bottom:8px; }
.nano-history-header span { font-size:12px; font-weight:600; color:#9a7b4f; }
.nano-clear-history { background:none; border:none; color:#d4a550; font-size:11px; cursor:pointer; padding:2px 6px; }
.nano-clear-history:hover { color:#e8941a; text-decoration:underline; }
.nano-history-grid { display:flex; gap:8px; flex-wrap:wrap; }
.nano-history-item { width:80px; cursor:pointer; border-radius:8px; overflow:hidden; border:2px solid transparent; transition:border-color .2s; }
.nano-history-item:hover { border-color:#f5a623; }
.nano-history-item img { width:100%; height:60px; object-fit:cover; display:block; }
.nano-history-info { font-size:10px; color:#9a7b4f; padding:3px 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:#FDFCF8; }

/* Inpaint Canvas */
.jimeng-inpaint-canvas-container { background:#FDFCF8; border:1.5px solid #E8E4DC; border-radius:10px; padding:12px; }
.jimeng-inpaint-canvas { display:block; width:100%; max-width:300px; border:2px solid #E0DCD4; border-radius:8px; cursor:crosshair; background:#fff; margin:0 auto 12px; }
.jimeng-inpaint-tools { display:flex; flex-direction:column; gap:10px; }
.jimeng-inpaint-tool-group { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.jimeng-inpaint-brush-size { flex:1; min-width:100px; }
.jimeng-inpaint-brush-value { font-size:11px; color:#9a7b4f; min-width:40px; }
.nano-ctrl-btn { padding:6px 12px; border:1.5px solid #E0DCD4; border-radius:6px; background:#FFFEFB; color:#7a5c2e; font-size:11px; cursor:pointer; transition:all .2s; }
.nano-ctrl-btn:hover { border-color:#f5a623; background:#FFF5EB; color:#f5a623; }

/* Batch list */
.nano-batch-list { padding:16px; overflow-y:auto; }
.nano-batch-empty { text-align:center; color:#c4a97a; padding:40px 20px; font-size:13px; }
.nano-batch-shot { background:#FDFCF8; border:1.5px solid #E8E4DC; border-radius:10px; padding:12px; margin-bottom:12px; }
.nano-batch-shot.running { border-color:#f5a623; background:#FFF5EB; }
.nano-batch-shot.succeed { border-color:#7cb342; background:#f1f8e9; }
.nano-batch-shot.failed { border-color:#e57373; background:#ffebee; }
.nano-batch-shot-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.nano-batch-shot-idx { font-size:13px; font-weight:700; color:#7a5c2e; }
.nano-batch-shot-status { font-size:12px; font-weight:600; color:#7a5c2e; }
.nano-batch-shot.running .nano-batch-shot-status { color:#f5a623; }
.nano-batch-shot.succeed .nano-batch-shot-status { color:#7cb342; }
.nano-batch-shot.failed .nano-batch-shot-status { color:#e57373; }
.nano-batch-shot-info { font-size:11px; color:#9a7b4f; }
.nano-batch-shot-prompt { font-size:11px; color:#9a7b4f; margin-bottom:4px; }
.nano-batch-shot-url { font-size:11px; color:#9a7b4f; margin-bottom:8px; word-break:break-all; }
.nano-batch-shot-images { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.nano-batch-shot-images img { width:120px; height:120px; object-fit:cover; border-radius:6px; border:2px solid #E8E4DC; }
.nano-batch-shot-error { font-size:11px; color:#e57373; margin-top:6px; padding:6px 8px; background:rgba(229,115,115,.1); border-radius:4px; }

/* Batch actions */
.nano-batch-actions { display:flex; gap:8px; margin-top:12px; }
.nano-batch-parse-btn, .nano-batch-run-btn, .nano-batch-stop-btn { padding:8px 16px; border:none; border-radius:8px; font-size:12px; font-weight:600; cursor:pointer; transition:all .2s; }
.nano-batch-parse-btn { background:#E8E4DC; color:#7a5c2e; }
.nano-batch-parse-btn:hover { background:#d4cfc4; }
.nano-batch-run-btn { background:linear-gradient(135deg,#f5a623 0%,#f7c948 100%); color:#fff; box-shadow:0 2px 8px rgba(245,166,35,.3); }
.nano-batch-run-btn:hover:not(:disabled) { background:linear-gradient(135deg,#e8941a 0%,#f5b830 100%); box-shadow:0 4px 12px rgba(245,166,35,.4); }
.nano-batch-run-btn:disabled { opacity:.5; cursor:not-allowed; }
.nano-batch-stop-btn { background:#e57373; color:#fff; }
.nano-batch-stop-btn:hover { background:#d32f2f; }

/* Batch status */
.nano-batch-status { margin-top:12px; }
.nano-batch-progress-bar { height:6px; background:#E8E4DC; border-radius:3px; overflow:hidden; margin-bottom:6px; }
.nano-batch-progress-fill { height:100%; background:linear-gradient(90deg,#f5a623 0%,#f7c948 100%); transition:width .3s; width:0; }
.nano-batch-progress-text { font-size:11px; color:#9a7b4f; }

/* ── Resizer Handle ── */
.nano-resizer {
    width: 6px; min-width: 6px; cursor: col-resize; background: transparent;
    position: relative; flex-shrink: 0; z-index: 5; transition: background .2s;
}
.nano-resizer::after {
    content: ''; position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
    width: 2px; height: 36px; background: #e0cca8; border-radius: 2px; transition: background .2s, height .2s;
}
.nano-resizer:hover { background: rgba(245,166,35,.08); }
.nano-resizer:hover::after { background: #f5a623; height: 50px; }

/* ── Mode Toggle ── */
.nano-mode-toggle { display:flex; gap:0; border-radius:8px; overflow:hidden; border:1px solid #E0DCD4; margin-bottom:14px; }
.nano-mode-btn { flex:1; padding:7px 0; border:none; background:#FDFCF8; color:#9a7b4f; font-size:13px; font-weight:600; cursor:pointer; transition:all .2s; }
.nano-mode-btn.active { background:linear-gradient(135deg,#f5a623,#e8941a); color:#fff; }
.nano-mode-btn:hover:not(.active) { background:#F5F2EC; }

/* ── Batch Input ── */
.nano-batch-input { width:100%; border:1px solid #E0DCD4; border-radius:8px; padding:10px; font-size:12px; font-family:'Consolas','Monaco',monospace; resize:vertical; background:#FFFEFB; color:#5a4420; box-sizing:border-box; line-height:1.5; }
.nano-batch-input:focus { outline:none; border-color:#f5a623; box-shadow:0 0 0 2px rgba(245,166,35,.2); }
.nano-batch-input::placeholder { color:#c4a870; }
.nano-batch-hint { font-size:11px; color:#b8956a; margin-top:6px; line-height:1.5; }

/* ── Batch Actions ── */
.nano-batch-actions { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.nano-batch-parse-btn, .nano-batch-run-btn, .nano-batch-stop-btn {
    flex:1; min-width:100px; padding:9px 12px; border:none; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; transition:all .2s;
}
.nano-batch-parse-btn { background:#FDF8F0; color:#e8941a; border:1px solid #E8DFD0; }
.nano-batch-parse-btn:hover { background:#F5EFE4; }
.nano-batch-parse-btn:disabled { opacity:.5; cursor:not-allowed; }
.nano-batch-run-btn { background:linear-gradient(135deg,#f5a623,#e8941a); color:#fff; }
.nano-batch-run-btn:hover:not(:disabled) { background:linear-gradient(135deg,#e8941a,#d47b10); transform:translateY(-1px); box-shadow:0 3px 8px rgba(245,166,35,.35); }
.nano-batch-run-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.nano-batch-stop-btn { background:#e74c3c; color:#fff; }
.nano-batch-stop-btn:hover { background:#c0392b; }

/* ── Batch Status ── */
.nano-batch-status { margin-top:10px; display:flex; align-items:center; gap:10px; }
.nano-batch-progress-bar { flex:1; height:8px; background:#E8E4DC; border-radius:4px; overflow:hidden; }
.nano-batch-progress-fill { height:100%; background:linear-gradient(90deg,#f5a623,#e8941a); border-radius:4px; width:0; transition:width .4s ease; }
.nano-batch-progress-text { font-size:12px; font-weight:600; color:#9a7b4f; white-space:nowrap; }

/* ── Batch Card List ── */
.nano-batch-list { padding:12px; overflow-y:auto; height:100%; }
.nano-batch-empty { text-align:center; padding:60px 20px; color:#b8956a; font-size:14px; }

.nano-batch-card {
    border:1px solid #f0dcc0; border-radius:10px; padding:12px; margin-bottom:10px;
    background:#fffdf8; transition:border-color .2s, box-shadow .2s;
}
.nano-batch-card.nano-bs-run { border-color:#f5a623; box-shadow:0 0 0 2px rgba(245,166,35,.2); }
.nano-batch-card.nano-bs-ok { border-color:#27ae60; background:#F8FBF8; }
.nano-batch-card.nano-bs-fail { border-color:#e74c3c; background:#FDF8F8; }

.nano-batch-card-header { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.nano-batch-idx { font-weight:700; color:#e8941a; font-size:13px; min-width:36px; }
.nano-batch-card-status { font-size:12px; }
.nano-batch-card-meta { margin-left:auto; font-size:11px; color:#b8956a; }

.nano-batch-card-prompt { font-size:12px; color:#5a4420; line-height:1.5; word-break:break-word; }
.nano-batch-card-ref { font-size:11px; color:#9a7b4f; margin-top:4px; }
.nano-batch-card-error { font-size:11px; color:#e74c3c; margin-top:4px; }

.nano-batch-card-images { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.nano-batch-thumb { width:80px; height:80px; object-fit:cover; border-radius:6px; border:1px solid #E0DCD4; cursor:pointer; transition:transform .2s; }
.nano-batch-thumb:hover { transform:scale(1.05); box-shadow:0 2px 8px rgba(0,0,0,.15); }

/* Responsive */
@media (max-width:768px) {
    .nano-editor { flex-direction:column; }
    .nano-sidebar { width:100%; max-width:100%; min-width:0; border-right:none; border-bottom:1px solid #E8E4DC; }
}

/* 精华液分子图 · 快速生成风格（3×3 网格，窄屏变 2 列） */
.mat-em-presets-grid {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 520px) {
    .mat-em-presets-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.mat-em-preset-btn span {
    color: inherit;
    opacity: 0.85;
    font-size: 10px;
}

/* ─── 素材编导工作台（弹层）设计感 ─── */
.mat-studio-overlay {
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse 100% 80% at 50% -20%, rgba(45, 212, 191, 0.1), rgba(0, 0, 0, 0.65));
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 100100;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    padding: 16px;
    box-sizing: border-box;
    animation: mat-studio-fade-in 0.22s ease-out;
}

/* 素材弹层：主面板 + 可收起提示词侧栏 */
.mat-studio-shell {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    max-width: min(980px, calc(100vw - 24px));
    max-height: min(88vh, 900px);
    width: auto;
}
.mat-studio-shell > .mat-studio-panel {
    flex: 0 1 auto;
    min-width: 0;
    max-height: 100%;
}
.mat-prompt-lib-sidebar {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex: 0 0 auto;
    max-height: 100%;
    margin-left: 10px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
    background: rgba(22, 24, 32, 0.95);
}
.mat-prompt-lib-sidebar__toggle {
    width: 30px;
    flex: 0 0 30px;
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(36, 38, 52, 0.95);
    color: #94a3b8;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 0;
    transition: background 0.2s ease, color 0.2s ease;
}
.mat-prompt-lib-sidebar__toggle:hover {
    background: rgba(45, 212, 191, 0.12);
    color: #7dd3c0;
}
.mat-prompt-lib-sidebar[data-collapsed="1"] .mat-prompt-lib-sidebar__toggle {
    border-right: none;
    transform: scaleX(-1);
}
.mat-prompt-lib-sidebar__inner {
    width: 292px;
    flex: 0 0 292px;
    box-sizing: border-box;
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    overflow: hidden;
    transition: width 0.22s ease, flex-basis 0.22s ease, opacity 0.18s ease, padding 0.22s ease;
}
.mat-prompt-lib-sidebar[data-collapsed="1"] .mat-prompt-lib-sidebar__inner {
    width: 0;
    flex-basis: 0;
    padding-left: 0;
    padding-right: 0;
    opacity: 0;
    pointer-events: none;
}
.mat-pl-head-title {
    font-size: 14px;
    font-weight: 700;
    color: #e8ecf4;
    letter-spacing: 0.02em;
}
.mat-pl-head-sub {
    font-size: 11px;
    color: #7f849c;
    margin-top: 2px;
}
.mat-pl-label {
    font-size: 11px;
    font-weight: 600;
    color: #a8b8d8;
    margin-top: 4px;
}
.mat-pl-select,
.mat-pl-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(203, 166, 247, 0.2);
    background: rgba(18, 19, 26, 0.9);
    color: #e8ecf4;
    font-size: 13px;
    font-family: inherit;
}
.mat-pl-select:focus,
.mat-pl-input:focus {
    outline: none;
    border-color: rgba(125, 211, 192, 0.45);
    box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.12);
}
.mat-pl-search {
    margin-top: 2px;
}
.mat-pl-btn {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: filter 0.15s ease, transform 0.12s ease;
}
.mat-pl-btn--primary {
    background: linear-gradient(135deg, rgba(125, 211, 192, 0.35), rgba(45, 212, 191, 0.25));
    border-color: rgba(125, 211, 192, 0.35);
    color: #d8f5ef;
}
.mat-pl-btn--primary:hover {
    filter: brightness(1.06);
}
.mat-pl-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 8px 0 4px;
}
.mat-pl-list {
    flex: 1;
    min-height: 100px;
    overflow-y: auto;
    margin-top: 4px;
    padding-right: 4px;
    scrollbar-width: thin;
}
.mat-pl-empty {
    font-size: 12px;
    color: #7f849c;
    line-height: 1.5;
    padding: 12px 6px;
    text-align: center;
}
.mat-pl-item {
    background: rgba(28, 30, 40, 0.88);
    border: 1px solid rgba(203, 166, 247, 0.12);
    border-radius: 10px;
    padding: 8px 10px;
    margin-bottom: 8px;
}
.mat-pl-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.mat-pl-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(125, 211, 192, 0.15);
    color: #7dd3c0;
    flex-shrink: 0;
}
.mat-pl-time {
    font-size: 10px;
    color: #6b7280;
    flex-shrink: 0;
}
.mat-pl-note-line {
    font-size: 11px;
    color: #b8c5e0;
    margin-bottom: 4px;
    line-height: 1.35;
}
.mat-pl-preview {
    font-size: 12px;
    color: #c5d0f0;
    line-height: 1.45;
    word-break: break-word;
    margin-bottom: 8px;
}
.mat-pl-item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.mat-pl-item-btn {
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-family: inherit;
    background: rgba(36, 38, 52, 0.9);
    color: #c5d0f0;
}
.mat-pl-item-btn--use {
    background: linear-gradient(135deg, rgba(125, 211, 192, 0.25), rgba(45, 212, 191, 0.15));
    border-color: rgba(125, 211, 192, 0.3);
    color: #b8f0e4;
}
.mat-pl-item-btn--del {
    color: #f38ba8;
    border-color: rgba(243, 139, 168, 0.25);
}
.mat-pl-item-btn:hover {
    filter: brightness(1.08);
}
@media (max-width: 720px) {
    .mat-studio-shell {
        flex-direction: column;
        align-items: stretch;
        max-height: none;
    }
    .mat-studio-shell > .mat-studio-panel {
        max-height: min(70vh, 620px);
    }
    .mat-prompt-lib-sidebar {
        margin-left: 0;
        margin-top: 10px;
        max-height: min(42vh, 360px);
    }
    .mat-prompt-lib-sidebar__inner {
        width: 100%;
        flex: 1 1 auto;
        flex-basis: auto;
        max-width: 100%;
    }
    .mat-prompt-lib-sidebar[data-collapsed="1"] {
        max-height: none;
    }
    .mat-prompt-lib-sidebar[data-collapsed="1"] .mat-prompt-lib-sidebar__inner {
        display: none;
    }
}
@keyframes mat-studio-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.mat-studio-panel {
    position: relative;
    z-index: 1;
    pointer-events: auto;
    width: min(580px, 96vw);
    max-height: min(88vh, 900px);
    display: flex;
    flex-direction: column;
    background:
        linear-gradient(165deg, rgba(28, 30, 38, 0.98) 0%, rgba(18, 19, 26, 0.99) 48%, rgba(12, 13, 18, 1) 100%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 32px 96px rgba(0, 0, 0, 0.62),
        0 0 120px rgba(94, 184, 168, 0.06);
    color: #d8dee9;
    font-family: inherit;
    overflow: hidden;
}

.mat-studio-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 18px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 100%);
    flex-shrink: 0;
}

.mat-studio-head-main {
    flex: 1;
    min-width: 0;
}

.mat-studio-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.03em;
    background: linear-gradient(105deg, #f4f6fb 0%, #c9e8e0 38%, #b8c9e8 72%, #e8dfd4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.mat-studio-tagline {
    margin: 4px 0 0;
    font-size: 11px;
    color: #7f849c;
    letter-spacing: 0.04em;
}

.mat-studio-usage {
    flex: 0 0 auto;
    min-width: 148px;
    max-width: 220px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(16, 18, 24, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.mat-usage-main {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mat-usage-icon {
    font-size: 14px;
    color: #7dd3c0;
    line-height: 1;
    filter: drop-shadow(0 0 8px rgba(125, 211, 192, 0.35));
}

.mat-usage-numbers {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.mat-usage-value {
    font-size: 20px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #f5f0ff;
    letter-spacing: -0.02em;
}

.mat-usage-unit {
    font-size: 11px;
    color: #a6adc8;
    font-weight: 600;
}

.mat-usage-badge {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(69, 71, 90, 0.9);
    color: #bac2de;
}

.mat-usage-badge--cloud {
    background: linear-gradient(90deg, rgba(137, 180, 250, 0.35), rgba(203, 166, 247, 0.35));
    color: #e8ecff;
}

.mat-usage-detail {
    margin: 6px 0 0;
    font-size: 10px;
    line-height: 1.35;
    color: #7f849c;
    max-height: 2.7em;
    overflow: hidden;
}

.mat-usage-refresh {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 8px;
    background: rgba(69, 71, 90, 0.5);
    color: #bac2de;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.mat-usage-refresh:hover {
    background: rgba(203, 166, 247, 0.25);
    color: #f5f0ff;
}

.mat-studio-close {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: rgba(69, 71, 90, 0.45);
    color: #a6adc8;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.mat-studio-close:hover {
    background: rgba(243, 139, 168, 0.25);
    color: #f38ba8;
}

.mat-studio-body {
    padding: 16px 18px 20px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(203, 166, 247, 0.35) transparent;
}
.mat-studio-body::-webkit-scrollbar {
    width: 8px;
}
.mat-studio-body::-webkit-scrollbar-thumb {
    background: rgba(203, 166, 247, 0.25);
    border-radius: 8px;
}

@media (max-width: 520px) {
    .mat-studio-head {
        flex-wrap: wrap;
    }
    .mat-studio-usage {
        max-width: 100%;
        width: 100%;
    }
}

/* 素材编导右侧工作台：未点子功能时即可见积分条 */
.mat-sucai-usage-inline {
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(22, 24, 32, 0.9) 0%, rgba(14, 16, 22, 0.96) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}
.mat-sucai-usage-inline-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.mat-sucai-usage-inline-icon {
    color: #7dd3c0;
    font-size: 14px;
    line-height: 1;
}
.mat-sucai-usage-inline-label {
    font-size: 12px;
    font-weight: 600;
    color: #bac2de;
    letter-spacing: 0.02em;
}
.mat-sucai-usage-inline-num {
    font-size: 22px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #f5f0ff;
    margin-left: 4px;
}
.mat-sucai-usage-inline-unit {
    font-size: 11px;
    color: #a6adc8;
    font-weight: 600;
}
.mat-sucai-usage-inline .mat-usage-badge {
    margin-left: auto;
}
.mat-sucai-usage-inline-refresh {
    margin-left: 4px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: rgba(69, 71, 90, 0.55);
    color: #bac2de;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.mat-sucai-usage-inline-refresh:hover {
    background: rgba(203, 166, 247, 0.25);
    color: #f5f0ff;
}
.mat-sucai-usage-inline-detail {
    margin: 8px 0 0;
    font-size: 11px;
    line-height: 1.45;
    color: #7f849c;
}

/* ─── 素材工作台内容区：统一高级感（.mat-studio-sheet 包裹 #mat-panel-body 内）─── */
/* 文字与背景刻意拉开对比：主字偏亮、次级字用冷灰蓝而非与底接近的灰紫 */
.mat-studio-sheet {
    --mat-sheet-fg: #eceff7;
    --mat-sheet-muted: #a8b4cc;
    --mat-sheet-sub: #8b98b5;
    --mat-sheet-line: rgba(125, 211, 192, 0.18);
    --mat-sheet-glow: rgba(125, 211, 192, 0.1);
    --mat-sheet-card: rgba(14, 15, 22, 0.92);
    --mat-sheet-card-border: rgba(255, 255, 255, 0.08);
    --mat-sheet-accent: #7dd3c0;
    --mat-sheet-accent-dim: rgba(125, 211, 192, 0.22);
    position: relative;
    letter-spacing: 0.01em;
    color: var(--mat-sheet-fg);
}
.mat-studio-sheet::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 14px;
    pointer-events: none;
    background: radial-gradient(120% 80% at 12% 0%, rgba(125, 211, 192, 0.09), transparent 58%),
        radial-gradient(80% 55% at 100% 100%, rgba(94, 184, 168, 0.05), transparent 48%);
    opacity: 0.95;
    z-index: 0;
}
.mat-studio-sheet > * {
    position: relative;
    z-index: 1;
}

/* 队列 / 生成操作区：与表单区视觉分层 */
.mat-sheet-actions-block {
    margin-top: 6px;
    padding: 14px 0 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mat-sheet-actions-block--tight {
    padding-top: 10px;
    gap: 10px;
}
.mat-sheet-actions-block--nested {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}
.mat-sheet-run-banner {
    font-size: 12px;
    line-height: 1.55;
    color: var(--mat-sheet-muted);
    padding: 11px 14px;
    border-radius: 11px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.mat-sheet-run-banner strong {
    color: var(--mat-sheet-fg);
    font-weight: 700;
}
#mat-panel-body .mat-studio-sheet #mat-sf-add-queue-btn.mat-sf-queue-accent {
    border-width: 1px;
    font-weight: 600;
}

/* 功能区分组卡片（减轻「一条扁带」观感） */
.mat-sheet-form-panel {
    padding: 14px 14px 16px;
    margin-bottom: 14px;
    border-radius: 14px;
    background: linear-gradient(165deg, rgba(18, 20, 28, 0.88) 0%, rgba(12, 14, 20, 0.94) 100%);
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 12px 36px rgba(0, 0, 0, 0.22);
}
.mat-sheet-form-panel--media {
    padding-bottom: 12px;
}
.mat-sheet-form-panel__title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mat-sheet-muted);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.mat-sheet-field--in-panel {
    margin-bottom: 0;
}
.mat-sheet-field--in-panel + .mat-sheet-field--in-panel,
.mat-sheet-field--in-panel + .mat-sheet-option-card--in-panel,
.mat-sheet-option-card--in-panel + .mat-sheet-grid-2col,
.mat-sheet-grid-2col + .mat-sheet-field--in-panel {
    margin-top: 14px;
}
.mat-sheet-option-card--in-panel {
    margin-top: 0;
    margin-bottom: 0;
}
.mat-sheet-field--prompt {
    margin-top: 14px !important;
}
.mat-sheet-option-card--in-panel + .mat-sheet-grid-2col--controls {
    margin-top: 14px;
}
.mat-sheet-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--mat-sheet-accent);
    flex-shrink: 0;
    margin-top: 3px;
    cursor: pointer;
}
.mat-sheet-preview--in-panel {
    margin-top: 12px;
    min-height: 8px;
}

/* 顶部说明 / 提示块 */
.mat-sheet-hint {
    font-size: 13px;
    line-height: 1.55;
    color: #d8e2f0;
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(125, 211, 192, 0.2);
    background: linear-gradient(180deg, rgba(16, 22, 26, 0.88), rgba(12, 16, 22, 0.94));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 8px 28px rgba(0, 0, 0, 0.24);
    position: relative;
}
.mat-sheet-hint::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(125, 211, 192, 0.9), rgba(94, 184, 168, 0.45));
    opacity: 0.65;
}
.mat-sheet-hint {
    padding-left: 22px;
}
.mat-sheet-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #e8edf5;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
}
.mat-sheet-field {
    margin-bottom: 14px;
}
.mat-sheet-field--md {
    margin-bottom: 14px;
}
.mat-sheet-field-mt {
    margin-top: 12px;
}
.mat-sheet-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 14px;
}
.mat-sheet-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}
.mat-sheet-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 4px;
}
.mat-sheet-grid-2col--controls {
    gap: 14px;
    margin-top: 0;
    align-items: start;
}
.mat-sheet-grid-2col--controls .mat-sheet-field--in-panel {
    min-width: 0;
}
@media (max-width: 440px) {
    .mat-sheet-grid-2col--controls {
        grid-template-columns: 1fr;
    }
}
.mat-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1.5px dashed rgba(125, 211, 192, 0.32);
    border-radius: 14px;
    padding: 20px;
    cursor: pointer;
    text-align: center;
    gap: 8px;
    background: linear-gradient(180deg, rgba(14, 18, 22, 0.78), rgba(10, 13, 18, 0.9));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 10px 30px rgba(0, 0, 0, 0.22);
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    position: relative;
}
.mat-dropzone:hover {
    border-color: rgba(125, 211, 192, 0.5);
    background: linear-gradient(180deg, rgba(18, 24, 28, 0.85), rgba(12, 16, 22, 0.95));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 14px 42px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(125, 211, 192, 0.1);
    transform: translateY(-1px);
}
.mat-dropzone::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 10px;
    pointer-events: none;
    background: radial-gradient(120% 120% at 30% 0%, rgba(125, 211, 192, 0.07), transparent 55%);
    opacity: 0.9;
}
.mat-dropzone--sheet-media {
    min-height: 128px;
    padding: 26px 18px;
}
.mat-dropzone--tall {
    min-height: 110px;
}
.mat-dropzone--hero {
    padding: 32px 20px;
}
.mat-dropzone--compact {
    padding: 24px 14px;
}
.mat-dropzone--compact .mat-dropzone__emoji {
    font-size: 32px;
}
.mat-dropzone__emoji {
    font-size: 28px;
    line-height: 1;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(125, 211, 192, 0.1);
    border: 1px solid rgba(125, 211, 192, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.mat-dropzone__emoji--sm {
    font-size: 20px;
}
.mat-dropzone--hero .mat-dropzone__emoji {
    font-size: 36px;
}
.mat-dropzone__title {
    font-size: 13px;
    color: #eef1ff;
    font-weight: 600;
}
.mat-dropzone__sub {
    font-size: 11px;
    color: #a8b8d8;
}
.mat-sheet-preview-row {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.mat-sheet-preview-row--tight {
    margin-top: 10px;
    gap: 6px;
}
.mat-sheet-queue {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mat-sheet-queue--spaced {
    margin-bottom: 14px;
}
.mat-sheet-queue--mt {
    margin-top: 12px;
}
.mat-sheet-queue--mt-sm {
    margin-top: 10px;
    gap: 6px;
}
.mat-sheet-result {
    margin-top: 16px;
}
.mat-sheet-progress-wrap {
    margin-top: 12px;
}
.mat-sheet-progress-label {
    font-size: 12px;
    color: #b0c0e8;
    margin-bottom: 4px;
}
.mat-sheet-progress-track {
    background: rgba(14, 17, 22, 0.95);
    border-radius: 6px;
    height: 8px;
    overflow: hidden;
    border: 1px solid rgba(125, 211, 192, 0.16);
}
#mat-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #7dd3c0, #5eb8a8, #94a8d8);
    width: 0%;
    transition: width 0.4s ease;
}
.mat-sheet-option-card {
    margin-top: 12px;
    padding: 12px;
    border-radius: 12px;
    background: var(--mat-sheet-card);
    border: 1px solid var(--mat-sheet-card-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.mat-sheet-option-card label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    color: #e8ecff;
}
.mat-sheet-option-title {
    font-weight: 600;
    color: #f2f5ff;
}
.mat-sheet-option-desc {
    font-size: 11px;
    color: #9eb8e0;
    margin-top: 2px;
    line-height: 1.45;
}
.mat-sheet-step-card {
    background: var(--mat-sheet-card);
    border: 1px solid var(--mat-sheet-card-border);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.mat-sheet-step-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.mat-sheet-step-num {
    width: 20px;
    height: 20px;
    min-width: 20px;
    background: linear-gradient(135deg, #b8f0e4, #5eb8a8);
    color: #0a1210;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}
.mat-sheet-step-title {
    font-size: 13px;
    font-weight: 600;
    color: #eef1ff;
}
.mat-sheet-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 8px;
}
.mat-sheet-toolbar-title {
    font-size: 14px;
    font-weight: 600;
    color: #e8ecff;
}
.mat-sheet-reflib-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 8px 10px;
    background: rgba(28, 29, 44, 0.9);
    border: 1px solid rgba(203, 166, 247, 0.15);
    border-radius: 8px;
    margin-bottom: 8px;
}
.mat-sheet-reflib-toggle span:first-child {
    font-size: 12px;
    color: #c5d0f0;
}
.mat-sheet-reflib-toggle .mat-sheet-chevron {
    color: #a8b8d8;
    font-size: 11px;
}
#mat-vp-img-preview {
    display: none;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
#mat-vp-img-preview.mat-vp-preview-visible {
    display: flex;
}
#mat-vp-img-upload-label {
    display: flex;
}
#mat-vp-img-upload-label.is-hidden {
    display: none !important;
}
.mat-dim-block,
.mat-vp-dim-block {
    margin-bottom: 12px;
    padding: 10px;
    border-radius: 10px;
    background: var(--mat-sheet-card);
    border: 1px solid var(--mat-sheet-card-border);
}
.mat-dim-block .mat-dim-head,
.mat-vp-dim-block .mat-vp-dim-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.mat-dim-name {
    font-size: 13px;
    font-weight: 600;
    color: #eef1ff;
}
.mat-dim-tags,
.mat-vp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.mat-vp-tags {
    gap: 5px;
}
.mat-dim-add-row {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}
.mat-tag {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: rgba(36, 38, 58, 0.95);
    border: 1px solid rgba(203, 166, 247, 0.22);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 12px;
    color: #eef1ff;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.mat-tag.mat-tag-selected {
    background: linear-gradient(135deg, #dfc4ff, #cba6f7);
    color: #140c1c;
    border-color: rgba(255, 255, 255, 0.25);
}
.mat-tag-x {
    margin-left: 4px;
    color: #f38ba8;
    font-size: 11px;
}
.mat-vp-tag {
    background: rgba(36, 38, 58, 0.95);
    border: 1px solid rgba(203, 166, 247, 0.22);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 12px;
    color: #eef1ff;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.mat-vp-tag.vp-sel {
    background: linear-gradient(135deg, #dfc4ff, #cba6f7);
    color: #140c1c;
    border-color: rgba(255, 255, 255, 0.25);
}

/* 素材弹层内：标签/维度块与主色统一（青绿体系） */
#mat-panel-body .mat-studio-sheet .mat-tag {
    background: rgba(16, 20, 26, 0.92);
    border-color: rgba(125, 211, 192, 0.18);
}
#mat-panel-body .mat-studio-sheet .mat-tag.mat-tag-selected {
    background: linear-gradient(135deg, #c8eee4, #6bc4b0);
    color: #0a1210;
    border-color: rgba(255, 255, 255, 0.22);
}
#mat-panel-body .mat-studio-sheet .mat-vp-tag {
    background: rgba(16, 20, 26, 0.92);
    border-color: rgba(125, 211, 192, 0.18);
}
#mat-panel-body .mat-studio-sheet .mat-vp-tag.vp-sel {
    background: linear-gradient(135deg, #c8eee4, #6bc4b0);
    color: #0a1210;
    border-color: rgba(255, 255, 255, 0.22);
}
#mat-panel-body .mat-studio-sheet .mat-tag-input,
#mat-panel-body .mat-studio-sheet .mat-vp-tag-input {
    border-color: rgba(125, 211, 192, 0.16);
    background: rgba(10, 13, 18, 0.95);
}
#mat-panel-body .mat-studio-sheet .mat-tag-add-btn,
#mat-panel-body .mat-studio-sheet .mat-vp-tag-add {
    border-color: rgba(125, 211, 192, 0.35);
    color: #d4f5ee;
    background: rgba(20, 26, 30, 0.95);
}

.mat-tag-input,
.mat-vp-tag-input {
    flex: 1;
    padding: 4px 8px;
    background: rgba(14, 15, 26, 0.95);
    border: 1px solid rgba(203, 166, 247, 0.2);
    border-radius: 6px;
    color: #eef1ff;
    font-size: 12px;
    box-sizing: border-box;
}
.mat-tag-add-btn,
.mat-vp-tag-add {
    padding: 4px 10px;
    background: rgba(36, 38, 58, 0.95);
    color: #e8d4ff;
    border: 1px solid rgba(203, 166, 247, 0.45);
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.mat-tag-add-btn:hover,
.mat-vp-tag-add:hover {
    background: rgba(50, 52, 78, 0.98);
    border-color: rgba(203, 166, 247, 0.65);
}
.mat-dim-delete,
.mat-vp-dim-delete {
    background: none;
    border: none;
    color: #f38ba8;
    cursor: pointer;
    font-size: 12px;
    padding: 0;
}
.mat-sheet-btn-ghost {
    padding: 4px 12px;
    background: rgba(36, 38, 58, 0.95);
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.mat-sheet-btn-ghost--green {
    color: #b4f0c8;
    border-color: rgba(166, 227, 161, 0.45);
}
.mat-sheet-btn-ghost--cyan {
    color: #a8e5f5;
    border-color: rgba(137, 220, 235, 0.45);
}
.mat-sheet-btn-ghost--pink {
    color: #fab9c8;
    border-color: rgba(243, 139, 168, 0.45);
}
.mat-sheet-btn-ghost--green:hover {
    background: rgba(166, 227, 161, 0.12);
}
.mat-sheet-btn-ghost--cyan:hover {
    background: rgba(137, 220, 235, 0.12);
}
.mat-sheet-btn-ghost--pink:hover {
    background: rgba(243, 139, 168, 0.12);
}
.mat-queue-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(16, 20, 26, 0.92);
    border: 1px solid rgba(125, 211, 192, 0.14);
    border-radius: 11px;
    padding: 11px 13px;
    font-size: 13px;
    color: var(--mat-sheet-fg);
}
.mat-queue-item__meta {
    font-size: 11px;
    color: #9eb8e0;
    margin-top: 2px;
}
.mat-queue-remove,
.mat-vp-q-remove {
    background: none;
    border: none;
    color: #f38ba8;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 4px;
}
.mat-sf-style-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(36, 38, 58, 0.95);
    border: 1px solid rgba(203, 166, 247, 0.2);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    color: #eef1ff;
    cursor: pointer;
    margin: 2px;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.mat-sf-style-tag.mat-sf-selected {
    background: linear-gradient(135deg, #dfc4ff, #cba6f7);
    color: #140c1c;
    border-color: rgba(255, 255, 255, 0.28);
}
#mat-panel-body .mat-studio-sheet .mat-sf-style-tag {
    background: rgba(16, 20, 26, 0.92);
    border-color: rgba(125, 211, 192, 0.18);
}
#mat-panel-body .mat-studio-sheet .mat-sf-style-tag.mat-sf-selected {
    background: linear-gradient(135deg, #c8eee4, #6bc4b0);
    color: #0a1210;
    border-color: rgba(255, 255, 255, 0.22);
}
.mat-sf-del {
    color: #f38ba8;
    font-size: 10px;
    margin-left: 2px;
    padding: 0 2px;
}
.mat-style-panel {
    margin-bottom: 14px;
    padding: 12px;
    border-radius: 12px;
    background: var(--mat-sheet-card);
    border: 1px solid var(--mat-sheet-card-border);
}
.mat-style-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.mat-style-panel-title {
    font-size: 13px;
    font-weight: 600;
    color: #eef1ff;
}
.mat-style-random-btn {
    background: none;
    border: none;
    color: #b4f0c8;
    font-size: 12px;
    cursor: pointer;
}
#mat-style-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}
.mat-style-add-row {
    display: flex;
    gap: 6px;
}
.mat-fission-mode label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #e2e9ff;
}
.mat-hist-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}
.mat-hist-filter-btn {
    padding: 5px 12px;
    background: rgba(20, 21, 34, 0.95);
    color: #b8c8e8;
    border: 1px solid rgba(100, 110, 150, 0.35);
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.mat-hist-filter-btn:hover {
    border-color: rgba(203, 166, 247, 0.35);
    color: #e8ecff;
}
.mat-hist-filter-btn.active {
    background: rgba(42, 44, 68, 0.98);
    color: #f2f5ff;
    border-color: rgba(203, 166, 247, 0.45);
}
#mat-hist-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mat-em-tab-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}
.mat-em-tab {
    flex: 1;
    min-width: 0;
    padding: 8px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid rgba(203, 166, 247, 0.22);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.mat-em-tab--on {
    background: linear-gradient(135deg, #dfc4ff, #cba6f7);
    color: #120818;
    border: none;
    font-weight: 600;
}
.mat-em-tab--off {
    background: rgba(32, 33, 50, 0.95);
    color: #dce6ff;
}
.mat-em-direct-btn {
    width: 100%;
    padding: 12px;
    margin-bottom: 14px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    background: linear-gradient(135deg, #dfc4ff, #cba6f7);
    color: #120818;
}
.mat-em-preset-btn {
    padding: 10px 8px;
    background: rgba(32, 33, 50, 0.95);
    color: #eef1ff;
    border: 1px solid rgba(203, 166, 247, 0.22);
    border-radius: 10px;
    font-size: 11px;
    cursor: pointer;
    text-align: left;
    line-height: 1.45;
    min-height: 76px;
    box-sizing: border-box;
    word-break: break-word;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.mat-em-preset-btn:hover {
    border-color: rgba(203, 166, 247, 0.45);
    background: rgba(40, 42, 64, 0.98);
}
.mat-em-preset-btn.is-selected {
    background: linear-gradient(135deg, #dfc4ff, #cba6f7);
    color: #140c1c;
    border-color: rgba(255, 255, 255, 0.28);
    font-weight: 600;
}
.mat-em-preset-sub {
    display: block;
    opacity: 0.92;
    font-size: 10px;
    color: #b8c8e8;
    margin-top: 2px;
}
.mat-em-hint {
    font-size: 12px;
    color: #b0c0e8;
    margin-bottom: 10px;
}
.mat-em-fav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.mat-em-fav-toggle {
    background: none;
    border: none;
    color: #c5d0f0;
    font-size: 12px;
    cursor: pointer;
    padding: 0;
}
.mat-em-save-fav {
    padding: 3px 10px;
    background: none;
    border: 1px solid rgba(203, 166, 247, 0.45);
    border-radius: 10px;
    color: #e8d4ff;
    font-size: 11px;
    cursor: pointer;
}
#mat-em-fav-panel {
    display: none;
}
#mat-em-fav-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 150px;
    overflow-y: auto;
}
.mat-em-adv-hint {
    font-size: 12px;
    color: #b0c0e8;
    margin-bottom: 10px;
}
.mat-em-label-accent-orange {
    font-size: 12px;
    font-weight: 600;
    color: #ffcba8;
    display: block;
    margin-bottom: 4px;
}
.mat-em-label-accent-teal {
    font-size: 12px;
    font-weight: 600;
    color: #a8ebe0;
    display: block;
    margin-bottom: 4px;
}
.mat-em-label-accent-mauve {
    font-size: 12px;
    font-weight: 600;
    color: #e0c8ff;
    display: block;
    margin-bottom: 4px;
}
.mat-em-label-accent-yellow {
    font-size: 12px;
    font-weight: 600;
    color: #ffe6a8;
    display: block;
    margin-bottom: 4px;
}
.mat-em-label-accent-rose {
    font-size: 12px;
    font-weight: 600;
    color: #f5a8c0;
    display: block;
    margin-bottom: 4px;
}
.mat-em-label-accent-blue {
    font-size: 12px;
    font-weight: 600;
    color: #a8c8ff;
    display: block;
    margin-bottom: 4px;
}
.mat-em-label-accent-green {
    font-size: 12px;
    font-weight: 600;
    color: #b8e8b0;
    display: block;
    margin-bottom: 4px;
}

/* 精华液：顶栏三列（分辨率 / 比例 / 数量） */
.mat-em-rpc-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}
.mat-em-rpc-cell .mat-sheet-label {
    margin-bottom: 4px;
}
.mat-em-select-compact {
    width: 100%;
    margin-top: 0;
    padding: 8px 10px !important;
    font-size: 12px !important;
    min-height: 0 !important;
    height: auto !important;
    line-height: 1.35;
    box-sizing: border-box;
}
.mat-em-fav-wrap {
    margin-top: 10px;
}

/* 表单控件：玻璃拟态 + 聚焦光晕 */
#mat-panel-body .mat-studio-sheet select,
#mat-panel-body .mat-studio-sheet textarea,
#mat-panel-body .mat-studio-sheet input[type="text"],
#mat-panel-body .mat-studio-sheet input[type="number"] {
    background:
        radial-gradient(120% 140% at 15% 0%, rgba(125, 211, 192, 0.08), transparent 52%),
        linear-gradient(180deg, rgba(22, 26, 32, 0.96) 0%, rgba(14, 17, 22, 0.99) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 11px !important;
    color: var(--mat-sheet-fg) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 8px 22px rgba(0, 0, 0, 0.2);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, background 0.18s ease;
}

/* Windows 下拉面板常用系统配色，容易造成“文字和背景重合”，这里强制暗色方案与选项对比 */
#mat-panel-body .mat-studio-sheet select {
    color-scheme: dark;
    -webkit-appearance: none;
    appearance: none;
    padding-right: 38px !important;
    background-image:
        radial-gradient(120% 140% at 18% 0%, rgba(125, 211, 192, 0.1), transparent 52%),
        linear-gradient(180deg, rgba(22, 26, 32, 0.97) 0%, rgba(14, 17, 22, 0.99) 100%),
        linear-gradient(45deg, transparent 50%, rgba(238, 241, 255, 0.75) 50%),
        linear-gradient(135deg, rgba(238, 241, 255, 0.75) 50%, transparent 50%);
    background-repeat: no-repeat;
    background-position:
        0 0,
        0 0,
        calc(100% - 18px) 50%,
        calc(100% - 12px) 50%;
    background-size:
        100% 100%,
        100% 100%,
        6px 6px,
        6px 6px;
}
#mat-panel-body .mat-studio-sheet select:hover {
    border-color: rgba(125, 211, 192, 0.32) !important;
}
#mat-panel-body .mat-studio-sheet select option {
    background: #0f1020;
    color: #eef1ff;
}
#mat-panel-body .mat-studio-sheet select optgroup {
    background: #0f1020;
    color: #b8c8e8;
}
#mat-panel-body .mat-studio-sheet select:focus,
#mat-panel-body .mat-studio-sheet textarea:focus,
#mat-panel-body .mat-studio-sheet input[type="text"]:focus,
#mat-panel-body .mat-studio-sheet input[type="number"]:focus {
    outline: none !important;
    border-color: rgba(125, 211, 192, 0.45) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 0 0 3px var(--mat-sheet-glow),
        0 18px 46px rgba(0, 0, 0, 0.22);
    filter: brightness(1.02);
}
#mat-panel-body .mat-studio-sheet .mat-sheet-control {
    width: 100%;
    margin-top: 6px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.35;
    min-height: 50px;
    height: 50px;
    box-sizing: border-box;
}
#mat-panel-body .mat-studio-sheet textarea.mat-sheet-control {
    height: auto;
    min-height: 104px;
    padding: 12px 14px;
    line-height: 1.5;
    resize: vertical;
}
#mat-panel-body .mat-studio-sheet textarea.mat-sheet-control {
    font-size: 13px;
}

/* 更像 Notion/Apple 的文本与占位符对比 */
#mat-panel-body .mat-studio-sheet input::placeholder,
#mat-panel-body .mat-studio-sheet textarea::placeholder {
    color: rgba(132, 158, 168, 0.72);
}
#mat-panel-body .mat-studio-sheet input:disabled,
#mat-panel-body .mat-studio-sheet textarea:disabled,
#mat-panel-body .mat-studio-sheet select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* 让 select 的高度与其它控件一致（不受 UA 影响） */
#mat-panel-body .mat-studio-sheet select.mat-sheet-control {
    height: 50px;
}
.mat-sheet-file-input {
    display: none !important;
}
#mat-panel-body .mat-studio-sheet #mat-add-queue-btn.mat-btn-queue--accent,
#mat-panel-body .mat-studio-sheet #mat-sf-add-queue-btn.mat-btn-queue--accent {
    border-color: rgba(125, 211, 192, 0.42) !important;
    color: #f0faf8 !important;
}
#mat-panel-body .mat-studio-sheet #mat-sf-add-queue-btn {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600 !important;
    border-radius: 11px !important;
    border: 1px solid rgba(125, 211, 192, 0.22) !important;
    background: linear-gradient(180deg, rgba(28, 32, 38, 0.96), rgba(18, 22, 28, 0.99)) !important;
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
#mat-panel-body .mat-studio-sheet #mat-sf-add-queue-btn:hover {
    border-color: rgba(125, 211, 192, 0.45) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.28);
    transform: translateY(-1px);
}
#mat-vp-reflib-list,
#mat-br-reflib-list {
    max-height: 140px;
    overflow-y: auto;
    margin-bottom: 6px;
}
#mat-vp-img-thumb {
    max-width: 100px;
    max-height: 70px;
    border-radius: 6px;
    border: 1px solid rgba(203, 166, 247, 0.28);
    object-fit: cover;
}
.mat-vp-img-remove {
    background: none;
    border: none;
    color: #f38ba8;
    cursor: pointer;
    font-size: 12px;
}
.mat-vp-upload-mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px dashed rgba(137, 180, 250, 0.35);
    border-radius: 12px;
    padding: 14px;
    cursor: pointer;
    text-align: center;
    gap: 6px;
    background: rgba(14, 15, 26, 0.5);
}
.mat-vp-upload-mini .mat-dropzone__emoji {
    font-size: 20px;
}
.mat-vp-upload-mini .mat-dropzone__title {
    font-size: 12px;
    color: #c5d4f0;
}
.mat-sheet-gemini-hint {
    font-size: 11px;
    color: #a8b8d8;
    margin-bottom: 10px;
}

/* 上传拖拽区 */
#mat-panel-body .mat-studio-sheet label[style*="dashed"] {
    border: 1px dashed rgba(137, 180, 250, 0.38) !important;
    background: rgba(22, 22, 35, 0.65) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 14px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
#mat-panel-body .mat-studio-sheet label[style*="dashed"]:hover {
    border-color: rgba(203, 166, 247, 0.5) !important;
    background: rgba(32, 33, 52, 0.75) !important;
    box-shadow: 0 0 0 1px rgba(203, 166, 247, 0.1), 0 12px 40px rgba(0, 0, 0, 0.35);
}

/* 选项区块（如跳过抠图） */
#mat-panel-body .mat-studio-sheet div[style*="background:#2a2a3e"],
#mat-panel-body .mat-studio-sheet div[style*="background: #2a2a3e"] {
    background: rgba(36, 37, 58, 0.88) !important;
    border: 1px solid rgba(203, 166, 247, 0.12) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* 次要按钮：加入队列 */
#mat-panel-body .mat-studio-sheet #mat-add-queue-btn {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 12px;
    cursor: pointer;
    font-size: 14px;
    background:
        radial-gradient(120% 140% at 15% 0%, rgba(125, 211, 192, 0.12), transparent 52%),
        linear-gradient(180deg, rgba(28, 30, 40, 0.95), rgba(18, 20, 28, 0.98)) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #e8ecf4 !important;
    border-radius: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease, filter 0.2s ease;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 8px 24px rgba(0, 0, 0, 0.28);
}
#mat-panel-body .mat-studio-sheet #mat-add-queue-btn:hover:not(:disabled) {
    border-color: rgba(125, 211, 192, 0.35) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 12px 32px rgba(0, 0, 0, 0.32);
    transform: translateY(-1px);
    filter: brightness(1.03);
}

/* 主操作：开始生成（与 .mat-btn-submit-primary 一致，避免 !important 盖过 class） */
#mat-panel-body .mat-studio-sheet #mat-submit-btn {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 16px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: 12px;
    border: 1px solid rgba(125, 211, 192, 0.35);
    color: #0d1210;
    background: linear-gradient(165deg, #b8f0e4 0%, #7dd3c0 45%, #5eb8a8 100%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.12) inset,
        0 10px 28px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
#mat-panel-body .mat-studio-sheet #mat-submit-btn:hover:not(:disabled) {
    filter: brightness(1.05);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.16) inset,
        0 14px 36px rgba(0, 0, 0, 0.4);
    transform: translateY(-1px);
}
#mat-panel-body .mat-studio-sheet #mat-submit-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   仅「素材编导」工作台 UI 美化（其它 Tab / 策划模板预览不改）
   - 右侧：仅当存在 #mat-sucai-usage-inline（仅素材编导 intro）
   - 弹层：.mat-studio-* / #mat-panel-body 仅素材面板使用
   ═══════════════════════════════════════════════════════════════════════════ */

/* 右侧预览 · 素材编导快捷功能区 */
.preview-doc-body .wb:has(#mat-sucai-usage-inline) {
    max-width: 100%;
    padding: 8px 6px 12px;
    border-radius: 20px;
    background: linear-gradient(
        165deg,
        rgba(248, 250, 252, 0.98) 0%,
        rgba(241, 245, 249, 0.96) 45%,
        rgba(236, 253, 250, 0.35) 100%
    );
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 12px 40px rgba(15, 23, 42, 0.06),
        0 2px 12px rgba(15, 23, 42, 0.03);
}

.preview-doc-body .wb:has(#mat-sucai-usage-inline) .wb-head {
    margin: 6px 10px 18px;
    padding: 2px 2px 0;
    gap: 16px;
}

.preview-doc-body .wb:has(#mat-sucai-usage-inline) .wb-avatar {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    border: 2px solid #fff;
    box-shadow:
        0 0 0 1px rgba(99, 102, 241, 0.22),
        0 8px 24px rgba(99, 102, 241, 0.2);
}

.preview-doc-body .wb:has(#mat-sucai-usage-inline) .wb-title {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(105deg, #0f172a 0%, #1e3a4a 42%, #0d9488 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.preview-doc-body .wb:has(#mat-sucai-usage-inline) .wb-desc {
    font-size: 13px;
    line-height: 1.55;
    margin-top: 5px;
}

.preview-doc-body .wb:has(#mat-sucai-usage-inline) .wb-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 10px 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #0f766e;
}

.preview-doc-body .wb:has(#mat-sucai-usage-inline) .wb-section-title::before {
    content: "";
    width: 4px;
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(180deg, #99f6e4, #0d9488);
    flex-shrink: 0;
}

.preview-doc-body .wb:has(#mat-sucai-usage-inline) .wb-fn-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 0 6px 8px;
    align-items: stretch;
}

@media (min-width: 520px) {
    .preview-doc-body .wb:has(#mat-sucai-usage-inline) .wb-fn-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 340px) {
    .preview-doc-body .wb:has(#mat-sucai-usage-inline) .wb-fn-list {
        grid-template-columns: 1fr;
    }
}

.preview-doc-body .wb:has(#mat-sucai-usage-inline) .mat-sucai-usage-inline {
    margin: 0 10px 16px;
    border-radius: 14px;
    border-color: rgba(13, 148, 136, 0.2);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.99) 0%, rgba(240, 253, 250, 0.75) 100%);
    box-shadow: 0 6px 28px rgba(15, 23, 42, 0.06);
}

.preview-doc-body .wb:has(#mat-sucai-usage-inline) .mat-sucai-usage-inline-icon {
    color: #0d9488;
    filter: none;
}

.preview-doc-body .wb:has(#mat-sucai-usage-inline) .mat-sucai-usage-inline-label {
    color: #134e4a;
}

.preview-doc-body .wb:has(#mat-sucai-usage-inline) .mat-sucai-usage-inline-num {
    color: #0f172a;
}

.preview-doc-body .wb:has(#mat-sucai-usage-inline) .mat-sucai-usage-inline-detail {
    color: #64748b;
}

/* 素素舞台：不依赖 :has() 的兜底（旧版 Firefox / 部分内核若不识别 :has()，带 :has 的整块规则失效 → 舞台高度为 0 → 无法拖拽） */
.preview-doc-body .mat-sucai-pet-stage {
    position: relative;
    height: 118px;
    min-height: 118px;
    touch-action: none;
}
.preview-doc-body .mat-sucai-pet-canvas {
    position: absolute;
    left: 0;
    top: 0;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    cursor: grab;
    user-select: none;
}
.preview-doc-body .mat-sucai-pet-canvas:active {
    cursor: grabbing;
}

/* 素材编导工作台 · 底部像素小助手（轻量 canvas，不占布局高度过多） */
.preview-doc-body .wb:has(#mat-sucai-usage-inline) .mat-sucai-pet-strip {
    margin: 10px 10px 6px;
    border-radius: 14px;
    border: 1px dashed rgba(13, 148, 136, 0.22);
    background: rgba(255, 255, 255, 0.65);
    overflow: hidden;
}
.preview-doc-body .wb:has(#mat-sucai-usage-inline) .mat-sucai-pet-stage {
    position: relative;
    height: 118px;
    min-height: 118px;
    touch-action: none;
}
.preview-doc-body .wb:has(#mat-sucai-usage-inline) .mat-sucai-pet-strip--angry {
    border-color: rgba(185, 28, 28, 0.35);
    background: rgba(254, 242, 242, 0.55);
}
.preview-doc-body .wb:has(#mat-sucai-usage-inline) .mat-sucai-pet-strip--angry .mat-sucai-pet-bar {
    background: rgba(254, 226, 226, 0.45);
}
.preview-doc-body .wb:has(#mat-sucai-usage-inline) .mat-sucai-pet-canvas {
    position: absolute;
    left: 0;
    top: 0;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    cursor: grab;
    user-select: none;
}
.preview-doc-body .wb:has(#mat-sucai-usage-inline) .mat-sucai-pet-canvas:active {
    cursor: grabbing;
}
.preview-doc-body .wb:has(#mat-sucai-usage-inline) .mat-sucai-pet-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    padding: 6px 10px 8px;
    font-size: 11px;
    color: #64748b;
    line-height: 1.35;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    background: rgba(248, 250, 252, 0.9);
}
.preview-doc-body .wb:has(#mat-sucai-usage-inline) .mat-sucai-pet-hint {
    flex: 1 1 auto;
    min-width: 0;
}
.preview-doc-body .wb:has(#mat-sucai-usage-inline) .mat-sucai-pet-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-shrink: 0;
}
.preview-doc-body .wb:has(#mat-sucai-usage-inline) .mat-sucai-pet-calm {
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid rgba(13, 148, 136, 0.35);
    background: linear-gradient(135deg, rgba(204, 251, 241, 0.9), rgba(153, 246, 228, 0.5));
    color: #0f766e;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
.preview-doc-body .wb:has(#mat-sucai-usage-inline) .mat-sucai-pet-calm:hover {
    border-color: rgba(13, 148, 136, 0.55);
    color: #134e4a;
}
.preview-doc-body .wb:has(#mat-sucai-usage-inline) .mat-sucai-pet-strip--angry .mat-sucai-pet-calm {
    border-color: rgba(185, 28, 28, 0.35);
    background: linear-gradient(135deg, rgba(254, 226, 226, 0.95), rgba(254, 202, 202, 0.6));
    color: #b91c1c;
}
.preview-doc-body .wb:has(#mat-sucai-usage-inline) .mat-sucai-pet-strip--angry .mat-sucai-pet-calm:hover {
    border-color: rgba(185, 28, 28, 0.5);
    color: #991b1b;
}
.preview-doc-body .wb:has(#mat-sucai-usage-inline) .mat-sucai-pet-toggle {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: #fff;
    color: #475569;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.preview-doc-body .wb:has(#mat-sucai-usage-inline) .mat-sucai-pet-toggle:hover {
    border-color: rgba(13, 148, 136, 0.35);
    color: #0f766e;
}
.preview-doc-body .wb:has(#mat-sucai-usage-inline) .mat-sucai-pet-strip--hidden .mat-sucai-pet-stage {
    display: none;
}
.preview-doc-body .wb:has(#mat-sucai-usage-inline) .mat-sucai-pet-strip--hidden .mat-sucai-pet-hint {
    display: none;
}
.preview-doc-body .wb:has(#mat-sucai-usage-inline) .mat-sucai-pet-strip--hidden .mat-sucai-pet-bar {
    justify-content: center;
    border-top: none;
    padding: 8px 10px;
}

.preview-doc-body .wb:has(#mat-sucai-usage-inline) .wb-fn-row.function-card {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    min-height: 0;
    height: 100%;
    box-sizing: border-box;
    border-radius: 14px;
    border: 1px solid rgba(222, 224, 227, 0.9);
    border-top: 3px solid transparent;
    padding: 14px 12px 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, border-top-color 0.2s ease;
}

.preview-doc-body .wb:has(#mat-sucai-usage-inline) .wb-fn-row.function-card:hover:not(.disabled) {
    transform: translateY(-3px);
    border-color: rgba(13, 148, 136, 0.28);
    border-top-color: rgba(13, 148, 136, 0.85);
    box-shadow:
        0 14px 40px rgba(13, 148, 136, 0.12),
        0 4px 14px rgba(15, 23, 42, 0.06);
}

.preview-doc-body .wb:has(#mat-sucai-usage-inline) .wb-fn-row.function-card.disabled {
    transform: none;
    border-top-color: transparent;
}

.preview-doc-body .wb:has(#mat-sucai-usage-inline) .wb-fn-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
}

.preview-doc-body .wb:has(#mat-sucai-usage-inline) .wb-fn-title {
    white-space: normal;
    font-size: 14px;
    line-height: 1.35;
    margin-bottom: 0;
}

.preview-doc-body .wb:has(#mat-sucai-usage-inline) .wb-fn-desc {
    -webkit-line-clamp: 3;
    line-clamp: 3;
    font-size: 11px;
    line-height: 1.45;
}

.preview-doc-body .wb:has(#mat-sucai-usage-inline) .wb-fn-cta {
    flex-shrink: 0;
    align-self: stretch;
    width: 100%;
    box-sizing: border-box;
    margin-top: auto;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 800;
    border-radius: 10px;
    text-align: center;
    background: linear-gradient(135deg, rgba(45, 212, 191, 0.12), rgba(13, 148, 136, 0.14));
    border: 1px solid rgba(13, 148, 136, 0.28);
    color: #0f766e;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.preview-doc-body .wb:has(#mat-sucai-usage-inline) .wb-fn-row.function-card:hover:not(.disabled) .wb-fn-cta {
    background: linear-gradient(135deg, rgba(45, 212, 191, 0.2), rgba(13, 148, 136, 0.22));
    color: #134e4a;
}

/* 弹层：功能多时略加宽、顶栏与内容区呼吸感 */
.mat-studio-panel {
    width: min(640px, 96vw);
}

.mat-studio-head {
    padding: 20px 20px 16px;
}

.mat-studio-body {
    padding: 18px 20px 24px;
}

.mat-studio-title {
    font-size: 19px;
}

.mat-studio-tagline {
    font-size: 12px;
    color: #9399b2;
}

.mat-sheet-hint {
    border-radius: 14px;
}

/* ─── 素材编导：脚本裂变 / 视频提示词 / 多角度 布局（#mat-panel-body 内）─── */
.mat-sheet-field--stack .mat-sheet-label {
    margin-bottom: 6px;
}
.mat-sheet-field--stack .mat-sheet-control {
    margin-top: 0;
}
.mat-sheet-label--inline {
    margin-bottom: 6px;
}
.mat-sheet-control--area-tall {
    min-height: 120px !important;
    height: auto !important;
}
.mat-sf-script-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: stretch;
}
@media (max-width: 520px) {
    .mat-sf-script-grid {
        grid-template-columns: 1fr;
    }
}
.mat-sf-settings-row {
    display: grid;
    grid-template-columns: 1fr minmax(128px, 168px);
    gap: 16px;
    align-items: start;
}
@media (max-width: 480px) {
    .mat-sf-settings-row {
        grid-template-columns: 1fr;
    }
}
.mat-sf-radio-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}
.mat-sf-radio-line {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.45;
    color: var(--mat-sheet-fg, #0f172a);
}
.mat-sheet-radio-input {
    width: 17px;
    height: 17px;
    accent-color: #0d9488;
    flex-shrink: 0;
    margin-top: 2px;
    cursor: pointer;
}
.mat-style-panel--sf {
    margin-bottom: 14px;
}
.mat-tag-input--sf {
    flex: 1;
    min-width: 0;
    border-radius: 10px !important;
    padding: 8px 12px !important;
}
.mat-sf-add-style-btn {
    flex-shrink: 0;
    padding: 8px 14px !important;
    border-radius: 10px !important;
}

.mat-vp-top-grid {
    display: grid;
    grid-template-columns: 1fr minmax(168px, 220px);
    gap: 16px;
    align-items: stretch;
}
@media (max-width: 560px) {
    .mat-vp-top-grid {
        grid-template-columns: 1fr;
    }
}
.mat-vp-top-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.mat-vp-media-hint {
    font-size: 12px;
    line-height: 1.45;
    color: var(--mat-sheet-muted, #64748b);
    margin: -4px 0 4px;
}
.mat-vp-reflib-body {
    margin-bottom: 8px;
}
.mat-vp-reflib-empty {
    color: #64748b;
    font-size: 12px;
    text-align: center;
    padding: 10px;
}
.mat-vp-reflib-item {
    background: #f1f5f9;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 6px;
    font-size: 12px;
}
.mat-vp-reflib-text {
    color: #0f172a;
    margin-bottom: 6px;
    line-height: 1.45;
    word-break: break-word;
}
.mat-vp-reflib-btns {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.mat-vp-reflib-use {
    padding: 4px 10px;
    background: linear-gradient(135deg, #ccfbf1, #5eead4);
    color: #042f2e;
    border: none;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
    font-weight: 600;
}
.mat-vp-reflib-del {
    padding: 4px 10px;
    background: #ffffff;
    color: #b91c1c;
    border: 1px solid rgba(185, 28, 28, 0.3);
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
}
.mat-vp-reflib-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.mat-vp-reflib-btn {
    flex: 1;
    padding: 8px 10px !important;
    border-radius: 10px !important;
}
.mat-vp-panel-dims .mat-sheet-form-panel__title.mat-vp-dims-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}
.mat-vp-dims-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.mat-vp-dims-scroll {
    max-height: 300px;
    overflow-y: auto;
    padding: 4px 6px 8px 0;
    margin-top: 6px;
    scrollbar-width: thin;
}
.mat-vp-output-grid {
    margin-top: 0;
}
.mat-vp-gemini-card {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--mat-sheet-card, rgba(255, 255, 255, 0.95));
    border: 1px solid var(--mat-sheet-card-border, rgba(15, 23, 42, 0.08));
}
.mat-vp-gemini-check {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--mat-sheet-fg, #0f172a);
}
.mat-vp-gemini-card .mat-sheet-gemini-hint {
    margin: 6px 0 10px 28px;
}
.mat-vp-img-preview-box {
    display: none;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.08);
}
#mat-vp-img-preview.mat-vp-preview-visible {
    display: flex;
}

/* ═══ 素材编导弹层浅色主题（仅 #material-panel-overlay，与右侧工作台一致）═══ */
#material-panel-overlay.mat-studio-overlay {
    background: rgba(15, 23, 42, 0.32);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
#material-panel-overlay .mat-studio-panel {
    background: linear-gradient(
        165deg,
        rgba(255, 255, 255, 0.99) 0%,
        rgba(248, 250, 252, 0.98) 45%,
        rgba(240, 253, 250, 0.55) 100%
    );
    border: 1px solid rgba(15, 23, 42, 0.1);
    box-shadow:
        0 28px 90px rgba(15, 23, 42, 0.12),
        0 0 0 1px rgba(255, 255, 255, 0.9) inset;
    color: #0f172a;
}
#material-panel-overlay .mat-studio-head {
    background: rgba(255, 255, 255, 0.88);
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
/* 标题内 emoji 若与整行 background-clip:text 一起用，在部分系统上会发黑/消失，拆成 emoji + 文字两行 */
#material-panel-overlay .mat-studio-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.25;
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    color: inherit;
}
#material-panel-overlay .mat-studio-title-emoji {
    font-size: 1.35em;
    line-height: 1;
    flex-shrink: 0;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
}
#material-panel-overlay .mat-studio-title-text {
    background: linear-gradient(105deg, #0f172a 0%, #1e3a4a 42%, #0d9488 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
#material-panel-overlay .mat-studio-tagline {
    color: #64748b;
}
#material-panel-overlay .mat-studio-usage {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 253, 250, 0.85) 100%);
    border: 1px solid rgba(13, 148, 136, 0.22);
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.06);
}
#material-panel-overlay .mat-usage-icon {
    color: #0d9488;
    filter: none;
}
#material-panel-overlay .mat-usage-value {
    color: #0f172a;
}
#material-panel-overlay .mat-usage-unit,
#material-panel-overlay .mat-usage-detail {
    color: #64748b;
}
#material-panel-overlay .mat-usage-badge {
    background: rgba(241, 245, 249, 0.95);
    color: #475569;
    border: 1px solid rgba(15, 23, 42, 0.08);
}
#material-panel-overlay .mat-usage-badge--cloud {
    background: linear-gradient(90deg, rgba(45, 212, 191, 0.2), rgba(13, 148, 136, 0.18));
    color: #0f766e;
}
#material-panel-overlay .mat-usage-refresh {
    background: rgba(241, 245, 249, 0.95);
    color: #64748b;
}
#material-panel-overlay .mat-usage-refresh:hover {
    background: rgba(204, 251, 241, 0.9);
    color: #0f766e;
}
#material-panel-overlay .mat-studio-close {
    background: rgba(241, 245, 249, 0.95);
    color: #64748b;
}
#material-panel-overlay .mat-studio-close:hover {
    background: rgba(254, 226, 226, 0.95);
    color: #b91c1c;
}
#material-panel-overlay .mat-prompt-lib-sidebar {
    border-color: rgba(15, 23, 42, 0.1);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.1);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
#material-panel-overlay .mat-prompt-lib-sidebar__toggle {
    border-right-color: rgba(15, 23, 42, 0.08);
    background: #f1f5f9;
    color: #64748b;
}
#material-panel-overlay .mat-prompt-lib-sidebar__toggle:hover {
    background: rgba(204, 251, 241, 0.85);
    color: #0f766e;
}
#material-panel-overlay .mat-pl-head-title {
    color: #0f172a;
}
#material-panel-overlay .mat-pl-head-sub,
#material-panel-overlay .mat-pl-empty {
    color: #64748b;
}
#material-panel-overlay .mat-pl-label {
    color: #475569;
}
#material-panel-overlay .mat-pl-select,
#material-panel-overlay .mat-pl-input {
    border-color: rgba(15, 23, 42, 0.12);
    background: #ffffff;
    color: #0f172a;
}
#material-panel-overlay .mat-pl-btn--primary {
    color: #042f2e;
    background: linear-gradient(135deg, #ccfbf1, #5eead4);
    border-color: rgba(13, 148, 136, 0.35);
}
#material-panel-overlay .mat-pl-divider {
    background: rgba(15, 23, 42, 0.08);
}
#material-panel-overlay .mat-pl-item {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.08);
}
#material-panel-overlay .mat-pl-badge {
    background: rgba(204, 251, 241, 0.65);
    color: #0f766e;
}
#material-panel-overlay .mat-pl-time {
    color: #94a3b8;
}
#material-panel-overlay .mat-pl-note-line {
    color: #475569;
}
#material-panel-overlay .mat-pl-preview {
    color: #334155;
}
#material-panel-overlay .mat-pl-item-btn {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.1);
    color: #475569;
}
#material-panel-overlay .mat-pl-item-btn--use {
    color: #042f2e;
    background: linear-gradient(135deg, rgba(204, 251, 241, 0.9), rgba(94, 234, 212, 0.5));
    border-color: rgba(13, 148, 136, 0.28);
}
#material-panel-overlay .mat-pl-item-btn--del {
    color: #b91c1c;
    border-color: rgba(185, 28, 28, 0.2);
}
#material-panel-overlay .mat-studio-body {
    background: #f1f5f9;
    scrollbar-color: rgba(13, 148, 136, 0.35) transparent;
}
#material-panel-overlay .mat-studio-body::-webkit-scrollbar-thumb {
    background: rgba(13, 148, 136, 0.28);
}
#material-panel-overlay .mat-studio-sheet {
    --mat-sheet-fg: #0f172a;
    --mat-sheet-muted: #64748b;
    --mat-sheet-sub: #475569;
    --mat-sheet-line: rgba(13, 148, 136, 0.22);
    --mat-sheet-glow: rgba(45, 212, 191, 0.22);
    --mat-sheet-card: #ffffff;
    --mat-sheet-card-border: rgba(15, 23, 42, 0.1);
    --mat-sheet-accent: #0d9488;
    --mat-sheet-accent-dim: rgba(13, 148, 136, 0.12);
    color: #0f172a;
}
#material-panel-overlay .mat-studio-sheet::before {
    background: radial-gradient(120% 80% at 12% 0%, rgba(45, 212, 191, 0.08), transparent 58%),
        radial-gradient(80% 55% at 100% 100%, rgba(13, 148, 136, 0.05), transparent 48%);
    opacity: 1;
}
#material-panel-overlay .mat-sheet-form-panel,
#material-panel-overlay .mat-sheet-form-panel--media,
#material-panel-overlay .mat-sheet-form-panel--scripts,
#material-panel-overlay .mat-sheet-form-panel--sf-settings {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
}
#material-panel-overlay .mat-sheet-form-panel__title {
    color: #475569;
    border-bottom-color: rgba(15, 23, 42, 0.08);
}
#material-panel-overlay .mat-sheet-hint,
#material-panel-overlay .mat-sheet-hint--vp {
    color: #334155;
    border-color: rgba(13, 148, 136, 0.28);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(240, 253, 250, 0.65));
}
#material-panel-overlay .mat-sheet-hint::before {
    background: linear-gradient(180deg, rgba(13, 148, 136, 0.85), rgba(45, 212, 191, 0.5));
}
#material-panel-overlay .mat-sheet-label {
    color: #0f172a;
}
#material-panel-overlay .mat-sheet-actions-block {
    border-top-color: rgba(15, 23, 42, 0.08);
}
#material-panel-overlay .mat-sheet-run-banner {
    color: #475569;
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(15, 23, 42, 0.1);
}
#material-panel-overlay .mat-sheet-run-banner strong {
    color: #0f172a;
}
#material-panel-overlay .mat-dropzone {
    border-color: rgba(13, 148, 136, 0.35);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.98));
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}
#material-panel-overlay .mat-dropzone:hover {
    border-color: rgba(13, 148, 136, 0.55);
    background: #ffffff;
}
#material-panel-overlay .mat-dropzone::after {
    background: radial-gradient(120% 120% at 30% 0%, rgba(45, 212, 191, 0.08), transparent 55%);
}
#material-panel-overlay .mat-dropzone__emoji {
    background: rgba(240, 253, 250, 0.9);
    border-color: rgba(13, 148, 136, 0.25);
}
#material-panel-overlay .mat-dropzone__title {
    color: #0f172a;
}
#material-panel-overlay .mat-dropzone__sub {
    color: #64748b;
}
#material-panel-overlay #mat-panel-body .mat-studio-sheet select,
#material-panel-overlay #mat-panel-body .mat-studio-sheet textarea,
#material-panel-overlay #mat-panel-body .mat-studio-sheet input[type="text"],
#material-panel-overlay #mat-panel-body .mat-studio-sheet input[type="number"] {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    color: #0f172a !important;
    color-scheme: light;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
#material-panel-overlay #mat-panel-body .mat-studio-sheet select {
    background-color: #ffffff !important;
    background-image:
        linear-gradient(45deg, transparent 50%, #64748b 50%),
        linear-gradient(135deg, #64748b 50%, transparent 50%) !important;
    background-repeat: no-repeat;
    background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
    background-size: 6px 6px, 6px 6px;
}
#material-panel-overlay #mat-panel-body .mat-studio-sheet select:hover {
    border-color: rgba(13, 148, 136, 0.35) !important;
}
#material-panel-overlay #mat-panel-body .mat-studio-sheet select option,
#material-panel-overlay #mat-panel-body .mat-studio-sheet select optgroup {
    background: #ffffff;
    color: #0f172a;
}
#material-panel-overlay #mat-panel-body .mat-studio-sheet select:focus,
#material-panel-overlay #mat-panel-body .mat-studio-sheet textarea:focus,
#material-panel-overlay #mat-panel-body .mat-studio-sheet input[type="text"]:focus,
#material-panel-overlay #mat-panel-body .mat-studio-sheet input[type="number"]:focus {
    border-color: rgba(13, 148, 136, 0.45) !important;
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.2);
    filter: none;
}
#material-panel-overlay #mat-panel-body .mat-studio-sheet input::placeholder,
#material-panel-overlay #mat-panel-body .mat-studio-sheet textarea::placeholder {
    color: rgba(100, 116, 139, 0.85);
}
#material-panel-overlay .mat-sheet-option-card {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.08);
}
#material-panel-overlay .mat-sheet-option-card label {
    color: #0f172a;
}
#material-panel-overlay .mat-sheet-option-title {
    color: #0f172a;
}
#material-panel-overlay .mat-sheet-option-desc {
    color: #64748b;
}
#material-panel-overlay .mat-sheet-step-card {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.08);
}
#material-panel-overlay .mat-sheet-step-title {
    color: #0f172a;
}
#material-panel-overlay .mat-sheet-step-num {
    background: linear-gradient(135deg, #ccfbf1, #5eead4);
    color: #042f2e;
}
#material-panel-overlay .mat-queue-item {
    background: #ffffff;
    border-color: rgba(13, 148, 136, 0.2);
    color: #0f172a;
}
#material-panel-overlay .mat-queue-item__meta {
    color: #64748b;
}
#material-panel-overlay .mat-dim-block,
#material-panel-overlay .mat-vp-dim-block {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.08);
}
#material-panel-overlay .mat-dim-name {
    color: #0f172a;
}
#material-panel-overlay #mat-panel-body .mat-studio-sheet .mat-tag,
#material-panel-overlay #mat-panel-body .mat-studio-sheet .mat-vp-tag {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.12);
    color: #0f172a;
}
#material-panel-overlay #mat-panel-body .mat-studio-sheet .mat-tag.mat-tag-selected,
#material-panel-overlay #mat-panel-body .mat-studio-sheet .mat-vp-tag.vp-sel {
    background: linear-gradient(135deg, #ccfbf1, #5eead4);
    color: #042f2e;
    border-color: rgba(13, 148, 136, 0.35);
}
#material-panel-overlay #mat-panel-body .mat-studio-sheet .mat-tag-input,
#material-panel-overlay #mat-panel-body .mat-studio-sheet .mat-vp-tag-input {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.12);
    color: #0f172a;
}
#material-panel-overlay #mat-panel-body .mat-studio-sheet .mat-tag-add-btn,
#material-panel-overlay #mat-panel-body .mat-studio-sheet .mat-vp-tag-add {
    background: #f8fafc;
    color: #0f766e;
    border-color: rgba(13, 148, 136, 0.35);
}
#material-panel-overlay .mat-style-panel,
#material-panel-overlay .mat-style-panel--sf {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.08);
}
#material-panel-overlay .mat-style-panel-title {
    color: #0f172a;
}
#material-panel-overlay .mat-sf-style-tag {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.1);
    color: #0f172a;
}
#material-panel-overlay .mat-sf-style-tag.mat-sf-selected {
    background: linear-gradient(135deg, #ccfbf1, #5eead4);
    color: #042f2e;
}
#material-panel-overlay .mat-sheet-reflib-toggle {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.1);
}
#material-panel-overlay .mat-sheet-reflib-toggle span:first-child {
    color: #334155;
}
#material-panel-overlay .mat-vp-upload-mini {
    border-color: rgba(13, 148, 136, 0.35);
    background: rgba(255, 255, 255, 0.95);
}
#material-panel-overlay .mat-vp-img-preview-box {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.1);
}
#material-panel-overlay .mat-sheet-progress-track {
    background: #e2e8f0;
    border-color: rgba(15, 23, 42, 0.08);
}
#material-panel-overlay .mat-sheet-btn-ghost {
    background: #ffffff;
}
#material-panel-overlay .mat-hist-filter-btn {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.12);
    color: #475569;
}
#material-panel-overlay .mat-hist-filter-btn:hover {
    border-color: rgba(13, 148, 136, 0.35);
    color: #0f766e;
}
#material-panel-overlay .mat-hist-filter-btn.active {
    background: rgba(204, 251, 241, 0.6);
    border-color: rgba(13, 148, 136, 0.45);
    color: #0f766e;
}
#material-panel-overlay #mat-panel-body .mat-studio-sheet #mat-add-queue-btn {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    color: #0f172a !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}
#material-panel-overlay #mat-panel-body .mat-studio-sheet #mat-add-queue-btn:hover:not(:disabled) {
    border-color: rgba(13, 148, 136, 0.4) !important;
}
#material-panel-overlay #mat-panel-body .mat-studio-sheet #mat-add-queue-btn.mat-btn-queue--accent,
#material-panel-overlay #mat-panel-body .mat-studio-sheet #mat-sf-add-queue-btn.mat-btn-queue--accent {
    border-color: rgba(13, 148, 136, 0.35) !important;
    color: #0f766e !important;
}
#material-panel-overlay #mat-panel-body .mat-studio-sheet #mat-sf-add-queue-btn {
    background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
    border-color: rgba(13, 148, 136, 0.25) !important;
}
#material-panel-overlay #mat-panel-body .mat-studio-sheet #mat-submit-btn {
    border-color: rgba(13, 148, 136, 0.45);
    color: #042f2e;
    background: linear-gradient(165deg, #ccfbf1 0%, #5eead4 45%, #2dd4bf 100%);
    box-shadow: 0 4px 16px rgba(13, 148, 136, 0.25);
}
#material-panel-overlay .mat-vp-dims-head-row {
    border-bottom-color: rgba(15, 23, 42, 0.08);
}
#material-panel-overlay .mat-vp-gemini-card {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.08);
}
#material-panel-overlay .mat-vp-img-preview-box {
    background: #f1f5f9;
}
#material-panel-overlay .mat-sheet-form-panel--whitebg-ai,
#material-panel-overlay .mat-sheet-form-panel--whitebg-ai-out {
    padding: 16px 16px 18px;
}
#material-panel-overlay .mat-sheet-grid-2col--whitebg-ai {
    align-items: stretch;
}
#material-panel-overlay .mat-sheet-form-panel--whitebg-ai .mat-dropzone--sheet-media {
    margin-top: 2px;
}
/* 精华液等仍带内联深色样式时，在弹层内统一压成浅色 */
#material-panel-overlay select[style*="313244"],
#material-panel-overlay textarea[style*="313244"],
#material-panel-overlay input[style*="313244"] {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
}
#material-panel-overlay label[style*="color:#a6adc8"],
#material-panel-overlay label[style*="color: #a6adc8"] {
    color: #64748b !important;
}

/* 弹层内所有表单控件（不依赖 .mat-studio-sheet，压过内联深色） */
#material-panel-overlay #mat-panel-body select,
#material-panel-overlay #mat-panel-body textarea,
#material-panel-overlay #mat-panel-body input[type="text"],
#material-panel-overlay #mat-panel-body input[type="number"] {
    background-color: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.2) !important;
    color: #0f172a !important;
    color-scheme: light !important;
    -webkit-text-fill-color: #0f172a;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
#material-panel-overlay #mat-panel-body textarea,
#material-panel-overlay #mat-panel-body input[type="text"],
#material-panel-overlay #mat-panel-body input[type="number"] {
    background-image: none !important;
}
#material-panel-overlay #mat-panel-body select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 38px !important;
    background-image:
        linear-gradient(45deg, transparent 50%, #475569 50%),
        linear-gradient(135deg, #475569 50%, transparent 50%) !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50% !important;
    background-size: 6px 6px, 6px 6px !important;
    background-color: #ffffff !important;
}
#material-panel-overlay #mat-panel-body select option,
#material-panel-overlay #mat-panel-body select optgroup {
    background: #ffffff !important;
    color: #0f172a !important;
}

/* 精华液分子图：Tab / 预设 / 次级字色 */
#material-panel-overlay .mat-em-tab--off {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
}
#material-panel-overlay .mat-em-preset-btn {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
}
#material-panel-overlay .mat-em-preset-btn:hover {
    background: #f8fafc !important;
    border-color: rgba(13, 148, 136, 0.35) !important;
}
#material-panel-overlay .mat-em-preset-sub {
    color: #64748b !important;
}
#material-panel-overlay .mat-em-hint,
#material-panel-overlay .mat-em-adv-hint {
    color: #475569 !important;
}
#material-panel-overlay .mat-em-label-accent-orange {
    color: #c2410c !important;
}
#material-panel-overlay .mat-em-label-accent-teal {
    color: #0f766e !important;
}
#material-panel-overlay .mat-em-label-accent-mauve {
    color: #0f766e !important;
}
#material-panel-overlay .mat-em-label-accent-yellow {
    color: #b45309 !important;
}
#material-panel-overlay .mat-em-label-accent-rose {
    color: #be123c !important;
}
#material-panel-overlay .mat-em-label-accent-blue {
    color: #1d4ed8 !important;
}
#material-panel-overlay .mat-em-label-accent-green {
    color: #15803d !important;
}
#material-panel-overlay .mat-em-fav-toggle {
    color: #475569 !important;
}
#material-panel-overlay .mat-em-save-fav {
    border-color: rgba(13, 148, 136, 0.45) !important;
    color: #0f766e !important;
}
#material-panel-overlay .mat-em-fav-empty {
    font-size: 12px;
    color: #64748b;
    padding: 6px 4px;
}
#material-panel-overlay .mat-em-fav-row {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    padding: 8px;
}
#material-panel-overlay .mat-em-fav-text {
    flex: 1;
    font-size: 12px;
    color: #0f172a;
    line-height: 1.4;
    word-break: break-all;
}
#material-panel-overlay .mat-em-fav-btn {
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 11px;
    cursor: pointer;
    background: #ffffff;
    flex-shrink: 0;
}
#material-panel-overlay .mat-em-fav-btn--use {
    border: 1px solid rgba(29, 78, 216, 0.45);
    color: #1d4ed8;
}
#material-panel-overlay .mat-em-fav-btn--del {
    border: 1px solid rgba(190, 18, 60, 0.4);
    color: #be123c;
}
#material-panel-overlay .mat-em-rpc-cell .mat-sheet-label {
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
}

/* 脚本裂变 / 视频提示词 等 */
#material-panel-overlay .mat-fission-mode label {
    color: #334155 !important;
}
#material-panel-overlay .mat-style-panel-head {
    color: #0f172a !important;
}
#material-panel-overlay .mat-style-random-btn {
    color: #0f766e !important;
}
#material-panel-overlay .mat-sheet-gemini-hint {
    color: #475569 !important;
}

/* 素材历史列表（浅色卡片） */
#material-panel-overlay .mat-hist-empty {
    text-align: center;
    color: #64748b;
    padding: 40px 0;
    font-size: 14px;
}
#material-panel-overlay .mat-hist-empty-icon {
    font-size: 32px;
    margin-bottom: 12px;
}
#material-panel-overlay .mat-hist-empty-sub {
    margin-top: 6px;
    font-size: 12px;
    color: #94a3b8;
}
#material-panel-overlay .mat-hist-card {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
#material-panel-overlay .mat-hist-thumb {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    border: 1px solid rgba(15, 23, 42, 0.06);
}
#material-panel-overlay .mat-hist-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}
#material-panel-overlay .mat-hist-card-body {
    flex: 1;
    min-width: 0;
}
#material-panel-overlay .mat-hist-card-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
#material-panel-overlay .mat-hist-badge {
    font-size: 11px;
    padding: 2px 8px;
    background: #f1f5f9;
    color: #334155;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.08);
}
#material-panel-overlay .mat-hist-time {
    font-size: 11px;
    color: #64748b;
}
#material-panel-overlay .mat-hist-del {
    margin-left: auto;
    background: none;
    border: none;
    color: #be123c;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 1px 6px;
    border-radius: 4px;
}
#material-panel-overlay .mat-hist-line {
    font-size: 12px;
    color: #334155;
}
#material-panel-overlay .mat-hist-line--ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#material-panel-overlay .mat-hist-block {
    margin-top: 6px;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    padding: 8px;
    position: relative;
    padding-right: 52px;
}
#material-panel-overlay .mat-hist-block-meta {
    font-size: 11px;
    color: #64748b;
    margin-bottom: 4px;
}
#material-panel-overlay .mat-hist-block-text {
    font-size: 12px;
    color: #0f172a;
    white-space: pre-wrap;
    word-break: break-all;
}
#material-panel-overlay .mat-hist-copy-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 2px 8px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 6px;
    color: #0f766e;
    font-size: 11px;
    cursor: pointer;
}
#material-panel-overlay .mat-hist-urls {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
#material-panel-overlay .mat-hist-urls a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-decoration: none;
}
#material-panel-overlay .mat-hist-urls img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(15, 23, 42, 0.1);
}
#material-panel-overlay .mat-hist-urls span {
    font-size: 10px;
    color: #1d4ed8;
}

/* 右下角素材任务面板（与弹层浅色一致） */
#mat-global-task-panel .mat-gp-task-title {
    font-size: 12px;
    color: #0f766e;
    padding: 4px 0 6px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    margin-bottom: 8px;
}
#mat-global-task-panel .mat-gp-task-card {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
}
#mat-global-task-panel .mat-gp-status {
    font-size: 13px;
    margin-bottom: 8px;
}
#mat-global-task-panel .mat-gp-status {
    margin-bottom: 8px;
}
#mat-global-task-panel .mat-gp-status--muted {
    color: #64748b;
}
#mat-global-task-panel .mat-gp-status--accent {
    color: #6d28d9;
}
#mat-global-task-panel .mat-gp-progress-track {
    background: #e2e8f0;
    border-radius: 6px;
    height: 5px;
    overflow: hidden;
}
#mat-global-task-panel .mat-gp-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #a78bfa, #2dd4bf, #a78bfa);
    background-size: 200%;
    animation: mat-progress-anim 1.5s linear infinite;
    border-radius: 6px;
}
#mat-global-task-panel .mat-gp-body-block {
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 6px;
    font-size: 12px;
    color: #0f172a;
    white-space: pre-wrap;
    word-break: break-all;
}
#mat-global-task-panel .mat-gp-copy-btn {
    font-size: 11px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.12);
    color: #0f766e;
    padding: 2px 10px;
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 6px;
}
#mat-global-task-panel .mat-gp-variant-card {
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    border-left: 3px solid #8b5cf6;
}
#mat-global-task-panel .mat-gp-variant-title {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
}
#mat-global-task-panel .mat-gp-variant-script {
    font-size: 12px;
    color: #0f172a;
    white-space: pre-wrap;
    line-height: 1.6;
    word-break: break-all;
    margin-bottom: 10px;
}
#mat-global-task-panel .mat-gp-tag {
    background: #e2e8f0;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
    color: #5b21b6;
}
#mat-global-task-panel .mat-gp-tag--sub {
    background: #f1f5f9;
    font-size: 10px;
    color: #64748b;
}
#mat-global-task-panel .mat-gp-dl-link {
    display: block;
    margin-top: 8px;
    text-align: center;
    font-size: 12px;
    color: #5b21b6;
}
#mat-global-task-panel .mat-gp-err {
    color: #be123c;
    font-size: 13px;
    white-space: pre-wrap;
    word-break: break-all;
}
#mat-global-task-panel .mat-gp-warn {
    color: #c2410c;
    font-size: 13px;
}
#mat-global-task-panel .mat-gp-img {
    max-width: 100%;
    border-radius: 6px;
    cursor: pointer;
}
#mat-global-task-panel .mat-gp-combo-label {
    font-size: 10px;
    color: #64748b;
    margin-bottom: 4px;
}
#mat-global-task-panel .mat-gp-global-err {
    color: #be123c;
    padding: 12px;
    font-size: 13px;
    background: #fef2f2;
    border: 1px solid rgba(190, 18, 60, 0.25);
    border-radius: 10px;
    margin-bottom: 8px;
}

/* 弹层内：换装预览缩略图与服饰标签下拉 */
#material-panel-overlay .mat-preview-thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(15, 23, 42, 0.12);
}
#material-panel-overlay #mat-panel-body .mat-preview-inline-select,
#material-panel-overlay #mat-panel-body .mat-preview-inline-input {
    font-size: 11px;
    padding: 4px 8px;
    margin-top: 2px;
    width: auto;
    min-width: 70px;
    max-width: 100%;
    box-sizing: border-box;
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid rgba(15, 23, 42, 0.18) !important;
    border-radius: 6px;
    color-scheme: light;
}

/* 批量渲染：维度行内输入高度（与浅色控件一致） */
#material-panel-overlay .mat-dim-add-row {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    align-items: center;
}
#material-panel-overlay .mat-dim-add-row .mat-tag-add-input {
    flex: 1;
    min-height: 0;
    height: 36px;
    padding: 6px 10px;
    font-size: 12px;
}
#material-panel-overlay .mat-dim-delete {
    background: none;
    border: none;
    color: #be123c;
    cursor: pointer;
    font-size: 12px;
    padding: 0;
}

/* 脚本裂变等：#mat-panel-body .mat-studio-sheet 下标签规则特异性更高，需在此再压一层 */
#material-panel-overlay #mat-panel-body .mat-studio-sheet .mat-sf-style-tag {
    background: #f8fafc !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    color: #0f172a !important;
}
#material-panel-overlay #mat-panel-body .mat-studio-sheet .mat-sf-style-tag.mat-sf-selected {
    background: linear-gradient(135deg, #ccfbf1, #5eead4) !important;
    color: #042f2e !important;
    border-color: rgba(13, 148, 136, 0.4) !important;
}

/* 上传区：用 SVG 替代 emoji，避免 Windows 下纯黑剪影 */
#material-panel-overlay .mat-dropzone__emoji.mat-dropzone__emoji-svg {
    font-size: 0;
    line-height: 0;
    color: transparent;
}
#material-panel-overlay .mat-dropzone__emoji.mat-dropzone__emoji-svg::after {
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
#material-panel-overlay .mat-dropzone__ico-cam::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230d9488' d='M9 3L7.17 5H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2h-3.17L15 3H9zm3 15c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm0-2c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z'/%3E%3C/svg%3E");
}
#material-panel-overlay .mat-dropzone__ico-user::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230d9488' d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
}
#material-panel-overlay .mat-dropzone__ico-shirt::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230d9488' d='M16.5 2.5L12 6 7.5 2.5 5 5v15h4v-6h6v6h4V5l-2.5-2.5z'/%3E%3C/svg%3E");
}
#material-panel-overlay .mat-dropzone__ico-folder::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230d9488' d='M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z'/%3E%3C/svg%3E");
}
#material-panel-overlay .mat-dropzone__ico-frame::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230d9488' d='M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3 3.5-4.5 4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E");
}

/* 精华液分子：紫色主按钮/选中态改为与积分条一致的浅青绿 */
#material-panel-overlay .mat-em-tab--on {
    background: linear-gradient(135deg, #ccfbf1, #5eead4) !important;
    color: #042f2e !important;
    border: 1px solid rgba(13, 148, 136, 0.35) !important;
    font-weight: 600;
}
#material-panel-overlay .mat-em-direct-btn {
    background: linear-gradient(135deg, #99f6e4, #2dd4bf 50%, #14b8a6) !important;
    color: #042f2e !important;
    box-shadow: 0 6px 20px rgba(13, 148, 136, 0.22);
}
#material-panel-overlay .mat-em-preset-btn.is-selected {
    background: linear-gradient(135deg, #ccfbf1, #5eead4) !important;
    color: #042f2e !important;
    border-color: rgba(13, 148, 136, 0.4) !important;
    font-weight: 600;
}

/* 下拉/数字选择：合并 background 层，强制浅色底+青绿箭头（压过全局暗色渐变与系统默认灰底） */
#material-panel-overlay.mat-studio-overlay #mat-panel-body .mat-studio-sheet select,
#material-panel-overlay.mat-studio-overlay #mat-panel-body .mat-studio-sheet select.mat-sheet-control {
    -webkit-appearance: none !important;
    appearance: none !important;
    -moz-appearance: none !important;
    color-scheme: light !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    border: 1px solid rgba(15, 23, 42, 0.22) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
    filter: none !important;
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%230f766e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5L7 7l6-5.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px 8px !important;
}
#material-panel-overlay.mat-studio-overlay #mat-panel-body .mat-studio-sheet select.mat-em-select-compact {
    background-position: right 10px center !important;
    background-size: 10px 7px !important;
}
#material-panel-overlay.mat-studio-overlay #mat-panel-body .mat-studio-sheet select option,
#material-panel-overlay.mat-studio-overlay #mat-panel-body .mat-studio-sheet select optgroup {
    background-color: #ffffff !important;
    color: #0f172a !important;
}
#material-panel-overlay.mat-studio-overlay #mat-panel-body .mat-studio-sheet select::-ms-expand {
    display: none;
}