/* =====================================================
   genesis.css — 万象界面专用样式
   所有内联 style="" 已全部提取至此文件
   ===================================================== */

/* ── 页面容器 ── */
#genesis-content {
    padding-bottom: 60px;
}

/* ── 万象专属卡片样式 ── */
#genesis .card-group,
#genesis-content .card-group {
    background: #ffffff !important; /* 纯白背景 */
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(180, 165, 150, 0.04);
    overflow: visible; /* 修复：不裁剪内容 */
    border: 1px solid rgba(205, 190, 175, 0.08); /* 淡淡的香槟色边框 */
}

/* 灵境详情页卡片不裁剪 */
.lj-detail-wrap .card-group {
    overflow: visible;
}

/* ── 万象专属图标样式 ── */
#genesis .item-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
}

/* API 图标 */
#genesis .icon-api {
    background: #f8f4f0;
    color: var(--champagne-dark);
}

/* TTS 图标 */
#genesis .icon-tts {
    background: #fdf8f6;
    color: var(--champagne-medium);
}

/* STT 图标 */
#genesis .icon-stt {
    background: #f5f1ef;
    color: #b5a49c;
}

/* 灵境图标 */
#genesis .icon-preset {
    background: #f8f2f5;
    color: #bca0b0;
}

/* 社交引擎图标 */
#genesis .icon-social {
    background: #fcf6f2;
    color: #c8b4a5;
}

/* ── 顶栏占位（保持标题居中） ── */
.app-header-spacer {
    width: 36px;
    flex-shrink: 0;
}

/* ── section-label 带图标变体 ── */
.section-label-icon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ── section-label 减小顶部间距（灵境面板库用） ── */
.section-label-top {
    margin-top: 16px;
}

/* ── 带底部间距的 card-group ── */
.card-group-mb {
    margin-bottom: 12px;
}

/* ── 可折叠列表行 ── */
.list-item-toggle {
    cursor: pointer;
}

/* ── 折叠详情面板 ── */
.collapse-detail {
    display: none;
    padding: 0 16px 12px;
}

/* ── 折叠展开箭头 ── */
.collapse-arrow {
    color: var(--text-sub);
    font-size: 18px;
    flex-shrink: 0;
}

/* ── item-icon 颜色变体 ── */
.icon-tts {
    background: #fdf8f6;
    color: var(--champagne-medium);
}
.icon-stt {
    background: #f5f1ef;
    color: #b5a49c;
}
.icon-social-engine {
    background: rgba(205, 174, 154, 0.1);
    color: #c8b4a5;
}
.icon-social-freq {
    background: rgba(205, 174, 154, 0.08);
    color: var(--champagne-dark);
}

/* ── 配置方案行（select + 设置按钮） ── */
.profile-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.profile-row .clean-select {
    flex: 1;
}

/* ── 设置图标按钮（香槟色渐变） ── */
.btn-icon-settings {
    padding: 8px 12px;
    background: linear-gradient(135deg, var(--champagne-light) 0%, var(--champagne-primary) 100%);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(205, 174, 154, 0.25);
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.btn-icon-settings i {
    font-size: 16px;
}

/* ── 设置图标按钮（深香槟渐变，STT 专用） ── */
.btn-icon-settings-blue {
    padding: 8px 12px;
    background: linear-gradient(135deg, var(--champagne-medium) 0%, #b5a49c 100%);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(181, 164, 156, 0.25);
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.btn-icon-settings-blue i {
    font-size: 16px;
}

/* ── API Key 行（input + 测试按钮并排） ── */
.key-row {
    display: flex;
    gap: 10px;
    width: 100%;
    align-items: center;
}
.key-row .key-input-wrap {
    flex: 1;
}

/* ── 密钥 input 掩码 ── */
.input-password {
    -webkit-text-security: disc;
}

/* ── 测试连接按钮（香槟色渐变） ── */
.btn-test {
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--champagne-light) 0%, var(--champagne-primary) 100%);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(205, 174, 154, 0.3);
    transition: all 0.3s;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── input-row 横排变体（开关行） ── */
.input-row-inline {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

/* ── 全宽主要操作按钮（保存等） ── */
.btn-full-primary {
    width: 100%;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    cursor: pointer;
    /* 颜色由 .btn-gradient-primary 提供，复用现有类 */
}

/* ── 声音克隆区（上边框分隔） ── */
.clone-section {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed rgba(0, 0, 0, 0.08);
}

/* ── 克隆主按钮（全宽香槟渐变） ── */
.btn-clone {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, var(--champagne-light) 0%, var(--champagne-primary) 100%);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(205, 174, 154, 0.25);
}

/* ── 手动输入 Voice ID 链接行 ── */
.clone-manual-link {
    margin-top: 8px;
    text-align: center;
}
.clone-manual-link a {
    color: var(--champagne-primary);
    cursor: pointer;
    font-size: 12px;
    text-decoration: underline;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ── 说明文字（小字提示） ── */
.hint-text {
    font-size: 11px;
    color: var(--text-sub);
    padding: 6px 0;
    line-height: 1.5;
}

/* ── STT 说明文字（顶部） ── */
.stt-desc {
    font-size: 11px;
    color: var(--text-sub);
    line-height: 1.6;
    padding: 4px 0 10px;
}

/* ── 模型标签行（标签 + 拉取按钮并排） ── */
.form-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ── 拉取列表按钮 ── */
.btn-fetch-models {
    font-size: 12px;
    color: var(--champagne-primary);
    cursor: pointer;
    font-weight: 500;
}

/* ── 模型 select（下拉时显示） ── */
.model-select-hidden {
    display: none;
    margin-top: 6px;
}

/* ── 模型手动输入框 ── */
.model-input {
    margin-top: 6px;
}

/* ── 拉取状态文字 ── */
.fetch-status {
    font-size: 11px;
    color: var(--text-sub);
    margin-top: 4px;
}

/* ── STT 保存+测试按钮行 ── */
.stt-btn-row {
    display: flex;
    gap: 8px;
    padding: 8px 0 4px;
}

/* ── STT 保存按钮（香槟色渐变） ── */
.btn-save-blue {
    flex: 1;
    padding: 10px 16px;
    background: linear-gradient(135deg, var(--champagne-light) 0%, var(--champagne-primary) 100%);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(205, 174, 154, 0.25);
    transition: all 0.3s;
}

/* ── STT 测试按钮（香槟色渐变） ── */
.btn-test-green {
    flex: 1;
    padding: 10px 16px;
    background: linear-gradient(135deg, var(--champagne-light) 0%, var(--champagne-primary) 100%);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(205, 174, 154, 0.25);
    transition: all 0.3s;
}

/* ── 社交引擎 list-item 可点击 ── */
.list-item-clickable {
    cursor: pointer;
}

/* ── 频率下拉（紧凑宽度） ── */
.select-freq {
    width: auto;
    min-width: 80px;
}

/* ── 引擎说明文字 ── */
.engine-hint {
    padding: 8px 16px;
    font-size: 11px;
    color: #95a5a6;
    line-height: 1.5;
}

/* ══════════════════════════════════
   视图2：灵境 (LingJing)
   ══════════════════════════════════ */

/* ── 灵境 prompt 输入框包裹 ── */
.lingjing-textarea-wrap {
    padding: 16px 16px 0;
}

/* ── 灵境 prompt 输入框 ── */
.lingjing-textarea {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: rgba(248, 249, 252, 0.6);
    font-size: 14px;
    color: var(--text-body, #333);
    padding: 12px;
    font-family: inherit;
    line-height: 1.5;
    resize: none;
    box-sizing: border-box;
    min-height: 80px;
    border-radius: 12px;
    outline: none;
}

/* ── 预览区容器 ── */
.lingjing-preview-area {
    display: none; /* JS 控制显示 */
}

/* ── 预览区标题 ── */
.lingjing-preview-label {
    font-size: 12px;
    color: var(--text-sub, #95a5a6);
    text-align: center;
    padding: 12px 0 4px;
}

/* ── 预览画布（格子背景） ── */
.lingjing-preview-canvas {
    background-color: #f8f9fa;
    background-image: radial-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px);
    background-size: 12px 12px;
    border-radius: 12px;
    padding: 20px;
    margin: 4px 16px 12px;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.03);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80px;
}

/* ── 命名 + 保存行 ── */
.lingjing-name-row {
    padding: 0 16px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── 模板命名输入框 ── */
.lingjing-name-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 15px;
    color: var(--text-body, #4b4b4b);
    padding: 4px 0;
    font-family: inherit;
    outline: none;
}

/* ── 保存至库按钮 ── */
.btn-save-to-lib {
    font-size: 13px;
    color: var(--champagne-primary);
    background: rgba(205, 174, 154, 0.1);
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
    border: none;
}

/* ── 生成面板按钮行 ── */
.lingjing-generate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--champagne-primary);
    background: transparent;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    cursor: pointer;
    margin-top: 4px;
}
.lingjing-generate-btn i {
    margin-right: 6px;
    font-size: 17px;
}

/* ── 生成中状态 ── */
.lingjing-generating {
    display: none; /* JS 控制 */
    padding: 14px;
    font-size: 14px;
    color: var(--text-sub, #95a5a6);
    text-align: center;
}

/* ── 导入导出双列行 ── */
.import-export-row {
    display: flex;
    overflow: hidden;
    margin-bottom: 12px;
}

/* ── 导入 / 导出 按钮 ── */
.import-export-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-body, #4b4b4b);
    cursor: pointer;
}
.import-export-btn i {
    margin-right: 6px;
    font-size: 16px;
}
.import-export-btn + .import-export-btn {
    border-left: 1px solid rgba(0, 0, 0, 0.04);
}

/* ── 灵境底部说明 ── */
.lingjing-footer-hint {
    text-align: center;
    padding: 20px;
    color: var(--text-sub, #999);
    font-size: 12px;
    line-height: 1.6;
}

/* ══════════════════════════════════
   版本号 / 调试入口
   ══════════════════════════════════ */
.genesis-version-bar {
    text-align: center;
    padding: 30px 0 20px;
    opacity: 0.5;
}
.genesis-version-text {
    font-size: 13px;
    color: var(--text-muted);
    cursor: default;
    user-select: none;
    font-weight: 500;
}

/* ══════════════════════════════════
   子页面：overlay 通用修复
   ══════════════════════════════════ */

/* 取消按钮颜色覆盖（灰色而非 accent） */
.nav-text-btn-cancel {
    color: var(--text-sub);
}

/* folder-content 去掉顶部 padding */
.folder-content-inner {
    padding-top: 0;
}

/* ══════════════════════════════════
   暗色模式适配
   ══════════════════════════════════ */
body.dark-mode .lingjing-textarea {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-body);
}

body.dark-mode .lingjing-preview-canvas {
    background-color: #1e1e2e;
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}

body.dark-mode .btn-save-to-lib {
    color: var(--champagne-light);
    background: rgba(205, 174, 154, 0.1);
}

body.dark-mode .import-export-btn {
    color: var(--text-body);
}

body.dark-mode .clone-manual-link a {
    color: var(--champagne-primary);
}

/* ══════════════════════════════════
   JS 动态生成 HTML 的类名（settings-new.js）
   ══════════════════════════════════ */

/* ── API 列表项 ── */
.api-item-active {
    border: 2px solid var(--champagne-primary);
}
.api-item-add {
    border-top: 1px dashed rgba(0, 0, 0, 0.1);
    cursor: pointer;
}
/* 新增 API（空列表状态）图标 */
.icon-api-add {
    background: linear-gradient(135deg, #f6f1ed 0%, #e8dfd8 100%);
    color: var(--champagne-dark);
}
/* 新增 API（追加行）图标 */
.icon-api-add-more {
    background: rgba(205, 174, 154, 0.1);
    color: var(--champagne-primary);
}
/* 使用中的 API 标题色 */
.api-title-active {
    color: var(--champagne-primary);
}
/* 使用中 badge */
.api-badge-active {
    color: var(--champagne-dark);
    font-size: 12px;
    margin-left: 6px;
}

/* ── 通知图标变体 ── */
.icon-notify-sound {
    background: #f8f4f0;
    color: var(--champagne-medium);
}
.icon-notify-banner {
    background: #fdf8f6;
    color: #c8b4a5;
}

/* ── section-label 大间距变体 ── */
.section-label-mt {
    margin-top: 24px;
}

/* ── 铃声 / 提示音行 ── */
.ringtone-row {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
    cursor: default;
}
.ringtone-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.ringtone-title {
    margin-bottom: 4px;
}
.btn-preview {
    padding: 6px 12px;
    font-size: 13px;
    background: var(--champagne-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.btn-preview:active {
    background: var(--champagne-dark);
}
.setting-select-full {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    cursor: pointer;
}

/* ── 数据管理图标变体 ── */
.icon-data-export {
    background: #fdf8f6;
    color: #c8b4a5;
}
.icon-data-import {
    background: #f8f4f0;
    color: var(--champagne-medium);
}
.icon-data-migrate {
    background: #f6f1ed;
    color: var(--champagne-dark);
}
.data-hint {
    padding: 10px 16px 4px;
    font-size: 11px;
    color: #c8b4a5;
    line-height: 1.6;
}

/* ── 存储管理图标变体 ── */
.icon-storage-light {
    background: #f6f1ed;
    color: var(--champagne-dark);
}
.icon-storage-deep {
    background: #fdf3f2;
    color: #d48b8b;
}
.icon-storage-reload {
    background: rgba(205, 174, 154, 0.1);
    color: var(--champagne-primary);
}
.icon-storage-diag {
    background: rgba(197, 160, 128, 0.1);
    color: #c5a080;
}

/* ── 灵境模板空状态 ── */
.lj-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 16px;
    text-align: center;
}
.lj-empty-icon {
    font-size: 48px;
    opacity: 0.12;
    margin-bottom: 12px;
    color: var(--text-sub);
}
.lj-empty-title {
    font-size: 14px;
    color: var(--text-sub);
    margin: 0 0 4px 0;
    font-weight: 500;
}
.lj-empty-hint {
    font-size: 12px;
    color: var(--text-placeholder, #aaa);
    margin: 0;
}

/* ── 灵境模板列表操作按钮区 ── */
.lj-item-actions {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding-top: 2px;
}
.lj-action-btn {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}
.lj-action-btn i {
    font-size: 15px;
}
.lj-action-edit {
    background: rgba(205, 174, 154, 0.1);
}
.lj-action-edit i {
    color: var(--champagne-primary);
}
.lj-action-delete {
    background: rgba(212, 139, 139, 0.1);
}
.lj-action-delete i {
    color: #d48b8b;
}

/* ── API 编辑器 模型行 ── */
.model-input-row {
    flex-direction: column;
    gap: 12px;
}
.model-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.model-label-row .form-label {
    margin: 0;
}
.model-btn-group {
    display: flex;
    gap: 6px;
}
.model-input-hidden {
    display: none;
}

/* ── 温度值显示 ── */
.temp-value {
    font-weight: 400;
    font-size: 12px;
    color: var(--text-sub);
}

/* ── 灵境详情页 ── */
.lj-detail-wrap {
    padding: 16px 0 0;
}
.lj-preview-card {
    background-color: #f8f9fa;
    background-image: radial-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px);
    background-size: 12px 12px;
    border-radius: 12px;
    padding: 20px;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.03);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80px;
}
.lj-preview-inner {
    width: 100%;
}
.lj-card-transparent {
    background: transparent;
    box-shadow: none;
    padding: 0;
}

/* 新版信息网格布局 */
.lj-info-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 12px;
}
.lj-info-item {
    background: #ffffff;
    border-radius: 12px;
    padding: 16px;
    border: 1px solid rgba(205, 174, 154, 0.15);
    box-shadow: 0 2px 8px rgba(205, 174, 154, 0.08);
}
.lj-info-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--champagne-primary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.lj-info-value {
    font-size: 15px;
    color: var(--text-body, #4b4b4b);
    line-height: 1.6;
    word-wrap: break-word;
    max-height: 150px;
    overflow-y: auto;
}

/* 操作按钮区 */
.lj-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-bottom: 20px;
}
.lj-btn-export {
    flex: 1;
    padding: 14px;
    background: linear-gradient(135deg, var(--champagne-light) 0%, var(--champagne-primary) 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(205, 174, 154, 0.25);
    transition: all 0.2s;
}
.lj-btn-delete {
    flex: 1;
    padding: 14px;
    background: rgba(212, 139, 139, 0.1);
    color: #d48b8b;
    border: 1px solid rgba(212, 139, 139, 0.2);
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
}
.lj-btn-export:active {
    transform: scale(0.98);
}
.lj-btn-delete:active {
    transform: scale(0.98);
    background: rgba(212, 139, 139, 0.15);
}
.lj-export-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-title, #2d3436);
}
.lj-export-sub {
    font-size: 12px;
    color: var(--text-sub, #95a5a6);
}
.btn-export-lj {
    font-size: 13px;
    color: var(--champagne-primary);
    background: rgba(205, 174, 154, 0.1);
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
    border: none;
    flex-shrink: 0;
}
.lj-delete-row {
    text-align: center;
    padding: 20px;
    color: #d48b8b; /* 柔和的危险色 */
    font-weight: 600;
    cursor: pointer;
}

/* ── 确认弹窗（动态创建，类名仅供 CSS 美化） ── */
.genesis-confirm-panel {
    width: 280px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 247, 245, 0.98) 100%);
    border-radius: 20px;
    padding: 28px 24px 20px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    transform: scale(0.9);
    transition: transform 0.25s ease;
}
.genesis-confirm-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, #d48b8b 0%, #c97a7a 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.genesis-confirm-icon i {
    font-size: 28px;
    color: white;
}
.genesis-confirm-title {
    font-size: 18px;
    font-weight: 600;
    color: #2d3436;
    margin-bottom: 12px;
}
.genesis-confirm-msg {
    font-size: 14px;
    color: #636e72;
    line-height: 1.6;
    margin-bottom: 24px;
}
.genesis-confirm-btns {
    display: flex;
    gap: 12px;
}
.genesis-confirm-cancel {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 12px;
    background: #f1f3f4;
    color: #5f6368;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}
.genesis-confirm-ok {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #d63031 0%, #c0392b 100%);
    color: white;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}

/* ── 暗色适配 ── */
body.dark-mode .setting-select-full {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-body);
    border-color: rgba(255, 255, 255, 0.1);
}
body.dark-mode .lj-preview-card {
    background-color: #1e1e2e;
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}
body.dark-mode .genesis-confirm-panel {
    background: linear-gradient(145deg, rgba(40, 40, 60, 0.98) 0%, rgba(30, 30, 50, 0.98) 100%);
}
body.dark-mode .genesis-confirm-title {
    color: var(--text-title);
}
body.dark-mode .genesis-confirm-msg {
    color: var(--text-sub);
}
body.dark-mode .genesis-confirm-cancel {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-body);
}

/* ── 通用文字色辅助 ── */
.text-sub-color {
    color: var(--text-sub);
}

/* ── 语音角色映射行 ── */
.voice-map-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.voice-map-name {
    font-size: 13px;
    color: var(--text-body);
}
.voice-map-tag {
    font-size: 11px;
    color: var(--text-sub);
    background: rgba(0, 0, 0, 0.03);
    padding: 2px 8px;
    border-radius: 6px;
}