/* 智能混剪 - 暗色工作台 + 金色主操作 + 青色辅助状态
   沿用 main.css 已定义的 --gold/--cyan/--bg-card/--border-gold/--text-primary token */

/* ===== 页面布局 ===== */
.sm-page-layout { width: 100%; max-width: 1200px; margin: 0 auto; padding: 16px; box-sizing: border-box; }
.sm-section { margin-bottom: 24px; background: var(--bg-card); border: 1px solid var(--border-gold); border-radius: 12px; padding: 20px; position: relative; }
.sm-section-title { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: var(--gold-light); margin-bottom: 16px; padding-left: 12px; position: relative; }
.sm-section-title::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; background: linear-gradient(var(--gold), var(--cyan)); border-radius: 2px; }
.sm-step-badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gold-dim); color: var(--gold-light); font-size: 12px; font-weight: 700; }

/* ===== 表单控件 ===== */
.sm-textarea, .sm-input, .sm-select { width: 100%; background: rgba(10,8,25,0.6); border: 1px solid var(--border-gold); border-radius: 8px; padding: 10px 14px; color: var(--text-primary); font-size: 14px; font-family: var(--font-body); box-sizing: border-box; }
.sm-textarea { min-height: 80px; resize: vertical; line-height: 1.6; }
.sm-textarea:focus, .sm-input:focus, .sm-select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-dim); }
.sm-label { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; }

/* ===== 按钮 ===== */
.sm-action-bar { margin-top: 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sm-action-bar .sm-btn-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.sm-action-error { width: 100%; padding: 10px 14px; background: rgba(248,113,113,.08); border: 1px solid rgba(248,113,113,.25); border-left: 3px solid #f87171; border-radius: 8px; color: #f87171; font-size: 13px; line-height: 1.5; text-align: left; }
.sm-action-error i { margin-right: 6px; }
.sm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border: 1px solid var(--border-gold); border-radius: 8px; background: transparent; color: var(--gold-light); font-size: 14px; font-family: var(--font-body); cursor: pointer; transition: all .2s; }
.sm-btn:hover { background: var(--gold-dim); }
.sm-btn-primary { background: linear-gradient(135deg, var(--gold), var(--cyan)); color: #0a0a1a; border: none; font-weight: 600; }
.sm-btn-primary:hover { filter: brightness(1.1); box-shadow: var(--shadow-gold); }
.sm-btn-primary:disabled { opacity: .5; cursor: not-allowed; filter: none; box-shadow: none; }
.sm-btn:disabled, .sm-btn-sm:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.sm-btn-sm { padding: 6px 12px; font-size: 12px; }
.sm-btn-danger { color: #f87171; border-color: rgba(248,113,113,.3); }
.sm-btn-danger:hover { background: rgba(248,113,113,.15); }

/* 横竖版选择按钮 */
.sm-orient-btn { opacity: .6; }
.sm-orient-btn.active { background: linear-gradient(135deg, var(--gold), var(--cyan)); color: #0a0a1a; border: none; font-weight: 600; opacity: 1; }

/* ===== 欢迎页 ===== */
.sm-hero { text-align: center; padding: 40px 20px 30px; }
.sm-hero .sm-hero-icon { font-size: 48px; color: var(--gold); margin-bottom: 16px; filter: drop-shadow(0 0 12px var(--gold-dim)); }
.sm-hero h2 { font-family: var(--font-title); color: var(--gold-light); font-size: 26px; margin: 0 0 8px; }
.sm-hero p { color: var(--text-secondary); font-size: 14px; margin: 0 0 24px; }
.sm-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 20px; }
.sm-feature-card { background: var(--bg-card); border: 1px solid var(--border-gold); border-radius: 10px; padding: 16px; text-align: center; }
.sm-feature-card i { font-size: 24px; color: var(--gold); margin-bottom: 8px; display: block; }
.sm-feature-card h4 { color: var(--text-primary); font-size: 14px; margin: 0 0 4px; }
.sm-feature-card p { color: var(--text-dim); font-size: 12px; margin: 0; }

/* ===== 素材/声音卡片网格 ===== */
.sm-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.sm-card { background: rgba(10,8,25,0.5); border: 1px solid var(--border-gold); border-radius: 8px; overflow: hidden; position: relative; }
/* 素材缩略图：默认竖版 9:16，JS 按真实分辨率切 .is-landscape（横版 16:9）*/
.sm-card-thumb { width: 100%; aspect-ratio: 9/16; background: #000; object-fit: cover; display: block; }
.sm-card.is-landscape .sm-card-thumb { aspect-ratio: 16/9; }
.sm-card-thumb-placeholder { width: 100%; aspect-ratio: 9/16; background: rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 24px; }
/* 朝向角标：竖版/横版区分 */
.sm-card-orient-badge { position: absolute; bottom: 6px; right: 6px; background: rgba(0,0,0,.6); color: var(--cyan); font-size: 9px; padding: 1px 5px; border-radius: 3px; backdrop-filter: blur(2px); pointer-events: none; }
/* 方向与当前输出朝向不匹配的素材：半透明 + 朝向角标变红警示（仅视觉提示，不阻止单击勾选） */
.sm-card.orient-mismatch { opacity: 0.45; }
.sm-card.orient-mismatch .sm-card-orient-badge { background: rgba(231,76,60,.85); color: #fff; }
.sm-card.orient-mismatch.selected { opacity: 1; }
/* 素材类型角标：图片素材标记（左下角，与朝向角标不冲突） */
.sm-card-type-badge { position: absolute; bottom: 6px; left: 6px; background: rgba(0,0,0,.6); color: var(--gold-light); font-size: 9px; padding: 1px 5px; border-radius: 3px; backdrop-filter: blur(2px); pointer-events: none; }
.sm-card-info { padding: 8px 10px; }
.sm-card-name { font-size: 12px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-card-meta { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.sm-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.sm-tag { font-size: 10px; padding: 2px 6px; border-radius: 4px; background: var(--cyan-dim); color: var(--cyan); }
.sm-card-default-badge { position: absolute; top: 6px; right: 6px; background: var(--gold); color: #0a0a1a; font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 600; }
.sm-card-actions { position: absolute; top: 6px; left: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity .2s; }
.sm-card:hover .sm-card-actions { opacity: 1; }
.sm-card-action-btn { width: 24px; height: 24px; border-radius: 4px; background: rgba(0,0,0,0.6); border: none; color: #fff; font-size: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.sm-card-action-btn:hover { background: rgba(248,113,113,.8); }

/* ===== 可勾选素材卡片（创建页用） ===== */
.sm-card-selectable { transition: border-color .15s, box-shadow .15s; }
.sm-card-selectable.selected { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan) inset, var(--shadow-gold); }
.sm-card-check { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; color: transparent; font-size: 11px; z-index: 2; transition: all .15s; }
.sm-card-check.checked { border-color: var(--cyan); background: var(--cyan); color: #0a0a1a; }

/* 使用次数徽章：勾选卡片左上角醒目标识（0次=绿色"新"，已用=灰色次数） */
.sm-card-usage { position: absolute; top: 6px; left: 6px; padding: 2px 7px; border-radius: 10px; font-size: 10px; font-weight: 600; z-index: 2; backdrop-filter: blur(2px); }
.sm-card-usage.unused { background: rgba(74,222,128,.85); color: #052e16; }
.sm-card-usage.used { background: rgba(0,0,0,.6); color: #d1d5db; }

/* 素材筛选条（搜索+排序） */
.sm-mat-filterbar { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; align-items: center; }
.sm-mat-filterbar input { flex: 1; min-width: 160px; padding: 7px 12px; border: 1px solid var(--border-gold); border-radius: 6px; background: rgba(10,10,26,.6); color: var(--text-primary); font-size: 13px; outline: none; font-family: var(--font-body); }
.sm-mat-filterbar input::placeholder { color: var(--text-dim); }
.sm-mat-filterbar input:focus { border-color: var(--gold); }
.sm-mat-filterbar select { padding: 7px 10px; border: 1px solid var(--border-gold); border-radius: 6px; background: rgba(10,10,26,.6); color: var(--text-primary); font-size: 13px; outline: none; }
/* smartmix 所有 select 的 option 统一深底浅字（半透明背景在 option 列表会渲染异常，统一兜底） */
.sm-mat-filterbar select option, .sm-select option { background: #1a1a2e; color: var(--text-primary); }

/* 筛选 chip 按钮组（朝向/类型筛选）：内联紧凑按钮组，单选高亮 */
.sm-mat-chip-group { display: inline-flex; gap: 2px; background: rgba(10,10,26,.6); border-radius: 6px; padding: 2px; border: 1px solid var(--border-gold); }
.sm-mat-chip { padding: 5px 10px; border: none; background: transparent; color: var(--text-secondary); font-size: 12px; border-radius: 4px; cursor: pointer; transition: all .15s; font-family: inherit; white-space: nowrap; }
.sm-mat-chip:hover:not(.active) { color: var(--gold-light); background: rgba(212,175,55,.08); }
.sm-mat-chip.active { background: linear-gradient(135deg, var(--gold), #b8962e); color: #0a0a1a; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.3); }

/* 标签筛选条：横向滚动的标签 chips，点击切换筛选（再点取消） */
.sm-mat-tag-bar { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 8px; margin-bottom: 4px; scrollbar-width: thin; }
.sm-mat-tag-bar::-webkit-scrollbar { height: 4px; }
.sm-mat-tag-bar::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 2px; }
.sm-mat-tag-bar .sm-tag { flex-shrink: 0; cursor: pointer; transition: all .15s; user-select: none; }
.sm-mat-tag-bar .sm-tag em { font-style: normal; opacity: .6; margin-left: 2px; font-size: 10px; }
.sm-mat-tag-bar .sm-tag:hover { border-color: var(--gold); color: var(--gold-light); }
.sm-mat-tag-bar .sm-tag.active { background: var(--cyan); color: #0a0a1a; border-color: var(--cyan); font-weight: 600; }
.sm-mat-tag-bar .sm-tag.active em { opacity: .8; }
.sm-mat-tag-empty { color: var(--text-dim); font-size: 11px; padding: 4px 0; }

/* 侧栏状态筛选下拉（窄列专用，与 .sidebar-search 对齐）。
   两个下拉（状态 + 是否已发布）并排显示，侧栏 280px 列宽下每行约 130px 可读。 */
.sm-sidebar-filter { display: flex; gap: 6px; padding: 8px 10px; border-bottom: 1px solid rgba(212,175,55,0.1); }
.sm-sidebar-filter select { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid rgba(212,175,55,0.15); border-radius: 6px; background: #14111f; color: var(--text-primary); font-size: 12px; box-sizing: border-box; font-family: inherit; outline: none; cursor: pointer; }
.sm-sidebar-filter select:focus { border-color: var(--gold); }
/* option 深底浅字（浏览器默认白底看不清，对齐 form.css 的 select option 约定） */
.sm-sidebar-filter select option { background: #1a1a2e; color: var(--text-primary); }

/* 素材分页控件 */
.sm-mat-pagination { display: flex; justify-content: center; align-items: center; gap: 4px; margin-top: 12px; flex-wrap: wrap; }
.sm-mat-pagination button { padding: 5px 11px; border: 1px solid var(--border-gold); border-radius: 4px; background: transparent; color: var(--text-primary); font-size: 12px; cursor: pointer; transition: all .15s; }
.sm-mat-pagination button:hover:not(:disabled):not(.active) { background: var(--gold-dim); }
.sm-mat-pagination button.active { background: linear-gradient(135deg, var(--gold), #b8962e); color: #0a0a1a; border: none; font-weight: 600; }
.sm-mat-pagination button:disabled { opacity: .3; cursor: not-allowed; }
.sm-mat-pagination .sm-mat-page-info { color: var(--text-dim); font-size: 11px; margin: 0 6px; }

/* 全选特殊标识状态 */
.sm-mat-sel-status.all-selected { color: var(--gold); font-weight: 600; }
.sm-mat-sel-status.all-selected::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; margin-right: 4px; }
.sm-mat-sel-status.has-exclude { color: #fb923c; }

/* ===== 上传区 ===== */
.sm-upload-zone { border: 2px dashed var(--border-gold); border-radius: 10px; padding: 24px; cursor: pointer; transition: all .2s;
    display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sm-upload-zone:hover { border-color: var(--gold); background: var(--gold-dim); }
.sm-upload-zone i { font-size: 28px; color: var(--gold); margin-bottom: 8px; display: block; }
.sm-upload-zone p { color: var(--text-secondary); font-size: 13px; margin: 0; }

/* ===== 进度区 ===== */
.sm-progress-area { background: var(--bg-card); border: 1px solid var(--border-gold); border-radius: 12px; padding: 20px; margin-bottom: 20px; }
.sm-progress-bar { width: 100%; height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden; margin: 12px 0; }
.sm-progress-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--cyan)); transition: width .5s; border-radius: 4px; }
.sm-stages { display: flex; align-items: center; gap: 4px; margin: 16px 0; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
.sm-stage { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 58px; min-width: 58px; }
.sm-stage-circle { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--border-gold); display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 13px; }
.sm-stage.done .sm-stage-circle { background: var(--cyan-dim); border-color: var(--cyan); color: var(--cyan); }
.sm-stage.active .sm-stage-circle { border-color: var(--gold); color: var(--gold); animation: sm-spin 1s linear infinite; }
.sm-stage.failed .sm-stage-circle { border-color: #f87171; color: #f87171; }
.sm-stage-label { font-size: 11px; color: var(--text-dim); text-align: center; }
.sm-stage.done .sm-stage-label, .sm-stage.active .sm-stage-label { color: var(--text-primary); }
.sm-stage-line { flex: 0 0 24px; height: 2px; background: var(--border-gold); min-width: 24px; }
.sm-stage-line.done { background: var(--cyan); }
@keyframes sm-spin { to { transform: rotate(360deg); } }

.sm-stage-log { margin-top: 12px; font-size: 13px; color: var(--text-secondary); max-height: 200px; overflow-y: auto; }
.sm-stage-log-item { padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.sm-stage-log-item .sm-log-time { color: var(--text-dim); font-size: 11px; margin-right: 8px; }
.sm-stage-log-item.is-failed { color: #f87171; }

/* 实时拆分预览行（scripting_token 流式展示，持续更新同一行而非刷屏） */
.sm-script-preview .sm-script-preview-label { color: var(--accent, #60a5fa); margin-right: 6px; font-weight: 600; }
.sm-script-preview .sm-script-preview-text { color: var(--text-dim); word-break: break-all; }

/* ===== 结果页 ===== */
.sm-result-layout { display: flex; gap: 20px; }
.sm-result-main { flex: 1; min-width: 0; }
.sm-result-side { width: 320px; flex-shrink: 0; }
.sm-video-wrap { width: min(100%, 420px); background: #000; border-radius: 10px; overflow: hidden; aspect-ratio: 9/16; max-height: 70vh; margin: 0 auto; }
.sm-video-wrap.is-landscape { aspect-ratio: 16/9; width: min(100%, 800px); }
.sm-video-wrap video { width: 100%; height: 100%; object-fit: contain; }

/* 项目信息网格（结果页·视频下方） */
.sm-info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 16px; }
.sm-info-row { display: flex; flex-direction: column; gap: 3px; background: rgba(10,8,25,0.4); border: 1px solid rgba(212,175,55,.15); border-radius: 8px; padding: 8px 12px; }
.sm-info-label { font-size: 11px; color: var(--text-dim); display: inline-flex; align-items: center; gap: 5px; }
.sm-info-label i { color: var(--gold); font-size: 10px; width: 12px; text-align: center; }
.sm-info-value { font-size: 13px; color: var(--text-primary); line-height: 1.5; word-break: break-all; }
.sm-info-value a { text-decoration: none; }
.sm-info-value a:hover { text-decoration: underline; }
.sm-seg-list { margin-top: 16px; }
.sm-seg-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(10,8,25,0.5); border: 1px solid var(--border-gold); border-radius: 8px; margin-bottom: 8px; }
.sm-seg-item.is-failed { border-left: 3px solid #f87171; }
.sm-seg-num { width: 24px; height: 24px; border-radius: 50%; background: var(--gold-dim); color: var(--gold-light); font-size: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sm-seg-text { font-size: 13px; color: var(--text-primary); line-height: 1.4; overflow-wrap: anywhere; }
.sm-seg-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sm-seg-edit-textarea { width: 100%; min-height: 60px; resize: vertical; background: rgba(10,8,25,0.6); border: 1px solid var(--border-gold); border-radius: 6px; padding: 8px 10px; color: var(--text-primary); font-size: 13px; font-family: var(--font-body); line-height: 1.4; box-sizing: border-box; }
.sm-seg-edit-textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-dim); }
.sm-seg-edit-actions { display: flex; gap: 6px; }
.sm-seg-state { font-size: 11px; padding: 2px 8px; border-radius: 4px; flex-shrink: 0; }
.sm-seg-state.completed { background: rgba(74,240,224,.15); color: var(--cyan); }
.sm-seg-state.generating { background: rgba(96,165,250,.15); color: #60a5fa; }
.sm-seg-state.failed { background: rgba(248,113,113,.15); color: #f87171; }
.sm-seg-state.pending { background: rgba(255,255,255,.08); color: var(--text-dim); }

/* 运行日志（结果页·分段列表下方） */
.sm-task-logs { display: flex; flex-direction: column; gap: 6px; }
.sm-task-log-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(10,8,25,0.4); border: 1px solid rgba(212,175,55,.12); border-left: 3px solid var(--border-gold); border-radius: 6px; font-size: 12px; }
.sm-task-log-item.err { border-left-color: #f87171; }
.sm-task-log-item.ok { border-left-color: var(--cyan); }
.sm-task-log-item.warn { border-left-color: #fbbf24; }
.sm-task-log-item.run { border-left-color: #60a5fa; }
.sm-task-log-time { color: var(--text-dim); font-size: 11px; }
.sm-task-log-status { font-size: 11px; padding: 1px 8px; border-radius: 4px; }
.sm-task-log-status.ok { background: rgba(74,240,224,.15); color: var(--cyan); }
.sm-task-log-status.err { background: rgba(248,113,113,.15); color: #f87171; }
.sm-task-log-status.warn { background: rgba(251,191,36,.16); color: #fbbf24; }
.sm-task-log-status.run { background: rgba(96,165,250,.15); color: #60a5fa; }
.sm-task-log-status.wait { background: rgba(212,175,55,.14); color: var(--gold-light); }
.sm-task-log-phase { color: var(--text-secondary); }
.sm-task-log-span { color: var(--text-dim); font-size: 11px; }
.sm-task-log-cost { color: var(--gold-light); font-size: 11px; }
.sm-task-log-err { width: 100%; color: #f87171; margin-top: 4px; word-break: break-all; line-height: 1.4; }
.sm-task-log-empty { color: var(--text-dim); font-size: 13px; padding: 12px; text-align: center; }

/* ===== 消费明细（计费透明化） ===== */
.sm-cost-summary { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--cyan); }
.sm-cost-detail { display: flex; flex-direction: column; gap: 6px; }
.sm-cost-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 7px 12px;
    background: rgba(10,8,25,0.4); border: 1px solid rgba(212,175,55,.12); border-left: 3px solid var(--gold);
    border-radius: 6px; font-size: 12px; }
.sm-cost-row.is-refund { border-left-color: var(--cyan); }
.sm-cost-action { color: var(--text-secondary); min-width: 90px; }
.sm-cost-points { color: #f87171; font-weight: 600; min-width: 50px; }
.sm-cost-points.refund { color: #34d399; }
.sm-cost-cny { color: var(--text-dim); font-size: 11px; min-width: 48px; }
.sm-cost-detail-text { color: var(--text-dim); flex: 1; min-width: 60px; word-break: break-all; }
.sm-cost-time { color: var(--text-dim); font-size: 11px; margin-left: auto; }
.sm-cost-empty { color: var(--text-dim); font-size: 13px; padding: 12px; text-align: center; }
.sm-cost-note { font-size: 11px; color: var(--text-dim); padding: 6px 10px; margin-bottom: 6px; background: rgba(212,175,55,.06); border-radius: 6px; line-height: 1.5; }

/* ===== 视频发布包 ===== */
.sm-modal-overlay { position: fixed; inset: 0; z-index: 2200; background: rgba(0,0,0,.72); align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }
.sm-publish-modal { width: min(96vw, 720px); max-height: 86vh; overflow: hidden; background: #14111f; border: 1px solid var(--border-gold); border-radius: 10px; box-shadow: 0 18px 60px rgba(0,0,0,.55); display: flex; flex-direction: column; }
.sm-publish-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid rgba(212,175,55,.22); }
.sm-publish-title { display: inline-flex; align-items: center; gap: 8px; color: var(--gold-light); font-weight: 700; font-size: 15px; }
.sm-publish-body { padding: 16px; overflow: auto; }
.sm-pp-loading, .sm-pp-error, .sm-pp-empty { color: var(--text-dim); text-align: center; padding: 22px 12px; font-size: 13px; }
.sm-pp-error { color: #f87171; }
.sm-pp-rec { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px; margin-bottom: 14px; font-size: 14px; font-weight: 700; }
.sm-pp-rec small { margin-left: auto; font-size: 12px; font-weight: 500; color: inherit; opacity: .86; }
.sm-pp-rec.pass { background: rgba(74,222,128,.14); color: #4ade80; }
.sm-pp-rec.warn { background: rgba(251,191,36,.14); color: #fbbf24; }
.sm-pp-rec.fail { background: rgba(248,113,113,.14); color: #f87171; }
.sm-pp-section { margin-bottom: 14px; background: rgba(10,8,25,.42); border: 1px solid rgba(212,175,55,.2); border-radius: 8px; padding: 12px; }
.sm-pp-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; color: var(--gold); font-size: 12px; font-weight: 700; }
.sm-pp-section-head button { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(212,175,55,.35); border-radius: 6px; background: transparent; color: var(--gold); cursor: pointer; }
.sm-pp-section-head button:hover { background: rgba(212,175,55,.12); }
.sm-pp-title { color: var(--text-primary); border-left: 2px solid var(--gold); background: rgba(212,175,55,.07); border-radius: 5px; padding: 8px 10px; margin-bottom: 6px; font-size: 14px; line-height: 1.55; }
.sm-pp-cover { display: inline-flex; flex-direction: column; gap: 2px; border: 1px solid rgba(74,240,224,.25); border-radius: 6px; background: rgba(74,240,224,.07); padding: 8px 10px; margin: 0 6px 6px 0; }
.sm-pp-cover b { color: var(--cyan); font-size: 15px; }
.sm-pp-cover small { color: var(--text-secondary); font-size: 12px; }
.sm-pp-cover-shots { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(110px, .8fr); gap: 10px; align-items: start; }
.sm-pp-cover-shot { border: 1px solid rgba(212,175,55,.22); border-radius: 8px; background: rgba(255,255,255,.035); overflow: hidden; }
.sm-pp-cover-shot img { width: 100%; display: block; object-fit: cover; background: rgba(0,0,0,.25); }
.sm-pp-cover-shot-landscape img { aspect-ratio: 16 / 9; }
.sm-pp-cover-shot-portrait { max-width: 160px; justify-self: end; }
.sm-pp-cover-shot-portrait img { aspect-ratio: 9 / 16; }
.sm-pp-cover-shot-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 9px; color: var(--text-secondary); font-size: 12px; }
.sm-pp-cover-shot-foot a { color: var(--gold-light); text-decoration: none; white-space: nowrap; }
.sm-pp-cover-error { color: #fbbf24; font-size: 12px; line-height: 1.6; padding-top: 4px; }
.sm-pp-cover-error .sm-btn { margin-left: 8px; vertical-align: middle; }
.sm-pp-text { color: var(--text-secondary); font-size: 13px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.sm-pp-tags { color: var(--cyan); font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.sm-pp-pred { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sm-pp-pred div { display: flex; justify-content: space-between; gap: 8px; background: rgba(255,255,255,.04); border-radius: 6px; padding: 7px 9px; font-size: 12px; color: var(--text-secondary); }
.sm-pp-pred b { color: var(--gold-light); font-weight: 600; white-space: nowrap; }
.sm-pp-pred span { text-align: right; overflow-wrap: anywhere; }
.sm-pp-updated { color: var(--text-dim); font-size: 11px; text-align: right; margin: 4px 0 12px; }
.sm-pp-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.sm-pp-regen { width: 100%; margin-top: 12px; padding: 10px; background: transparent; border: 1px solid var(--border-gold); border-radius: 8px; color: var(--gold); cursor: pointer; }
.sm-pp-regen:hover { background: rgba(212,175,55,.08); }
/* ===== 复审页：脚本分段预览 ===== */
.sm-review-seg { background: rgba(10,8,25,0.5); border: 1px solid var(--border-gold); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.sm-review-seg-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.sm-review-seg-speech { flex: 1; font-size: 13px; color: var(--text-primary); line-height: 1.5; }
.sm-review-subs { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 32px; }
.sm-review-sub { font-size: 12px; color: var(--text-secondary); background: rgba(255,255,255,.05); border: 1px solid var(--border-gold); border-radius: 4px; padding: 2px 8px; }

/* ===== 项目列表 ===== */
.sm-project-list { display: flex; flex-direction: column; gap: 4px; }
.sm-project-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bg-card); border: 1px solid var(--border-gold); border-radius: 8px; margin-bottom: 8px; cursor: pointer; transition: all .2s; }
.sm-project-item:hover { border-color: var(--gold); }
/* 侧栏内项目卡片紧凑化（侧栏 280px 比主区窄，对齐 aivideo-list 紧凑风格） */
.aivideo-list.sm-project-list .sm-project-item { padding: 10px; margin-bottom: 6px; gap: 10px; }
.aivideo-list.sm-project-list .sm-project-title { font-size: 13px; }
.aivideo-list.sm-project-list .sm-project-status { font-size: 10px; padding: 2px 6px; }
.sm-project-title { flex: 1; min-width: 0; font-size: 14px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-project-status { font-size: 11px; padding: 2px 8px; border-radius: 4px; }
.sm-project-status.completed { background: rgba(74,240,224,.15); color: var(--cyan); }
.sm-project-status.generating { background: rgba(96,165,250,.15); color: #60a5fa; }
.sm-project-status.processing, .sm-project-status.pending, .sm-project-status.scripted { background: rgba(212,175,55,.14); color: var(--gold-light); }
.sm-project-status.partial { background: rgba(251,191,36,.16); color: #fbbf24; }
.sm-project-status.reviewing { background: rgba(96,165,250,.15); color: #60a5fa; }
.sm-project-status.failed { background: rgba(248,113,113,.15); color: #f87171; }
.sm-project-status.draft { background: rgba(255,255,255,.08); color: var(--text-dim); }
/* 已发布抖音标记：左侧列表绿色左边框 + 绿色徽章，快速识别 */
.sm-project-item.sm-published { border-left: 3px solid #4ade80; }
.sm-published-badge { font-size: 11px; padding: 2px 8px; border-radius: 4px; background: rgba(74,222,128,.15); color: #4ade80; white-space: nowrap; }

/* 全局排队状态条 */
.sm-queue-badge { margin: 4px 14px 10px; padding: 7px 12px; font-size: 12px; color: var(--gold-light);
    background: rgba(212,175,55,.08); border: 1px solid var(--border-gold); border-radius: 8px;
    display: flex; align-items: center; gap: 6px; line-height: 1.5; }
.sm-queue-badge i { color: var(--gold); }
.sm-queue-badge b { color: var(--cyan); font-weight: 700; }
.sm-queue-badge-inline { margin: 0 0 10px; justify-content: center; }

#smartmixStatusBar { margin-top: 16px; }

.sm-empty { text-align: center; padding: 40px 20px; color: var(--text-dim); }
.sm-empty i { font-size: 36px; margin-bottom: 12px; display: block; opacity: .4; }
.sm-empty-compact { padding: 18px 12px; font-size: 13px; }

/* ===== 录音 ===== */
.sm-record-btn { width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--border-gold); background: var(--bg-card); color: var(--gold); font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s; }
.sm-record-btn.recording { border-color: #f87171; color: #f87171; animation: sm-pulse 1.2s ease-in-out infinite; }
@keyframes sm-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(248,113,113,.4); } 50% { box-shadow: 0 0 0 12px rgba(248,113,113,0); } }

/* ===== 响应式 ===== */
@media (min-width: 1024px) {
    .sm-result-layout { display: flex; }
}
@media (max-width: 1023px) {
    .sm-result-layout { flex-direction: column; }
    .sm-result-side { width: 100%; }
}
@media (max-width: 767px) {
    .sm-page-layout { padding: 12px; }
    .sm-section { padding: 14px; }
    .sm-card-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
    .sm-card-actions { opacity: 1; }
    .sm-result-layout { gap: 12px; }
    .sm-seg-item { align-items: flex-start; flex-wrap: wrap; }
    .sm-seg-body { flex-basis: calc(100% - 42px); }
    .sm-seg-state { margin-left: 34px; }
    .sm-action-bar, #smActionBar { flex-wrap: wrap; }
    .sm-publish-modal { width: 100%; max-height: 90vh; }
    .sm-publish-body { padding: 12px; }
    .sm-pp-cover-shots { grid-template-columns: 1fr; }
    .sm-pp-cover-shot-portrait { max-width: 190px; justify-self: center; }
    .sm-pp-pred { grid-template-columns: 1fr; }
    .sm-pp-actions { justify-content: stretch; }
    .sm-pp-actions .sm-btn { flex: 1 1 140px; }
}

/* ===== 自动待办队列 ===== */
.sm-auto-list { display: flex; flex-direction: column; gap: 8px; }
.sm-auto-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px; background: rgba(10,8,25,0.5); border: 1px solid var(--border-gold); border-radius: 10px; transition: border-color .2s; }
.sm-auto-item:hover { border-color: var(--gold); }
.sm-auto-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sm-auto-item-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sm-auto-bid { font-size: 12px; color: var(--text-dim); }
.sm-auto-bid b { color: var(--gold-light); font-weight: 700; }
.sm-auto-url { font-size: 12px; color: var(--text-secondary); word-break: break-all; line-height: 1.4; }
.sm-auto-url i { color: var(--gold); margin-right: 4px; }
.sm-auto-progress { font-size: 12px; color: #60a5fa; display: flex; align-items: center; gap: 6px; }
.sm-auto-result { display: flex; gap: 8px; flex-wrap: wrap; }
.sm-auto-err { font-size: 12px; color: #f87171; line-height: 1.4; word-break: break-all; }
.sm-auto-item-actions { flex-shrink: 0; }
@media (max-width: 767px) {
    .sm-auto-item { flex-direction: column; }
    .sm-auto-item-actions { align-self: flex-end; }
}

/* ===== 新建混剪：提交区两段式（开始提取 / 添加到自动化排队队列） ===== */
.sm-submit-area .sm-cta-group { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 6px; }
/* 自动队列出价行：点「添加到自动化排队队列」后展开，淡金色块提示是个附加操作 */
.sm-autoqueue-bid-row { display: flex; gap: 12px; align-items: flex-end; justify-content: center; flex-wrap: wrap; margin: 14px auto 0; padding: 14px 16px; max-width: 560px; background: rgba(212,175,55,.08); border: 1px dashed var(--border-gold); border-radius: 10px; }
.sm-autoqueue-bid-info { display: flex; flex-direction: column; gap: 6px; text-align: left; min-width: 200px; flex: 1; }
.sm-autoqueue-bid-info .sm-label { margin: 0; }
.sm-autoqueue-bid-btns { display: flex; gap: 8px; flex-shrink: 0; }
/* 配额提示：默认 dim；满额时变橙红强调 */
.sm-quota-hint { font-size: 12px; color: var(--text-dim); margin: 6px 0 0; min-height: 16px; }
.sm-quota-hint.full { color: #fbbf24; font-weight: 600; }
/* 「开始提取」按钮满额态：灰显 + 不可点（与平台 .sm-btn:disabled 视觉一致，叠加在 sm-btn-primary 之上） */
#smStartExtractBtn.sm-quota-blocked { opacity: .5; cursor: not-allowed; pointer-events: none; box-shadow: none; filter: none; }
@media (max-width: 480px) {
    .sm-autoqueue-bid-row { flex-direction: column; align-items: stretch; }
    .sm-autoqueue-bid-btns { justify-content: flex-end; }
}

/* ===== 侧栏排队排名徽章 ===== */
.sm-queue-rank { flex-shrink: 0; }
.sm-r-badge, .sm-rank-badge { font-size: 10px; padding: 2px 7px; border-radius: 10px; white-space: nowrap; }
.sm-rank-queued { background: rgba(212,175,55,.16); color: var(--gold-light); }
.sm-rank-first { background: rgba(74,240,224,.15); color: var(--cyan); font-weight: 600; }

/* ===== 加急面板（结果页 pending 状态） ===== */
.sm-expedite-panel { margin-bottom: 16px; background: linear-gradient(135deg, rgba(212,175,55,.08), rgba(74,240,224,.05)); border: 1px solid var(--gold); border-radius: 12px; padding: 16px; }
.sm-expedite-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.sm-expedite-head i { color: var(--gold); font-size: 18px; }
.sm-expedite-head > span:first-of-type { font-size: 15px; font-weight: 600; color: var(--gold-light); }
.sm-expedite-rank { margin-left: auto; font-size: 12px; color: var(--cyan); background: rgba(74,240,224,.1); padding: 3px 10px; border-radius: 10px; }
.sm-expedite-body { display: flex; flex-direction: column; gap: 10px; }
.sm-expedite-to-first { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.sm-expedite-to-first b { color: var(--gold-light); font-weight: 700; }
.sm-expedite-to-first i { color: var(--gold); }
.sm-expedite-input-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sm-expedite-input { width: 110px; height: 38px; flex-shrink: 0; }
.sm-expedite-balance { font-size: 11px; color: var(--text-dim); }
.sm-expedite-balance b { color: var(--gold-light); }

/* ===== BGM 背景音乐音量滑块 ===== */
.sm-bgm-volume-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px 14px; background: rgba(10,8,25,0.5); border: 1px solid var(--border-gold); border-radius: 8px; }
.sm-volume-slider { flex: 1; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 3px; background: linear-gradient(var(--gold-dim), rgba(55,175,212,.3)); outline: none; cursor: pointer; }
.sm-volume-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(var(--gold), var(--cyan)); border: 2px solid var(--bg-card); box-shadow: 0 0 6px var(--gold-dim); cursor: pointer; }
.sm-volume-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(var(--gold), var(--cyan)); border: 2px solid var(--bg-card); box-shadow: 0 0 6px var(--gold-dim); cursor: pointer; }
.sm-volume-slider:focus { box-shadow: 0 0 0 2px var(--gold-dim); }

/* ===== 提取阶段富信息视图（阶段1：下载→ASR→脚本，文案就绪前展示在结果页主区） ===== */
/* 复用 .sm-page-layout / .sm-result-layout，大图标金色发光对齐 .sm-hero-icon 风格 */
.sm-extracting-hero { text-align: center; padding: 32px 20px 24px; margin-bottom: 20px; background: var(--bg-card); border: 1px solid var(--border-gold); border-radius: 12px; }
.sm-extracting-icon-wrap { width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 50%; background: radial-gradient(circle, rgba(212,175,55,.18), rgba(212,175,55,.04)); display: flex; align-items: center; justify-content: center; }
.sm-extracting-icon-wrap i { font-size: 32px; color: var(--gold); filter: drop-shadow(0 0 12px var(--gold-dim)); animation: sm-extract-pulse 1.8s ease-in-out infinite; }
@keyframes sm-extract-pulse { 0%,100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
.sm-extracting-title { margin: 0 0 8px; color: var(--gold-light); font-size: 18px; font-family: var(--font-title); }
.sm-extracting-desc { margin: 0 0 20px; color: var(--text-secondary); font-size: 13px; line-height: 1.6; }
.sm-extracting-steps { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.sm-extracting-step { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(10,8,25,0.5); border: 1px solid var(--border-gold); border-radius: 10px; }
.sm-extracting-step i { color: var(--cyan); font-size: 18px; flex-shrink: 0; }
.sm-extracting-step b { display: block; color: var(--text-primary); font-size: 13px; font-weight: 600; }
.sm-extracting-step span { display: block; color: var(--text-dim); font-size: 11px; margin-top: 2px; }
.sm-extracting-tip { display: flex; align-items: flex-start; gap: 8px; max-width: 560px; margin: 0 auto 16px; padding: 10px 14px; background: rgba(74,240,224,.07); border: 1px solid rgba(74,240,224,.22); border-left: 3px solid var(--cyan); border-radius: 8px; color: var(--cyan); font-size: 12px; line-height: 1.6; text-align: left; }
.sm-extracting-tip i { margin-top: 3px; flex-shrink: 0; }
.sm-extracting-tip b { color: var(--cyan); }
.sm-extracting-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
/* 移动端：阶段卡纵向堆叠，整体更紧凑 */
@media (max-width: 767px) {
    .sm-extracting-hero { padding: 24px 14px 18px; }
    .sm-extracting-icon-wrap { width: 60px; height: 60px; }
    .sm-extracting-icon-wrap i { font-size: 26px; }
    .sm-extracting-title { font-size: 16px; }
    .sm-extracting-steps { flex-direction: column; align-items: stretch; gap: 8px; }
    .sm-extracting-step { justify-content: flex-start; }
}

/* ===== 教学与QA帮助中心 ===== */
/* 沿用 .sm-page-layout / .sm-section / .sm-btn / .sm-tag 体系，不引入新主题色 */

/* 顶部教学引导横幅（帮助页第一屏） */
.sm-help-banner { display: flex; align-items: center; gap: 14px; padding: 16px 20px; margin-bottom: 18px; background: linear-gradient(135deg, rgba(212,175,55,.08), rgba(74,240,224,.04)); border: 1px solid var(--gold); border-radius: 12px; flex-wrap: wrap; }
.sm-help-banner-icon { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--cyan)); color: #0a0a1a; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.sm-help-banner-text { flex: 1; min-width: 200px; }
.sm-help-banner-text h3 { margin: 0 0 4px; color: var(--gold-light); font-size: 15px; font-family: var(--font-title); }
.sm-help-banner-text p { margin: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
.sm-help-banner-btn { flex-shrink: 0; }

/* 搜索区 */
.sm-help-search-wrap { position: relative; margin-bottom: 12px; }
.sm-help-search { width: 100%; height: 48px; padding: 0 44px 0 44px; background: rgba(10,8,25,0.6); border: 1px solid var(--border-gold); border-radius: 10px; color: var(--text-primary); font-size: 15px; font-family: var(--font-body); box-sizing: border-box; }
.sm-help-search:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-dim); }
.sm-help-search::placeholder { color: var(--text-dim); }
.sm-help-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--gold); font-size: 16px; pointer-events: none; }
.sm-help-search-clear { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: none; border-radius: 50%; background: rgba(255,255,255,.08); color: var(--text-dim); cursor: pointer; display: none; align-items: center; justify-content: center; }
.sm-help-search-clear:hover { background: rgba(248,113,113,.2); color: #f87171; }
.sm-help-search-clear.show { display: flex; }

/* 快捷标签 */
.sm-help-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.sm-help-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border: 1px solid var(--border-gold); border-radius: 16px; background: rgba(74,240,224,.06); color: var(--cyan); font-size: 12px; cursor: pointer; transition: all .15s; }
.sm-help-chip:hover { background: rgba(74,240,224,.15); border-color: var(--cyan); }
.sm-help-chip i { font-size: 10px; }

/* 双栏布局：左目录 + 右问答 */
.sm-help-layout { display: flex; gap: 20px; align-items: flex-start; }

/* 左侧分类目录（sticky） */
.sm-help-nav { width: 240px; flex-shrink: 0; position: sticky; top: 12px; background: var(--bg-card); border: 1px solid var(--border-gold); border-radius: 12px; padding: 10px; }
.sm-help-nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; cursor: pointer; color: var(--text-secondary); font-size: 13px; transition: all .15s; border-left: 3px solid transparent; }
.sm-help-nav-item:hover { background: rgba(212,175,55,.08); color: var(--gold-light); }
.sm-help-nav-item.active { background: rgba(212,175,55,.12); color: var(--gold-light); border-left-color: var(--gold); }
.sm-help-nav-item i { color: var(--gold); width: 18px; text-align: center; font-size: 14px; }
.sm-help-nav-item.active i { color: var(--gold-light); }
.sm-help-nav-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-help-nav-count { font-size: 11px; color: var(--text-dim); background: rgba(255,255,255,.06); padding: 1px 7px; border-radius: 10px; flex-shrink: 0; }

/* 右侧问答列表 */
.sm-help-list { flex: 1; min-width: 0; }
.sm-help-cat { margin-bottom: 24px; }
.sm-help-cat-title { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--gold-light); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(212,175,55,.15); }
.sm-help-cat-title i { color: var(--gold); }
.sm-help-cat-body { display: flex; flex-direction: column; gap: 8px; }

/* 单条问答（折叠卡片） */
.sm-help-qa { background: rgba(10,8,25,0.5); border: 1px solid var(--border-gold); border-radius: 8px; overflow: hidden; transition: border-color .15s; }
.sm-help-qa:hover { border-color: rgba(212,175,55,.4); }
.sm-help-qa[open] { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(212,175,55,.15); }
.sm-help-q { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; user-select: none; font-size: 13.5px; color: var(--text-primary); line-height: 1.5; }
.sm-help-q::-webkit-details-marker { display: none; }
.sm-help-q-text { flex: 1; min-width: 0; }
.sm-help-q-arrow { color: var(--text-dim); font-size: 11px; transition: transform .2s; flex-shrink: 0; }
.sm-help-qa[open] .sm-help-q-arrow { transform: rotate(180deg); color: var(--gold); }
.sm-help-a { padding: 0 14px 12px 14px; color: var(--text-secondary); font-size: 13px; line-height: 1.75; }
.sm-help-a b, .sm-help-a strong { color: var(--gold-light); font-weight: 600; }
.sm-help-a ul, .sm-help-a ol { margin: 6px 0 6px 4px; padding-left: 20px; }
.sm-help-a li { margin-bottom: 4px; }
.sm-help-a p { margin: 6px 0; }

/* 搜索命中高亮 */
mark.sm-help-hit { background: rgba(74,240,224,.25); color: var(--cyan); padding: 0 2px; border-radius: 3px; }

/* 提示框（tip） */
.sm-help-tip { margin: 8px 14px 12px; padding: 10px 12px; background: rgba(74,240,224,.07); border: 1px solid rgba(74,240,224,.25); border-left: 3px solid var(--cyan); border-radius: 6px; color: var(--cyan); font-size: 12px; line-height: 1.6; display: flex; gap: 8px; align-items: flex-start; }
.sm-help-tip i { margin-top: 3px; flex-shrink: 0; }
.sm-help-tip b, .sm-help-tip strong { color: var(--cyan); }

/* 空态 */
.sm-help-empty { text-align: center; padding: 50px 20px; color: var(--text-dim); }
.sm-help-empty i { font-size: 36px; margin-bottom: 12px; display: block; opacity: .4; }
.sm-help-empty p { margin: 4px 0; font-size: 14px; }
.sm-help-empty-hint { font-size: 12px !important; color: var(--text-dim); }

/* 底部"仍然没解决"提示区 */
.sm-help-footer { margin-top: 28px; padding: 16px 20px; background: rgba(10,8,25,.4); border: 1px dashed var(--border-gold); border-radius: 10px; text-align: center; }
.sm-help-footer p { margin: 0 0 10px; color: var(--text-secondary); font-size: 13px; }
.sm-help-footer .sm-help-footer-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ===== 全局悬浮帮助按钮（仅 smartmix 应用内显示，main.js switchApp 控制显隐） ===== */
.sm-help-fab { position: fixed; right: 20px; bottom: 84px; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--cyan)); border: none; color: #0a0a1a; font-size: 20px; cursor: pointer; box-shadow: 0 6px 20px rgba(212,175,55,.35); z-index: 2100; display: none; align-items: center; justify-content: center; transition: transform .2s, box-shadow .2s; }
.sm-help-fab:hover { transform: scale(1.08); box-shadow: 0 8px 26px rgba(212,175,55,.5); }
.sm-help-fab.show { display: flex; }

/* ===== 响应式 ===== */
@media (max-width: 1023px) {
    /* 平板：目录变顶部横向滚动标签条 */
    .sm-help-layout { flex-direction: column; }
    .sm-help-nav { width: 100%; position: static; display: flex; gap: 6px; overflow-x: auto; padding: 8px; }
    .sm-help-nav-item { flex: 0 0 auto; padding: 8px 12px; border-left: none; border-bottom: 2px solid transparent; border-radius: 6px; }
    .sm-help-nav-item.active { border-left: none; border-bottom-color: var(--gold); }
    .sm-help-nav-count { display: none; }
}
@media (max-width: 767px) {
    .sm-help-banner { padding: 12px; gap: 10px; }
    .sm-help-banner-icon { width: 38px; height: 38px; font-size: 17px; }
    .sm-help-banner-text h3 { font-size: 14px; }
    .sm-help-banner-text p { font-size: 11px; }
    .sm-help-search { height: 44px; font-size: 14px; }
    .sm-help-chip { padding: 5px 10px; font-size: 11px; }
    .sm-help-q { padding: 11px 12px; font-size: 13px; }
    .sm-help-a { padding: 0 12px 11px; font-size: 12.5px; }
    .sm-help-tip { margin: 8px 12px 11px; }
    /* 悬浮按钮缩小，避免遮挡内容；帮助FAB上移到AgentFAB上方（46+12=58px） */
    .sm-help-fab { width: 46px; height: 46px; font-size: 18px; right: 14px; bottom: 72px; }
}


/* ===== AI Agent 助理（右下角对话浮窗） ===== */
/* 复用 --gold/--cyan/--bg-card/--border-gold token，暗色+金色体系，与帮助FAB区分（本FAB用青色） */
#smagRoot { position: fixed; right: 20px; bottom: 20px; z-index: 2150; display: none; font-family: var(--font-body); }
/* 触发按钮：青色渐变（区别于帮助FAB的金色），带标签 */
.smag-fab { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 20px 0 18px; border-radius: 26px; border: none; background: linear-gradient(135deg, var(--cyan), #2bb8a8); color: #062b28; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 6px 20px rgba(74,240,224,.35); transition: transform .2s, box-shadow .2s; position: relative; }
.smag-fab:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(74,240,224,.5); }
.smag-fab i { font-size: 18px; }
.smag-fab-badge { position: absolute; top: -4px; right: -4px; width: 18px; height: 18px; border-radius: 50%; background: #f87171; color: #fff; font-size: 10px; display: flex; align-items: center; justify-content: center; font-weight: 700; }
/* 对话面板：水平 flex（侧栏 + 主区并排） */
.smag-panel { position: absolute; right: 0; bottom: 0; width: 620px; max-width: calc(100vw - 24px); height: 600px; max-height: calc(100vh - 40px); background: #14111f; border: 1px solid var(--border-gold); border-radius: 14px; box-shadow: 0 18px 60px rgba(0,0,0,.55); display: flex; flex-direction: row; overflow: hidden; animation: smag-pop .2s ease-out; transition: width .3s ease; }
/* 拖拽调整宽度时禁用 transition（否则跟手卡顿），由 body.smag-resizing 覆盖 */
body.smag-resizing .smag-panel { transition: none !important; }
@keyframes smag-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
/* 左边缘宽度拖拽手柄：默认细条 hover 高亮，拖拽中加宽边带（面板 overflow:hidden，手柄需在内部） */
.smag-resizer { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; cursor: ew-resize; z-index: 20; }
.smag-resizer::after { content: ''; position: absolute; left: 2px; top: 50%; transform: translateY(-50%); width: 2px; height: 32px; background: rgba(212,175,55,.35); border-radius: 2px; transition: background .15s, height .15s; }
.smag-resizer:hover::after, .smag-panel.smag-resizing-active .smag-resizer::after { background: var(--gold); height: 56px; }
/* 拖拽中：禁用全页文本选中 + 防止 iframe/输入框抢鼠标事件（document 级监听仍能收事件） */
body.smag-resizing { user-select: none !important; cursor: ew-resize !important; }
body.smag-resizing * { pointer-events: none !important; }
/* 历史会话侧栏 */
.smag-sidebar { width: 200px; flex-shrink: 0; flex-direction: column; border-right: 1px solid rgba(212,175,55,.15); background: rgba(10,8,25,.4); }
.smag-sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid rgba(212,175,55,.1); font-size: 13px; color: var(--gold-light); font-weight: 600; }
.smag-sidebar-list { flex: 1; overflow-y: auto; padding: 6px; }
.smag-sidebar-list::-webkit-scrollbar { width: 4px; }
.smag-sidebar-list::-webkit-scrollbar-thumb { background: rgba(212,175,55,.2); border-radius: 2px; }
.smag-sidebar-loading, .smag-sidebar-empty { padding: 20px 12px; text-align: center; color: var(--text-dim); font-size: 12px; }
.smag-session-item { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: background .15s; margin-bottom: 4px; }
.smag-session-item:hover { background: rgba(212,175,55,.08); }
.smag-session-item.active { background: rgba(212,175,55,.14); }
.smag-session-info { flex: 1; min-width: 0; }
.smag-session-title { font-size: 12px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smag-session-meta { display: flex; gap: 8px; font-size: 10px; color: var(--text-dim); margin-top: 2px; }
.smag-session-actions { display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.smag-session-item:hover .smag-session-actions { opacity: 1; }
.smag-session-btn { width: 22px; height: 22px; border: none; border-radius: 4px; background: transparent; color: var(--text-dim); cursor: pointer; font-size: 10px; display: flex; align-items: center; justify-content: center; }
.smag-session-btn:hover { background: rgba(248,113,113,.2); color: #f87171; }
/* 加载更多按钮（会话列表底部，对齐项目列表交互） */
.smag-load-more { padding: 10px 10px; margin: 4px 0; text-align: center; color: var(--gold-light); font-size: 12px; cursor: pointer; border: 1px dashed rgba(212,175,55,.3); border-radius: 8px; transition: background .15s, border-color .15s; }
.smag-load-more:hover { background: var(--gold-dim); border-color: var(--gold); }
/* 主对话区 */
.smag-main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; /* 让 .smag-scroll-btn 的 absolute 相对于本容器定位 */ }
.smag-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid rgba(212,175,55,.2); background: rgba(10,8,25,.5); }
.smag-head-left { display: flex; align-items: center; gap: 6px; min-width: 0; }
.smag-head-title { display: flex; align-items: center; gap: 6px; color: var(--gold-light); font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smag-head-title i { color: var(--cyan); flex-shrink: 0; }
.smag-head-actions { display: flex; gap: 4px; flex-shrink: 0; }
.smag-icon-btn { width: 30px; height: 30px; border: none; border-radius: 6px; background: transparent; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; transition: all .15s; }
.smag-icon-btn:hover { background: rgba(212,175,55,.12); color: var(--gold-light); }
.smag-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 14px; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.smag-body::-webkit-scrollbar { width: 6px; }
.smag-body::-webkit-scrollbar-thumb { background: rgba(212,175,55,.25); border-radius: 3px; }
/* 消息行 */
.smag-msg { display: flex; gap: 8px; width: 100%; min-width: 0; }
.smag-msg-user { justify-content: flex-end; }
.smag-msg-ai { justify-content: flex-start; }
.smag-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--cyan), #2bb8a8); color: #062b28; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.smag-bubble-wrap { min-width: 0; max-width: calc(100% - 36px); position: relative; }
/* bubble */
.smag-bubble { padding: 10px 13px; border-radius: 12px; font-size: 13.5px; line-height: 1.6; overflow-wrap: anywhere; word-break: break-word; min-width: 0; box-sizing: border-box; }
.smag-msg-user .smag-bubble { background: linear-gradient(135deg, var(--gold), #b8962e); color: #1a1208; border-bottom-right-radius: 4px; max-width: 85%; }
.smag-msg-ai .smag-bubble { background: rgba(255,255,255,.06); color: var(--text-primary); border: 1px solid var(--border-gold); border-bottom-left-radius: 4px; }
/* 复制按钮（hover 显示） */
.smag-msg-copy { position: absolute; bottom: -4px; right: -4px; width: 22px; height: 22px; border: none; border-radius: 50%; background: rgba(0,0,0,.6); color: var(--text-dim); cursor: pointer; font-size: 10px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s; }
.smag-msg:hover .smag-msg-copy { opacity: 1; }
.smag-msg-copy:hover { background: var(--cyan); color: #062b28; }
.smag-msg-user .smag-msg-copy { left: -4px; right: auto; bottom: 0; }
.smag-bubble strong { color: var(--gold-light); font-weight: 600; }
.smag-msg-user .smag-bubble strong { color: #1a1208; }
/* bubble 内的 ul/li/pre 不撑破宽度 */
.smag-bubble ul { margin: 4px 0; padding-left: 18px; max-width: 100%; }
.smag-bubble ol { margin: 4px 0; padding-left: 20px; max-width: 100%; }
.smag-bubble li { overflow-wrap: anywhere; margin-bottom: 2px; }
.smag-bubble p { margin: 4px 0; }
/* 表格（Agent 回复中的 Markdown 表格） */
.smag-bubble table { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: 12px; display: block; overflow-x: auto; }
.smag-bubble th { background: rgba(212,175,55,.15); color: var(--gold-light); padding: 5px 8px; text-align: left; border: 1px solid var(--border-gold); white-space: nowrap; }
.smag-bubble td { padding: 4px 8px; border: 1px solid rgba(212,175,55,.15); color: var(--text-secondary); overflow-wrap: anywhere; }
.smag-bubble tr:nth-child(even) td { background: rgba(255,255,255,.02); }
/* 标题 */
.smag-bubble h2 { font-size: 15px; color: var(--gold-light); margin: 8px 0 4px; }
.smag-bubble h3 { font-size: 14px; color: var(--gold-light); margin: 6px 0 3px; }
.smag-bubble h4 { font-size: 13px; color: var(--gold-light); margin: 6px 0 3px; }
.smag-bubble h4.section-tag { color: var(--cyan); border-left: 3px solid var(--cyan); padding-left: 8px; }
/* 引用 / 分割线 */
.smag-bubble blockquote { border-left: 3px solid var(--border-gold); padding-left: 10px; margin: 4px 0; color: var(--text-dim); }
.smag-bubble blockquote p { margin: 2px 0; }
.smag-bubble hr { border: none; border-top: 1px solid rgba(212,175,55,.15); margin: 6px 0; }
.smag-bubble.smag-streaming::after { content: '▋'; animation: smag-blink 1s steps(2) infinite; color: var(--cyan); }
@keyframes smag-blink { 50% { opacity: 0; } }
.smag-inline-code { background: rgba(0,0,0,.4); padding: 1px 5px; border-radius: 3px; font-size: 12px; color: var(--cyan); overflow-wrap: anywhere; }
/* 代码块：pre-wrap 自动换行 + 横向滚动兜底，绝不溢出 */
.smag-code { background: rgba(0,0,0,.4); padding: 10px; border-radius: 6px; overflow-x: auto; font-size: 12px; color: var(--text-secondary); margin: 6px 0; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; box-sizing: border-box; }
/* 系统消息 */
.smag-msg-system { justify-content: center; }
.smag-system-text { font-size: 12px; color: var(--text-dim); background: rgba(255,255,255,.04); padding: 6px 12px; border-radius: 10px; text-align: center; max-width: 90%; overflow-wrap: anywhere; box-sizing: border-box; }
/* 工具执行卡片：左对齐（与输入框左边缘对齐，不与头像对齐） */
.smag-msg-tool { justify-content: flex-start; }
/* wrapper: 垂直排列（卡片行 + 详情区），左对齐，限宽防溢出 */
.smag-tool-wrap { display: flex; flex-direction: column; gap: 4px; max-width: 90%; min-width: 0; }
/* card: 水平排列（icon + 名称 + 参数），单行不换行，溢出省略 */
.smag-tool-card { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(212,175,55,.08); border: 1px solid rgba(212,175,55,.2); border-radius: 8px; font-size: 12px; color: var(--gold-light); box-sizing: border-box; }
.smag-tool-card i { font-size: 11px; color: var(--gold); flex-shrink: 0; }
.smag-tool-card .smag-tool-name { overflow-wrap: anywhere; min-width: 0; }
.smag-tool-card .smag-tool-args { color: var(--text-dim); font-size: 11px; margin-left: 4px; overflow-wrap: anywhere; min-width: 0; }
.smag-tool-ok .smag-tool-card { border-color: rgba(74,240,224,.3); background: rgba(74,240,224,.08); }
.smag-tool-fail .smag-tool-card { border-color: rgba(248,113,113,.3); background: rgba(248,113,113,.08); }
/* 工具结果详情区（在 card 下方，独立块，不破坏 card 的 flex 布局） */
.smag-tool-detail-area { width: 100%; }
.smag-tool-detail-toggle { color: var(--cyan); cursor: pointer; font-size: 11px; display: inline-block; padding: 2px 0; }
.smag-tool-detail { background: rgba(0,0,0,.4); border-radius: 4px; padding: 6px 8px; margin-top: 2px; font-size: 10.5px; color: var(--text-secondary); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 150px; overflow-y: auto; width: 100%; box-sizing: border-box; }
/* 回到底部浮动按钮（absolute 悬浮在 body 内容上方，不占布局流） */
.smag-scroll-btn { position: absolute; right: 16px; bottom: 120px; width: 32px; height: 32px; border-radius: 50%; background: rgba(20,17,31,.95); border: 1px solid var(--border-gold); color: var(--gold-light); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.4); z-index: 5; }
.smag-scroll-btn:hover { background: var(--gold-dim); }
.smag-scroll-btn span { position: absolute; top: -6px; right: -6px; background: var(--cyan); color: #062b28; font-size: 9px; min-width: 14px; height: 14px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-weight: 700; }
/* 中断按钮 */
.smag-stop-btn { width: 40px; height: 40px; border: none; border-radius: 10px; background: rgba(248,113,113,.2); border: 1px solid rgba(248,113,113,.4); color: #f87171; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.smag-stop-btn:hover { background: rgba(248,113,113,.3); }
/* Agent 导航高亮脉冲（滚动到目标元素后的金色边框闪烁，3秒） */
@keyframes smag-highlight-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(212,175,55,.5), 0 0 12px rgba(212,175,55,.3); outline: 2px solid rgba(212,175,55,.6); }
    50% { box-shadow: 0 0 0 6px rgba(212,175,55,0), 0 0 24px rgba(232,208,72,.6); outline: 2px solid rgba(232,208,72,.9); }
}
.smag-highlight-pulse { animation: smag-highlight-pulse 1s ease-in-out 3; outline-offset: 2px; border-radius: 8px; position: relative; z-index: 10; }

/* 深度思考过程卡片（挂在 AI 气泡上方，可折叠） */
/* 结构：.smag-msg-thinking > .smag-thinking-card > [.smag-thinking-header (icon+title+count)] + .smag-thinking-text */
/* 状态：.smag-thinking-active=流式中（文字展开、闪烁点） .smag-thinking-done=折叠态（文字隐藏） .smag-thinking-expanded=手动展开 */
.smag-msg-thinking { justify-content: flex-start; }  /* 左对齐，与 AI 气泡对齐 */
/* 用左侧 padding 对齐 AI 气泡（气泡左侧有 avatar 40px + gap 8px ≈ 48px），让思考卡视觉挂在气泡正上方 */
.smag-msg-ai + .smag-msg-thinking, .smag-msg-thinking + .smag-msg-ai { margin-top: -2px; }
.smag-thinking-card { display: flex; flex-direction: column; gap: 6px; max-width: 90%; padding: 7px 12px;
    background: rgba(74,240,224,.04); border: 1px solid rgba(74,240,224,.18); border-left: 2px solid var(--cyan);
    border-radius: 8px; box-sizing: border-box; }
.smag-thinking-header { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--cyan); font-weight: 600; flex-wrap: wrap; }
.smag-thinking-header .smag-thinking-icon { font-size: 11px; color: var(--cyan); flex-shrink: 0; }
.smag-thinking-header .smag-thinking-title { display: flex; align-items: center; gap: 6px; }
/* 流式中：标题前显示闪烁圆点（思考进行中） */
.smag-thinking-active .smag-thinking-title::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); animation: smag-blink 1s ease-in-out infinite; }
.smag-thinking-count { font-size: 11px; color: var(--text-dim); font-weight: 400; margin-left: auto; }
/* 折叠态（done 且未展开）：header 可点击，加 hover 反馈 + 展开图标 */
.smag-thinking-done .smag-thinking-header { cursor: pointer; user-select: none; transition: color .15s; }
.smag-thinking-done .smag-thinking-header::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 9px; color: var(--text-dim); margin-left: 4px; transition: transform .2s; }
.smag-thinking-done .smag-thinking-header:hover { color: var(--cyan); filter: brightness(1.2); }
.smag-thinking-expanded .smag-thinking-header::after { transform: rotate(180deg); }
/* 文字区：用 max-height+opacity 实现折叠/展开过渡（不用 display:none，否则 transition 失效） */
.smag-thinking-text { font-size: 11.5px; color: var(--text-secondary); line-height: 1.55; overflow-y: auto; overflow-wrap: anywhere; white-space: pre-wrap;
    max-height: 160px; opacity: .9; transition: max-height .2s ease, opacity .2s ease; }
.smag-thinking-active .smag-thinking-text { max-height: 160px; opacity: .9; }
/* 折叠态：text 收为 0，同时把卡片 gap 也置 0（否则 flex gap 会在 0 高度的 text 处留 6px 空洞） */
.smag-thinking-done { }
.smag-thinking-done .smag-thinking-text { max-height: 0; opacity: 0; overflow: hidden; padding: 0; }
.smag-thinking-done .smag-thinking-card { gap: 0; }
.smag-thinking-done.smag-thinking-expanded .smag-thinking-card { gap: 6px; }  /* 展开时恢复间距 */
.smag-thinking-done.smag-thinking-expanded .smag-thinking-text { max-height: 240px; opacity: 1; overflow-y: auto; }
/* 快捷按钮 */
.smag-quick { display: flex; gap: 6px; padding: 8px 14px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.05); }
.smag-quick span { font-size: 11px; padding: 4px 10px; background: rgba(255,255,255,.05); border: 1px solid var(--border-gold); border-radius: 12px; color: var(--text-secondary); cursor: pointer; transition: all .15s; }
.smag-quick span:hover { background: rgba(74,240,224,.1); border-color: var(--cyan); color: var(--cyan); }
/* 输入区 */
.smag-input-row { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid rgba(212,175,55,.15); align-items: flex-end; }
/* 深度思考开关：贴在输入区左下，iOS 风格 toggle + 脑图标 + 文字 */
.smag-thinking-toggle { display: flex; align-items: center; gap: 5px; cursor: pointer; user-select: none;
    flex-shrink: 0; align-self: flex-end; padding: 0 2px 9px 2px; font-size: 11px; color: var(--text-dim);
    transition: color .15s; }
.smag-thinking-toggle input { display: none; }  /* 隐藏原生 checkbox，用 track+thumb 自绘 */
.smag-thinking-toggle-track { width: 28px; height: 16px; border-radius: 8px; background: rgba(255,255,255,.12);
    position: relative; transition: background .2s; flex-shrink: 0; }
.smag-thinking-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px;
    border-radius: 50%; background: var(--text-secondary); transition: transform .2s, background .2s; }
/* 开启态：青色（与思考卡语义色一致） */
.smag-thinking-toggle-on { color: var(--cyan); }
.smag-thinking-toggle-on .smag-thinking-toggle-track { background: rgba(74,240,224,.4); }
.smag-thinking-toggle-on .smag-thinking-toggle-thumb { transform: translateX(12px); background: var(--cyan); }
.smag-thinking-toggle-on .fa-brain { color: var(--cyan); }
.smag-thinking-toggle:hover { color: var(--text-secondary); }
.smag-thinking-toggle-on:hover { color: var(--cyan); }  /* ON 态 hover 保持 cyan，不被上面的 text-secondary 覆盖 */
.smag-thinking-toggle .fa-brain { font-size: 10px; transition: color .15s; }
/* 移动端：隐藏文字标签，只留 toggle + icon，省空间 */
@media (max-width: 480px) {
    .smag-thinking-toggle-label { display: none; }
}
.smag-input { flex: 1; resize: none; border: 1px solid var(--border-gold); border-radius: 10px; background: rgba(10,8,25,.6); color: var(--text-primary); padding: 9px 12px; font-size: 13.5px; font-family: var(--font-body); line-height: 1.4; max-height: 120px; outline: none; box-sizing: border-box; }
.smag-input:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(74,240,224,.2); }
.smag-input::placeholder { color: var(--text-dim); }
.smag-send-btn { width: 40px; height: 40px; border: none; border-radius: 10px; background: linear-gradient(135deg, var(--cyan), #2bb8a8); color: #062b28; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .15s; }
.smag-send-btn:hover:not(:disabled) { transform: scale(1.05); }
.smag-send-btn:disabled { opacity: .5; cursor: not-allowed; }
/* 响应式：移动端面板占满底部 */
@media (max-width: 480px) {
    #smagRoot { right: 10px; bottom: 10px; }
    .smag-fab { height: 46px; padding: 0 16px 0 14px; font-size: 13px; }
    .smag-fab i { font-size: 16px; }
    .smag-panel { width: calc(100vw - 20px); height: calc(100vh - 80px); right: 0; bottom: 0; border-radius: 12px; }
    /* 移动端侧栏覆盖式（不挤压主区） */
    .smag-sidebar { position: absolute; left: 0; top: 0; bottom: 0; width: 75%; z-index: 10; background: #14111f; }
}
/* 平板/小桌面：面板收窄但侧栏仍可展开 */
@media (max-width: 700px) and (min-width: 481px) {
    .smag-panel { width: calc(100vw - 40px); }
}

/* ===== Agent 记忆与偏好编辑弹层 ===== */
/* 沿用 .sm-publish-modal 的暗色+金色风格（z-index 2200 高于 Agent 面板的 2150） */
.smag-memory-overlay { position: fixed; inset: 0; z-index: 2200; background: rgba(0,0,0,.72); display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }
.smag-memory-modal { width: min(96vw, 640px); max-height: 88vh; display: flex; flex-direction: column; background: #14111f; border: 1px solid var(--border-gold); border-radius: 12px; box-shadow: 0 18px 60px rgba(0,0,0,.55); overflow: hidden; }
.smag-memory-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid rgba(212,175,55,.22); font-size: 15px; font-weight: 700; color: var(--gold-light); }
.smag-memory-head span { display: inline-flex; align-items: center; gap: 8px; }
.smag-memory-head i { color: var(--cyan); }
.smag-memory-body { flex: 1; overflow-y: auto; padding: 16px; }
.smag-memory-body::-webkit-scrollbar { width: 6px; }
.smag-memory-body::-webkit-scrollbar-thumb { background: rgba(212,175,55,.25); border-radius: 3px; }
.smag-memory-section { margin-bottom: 18px; }
.smag-memory-section:last-child { margin-bottom: 0; }
.smag-memory-section-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--gold-light); margin-bottom: 6px; }
.smag-memory-section-title i { color: var(--gold); }
.smag-memory-hint { font-size: 12px; color: var(--text-dim); line-height: 1.6; margin: 0 0 8px; }
.smag-memory-textarea { width: 100%; min-height: 180px; resize: vertical; background: rgba(10,8,25,.6); border: 1px solid var(--border-gold); border-radius: 8px; padding: 10px 12px; color: var(--text-primary); font-size: 13.5px; font-family: var(--font-body); line-height: 1.6; box-sizing: border-box; outline: none; }
.smag-memory-textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-dim); }
.smag-memory-textarea::placeholder { color: var(--text-dim); }
.smag-memory-count { text-align: right; font-size: 11px; color: var(--text-dim); margin-top: 4px; }
.smag-memory-clear-btn { margin-left: auto; padding: 3px 10px; border: 1px solid rgba(248,113,113,.3); border-radius: 6px; background: transparent; color: #f87171; font-size: 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.smag-memory-clear-btn:hover { background: rgba(248,113,113,.15); }
.smag-memory-auto-text { background: rgba(10,8,25,.5); border: 1px solid rgba(212,175,55,.15); border-radius: 8px; padding: 10px 12px; font-size: 13px; color: var(--text-secondary); line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow-y: auto; margin: 0; font-family: var(--font-body); }
.smag-memory-auto-text.empty { color: var(--text-dim); font-style: italic; }
.smag-memory-actions { display: flex; gap: 10px; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid rgba(212,175,55,.15); }
.smag-memory-btn { padding: 8px 22px; border-radius: 8px; font-size: 13px; font-family: var(--font-body); cursor: pointer; border: 1px solid var(--border-gold); background: transparent; color: var(--gold-light); transition: all .15s; }
.smag-memory-btn:hover { background: var(--gold-dim); }
.smag-memory-btn-primary { background: linear-gradient(135deg, var(--gold), var(--cyan)); color: #0a0a1a; border: none; font-weight: 600; }
.smag-memory-btn-primary:hover { filter: brightness(1.1); box-shadow: var(--shadow-gold); }
.smag-memory-btn-ghost { background: transparent; }
@media (max-width: 480px) {
    .smag-memory-modal { width: 100vw; max-height: 100vh; border-radius: 0; }
    .smag-memory-textarea { min-height: 140px; }
}

/* ===== Agent 上下文窗口进度圈（头部标题旁，复用军师 advisor-context-ring 模式） ===== */
.smag-context-ring {
    cursor: help;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}
.smag-context-ring .ring-bg { stroke: rgba(212,175,55,0.18); }
.smag-context-ring .ring-fg {
    stroke: var(--gold);
    stroke-dasharray: 56.55;
    stroke-dashoffset: 56.55;
    transition: stroke-dashoffset 0.4s ease, stroke 0.3s ease;
}
.smag-context-ring.warning .ring-fg { stroke: #f0a030; }
.smag-context-ring.danger .ring-fg { stroke: #f08080; }
/* 上下文占用明细悬浮卡（hover 圆环展开，暗金风，对齐军师 tooltip） */
.smag-context-tooltip {
    position: absolute;
    top: 52px;
    right: 14px;
    width: 280px;
    background: rgba(20, 18, 28, 0.97);
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    padding: 12px 14px;
    z-index: 50;
    backdrop-filter: blur(8px);
    font-size: 12px;
}
.smag-context-tooltip-title {
    color: var(--gold-light);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}
.smag-context-tooltip-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.smag-context-tooltip-row:last-child { margin-bottom: 0; }
.smag-context-tooltip-row .label { width: 78px; color: var(--text-dim); flex-shrink: 0; white-space: nowrap; }
.smag-context-tooltip-row .bar { flex: 1; height: 5px; background: rgba(255, 255, 255, 0.06); border-radius: 3px; overflow: hidden; }
.smag-context-tooltip-row .bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-light)); border-radius: 3px; transition: width 0.3s ease; }
.smag-context-tooltip-row .val { width: 70px; text-align: right; color: var(--text-primary); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.smag-context-tooltip-row .val .pct { color: var(--gold-light); margin-left: 2px; }
.smag-context-tooltip-foot { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(212, 175, 55, 0.15); color: var(--text-secondary); font-size: 11px; text-align: right; }
.smag-context-tooltip-foot strong { color: var(--gold-light); font-weight: 600; }
@media (max-width: 480px) {
    .smag-context-tooltip { width: calc(100vw - 28px); right: 7px; }
}

/* ===== 18. P0-1 字幕样式模板 + P0-2 片头片尾库 ===== */

/* 字幕预览块（库卡片内 + 选择器卡片内 + 编辑弹窗内） */
.sm-subtitle-preview {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 14px 12px;
    box-sizing: border-box;
    font-family: "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-align: center;
    line-height: 1.3;
    position: relative;
    overflow: hidden;
}
.sm-subtitle-preview.pos-top { align-items: flex-start; }
/* 库卡片（系统预设/自定义） */
.sm-subtitle-style-card { cursor: default; }
.sm-subtitle-style-card.is-system { border-color: rgba(74, 240, 224, 0.35); }
.sm-subtitle-style-card .sm-card-info { padding: 8px 10px; }
.sm-subtitle-badge {
    position: absolute; top: 6px; right: 6px;
    background: rgba(212, 175, 55, 0.85); color: #0a0a1a;
    font-size: 10px; padding: 2px 6px; border-radius: 3px; z-index: 2;
    font-weight: 600;
}
.sm-subtitle-badge-system { background: rgba(74, 240, 224, 0.85); }
/* 新建卡（"+" 卡片）— min-height 与其他字幕卡总高对齐，避免网格行高跳变 */
.sm-subtitle-new-card {
    cursor: pointer;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    min-height: 130px;
    text-align: center;
    border-style: dashed;
}
.sm-subtitle-new-card:hover { border-color: var(--gold); background: rgba(212, 175, 55, 0.05); }
.sm-subtitle-new-icon {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold), var(--cyan));
    color: #0a0a1a;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; margin-bottom: 8px;
}
/* 编辑表单 */
.sm-subtitle-form { display: flex; flex-direction: column; gap: 4px; }
.sm-subtitle-form .sm-label { margin-top: 10px; }
.sm-color-input {
    width: 60px; height: 36px; padding: 0; border: 1px solid var(--border-gold);
    border-radius: 6px; background: transparent; cursor: pointer;
}
.sm-color-input::-webkit-color-swatch-wrapper { padding: 2px; }
.sm-color-input::-webkit-color-swatch { border: none; border-radius: 4px; }
/* 实时预览（编辑弹窗）：固定高度避免 16/9 在宽弹窗里过高把保存按钮推出屏外 */
.sm-subtitle-live-preview {
    background: #000;
    height: 120px;
    display: flex; align-items: flex-end; justify-content: center;
    padding: 14px 12px;
    box-sizing: border-box;
    border-radius: 6px;
    font-family: "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
    font-size: 20px; font-weight: bold; text-align: center; line-height: 1.3;
}
/* 颜色输入横向排列（节省纵向空间） */
.sm-color-row { display: flex; gap: 16px; flex-wrap: wrap; }
.sm-color-row .sm-color-field { flex: 1; min-width: 120px; }
.sm-color-row .sm-color-field .sm-label { margin-top: 0; }
/* 通用 range 滑块（复用 .sm-volume-slider 视觉，统一弹窗内滑块样式） */
.sm-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: linear-gradient(var(--gold-dim), rgba(55,175,212,.3)); outline: none; cursor: pointer; }
.sm-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(var(--gold), var(--cyan)); border: 2px solid var(--bg-card); box-shadow: 0 0 6px var(--gold-dim); cursor: pointer; }
.sm-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(var(--gold), var(--cyan)); border: 2px solid var(--bg-card); box-shadow: 0 0 6px var(--gold-dim); cursor: pointer; }
.sm-range:focus { box-shadow: 0 0 0 2px var(--gold-dim); }

/* 选择器（创建页 + 复审页共用，横向滚动卡片） */
.sm-subtitle-picker {
    display: flex; gap: 10px;
    overflow-x: auto; padding-bottom: 6px;
    margin-bottom: 14px;
    scrollbar-width: thin;
}
.sm-subtitle-picker::-webkit-scrollbar { height: 6px; }
.sm-subtitle-picker::-webkit-scrollbar-thumb { background: rgba(212, 175, 55, 0.3); border-radius: 3px; }
.sm-subtitle-pick-card {
    flex-shrink: 0;
    width: 130px;
    border: 1px solid var(--border-gold);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    background: rgba(10, 8, 25, 0.5);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.sm-subtitle-pick-card:hover { border-color: var(--cyan); }
.sm-subtitle-pick-card.selected {
    border-color: var(--gold);
    box-shadow: var(--shadow-gold);
}
.sm-subtitle-pick-card .sm-subtitle-preview { aspect-ratio: 16 / 9; font-size: 13px; padding: 6px 6px; line-height: 1.25; }
.sm-subtitle-pick-name {
    padding: 6px 8px; font-size: 12px; color: var(--text-primary);
    text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sm-subtitle-pick-check {
    position: absolute; top: 4px; right: 4px;
    color: var(--gold); font-size: 16px; z-index: 2;
    text-shadow: 0 0 4px rgba(0,0,0,0.8);
}
/* 片头片尾选择卡缩略图（与字幕预览块同比例 16/9，避免同一节内横向滚动条高度失调） */
.sm-subtitle-pick-thumb {
    width: 100%; aspect-ratio: 16 / 9;
    background: rgba(255,255,255,0.05);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-dim); font-size: 13px;
    font-weight: bold;
    overflow: hidden;
}
.sm-subtitle-pick-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sm-intro-pick-add .sm-subtitle-pick-thumb { color: var(--gold); }

/* 片头片尾库 tab */
.sm-intro-outro-tabs { display: flex; gap: 8px; margin-bottom: 4px; }
.sm-intro-outro-tab {
    padding: 6px 16px; border-radius: 6px;
    background: transparent; color: var(--text-secondary);
    border: 1px solid var(--border-gold); cursor: pointer;
    font-size: 13px; transition: all 0.15s;
}
.sm-intro-outro-tab.active {
    background: linear-gradient(135deg, var(--gold), var(--cyan));
    color: #0a0a1a; border: none; font-weight: 600;
}

/* AI 文字片头预览块（编辑弹窗） */
.sm-intro-text-preview {
    aspect-ratio: 16 / 9; padding: 16px;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    text-align: center; font-weight: bold; font-size: 18px;
    line-height: 1.4; word-break: break-word;
}

/* 复审页字幕预览（CSS 实时预览：smApplyReviewSubtitleStyle 动态改 .sm-review-sub 内联样式） */
.sm-review-subs .sm-review-sub { display: inline-block; padding: 2px 4px; margin: 2px; }
.sm-review-subs .sm-review-sub-kw { color: #37AFD4; font-weight: 700; }

/* 响应式 */
@media (max-width: 767px) {
    .sm-subtitle-pick-card { width: 110px; }
    .sm-subtitle-new-card { min-height: 110px; }
    .sm-intro-outro-tab { padding: 6px 12px; font-size: 12px; }
}

/* ===== 19. P0-3 AI 全自动片头片尾：勾选框 + 文案编辑区 ===== */

/* AI 全自动勾选框（创建页/复审页通用，醒目的卡片式 toggle） */
.sm-auto-intro-toggle {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(212,175,55,0.08), rgba(74,240,224,0.06));
    border: 1px solid var(--border-gold);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    user-select: none;  /* 防止拖动误选中文本 */
}
.sm-auto-intro-toggle:hover { border-color: var(--gold); }
/* 未勾选态：降级为普通卡片底色 + 半透明，让用户一眼看出"已关闭" */
.sm-auto-intro-toggle:has(input:not(:checked)) {
    background: rgba(10,8,25,0.4);
    border-color: var(--border-gold);
    opacity: 0.65;
}
.sm-auto-intro-toggle:has(input:not(:checked)) .sm-auto-intro-toggle-text {
    color: var(--text-secondary);
}
.sm-auto-intro-toggle input[type="checkbox"] {
    width: 18px; height: 18px; margin-top: 2px;
    accent-color: var(--gold); cursor: pointer; flex-shrink: 0;
}
.sm-auto-intro-toggle-text {
    color: var(--gold-light); font-size: 14px; font-weight: 600;
    display: flex; flex-direction: column; gap: 4px;
}
.sm-auto-intro-toggle-text i { color: var(--cyan); margin-right: 4px; }
.sm-auto-intro-toggle-hint {
    color: var(--text-dim); font-size: 11px; font-weight: 400;
    line-height: 1.4;
}

/* 复审页 AI 文案编辑区 */
.sm-auto-clips-box {
    padding: 14px;
    background: rgba(10,8,25,0.5);
    border: 1px solid var(--border-gold);
    border-radius: 8px;
}
.sm-auto-clips-head {
    color: var(--gold-light); font-size: 14px; font-weight: 600;
    margin-bottom: 6px;
}
.sm-auto-clips-head i { color: var(--cyan); margin-right: 6px; }
/* 双层钩子设计说明（P0-3+ 升级） */
.sm-auto-clips-tip {
    color: var(--text-secondary); font-size: 11px; line-height: 1.5;
    margin: 0 0 10px;
}
.sm-auto-clips-box .sm-textarea {
    min-height: 56px; font-size: 14px;
    resize: vertical;
}
/* 主标题/CTA 用稍大字号强调，副标题/利益承诺用较小字号 */
#smAutoIntroHook, #smAutoOutroCta {
    font-weight: 600;
}
/* 文案编辑区按钮容器：移动端自动换行 */
.sm-auto-clips-box .sm-auto-clips-btns {
    display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap;
}