/* ============================================================
   css/panels/panels-settings.css — 设置页 / 分组卡片 / 子页面
   设计系统: iOS 式分组卡片 · 花字标题 · 多层阴影
   ============================================================ */

#sub-settings { padding: 0; overflow: hidden; position: relative; }
#sub-settings.active { display: flex; flex-direction: column; }
/* ★ W1：二级页 Header / 滚动正文的唯一事实定义已上移到
   css/panels/panels-my-home.css（「我的」这一层的所有者）的「二·B 二级页统一外壳」，
   .mysec-head / .mysec-back / .mysec-title / .mysec-action / .mysec-body 都在那一份里。
   本文件不再留第二份定义。
   设置主页的 .settings-main-view 只保留自己的身份（JS 用 id 找它做主页/子页切换），
   滚动与底部留白交给 .mysec-body（index.html 里它同时带这两个类）。 */

/* 分组卡片 */
/* ===== 设置分组清单 =====
   ★ UI 3.0 W5（Final Review 收口）：原来是「上下零间距、只有首尾两角圆」的一整块，
     在手机上就是 iOS「系统设置 / 后台配置页」那种分段控件观感，与母版「属于自己的 Kstar 管理书页」相反。
   改法是照着设计母库那份记录（KSTAR-SETTING-G-preview：V9 同源私人管理空间 ——
   暖色半透明容器、大圆角、柔和阴影、卡片角落圆形装饰）**只调外形、不改结构**：
     ① 每张分组卡自己一整块 → 圆角 18px（生产 token --radius-lg）+ 暖阴影（--shadow-xs）
        + 极浅描边，材质对齐 V9 那套暖色半透明；
     ② 分组之间给 8px 留白 —— 一眼能看出「这是七件事」，而不是一根分段控件；
     ③ 选中反馈再加一点「按下浮起」（transform 0.98 → 0.985 + 暖阴影加深），仍是 Motion 3.0 Example 03 Soft。
   仍然是一页清单、七个功能单元，**没有**改成一堆大卡片墙，也没加任何小字说明。 */
.settings-group-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}
.settings-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    border-radius: var(--radius-lg);
}
.settings-card:hover { background: var(--accent-light); }
.settings-card:active { background: var(--accent-light); box-shadow: var(--shadow-sm); transform: scale(0.985); }
.sc-label {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: 0.3px;
}
.sc-arrow { font-size: 20px; color: var(--text-muted); font-weight: 300; }

/* ===== 同一空间内部 View 生命周期（Motion System 3.0 §7 · Example 12）=====
   设置主页（View A）↔ 设置分组子页（View B）= 仍然在同一个空间里换一个视角，
   不是新 Sheet、不是新页面：只做轻位移 + 淡入淡出，
   A→B：A 左退 12px；B 从右侧 18px 进；B→A：B 右退 12px；A 从左侧 18px 回（完全镜像）。
   时长 / 缓动：320ms · cubic-bezier(.16,1,.3,1)。
   ★ display:none 只作为「动画彻底结束后停住」的收尾（JS 在 340ms 后设），
     绝不再承担主要离场动画 —— 否则反向就是一次瞬切。
   ★ 未打开时 visibility:hidden + pointer-events:none，浮层既不可见也不可点（防空层盖住设置内容）。 */
.settings-sub-views {
    position: absolute;
    inset: 0;
    /* ★ 从外壳头部的下沿开始，绝不盖住头部那一行：
       本层不透明、铺满、z-index:20，而 .mysec-head 是它的非定位兄弟（z-index:auto），
       按绘制顺序定位后代必然压在非定位兄弟之上 —— 整层 inset:0 会把唯一的
       「‹ 返回」和「保存」键盖死（2026-10-02 线上实锤：甲方改了模型却找不到保存键）。
       --ui3-head-h 由 panels-settings-ui3.js 的 _ui3SyncHead() 按真实头部高度写入，
       兜底 55px = 10+34+10 内边距与返回键高度，字号变化不影响该值。 */
    top: var(--ui3-head-h, 55px);
    background: var(--bg-chat);
    z-index: 20;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translateX(18px);
    pointer-events: none;
    visibility: hidden;
    transition:
        opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 0.32s;
}
.settings-sub-views.ssp-show {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    visibility: visible;
    transition:
        opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
/* 反向退场：子页向右退出（+12px） */
.settings-sub-views.ssp-leaving {
    opacity: 0;
    transform: translateX(12px);
    pointer-events: none;
}
/* 主页这一侧：子页打开时它只后退一点（左 12px），不是消失；
   反向时它从左侧 18px 处回到原位（.ssp-behind / .ssp-returning 都是不可见态，
   两者互换的那一帧用户看不到，所以不会出现「跳一下」）。 */
#settings-main-view {
    transition:
        opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
#settings-main-view.ssp-behind {
    opacity: 0;
    transform: translateX(-12px);
    pointer-events: none;
}
#settings-main-view.ssp-returning {
    opacity: 0;
    transform: translateX(-18px);
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .settings-sub-views,
    #settings-main-view { transition: none; }
    /* 子树里的过渡（折叠体展高、卡片淡入…）同样归零：只给外壳那两行归零是半套做法——
       里面还有 0.4s 的展高动画在动，「减少动效」就等于没开（自检抓到的）。 */
    #settings-sub-views,
    #settings-sub-views * { transition-duration: 0s !important; }
    /* UI3 四空间：折叠体展高是用行内 height 驱动的，必须点名列进来（与上一行同一套做法）。 */
    .ui3-acc-body,
    .ui3-acc-icon,
    .ui3-work,
    .settings-main-view.ui3-deep { transition: none; }
}
/* 设置子页的 Header / 正文用的是统一外壳（.mysec-head / .mysec-body，见 panels-my-home.css），
   原来那套 .ssp-header / .ssp-back / .ssp-title / .ssp-save-btn / .ssp-content 已删除（W1 去重）。 */

#sub-settings .settings-group {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
#sub-settings .settings-group:last-child { border-bottom: none; }
#sub-settings .settings-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--text-primary);
}
#sub-settings .settings-group textarea,
#sub-settings .settings-group input[type="text"],
#sub-settings .settings-group input[type="number"] {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 14px;
    background: var(--input-bg);
    color: var(--text-primary);
    box-sizing: border-box;
    transition: border-color 0.2s ease;
    line-height: 1.5;
}
#sub-settings .settings-group textarea:focus,
#sub-settings .settings-group input:focus {
    outline: none;
    border-color: var(--accent);
}
#sub-settings .settings-group .row {
    display: flex;
    align-items: center;
    gap: 10px;
}
#sub-settings .settings-group .row span {
    font-size: 12px;
    color: var(--text-muted);
}
#sub-settings .settings-group .row .val {
    font-weight: 600;
    color: var(--accent);
    min-width: 36px;
    text-align: right;
}
#sub-settings .settings-group .hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* 滑块 */
#sub-settings input[type="range"] {
    -webkit-appearance: none; appearance: none;
    flex: 1;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}
#sub-settings input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--accent-gradient);
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    cursor: pointer;
    transition: transform 0.15s ease;
}
#sub-settings input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.12); }
#sub-settings input[type="range"]::-webkit-slider-thumb:active { transform: scale(0.95); }
#sub-settings input[type="range"]::-moz-range-thumb {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--accent-gradient);
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    cursor: pointer;
}

#sub-settings .settings-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}
#sub-settings .settings-actions button {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.3px;
    /* 不许写 transition: all（会把布局属性一起卷进过渡，滚动/键盘避让时抖）；只列真的会变的那几个 */
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
#sub-settings .settings-actions .save-btn {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}
#sub-settings .settings-actions .save-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}
#sub-settings .settings-actions .save-btn:active { transform: scale(0.96); }
#sub-settings .settings-actions .reset-btn {
    background: var(--accent-light);
    color: var(--accent);
}
#sub-settings .settings-actions .reset-btn:hover { background: rgba(201,176,168,0.22); }
#sub-settings .save-status {
    text-align: center;
    font-size: 13px;
    color: var(--success);
    margin-top: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
}
#sub-settings .save-status.show { opacity: 1; }

/* 底部法律链接（灰色可点文字，非卡片） */
#sub-settings .settings-legal-links {
    text-align: center;
    margin-top: 18px;
    padding-bottom: 6px;
}
#sub-settings .settings-legal-links a {
    display: inline-block;
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: none;
    margin: 0 10px;
    letter-spacing: 0.5px;
    transition: color 0.2s ease;
}
#sub-settings .settings-legal-links a:hover { color: var(--rose-dark, #A88080); }

/* Theme book 容器 */
.theme-bookmarks-scroll { padding: 0; overflow: visible; }

/* API 配置 */
.api-config-item { transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
.api-config-item:hover { background: var(--card-bg) !important; }
.api-config-item.active { box-shadow: 0 0 0 1px var(--success); }
.api-btn {
    padding: 3px 8px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 11px;
    font-family: inherit;
    border: 1px solid;
    background: var(--card-bg);
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.api-btn-activate { color: var(--success); border-color: var(--success); }
.api-btn-deactivate { color: var(--danger); border-color: var(--danger); }
.api-btn-fetch { color: var(--accent); border-color: var(--accent); }
.api-btn-test { color: var(--accent); border-color: var(--accent); }
.api-btn-delete { color: var(--danger); border-color: var(--danger); }

/* MCP 列表 */
.mcp-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.mcp-item .mcp-info { flex: 1; min-width: 0; }
.mcp-item .mcp-name { font-weight: 500; }
.mcp-item .mcp-url {
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mcp-item .mcp-actions { display: flex; gap: 4px; flex-shrink: 0; }
.mcp-item .mcp-actions button {
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card-bg);
    cursor: pointer;
    font-size: 11px;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.mcp-tool-detail {
    padding: 6px 0 8px 12px;
    border-top: 1px dashed var(--border);
    font-size: 12px;
    display: none;
}
.mcp-tool-detail.open { display: block; }

/* ============================================================
   语音与通话子页 · 卡片/开关/信息浮层/内联播放器 组件
   ============================================================ */

/* 分区卡片 */
.vs-card {
    background: var(--surface, rgba(255, 252, 249, 0.82));
    border: 1px solid rgba(196, 168, 106, 0.18);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(30, 28, 26, 0.04), 0 2px 8px rgba(30, 28, 26, 0.05);
}
.vs-card-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    margin-bottom: 12px;
}
.vs-card-title {
    display: block; font-size: 15px; font-weight: 600;
    letter-spacing: 1px; color: var(--text-primary);
}
.vs-card-en {
    display: block; font-family: 'Playfair Display', var(--font-decorative), serif; font-style: italic;
    font-size: 11px; color: var(--gold, #C4A86A); opacity: 0.7;
    letter-spacing: 1px; margin-top: 2px;
}

/* ============================================================
   外观卡（主题卡）美化：顶部柔光渐变 + 金色细线标题分隔
   主题卡 / 总音量卡共用 .vs-card--accent；主题卡追加 .vs-theme-card
   ============================================================ */
.vs-card--accent {
    position: relative;
    overflow: hidden;
}
.vs-card--accent::before {
    content: '';
    position: absolute; left: 0; right: 0; top: 0; height: 92px;
    pointer-events: none;
    background: linear-gradient(180deg, var(--accent-glow, rgba(200,168,124,0.22)), transparent);
    opacity: 0.5;
}
.vs-card--accent .vs-card-head { position: relative; }
.vs-theme-card .vs-card-titles {
    position: relative;
    padding-bottom: 10px;
}
.vs-theme-card .vs-card-titles::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg, var(--gold, #C4A86A), rgba(196,168,106,0.18) 72%, transparent);
}
/* ============================================================
   外观工具区：随机换一个 + 浅色/深色定位 + 每次打开换主题
   整体框成一个带底色/描边的子面板，主次分明
   ============================================================ */
.vs-theme-tools {
    margin-top: 14px;
    padding: 14px 16px 12px;
    border: 1px solid var(--border, rgba(196,168,106,0.24));
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.05));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
.vs-theme-tools-actions {
    display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap;
}
/* 随机换一个 按钮（主操作，占满一行左侧） */
.vs-theme-random {
    flex: 1; min-width: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 14px; border-radius: 999px; cursor: pointer; user-select: none;
    border: 1px solid var(--accent, rgba(196,168,106,0.5));
    background: linear-gradient(145deg, var(--accent-light, rgba(200,168,124,0.18)), transparent);
    color: var(--text-primary); font-size: 13px; font-family: inherit; letter-spacing: 0.5px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.vs-theme-random:hover { background: var(--accent-light); }
.vs-theme-random:active { transform: scale(0.95); }
.vs-theme-random svg { color: var(--accent); flex-shrink: 0; }
/* 浅色/深色 定位胶囊（选中侧点亮主题色） */
.vs-theme-grouppill {
    display: inline-flex; align-items: center; flex-shrink: 0;
    border: 1px solid var(--border, rgba(196,168,106,0.35));
    border-radius: 999px; overflow: hidden;
    background: var(--surface, rgba(255,255,255,0.5));
}
.vgp-seg {
    padding: 10px 18px; font-size: 13px; letter-spacing: 0.5px;
    color: var(--text-secondary); cursor: pointer; user-select: none;
    border: none; background: none; font-family: inherit;
    transition: background 0.2s ease, color 0.2s ease;
}
.vgp-seg:active { transform: scale(0.96); }
.vgp-seg.active {
    background: var(--accent); color: #fff;
}
/* 每次打开都换主题 开关行（说明文字已收进卡片右上角的问号，这里不再有 hint 行） */
.vs-theme-tools-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: 12px; padding-top: 12px;
    border-top: 1px dashed var(--border, rgba(196,168,106,0.24));
}

/* ★ 2026 窄屏修复：370px 下「随机换一个 + 浅色/深色」整体缩小，保证一行放下不换行 */
@media (max-width: 380px) {
    .vs-theme-tools { padding: 11px 12px 10px; }
    .vs-theme-tools-actions { gap: 6px; flex-wrap: nowrap; }
    .vs-theme-random { padding: 8px 10px; font-size: 12px; gap: 5px; }
    .vs-theme-random svg { width: 14px; height: 14px; }
    .vgp-seg { padding: 8px 11px; font-size: 12px; }
}

/* 设置页「更多设置」折叠（重要项平铺、次要项收起） */
.vs-collapse {
    margin-top: 16px;
    border: 1px solid rgba(196, 168, 106, 0.18);
    border-radius: 14px;
    background: var(--surface, rgba(255, 252, 249, 0.82));
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(30, 28, 26, 0.04), 0 2px 8px rgba(30, 28, 26, 0.05);
}
.vs-collapse-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 16px; cursor: pointer; user-select: none;
    transition: background 0.15s ease;
}
.vs-collapse-head:hover { background: var(--accent-light); }
.vs-collapse-head:active { background: var(--accent-light); }
.vs-collapse-title { font-size: 15px; font-weight: 600; letter-spacing: 0.5px; color: var(--text-primary); }
.vs-collapse-count {
    font-size: 12px; color: var(--text-muted); margin-right: auto; margin-left: 8px;
}
.vs-collapse-chevron { color: var(--text-muted); transition: transform 0.3s ease; flex-shrink: 0; }
.vs-collapse.open .vs-collapse-chevron { transform: rotate(180deg); }
.vs-collapse-body {
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease;
}
.vs-collapse.open .vs-collapse-body { max-height: 2600px; opacity: 1; }
/* 折叠体内的卡片：平铺成行，不再叠一层卡片框阴影 */
.vs-collapse-body .vs-card,
.vs-collapse-body .api-entry-card,
.vs-collapse-body .simple-slot-card,
.vs-collapse-body .task-model-row {
    border: none; border-radius: 0; box-shadow: none; margin-bottom: 0;
    padding: 14px 16px; border-top: 1px solid var(--border);
}
.vs-collapse-body .vs-card:first-child,
.vs-collapse-body .api-entry-card:first-child,
.vs-collapse-body .simple-slot-card:first-child { border-top: none; }
.vs-collapse-body .vs-actions { margin-top: 10px; }

/* 信息详情图标 */
.vs-info-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    color: var(--text-muted); cursor: pointer; flex-shrink: 0;
    vertical-align: -4px; margin-left: 4px;
    transition: color 0.2s ease, background 0.2s ease;
}
.vs-info-icon:hover, .vs-info-icon:active { color: var(--accent-rose, #C9A8A8); background: rgba(201, 168, 168, 0.12); }

/* 信息浮层 */
.confirm-panel.info-panel { text-align: left; }
.info-panel-title {
    font-size: 15px; font-weight: 600; letter-spacing: 0.5px;
    color: var(--text-primary); margin-bottom: 10px;
    padding-bottom: 8px; border-bottom: 1px solid rgba(196, 168, 106, 0.25);
    position: relative; z-index: 1;
}
.info-panel-body {
    font-size: 13px; line-height: 1.8; color: var(--text-secondary);
    margin-bottom: 18px; position: relative; z-index: 1;
}
.info-panel-body b { color: var(--text-primary); font-weight: 600; }

/* 输入控件 */
.vs-input {
    width: 100%; padding: 9px 11px; margin-top: 8px;
    border: 1px solid var(--border); border-radius: 10px;
    font-size: 13px; font-family: inherit;
    background: var(--input-bg); color: var(--text-primary);
    outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.vs-input:focus { border-color: var(--accent-rose, #C9A8A8); box-shadow: 0 0 0 3px rgba(201, 168, 168, 0.15); }
.vs-textarea { min-height: 56px; resize: vertical; line-height: 1.6; }
.vs-select {
    width: 100%; padding: 9px 11px;
    border: 1px solid var(--border); border-radius: 10px;
    font-size: 13px; font-family: inherit;
    background: var(--input-bg); color: var(--text-primary);
    outline: none; appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238A8278' stroke-width='1.5' stroke-linecap='round'%3E%3Cpolyline points='6 8 10 12 14 8'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
}
.vs-select:focus { border-color: var(--accent-rose, #C9A8A8); }

/* 模型与连接页的站点/密钥/模型下拉：更大触控区 + 更清晰的独立 UI */
#api-config-panel .vs-select, #api-manager-wrap .vs-select, .simple-slot-card .vs-select, .task-model-row .vs-select {
    min-height: 46px; padding: 11px 34px 11px 12px; font-size: 13.5px; border-radius: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238A8278' stroke-width='1.6' stroke-linecap='round'%3E%3Cpolyline points='6 8 10 12 14 8'/%3E%3C/svg%3E");
    background-position: right 12px center; background-size: 18px; cursor: pointer;
}
.vs-fields { margin-top: 2px; }
.vs-field-label {
    display: flex; align-items: center;
    font-size: 12.5px; color: var(--text-secondary);
    margin: 14px 0 6px; letter-spacing: 0.3px;
}
.vs-status-line { font-size: 12px; color: var(--text-muted); margin-top: 8px; }
/* 语音服务「检测」按钮（2028-09：一键验密钥，线条风、不出现系统按钮样式） */
.vs-check-btn {
    display: inline-flex; align-items: center; justify-content: center;
    margin-top: 10px; padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid rgba(196,168,106,0.5);
    background: rgba(196,168,106,0.10);
    color: #A98A3E;
    font-family: inherit; font-size: 12.5px; letter-spacing: 0.3px;
    cursor: pointer;
    -webkit-appearance: none; appearance: none;
    transition: transform 0.16s ease, background 0.2s ease, border-color 0.2s ease;
}
.vs-check-btn:hover { background: rgba(196,168,106,0.18); border-color: rgba(196,168,106,0.75); }
.vs-check-btn:active { transform: scale(0.96); }
/* ★ 2028-09 检测结果三件套（密钥 / 发语音开关 / 有没有音色）：把「到底缺哪一件」一眼说清，
   缺的那件当场给按钮修（她账号的真实病根就是「检测说正常、他却不发语音」）。 */
.vs-chk-box {
    margin-top: 10px; padding: 12px 13px;
    border: 1px solid var(--border); border-radius: 14px;
    background: var(--surface);
    animation: vs-chk-in .22s ease both;
}
@keyframes vs-chk-in { from { opacity: 0; } to { opacity: 1; } }
.vs-chk-line { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.7; color: var(--text-secondary); }
.vs-chk-line + .vs-chk-line { margin-top: 8px; }
.vs-chk-line > span:nth-child(2) { flex: none; color: var(--text-primary); min-width: 96px; }
.vs-chk-txt { flex: 1; min-width: 0; color: var(--text-muted); }
.vs-chk-mark { flex: none; width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; position: relative; }
.vs-chk-mark.ok { background: rgba(140,170,120,.18); border: 1px solid rgba(140,170,120,.6); }
.vs-chk-mark.ok::after {
    content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
    border-right: 1.6px solid #6E8C5C; border-bottom: 1.6px solid #6E8C5C; transform: rotate(40deg);
}
.vs-chk-mark.no { background: rgba(201,168,168,.16); border: 1px solid rgba(180,110,110,.5); }
.vs-chk-mark.no::after {
    content: ''; position: absolute; left: 6px; top: 1px; width: 1.6px; height: 9px; background: #9A6A6A; transform: rotate(-20deg);
}
.vs-chk-actions { margin-top: 12px; }
.vs-chk-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 9px 16px; border-radius: 999px;
    font-family: inherit; font-size: 12.5px; letter-spacing: .3px; cursor: pointer;
    -webkit-appearance: none; appearance: none;
    transition: transform .16s ease, background .2s ease;
}
.vs-chk-btn.primary { border: 1px solid rgba(196,168,106,.7); background: rgba(196,168,106,.16); color: #96762F; }
.vs-chk-btn.primary:hover { background: rgba(196,168,106,.26); }
.vs-chk-btn:active { transform: scale(.96); }
/* 听感模型（2028-09）：跟在「语音服务」一键配置下面，一条细分割线 + 一个小「高级」角标（不是系统标签样式） */
.vs-tone-row { margin-top: 16px; padding-top: 4px; border-top: 1px solid rgba(196,168,106,0.22); }
.vs-tone-row .vs-field-label { margin-top: 12px; }
.vs-tone-prem {
    margin-left: 6px; padding: 1px 7px;
    font-size: 10px; letter-spacing: 0.4px; line-height: 1.6;
    color: #A98A3E; background: rgba(196,168,106,0.14);
    border: 1px solid rgba(196,168,106,0.45); border-radius: 999px;
}
.vs-heal {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(196,168,106,0.12);
    border: 1px dashed rgba(196,168,106,0.45);
    color: #A98A3E;
    font-size: 12px;
    line-height: 1.6;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.2s ease;
}
.vs-heal:hover { border-color: rgba(196,168,106,0.7); }
.vs-heal:active { transform: scale(0.98); }
.vs-comp-line {
    font-size: 13px;
    color: var(--text-primary);
    background: rgba(201, 168, 168, 0.08);
    border: 1px solid rgba(201, 168, 168, 0.25);
    border-radius: 10px;
    padding: 9px 12px;
    margin-top: 4px;
    letter-spacing: 0.5px;
}
.vs-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.vs-btn-primary {
    padding: 8px 16px; border: none; border-radius: 10px;
    background: var(--accent); color: #fff;
    font-size: 12.5px; font-family: inherit; cursor: pointer; white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0,0,0,0.10);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.vs-btn-primary:active { transform: scale(0.97); }
.vs-btn-ghost {
    padding: 8px 14px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface-solid); color: var(--text-primary);
    font-size: 12.5px; font-family: inherit; cursor: pointer; white-space: nowrap;
    transition: background 0.15s ease;
}
.vs-btn-ghost:active { background: rgba(201, 168, 168, 0.1); }
.vs-saved-tip { font-size: 11px; color: var(--success, #7d9070); }

/* ===== 声音转写与克隆（新 UI） ===== */
.vst-ok { color: var(--success, #6f8a63); font-weight: 600; }
.vst-idle { color: var(--text-muted); }
.vst-warn { color: #c77; margin-top: 2px; }

/* 大上传按钮 */
.vs-upload-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    width: 100%; padding: 13px 16px; margin-top: 10px;
    border: none; border-radius: 12px;
    background: var(--accent); color: #fff;
    font-size: 13px; font-family: inherit; font-weight: 500; cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.vs-upload-btn:active { transform: scale(0.98); }
.vs-upload-btn svg { flex-shrink: 0; }

/* 参考音频卡片 */
.vs-ref-wrap { margin-top: 10px; }
.vs-ref-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 8px 6px 6px; border-radius: 12px;
    background: var(--surface-solid);
    border: 1px solid var(--border);
    color: var(--text-primary); font-size: 12.5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.vs-ref-play {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    border: none; background: var(--accent); color: #fff; cursor: pointer; flex-shrink: 0;
    transition: transform 0.12s ease;
}
.vs-ref-play:active { transform: scale(0.92); }
.vs-ref-play .vp-pause { display: none; }
.vs-ref-chip.playing .vp-pause { display: inline; }
.vs-ref-chip.playing .vp-play { display: none; }
.vs-ref-name { letter-spacing: 0.2px; }
.vs-ref-x {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border: none; background: transparent;
    color: var(--text-muted); font-size: 15px; cursor: pointer; line-height: 1;
    transition: color 0.15s ease, transform 0.12s ease;
}
.vs-ref-x:hover { color: var(--danger, #b5495b); }
.vs-ref-x:active { transform: scale(0.9); }

/* 听写行（语种下拉 + 听写按钮） */
.vs-transcribe-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.vs-transcribe-btn { flex: 1; }
.vs-transcribe-btn.busy { opacity: 0.7; cursor: wait; }
.vs-transcribe-btn.fail { color: var(--danger, #b5495b); border-color: rgba(181, 73, 91, 0.4); background: rgba(181, 73, 91, 0.06); }
.vs-btn-primary.busy { opacity: 0.75; cursor: wait; }
.vs-btn-primary.fail { background: var(--danger, #b5495b); }

/* 试听样本区 */
.vs-preview-samples { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.vs-preview-loading { font-size: 12px; color: var(--text-muted); }
.vs-sample {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface-solid); color: var(--text-primary);
    font-size: 12.5px; font-family: inherit; cursor: pointer; text-align: left;
    transition: background 0.15s ease;
}
.vs-sample:active { background: rgba(201, 168, 168, 0.12); }
.vs-sample-icon { flex-shrink: 0; color: var(--accent-rose, #C9A8A8); }
.vs-sample-lang { flex-shrink: 0; font-weight: 600; color: var(--accent-rose, #C9A8A8); min-width: 26px; }
.vs-sample-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.vs-sample-dot { flex-shrink: 0; color: var(--accent-rose, #C9A8A8); }
.vs-sample-dis { opacity: 0.5; cursor: default; pointer-events: none; }

/* 滑块行 */
.vs-slider-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.vs-slider-label { font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; }
.vs-slider-row input[type="range"] { flex: 1; }
.vs-slider-val { font-size: 12px; color: var(--accent-rose, #C9A8A8); font-weight: 600; min-width: 36px; text-align: right; font-variant-numeric: tabular-nums; }

/* ===== 定制开关（替代原生 checkbox） =====
   ⚠ 这一套 `ck-switch` 在 `panels-grammar.css` 里**同样有一份逐字副本**（语法那一页底部的
     「聊天时顺带纠正」开关；那一页不加载本文件，所以必须自带）。两处**改一处就要同步改另一处**，
     否则「只有底色变化、没有滑块与滑动动画」（长期规则 #194）。 */
.vs-switch-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 0; gap: 12px;
}
.vs-switch-label {
    display: inline-flex; align-items: center;
    font-size: 13.5px; color: var(--text-primary); letter-spacing: 0.2px;
}
.ck-switch { position: relative; display: inline-flex; cursor: pointer; flex-shrink: 0; }
.ck-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ck-switch-track {
    display: inline-block; width: 42px; height: 24px; border-radius: 12px;
    background: rgba(30, 28, 26, 0.12);
    box-shadow: inset 0 1px 2px rgba(30, 28, 26, 0.08);
    transition: background 0.2s ease;
    position: relative;
}
.ck-switch-thumb {
    position: absolute; top: 2px; left: 2px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(30, 28, 26, 0.15), 0 2px 5px rgba(30, 28, 26, 0.1);
    transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ck-switch input:checked + .ck-switch-track {
    background: linear-gradient(135deg, var(--accent-rose, #C9A8A8), #B88F8F);
    box-shadow: inset 0 1px 2px rgba(30, 28, 26, 0.06), 0 0 8px rgba(201, 168, 168, 0.35);
}
.ck-switch input:checked + .ck-switch-track .ck-switch-thumb { transform: translateX(18px); }

/* ===== 内联小播放器（试听音色/铃声，可反复播放） ===== */
.vs-player {
    display: flex; align-items: center; gap: 10px;
    margin-top: 12px; padding: 9px 12px;
    background: rgba(201, 168, 168, 0.08);
    border: 1px solid rgba(201, 168, 168, 0.22);
    border-radius: 12px;
    color: var(--accent-rose, #b08585);
    animation: fadeIn 0.25s ease;
}
.vs-player-btn {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    border: 1.2px solid currentColor; background: transparent;
    color: inherit; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.vs-player-btn .vp-pause { display: none; }
.vs-player.voice-playing .vs-player-btn .vp-play { display: none; }
.vs-player.voice-playing .vs-player-btn .vp-pause { display: block; }
.vs-player-track {
    flex: 1; height: 4px; border-radius: 2px;
    background: rgba(201, 168, 168, 0.22); cursor: pointer;
    position: relative;
}
.vs-player-fill {
    position: absolute; left: 0; top: 0; bottom: 0; width: 0;
    border-radius: 2px; background: currentColor;
}
.vs-player .voice-wave i { background: currentColor; }
.vs-player-time { font-size: 11px; font-variant-numeric: tabular-nums; opacity: 0.8; }

/* 试听三语按钮行 */
.vs-btn-play { display: inline-flex; align-items: center; gap: 7px; margin-right: 8px; margin-bottom: 6px; }
.vs-btn-play:active { transform: scale(0.95); }

/* 自定义语种下拉（替换原生select系统弹框） */
.vs-dropdown { position: relative; display: inline-block; }
.vs-dropdown-btn {
    cursor: pointer; padding-right: 26px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238A8278' stroke-width='1.5' stroke-linecap='round'%3E%3Cpolyline points='6 8 10 12 14 8'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
}
.vs-dropdown-btn:active { transform: scale(0.97); }
.vs-dropdown-full { display: block; }
.vs-dropdown-full .vs-dropdown-list { width: 100%; min-width: auto; }
.vs-dropdown-list { position: absolute; top: 100%; left: 0; z-index: 20; min-width: 120px; margin-top: 4px; padding: 4px; border-radius: 10px; background: var(--surface-solid); box-shadow: var(--shadow-md); border: 1px solid var(--border); animation: fadeIn 0.15s ease; }
.vs-dropdown-item { display: block; width: 100%; padding: 8px 12px; border: none; border-radius: 8px; background: transparent; font-size: 13px; font-family: inherit; text-align: left; color: var(--text-primary); cursor: pointer; transition: background 0.15s ease, transform 0.12s ease; }
.vs-dropdown-item:hover { background: var(--accent-rose-light); }
.vs-dropdown-item:active { transform: scale(0.97); }
.vs-dropdown-item.on { color: var(--accent-rose); font-weight: 600; }
/* ★ 2028-09：语音服务的密钥下拉——选中的那把在列表里带一个勾；「还没选/不在这个站」时按钮文字压淡，不假装已选 */
.vs-dropdown-item.on::after { content: '✓'; float: right; font-weight: 600; }
.vs-select.vs-key-unset { color: var(--text-muted); }

/* ===== vs-card 内嵌元素微调（MCP列表/API配置/提示文字） ===== */
.vs-card .hint {
    font-size: 11px; color: var(--text-muted); margin-top: 4px;
    font-style: normal; line-height: 1.5;
}
.vs-card .mcp-item {
    padding: 8px 0; border-bottom: 1px solid rgba(196, 168, 106, 0.12);
}
.vs-card .mcp-item:last-child { border-bottom: none; }
.vs-card .api-config-item {
    background: rgba(255, 255, 255, 0.4) !important;
    margin: 4px 0; border-radius: 10px;
}
.vs-card .mcp-tool-detail.open {
    display: block; padding: 6px 0 8px 12px;
    border-top: 1px dashed rgba(196, 168, 106, 0.18);
    font-size: 12px; color: var(--text-secondary);
}
.vs-card .api-btn {
    background: var(--surface-solid);
}
.vs-card .api-btn:hover { background: var(--accent-light); }

/* 确保 vs-input/vs-select 在设置子页正文（统一外壳的滚动体）内全宽 */
.mysec-body .vs-input,
.mysec-body .vs-select {
    width: 100%; box-sizing: border-box;
}

/* 推送状态支持多行 */
#push-device-status {
    white-space: normal; line-height: 1.5;
}

/* ===== 自定义下拉选择器（替代原生 select） ===== */
.vs-custom-select {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; box-sizing: border-box; margin-top: 0;
    padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px;
    font-size: 13px; font-family: inherit; cursor: pointer;
    background: var(--input-bg); color: var(--text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.vs-custom-select:hover { border-color: var(--accent-rose, #C9A8A8); }
.vs-custom-select:active { transform: scale(0.98); }
.vs-custom-select-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-custom-select-chevron { flex-shrink: 0; color: var(--text-muted); margin-left: 8px; transition: transform 0.2s ease; }
.vs-custom-select-drop {
    position: absolute; z-index: 2000; left: 18px; right: 18px; max-height: 220px; overflow-y: auto;
    background: var(--surface); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border); border-radius: 12px;
    box-shadow: var(--shadow-md); padding: 6px;
}
.vs-drop-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 12px; border-radius: 8px; font-size: 13px;
    color: var(--text-primary); cursor: pointer;
    transition: background 0.12s ease;
}
.vs-drop-item:hover { background: var(--accent-rose-light, rgba(201,168,168,0.1)); }
.vs-drop-item:active { transform: scale(0.97); }
.vs-drop-check { font-size: 14px; color: var(--accent-rose, #C9A8A8); font-weight: 600; }

/* ===== 任务模型分派 ===== */
.task-model-row {
    margin-bottom: 12px;
    padding: 14px 16px;
    background: rgba(255, 252, 249, 0.45);
    border: 1px solid rgba(196, 168, 106, 0.10);
    border-radius: 12px;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.task-model-row:hover {
    border-color: rgba(196, 168, 106, 0.22);
    background: rgba(255, 252, 249, 0.68);
    box-shadow: 0 1px 3px rgba(30, 28, 26, 0.03);
}
.task-model-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.5px;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.task-model-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-rose, #C9A8A8);
    flex-shrink: 0;
    opacity: 0.75;
}
.task-model-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 10px;
    padding-left: 14px;
}
.task-model-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* 哄睡外语翻译方式（主模型一次生成双语 / 辅助模型逐句翻译） */
.sleep-tr-mode-opts {
    display: flex;
    gap: 8px;
    padding-left: 14px;
}
.sleep-tr-mode-opt {
    flex: 1;
    padding: 10px 8px;
    border-radius: 12px;
    font-size: 13px;
    text-align: center;
    line-height: 1.5;
    color: var(--text-muted);
    background: rgba(127, 127, 127, 0.05);
    border: 1px solid var(--border, rgba(180, 160, 140, 0.22));
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    font-family: var(--font-body, 'Noto Serif SC', serif);
}
.sleep-tr-mode-opt:hover {
    border-color: rgba(196, 168, 106, 0.35);
    color: var(--text-secondary);
}
.sleep-tr-mode-opt.active {
    color: var(--text-primary);
    border-color: rgba(196, 168, 106, 0.45);
    background: var(--rose-light, rgba(212, 184, 184, 0.12));
}
.stm-rec {
    display: inline-block;
    margin-left: 5px;
    font-size: 10px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--rose-light, rgba(212, 184, 184, 0.16));
    color: var(--accent-rose, #B48A6A);
    vertical-align: 1px;
}
.task-model-select {
    flex: 1;
    margin-top: 0;
    font-size: 12px;
}
.task-model-fetch-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--input-bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    padding: 0;
    outline: none;
}
.task-model-fetch-btn:hover {
    border-color: var(--accent-rose, #C9A8A8);
    background: rgba(201, 168, 168, 0.08);
}
.task-model-fetch-btn:active {
    transform: scale(0.93);
    background: rgba(201, 168, 168, 0.14);
}
.task-model-fetch-icon {
    display: block;
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--text-muted);
    border-top-color: transparent;
    border-radius: 50%;
    transition: border-color 0.2s ease, transform 0.3s ease;
}
.task-model-fetch-btn:hover .task-model-fetch-icon {
    border-color: var(--accent-rose, #C9A8A8);
    border-top-color: transparent;
    transform: rotate(120deg);
}
.task-model-fetch-btn:active .task-model-fetch-icon {
    transform: rotate(330deg);
    transition: transform 0.4s ease;
}

/* 生图任务分隔行 */
.task-gen-sep {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0 4px 0; margin-top: 4px;
    border-top: 1px solid rgba(196,168,106,0.25);
}
.task-gen-sep span { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.task-gen-sep-en { font-family: 'Playfair Display', serif; font-style: italic; font-size: 11px !important; color: var(--gold-dark) !important; font-weight: 400 !important; }
.task-apply-all-btn {
    margin-left: auto; padding: 4px 12px;
    border: 1px solid var(--gold-dark); border-radius: 14px;
    background: rgba(196,168,106,0.08); color: var(--gold-dark);
    font-size: 11px; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
    white-space: nowrap;
}
.task-apply-all-btn:hover { background: rgba(196,168,106,0.18); }

/* 工具开关（2026 重排：改为分组折叠 .vs-tool-group，见下方二级子界面区块） */
.tool-row { align-items: flex-start !important; padding: 8px 0; }
.tool-info { flex: 1; min-width: 0; padding-right: 10px; display: flex; flex-direction: column; }
.tool-name { font-size: 13px; color: var(--text-primary); line-height: 1.4; }
.tool-id {
    font-size: 10px; color: var(--text-muted); margin-top: 1px;
    font-family: 'SF Mono', 'Consolas', monospace;
}

/* ===== API 中转站改版：三个入口 / 管理中转站 / 简便版 / 高级版 ===== */
.mysec-body.api-view-open { animation: apiFadeIn 0.28s ease; }
.api-view-toolbar { margin-bottom: 10px; }
.simple-slot-card:focus-within { border-color: var(--accent-rose, #C9A8A8); }
@keyframes apiFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.api-entry-card {
    cursor: pointer;
    position: relative;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.api-entry-card:hover {
    transform: translateY(-1px);
    border-color: var(--accent-rose, #C9A8A8);
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
.api-entry-card:active { transform: scale(0.985); }
.api-entry-head { display: flex; align-items: baseline; gap: 10px; }
.api-entry-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.api-entry-en { font-family: 'Playfair Display', serif; font-style: italic; font-size: 11px; color: var(--gold-dark); }
.api-entry-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.55; margin-top: 6px; }
.vs-card-arrow { position: absolute; right: 16px; top: 22px; color: var(--text-muted); font-size: 22px; line-height: 1; }

/* 管理中转站 */
#api-manager-wrap { display: block; }
.api-station-card {
    border: 1px solid var(--border); border-radius: 14px;
    background: var(--card-bg); padding: 12px 14px; margin-bottom: 12px;
}
.api-station-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.api-station-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.api-station-url { font-size: 11px; color: var(--text-muted); word-break: break-all; flex-basis: 100%; font-family: 'SF Mono','Consolas',monospace; }
.api-station-head-actions { margin-left: auto; display: flex; gap: 6px; }
.api-station-keys { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.api-key-item {
    border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px;
    background: rgba(255,255,255,0.4);
}
.api-alias-input {
    width: 100%; margin-top: 0; font-size: 13px; padding: 6px 10px;
    border: 1px solid transparent; border-radius: 8px; background: transparent;
    color: var(--text-primary); transition: background-color 0.15s ease, border-color 0.15s ease;
}
.api-alias-input:focus { border-color: var(--accent-rose, #C9A8A8); background: var(--input-bg); }
.api-key-meta { font-size: 11px; color: var(--text-muted); margin-top: 3px; font-family: 'SF Mono','Consolas',monospace; }
.api-key-actions { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }

/* 简便版 / 高级版 */
.simple-mode-banner {
    font-size: 12px; color: var(--text-secondary); line-height: 1.5;
    background: rgba(212,184,184,0.12); border: 1px solid rgba(212,184,184,0.25);
    border-radius: 10px; padding: 9px 12px; margin-bottom: 12px;
}
.simple-slot-card {
    border: 1px solid var(--border); border-radius: 14px;
    background: var(--card-bg); padding: 12px 14px; margin-bottom: 12px;
    transition: border-color 0.18s ease;
}
.simple-slot-card:focus-within { border-color: var(--accent-rose, #C9A8A8); }

/* ===== 语音：音色库 ===== */
.vs-voice-library { display: flex; flex-direction: column; gap: 10px; }
.vs-voice-empty { font-size: 13px; color: var(--text-muted); padding: 14px 4px; text-align: center; }
.vs-voice-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px;
    background: var(--surface-solid);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.vs-voice-item.is-active { border-color: var(--accent-rose, #C9A8A8); box-shadow: 0 0 0 1px var(--accent-rose, #C9A8A8); }
.vs-voice-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; }
.vs-voice-playbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    border: none; background: var(--accent); color: #fff; cursor: pointer;
    transition: transform 0.12s ease;
}
.vs-voice-playbtn:active { transform: scale(0.92); }
.vs-voice-playbtn .vp-pause { display: none; }
.vs-voice-playbtn.voice-sample-playing .vp-pause { display: inline; }
.vs-voice-playbtn.voice-sample-playing .vp-play { display: none; }
.vs-voice-name { font-size: 14px; font-weight: 600; color: var(--text-primary); font-family: var(--font-serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-voice-badge { flex-shrink: 0; font-size: 11px; color: var(--accent-rose, #C9A8A8); border: 1px solid currentColor; border-radius: 6px; padding: 1px 6px; }
.vs-voice-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.vs-voice-act {
    border: 1px solid var(--border); background: transparent; color: var(--text-secondary);
    font-size: 12px; padding: 5px 8px; border-radius: 8px; cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.vs-voice-act:active { transform: scale(0.96); }
.vs-voice-act:hover { background: var(--surface); color: var(--text-primary); }
.vs-voice-del { color: var(--danger, #b5495b); }
.vs-voice-rename-input {
    width: 100%; max-width: 150px; border: 1px solid var(--accent-rose, #C9A8A8);
    border-radius: 7px; padding: 4px 8px; font-size: 13px; font-family: inherit; color: var(--text-primary);
    background: var(--surface); outline: none;
}
.vs-new-voice-btn svg { flex-shrink: 0; }

/* ===== 语音：新建音色 分步页 ===== */
/* 全屏浮层挂 #app（position:absolute; inset:0），不撑满桌面宽屏；动画只挂 .vs-create-open，避免「显示→消失→再显示」一闪 */
.voice-create-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    max-width: none; width: 100%; height: 100%;
    transform: translateX(100%);
    background: var(--bg-primary); z-index: 250;
    display: flex; flex-direction: column;
}
.voice-create-overlay.vs-create-open { transform: translateX(0); animation: vcSlideIn 0.26s cubic-bezier(0.22,0.61,0.36,1) both; }
@keyframes vcSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.voice-create-overlay.vs-create-close { animation: vcSlideOut 0.22s ease-in forwards; }
@keyframes vcSlideOut { from { transform: translateX(0); } to { transform: translateX(100%); } }
.vs-create-panel { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.vs-create-header {
    display: grid; grid-template-columns: 44px 1fr 44px; align-items: center;
    padding: 12px 14px; background: var(--surface-solid);
    border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.vs-create-back { background: none; border: none; padding: 4px; display: flex; align-items: center; justify-self: start; color: var(--text-primary); cursor: pointer; }
.vs-create-title { text-align: center; font-size: 16px; font-weight: 600; font-family: var(--font-serif); color: var(--text-primary); }
.vs-create-spacer { width: 28px; justify-self: end; }
.vs-create-steps {
    display: flex; align-items: center; gap: 4px; flex-wrap: nowrap;
    padding: 10px 16px; background: var(--bg-chat); border-bottom: 1px solid var(--border); flex-shrink: 0;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.vs-step-tag { flex: none; font-size: 11.5px; color: var(--text-secondary); background: var(--surface-solid); border: 1px solid var(--border); padding: 3px 7px; border-radius: 8px; white-space: nowrap; }
.vs-step-arrow { color: var(--text-muted); font-size: 11px; flex: none; }
@media (max-width: 370px) {
    .vs-step-tag { font-size: 10px; padding: 2px 5px; }
    .vs-step-arrow { margin: 0 -3px; }
}
.vs-create-body { flex: 1; overflow-y: auto; padding: 14px 16px calc(24px + env(safe-area-inset-bottom,0px)); }
.vs-step-block {
    border: 1px solid var(--border); border-radius: 14px; background: var(--surface-solid);
    padding: 14px 16px; margin-bottom: 14px;
}
.vs-step-head { display: flex; align-items: center; gap: 8px; }
.vs-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%; background: var(--accent-rose, #C9A8A8); color: #fff;
    font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.vs-step-name { font-size: 15px; font-weight: 600; font-family: var(--font-serif); color: var(--text-primary); }
.vs-step-desc { font-size: 12.5px; color: var(--text-secondary); margin: 6px 0 4px 30px; line-height: 1.5; }
.vs-upload-zone { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 12px; }
.vs-upload-circle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 72px; height: 72px; border-radius: 50%; border: 1.5px dashed var(--accent-rose, #C9A8A8);
    background: rgba(212,184,184,0.10); cursor: pointer;
    font-size: 28px; color: var(--accent-rose, #C9A8A8); font-weight: 600; font-family: var(--font-serif-en);
    transition: transform 0.15s ease, background 0.15s ease;
}
.vs-upload-circle:active { transform: scale(0.94); }
.vs-upload-label {
    border: none; background: transparent; font-size: 13px; font-family: var(--font-serif); cursor: pointer;
    text-decoration: underline; text-underline-offset: 3px; color: var(--accent-rose, #C9A8A8);
}
.vs-upload-tip { font-size: 12px; color: var(--text-muted); min-height: 16px; }
.vs-trans-textarea { min-height: 78px; }
.vs-clone-btn { width: 100%; }
.vs-preview-zone {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    border: 1px dashed var(--border); border-radius: 12px; padding: 18px 14px; margin-top: 10px;
    background: var(--bg-chat);
}
.vs-preview-idle { font-size: 13px; color: var(--text-muted); }
.vs-preview-play {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--accent); color: #fff; cursor: pointer;
    transition: transform 0.12s ease;
}
.vs-preview-play:active { transform: scale(0.92); }
.vs-preview-txt { font-size: 13px; color: var(--text-secondary); }
.vs-preview-actions { display: flex; gap: 10px; margin-top: 4px; }
.vs-preview-actions .vs-btn-primary, .vs-preview-actions .vs-btn-ghost { min-width: 104px; }

[data-theme-mode="dark"] .vs-voice-item { background: var(--surface-solid); }
[data-theme-mode="dark"] .vs-upload-circle { background: rgba(212,184,184,0.14); }
[data-theme-mode="dark"] .vs-preview-zone { background: var(--bg-chat); }

/* ===== 语音服务商：站点+密钥 一行两列 ===== */
.vs-svc-row { display: flex; gap: 8px; align-items: flex-end; }
.vs-svc-col { flex: 1; min-width: 0; }
.vs-ellipsis { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.vs-svc-col .vs-dropdown-list { min-width: 0; width: 100%; max-width: 100%; }
/* ★ 2026-11 甲方第 4 条（「自接的这个地方明显出框」）：两列的格子必须收在自己的列宽里。
   原来列表写死 min-width:200px，右列只有一百来像素 → 列表直接伸出卡片外面。 */
.vs-svc-col .vs-dropdown { display: block; width: 100%; max-width: 100%; }
.vs-svc-col .vs-dropdown-btn { display: flex; align-items: center; gap: 4px; width: 100%; max-width: 100%; min-width: 0; overflow: hidden; }

/* ★ 2026-11 甲方第 4/6 条（「ui 优化一下真的很丑很乱」+「检测语音服务多余」）：
   语音服务卡的动作区收成一条 —— 左边一颗主按钮（一键配置），右边一行小字（测一下）。
   检测原本和主按钮长得一模一样并排摆着，她才不知道该点哪个。 */
.vs-svc-card .vs-field-label { margin-top: 12px; }
.vs-svc-card .vs-dropdown-full { width: 100%; max-width: 100%; }
.vs-svc-card .vs-dropdown-full .vs-dropdown-btn { width: 100%; max-width: 100%; min-width: 0; }
.vs-svc-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 14px 0 2px; }
.vs-svc-acts .vs-btn-primary { flex: 1 1 auto; min-width: 0; }
.vs-quiet-link {
    flex: 0 0 auto; padding: 6px 2px; border: 0; background: none;
    color: var(--text-muted); font: inherit; font-size: 11.5px;
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.vs-quiet-link:active { opacity: 0.7; }

/* ===== 听写语言选择 + 次级按钮（清晰的框） ===== */
.vs-btn-secondary {
    padding: 8px 16px; border: 1px solid var(--accent-rose, #C9A8A8); border-radius: 10px;
    background: rgba(212,184,184,0.10); color: var(--text-primary);
    font-size: 12.5px; font-family: inherit; cursor: pointer; white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.vs-btn-secondary:active { background: rgba(212,184,184,0.20); }
.vs-asr-hint { font-size: 12px; color: var(--text-secondary); margin-top: 12px; }
.vs-lang-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.vs-lang-chip {
    border: 1px solid var(--border); background: var(--surface-solid); color: var(--text-secondary);
    font-size: 12px; padding: 6px 12px; border-radius: 16px; cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.vs-lang-chip.is-on { background: var(--accent-rose, #C9A8A8); border-color: var(--accent-rose, #C9A8A8); color: #fff; }
.vs-step-block { box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.vs-transcribe-row { margin-top: 10px; }
.vs-limit-hint { color: var(--danger, #b5495b); font-weight: 600; }
.vs-preview-play svg, .vs-voice-playbtn svg, .vs-upload-circle svg { display: block; }

/* ===== 模型与连接：模式选择 + 简洁版/高级版 + 管理中转站 ===== */
.api-page-hub { min-height: 200px; }
.api-page-loading { text-align: center; color: var(--text-muted); padding: 40px 0; font-size: 13px; letter-spacing: 1px; }

/* 模式选择条：并排二选一，启用中的高亮 */
.api-mode-selector {
    display: flex; gap: 10px; margin-bottom: 16px;
}
.api-mode-opt {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 12px 10px; border: 1px solid var(--border); border-radius: 14px;
    background: var(--surface-solid); color: var(--text-secondary); cursor: pointer;
    font-family: inherit; transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.api-mode-opt:active { transform: scale(0.98); }
.api-mode-name { font-size: 15px; font-weight: 600; font-family: var(--font-serif); color: var(--text-primary); }
.api-mode-opt.active { border-color: var(--accent-rose, #C9A8A8); background: rgba(212,184,184,0.14); box-shadow: 0 0 0 1px rgba(201,168,168,0.25), 0 6px 16px rgba(201,168,168,0.14); }
.api-mode-opt.active .api-mode-name { color: var(--text-primary); }
.api-mode-en { font-family: 'Playfair Display', serif; font-style: italic; font-size: 10px; color: var(--gold-dark); opacity: 0.6; letter-spacing: 1px; }

/* 面板头 */
.api-panel-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.api-panel-title { font-size: 16px; font-weight: 600; font-family: var(--font-serif); color: var(--text-primary); }
.api-panel-en { font-family: 'Playfair Display', serif; font-style: italic; font-size: 11px; color: var(--gold-dark); opacity: 0.75; letter-spacing: 1px; }
.api-panel-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 12px; }

/* 简洁版小卡 */
.simple-slot-label { font-size: 14px; font-weight: 600; font-family: var(--font-serif); color: var(--text-primary); }
.simple-slot-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin: 4px 0 8px; }
.simple-slot-tutorial { margin-bottom: 6px; }
.simple-slot-tutorial .vs-btn-ghost { padding: 6px 12px; font-size: 12px; color: var(--accent-rose, #C9A8A8); border-color: rgba(201,168,168,0.4); }
.simple-slot-locked {
    display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted);
    font-family: 'SF Mono','Consolas',monospace; padding: 9px 11px; border: 1px dashed var(--border); border-radius: 10px; margin-bottom: 8px;
}
.simple-locked-badge { font-family: var(--font-serif); font-size: 11px; color: var(--accent-rose, #C9A8A8); border: 1px solid currentColor; border-radius: 6px; padding: 0 6px; flex-shrink: 0; }
.simple-slot-hint { font-size: 11.5px; margin-top: 6px; line-height: 1.5; }
.simple-slot-voice-note { font-size: 11.5px; color: var(--text-secondary); margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(196,168,106,0.3); line-height: 1.5; }
.simple-slot-voice-note b { color: var(--rose, #C9A8A8); }

/* 动作行 */
.api-mode-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* 管理中转站标题 */
.api-manager-title { font-size: 14px; font-weight: 600; font-family: var(--font-serif); color: var(--text-primary); margin: 18px 0 2px; padding-top: 16px; border-top: 1px solid var(--border); }

/* 设置首页「模型与连接」卡片上的模式小标 */
.sc-badge {
    margin-left: auto; margin-right: 8px; flex-shrink: 0;
    font-size: 11px; color: var(--accent-rose, #C9A8A8);
    border: 1px solid rgba(201,168,168,0.4); border-radius: 8px; padding: 2px 8px;
}
.settings-card .sc-badge { position: static; }
.sc-badge.sc-badge-warn { color: #b5495b; border-color: rgba(181,73,91,0.5); }
/* 窄屏（<370px）不再整个藏掉「当前：高级版/简洁版」标——安卓用户也要求看到它。
   改为更紧凑显示，避免挤爆布局；iOS/宽屏保持原样。 */
@media (max-width: 370px) {
    .sc-badge { font-size: 10px; padding: 1px 5px; margin-right: 4px; max-width: 96px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .settings-card .sc-badge { flex: 0 0 auto; }
}

/* 一键顺滑：整张卡就是一排「标题＝动作」（点标题当场轻快化），不配按钮、不配小字 */
.perf-settings-card .perf-oneline { flex: 1 1 auto; cursor: pointer; }
.perf-settings-card .perf-oneline:active { color: var(--accent-rose, #C9A8A8); }

/* 训练语音引导里的缓存清单（原来写在内联 style 上，收进样式表） */
.vs-cache-list { margin-top: 10px; font-size: 11px; color: var(--text-muted); }

/* 底部「我的」tab / 设置子标签 / 模型与连接卡片 未配置红点 */
.config-red-dot {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    /* ★ 2026-10 甲方定：小红点一律跟主题色走（--rose） */
    background: var(--rose, #C9A8A8);
    box-shadow: 0 0 0 2px var(--surface-solid, #fff), 0 1px 4px rgba(201,168,168,0.35);
    animation: configDotPulse 2.4s ease-in-out infinite;
    pointer-events: none;
}
.sub-tab-btn[data-sub="settings"], #settings-group-cards .settings-card { position: relative; }

/* 站点/密钥/模型 自绘下拉（替代系统默认 select） */
.api-dd { position: relative; margin-top: 8px; }
.api-dd-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--input-bg); color: var(--text-primary); font-size: 13.5px; font-family: var(--font-body); cursor: pointer; text-align: left; transition: border-color 0.18s ease, box-shadow 0.18s ease; }
.api-dd-btn:active { border-color: var(--accent-rose, #C9A8A8); }
.api-dd-btn::after { content: ''; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); color: var(--text-muted); flex-shrink: 0; margin-top: -3px; transition: transform 0.2s ease; }
.api-dd-btn.open::after { transform: rotate(225deg); margin-top: 3px; }
.api-dd-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; color: var(--text-primary); }
.api-dd-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40; max-height: 250px; overflow-y: auto; background: var(--surface-solid); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 26px rgba(0,0,0,0.12); padding: 5px; }
.api-dd-item { padding: 11px 12px; border-radius: 9px; font-size: 13px; color: var(--text-primary); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.api-dd-item.is-sel { color: var(--accent-rose, #C9A8A8); font-weight: 600; background: rgba(212,184,184,0.14); }
.api-dd-item.is-dis { color: var(--text-muted); cursor: default; }
.api-dd-item:active { background: rgba(212,184,184,0.2); }
.api-dd-group { padding: 9px 12px 3px; font-size: 11px; color: var(--text-muted); letter-spacing: 1px; font-family: var(--font-body); }
.api-dd-group:not(:first-child) { margin-top: 6px; }
.api-dd-placeholder { padding: 10px 12px 4px; font-size: 12px; color: var(--text-muted); font-style: italic; font-family: 'Playfair Display', serif; }
.api-dd-list::-webkit-scrollbar { width: 4px; }
.api-dd-list::-webkit-scrollbar-thumb { background: rgba(30,28,26,0.2); border-radius: 2px; }

/* 红色配置提醒横幅（设置页 / 聊天页顶部） */
/* ★ 2026 用 grid(auto 1fr) 替代 flex：文字列强制 1fr 自动换行，窄屏绝不溢出框内。
   ★ 不设 width:100%：带左右 margin 时 100%+margin 会横向溢出屏幕（右边被切出去，2026 实锤）——块级元素默认 auto 填充父宽减 margin 即可 */
.api-config-banner {
    display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 10px;
    padding: 11px 14px; margin: 0 12px 12px;
    background: linear-gradient(135deg, rgba(181,73,91,0.12), rgba(181,73,91,0.07));
    border: 1px solid rgba(181,73,91,0.35);
    border-radius: 12px; color: #8a3a49; font-size: 13px; line-height: 1.5;
    font-family: var(--font-body);
}
/* ★ 2026 窄屏修复：文字 span 允许收缩换行，不再把内容挤出框外 */
.api-config-banner > span:not(.api-config-banner-dot) {
    min-width: 0; word-break: break-word; overflow-wrap: anywhere;
}
@media (max-width: 380px) {
    .api-config-banner { font-size: 12px; padding: 9px 11px; gap: 8px; margin: 0 10px 10px; }
}
.api-config-banner-dot { flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--danger, #b5495b); box-shadow: 0 0 0 3px rgba(181,73,91,0.18); animation: configDotPulse 3.4s ease-in-out infinite; }
/* ★ 2026-11 三态措辞（TASK-ONBOARD-CINEMA-001）：前半句加重，后半句（去哪修）保持轻 */
.api-config-banner-t { font-weight: 600; color: #7c2f3d; }
[data-theme-mode="dark"] .api-config-banner { background: linear-gradient(135deg, rgba(198,116,122,0.16), rgba(198,116,122,0.08)); border-color: rgba(198,116,122,0.4); color: #e0b3b8; }
[data-theme-mode="dark"] .api-config-banner-t { color: #f0cdd1; }
#chat-view .api-config-banner { margin: 8px 12px 0; }

/* DeepSeek 密钥教程弹窗 */
.api-tutorial-ov {
    position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
    background: rgba(30,28,26,0.35); opacity: 0; transition: opacity 0.2s ease; padding: 24px;
}
.api-tutorial-ov.show { opacity: 1; }
.api-tutorial-panel {
    width: 100%; max-width: 380px; background: var(--surface-solid); border-radius: 18px;
    padding: 22px 20px 18px; box-shadow: 0 16px 40px rgba(0,0,0,0.2); position: relative;
    transform: translateY(10px); transition: transform 0.22s ease;
    font-family: var(--font-body);
}
.api-tutorial-ov.show .api-tutorial-panel { transform: translateY(0); }
.api-tutorial-close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; z-index: 30; border: none; background: rgba(30,28,26,0.08); border-radius: 50%; color: var(--text-secondary); font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }
.api-tutorial-close:active { transform: scale(0.92); }
.api-tutorial-head { text-align: center; margin-bottom: 16px; }
.api-tutorial-en { display: block; font-family: 'Playfair Display', serif; font-style: italic; font-size: 12px; color: var(--gold-dark); opacity: 0.8; letter-spacing: 1px; }
.api-tutorial-title { display: block; font-size: 18px; font-weight: 700; color: var(--text-primary); margin-top: 3px; }
.api-tutorial-body { display: flex; flex-direction: column; gap: 14px; }
.api-tutorial-step { display: flex; gap: 12px; align-items: flex-start; }
.api-tutorial-num { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-rose, #C9A8A8), #B88F8F); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.api-tutorial-txt { font-size: 13.5px; line-height: 1.65; color: var(--text-primary); }
.api-tutorial-txt b { color: var(--accent-rose, #C9A8A8); font-weight: 600; }
.api-tutorial-txt a { color: var(--accent-rose, #C9A8A8); text-decoration: underline; text-underline-offset: 3px; }
.api-tutorial-foot { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(196,168,106,0.25); font-size: 12px; color: var(--text-muted); line-height: 1.6; }
@keyframes configDotPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) {
    .config-red-dot { animation: none; }
}

/* ===== 设置子页内的二级子界面（入口卡 → 子界面，独立返回栈） ===== */
/* 这一层的淡入 keyframes（原来和设置子页共用一份，W1 把子页换成 Example 12 的同空间切换后，
   只留这里一个使用者，所以定义挪到它旁边，别再出现「keyframes 在别处、删一处就断」） */
@keyframes sspFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.ssp-nest {
    position: absolute;
    inset: 0;
    z-index: 30;
    background: var(--bg-chat);
    display: none;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.ssp-nest.ssp-nest-show {
    opacity: 1;
    pointer-events: auto;
    transition: none;
    animation: sspFadeIn 0.22s ease;
}
.ssp-nest-head {
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    align-items: center;
    height: var(--header-height);
    padding: 0 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
}
.ssp-nest-head .ssp-back {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: none; border: none; cursor: pointer;
    color: var(--text-secondary); font-family: inherit; padding: 0;
    transition: background 0.2s ease, color 0.2s ease;
}
.ssp-nest-head .ssp-back:hover { background: rgba(201, 168, 168, 0.12); color: var(--rose, #C9A8A8); }
.ssp-nest-head .ssp-back:active { transform: scale(0.92); }
.ssp-nest-head .ssp-back svg {
    width: 18px; height: 18px;
    stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round; fill: none;
}
.ssp-nest-head .ssp-title {
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ssp-nest-spacer { width: 28px; }
.ssp-nest-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 16px; padding-bottom: calc(16px + var(--safe-bottom, 0px) + var(--kbd-h, 0px)); }

/* ===== 内置能力子界面：工具按组分组的折叠列表 ===== */
.vs-tools-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.vs-tools-hint {
    font-size: 12px; color: var(--text-muted);
    flex: 1; min-width: 140px; line-height: 1.5;
}
.vs-tools-toggle { padding: 6px 12px; font-size: 12px; }
.vs-tool-group {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface, rgba(255, 252, 249, 0.82));
    margin-bottom: 10px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(30, 28, 26, 0.04);
}
.vs-tool-group-head {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 14px; cursor: pointer; user-select: none;
    transition: background 0.15s ease;
}
.vs-tool-group-head:hover { background: var(--accent-light); }
.vs-tool-group-head:active { background: var(--accent-light); }
.vs-tool-group-name {
    font-size: 14px; font-weight: 600; color: var(--text-primary); letter-spacing: 0.3px;
}
.vs-tool-group-count {
    font-size: 11px; color: var(--accent-rose, #C9A8A8);
    border: 1px solid currentColor; border-radius: 999px;
    padding: 0 7px; line-height: 16px; margin-left: 2px;
}
.vs-tool-group-chevron {
    margin-left: auto; color: var(--text-muted);
    transition: transform 0.3s ease; flex-shrink: 0;
}
.vs-tool-group.open .vs-tool-group-chevron { transform: rotate(180deg); }
.vs-tool-group-body {
    max-height: 0; overflow: hidden; opacity: 0;
    padding: 0 14px;
    transition: max-height 0.35s ease, opacity 0.25s ease;
}
.vs-tool-group.open .vs-tool-group-body {
    opacity: 1;
    max-height: 600px;
}
.vs-tool-group-body .tool-row { padding: 8px 0; }

/* ★ 2026-09：「他在聊天里发可下载的文件」那一行（能力开关 + 单次字数上限）
   它常驻置顶、始终展开（折起来就看不见字数那一项了），所以不走 .open 的 max-height 机制。 */
.tool-row-cfg .vs-tool-group-head { cursor: default; align-items: center; }
.tool-row-cfg .vs-tool-group-head:hover,
.tool-row-cfg .vs-tool-group-head:active { background: transparent; }
.tool-row-cfg .vs-tool-group-name {
    flex: 1; min-width: 0;
    font-family: var(--font-body);
    font-size: 13px; font-weight: 500; line-height: 1.45; letter-spacing: 0;
    color: var(--text-primary);
    white-space: normal;
}
.tool-row-cfg .vs-tool-group-count {
    background: none; border: none; padding: 0; margin: 0 8px 0 auto;
    font-size: 10px; color: var(--text-muted); line-height: 1.2;
    opacity: 0.75;
}
.tool-row-cfg .vs-tool-group-body {
    max-height: none; overflow: visible; opacity: 1;
    padding: 0 14px 12px;
}
.tool-cfg-off .vs-tool-group-name { color: var(--text-secondary); }
.ai-file-max-input { width: 84px; text-align: center; }
/* ★ 2028-09（界面核对量的）：数字输入框默认会带浏览器自带的上下小箭头，那就是「系统默认框」，
   准则不允许。关掉它（appearance: none），靠键盘/手输都能改，不牺牲可用性。 */
.ai-file-max-input { appearance: textfield; -moz-appearance: textfield; }
.ai-file-max-input::-webkit-outer-spin-button,
.ai-file-max-input::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
.ai-file-unit { font-size: 12px; color: var(--text-secondary); margin-left: 6px; }
.ai-file-hint {
    font-size: 11px; line-height: 1.65;
    /* 说明文字也是给人看的正文，不能糊（原来 --text-muted 对白底只有 1.9:1） */
    color: var(--text-secondary);
    padding: 8px 2px 0;
    white-space: normal;
}
@media (max-width: 370px) {
    .tool-row-cfg .vs-tool-group-name { font-size: 12px; }
    .ai-file-max-input { width: 70px; }
    .ai-file-hint { font-size: 10.5px; }
}

/* ===== 工具设置 / 外部服务 / 外卖 子界面：分区 + 有框内容 ===== */
.vs-ts-section { margin-bottom: 14px; }
.vs-ts-title {
    display: flex; align-items: baseline; gap: 8px;
    font-size: 13px; font-weight: 600; color: var(--text-secondary);
    letter-spacing: 0.5px; margin: 0 2px 8px;
}
.vs-ts-en {
    font-family: 'Playfair Display', var(--font-decorative), serif;
    font-style: italic; font-size: 11px;
    color: var(--gold, #C4A86A); opacity: 0.7; letter-spacing: 1px; font-weight: 400;
}
.vs-ts-box {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface, rgba(255, 252, 249, 0.82));
    padding: 12px 14px;
    box-shadow: 0 1px 2px rgba(30, 28, 26, 0.04);
}
.vs-ts-desc { font-size: 12px; color: var(--text-muted); line-height: 1.6; margin: 4px 0 2px; }   /* 历史遗留：新文案一律进卡片问号，别再往页面上写小字 */
/* ★ 会客厅第4部分：「固定关闭」那种锁定说明（不是开关，别做成能点的样子）。
   小字 + 细边框，随主题令牌走（暗色下也看得清，不写死颜色）。 */
.vs-ts-locked-tag {
    font-size: 11px; letter-spacing: 0.5px; padding: 2px 8px;
    border: 1px solid var(--border); border-radius: 999px;
    color: var(--text-muted); background: transparent; flex-shrink: 0;
}

/* 新手教程折叠区（外部服务页） */
.vs-ts-help {
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--surface, rgba(255,252,249,0.82)); overflow: hidden;
}
.vs-help-head {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 11px 14px; background: transparent; border: none; cursor: pointer;
    font-family: inherit; font-size: 13px; color: var(--text-primary); text-align: left;
}
.vs-help-arrow { font-size: 12px; color: var(--text-muted); transition: transform 0.2s ease; }
.vs-help-body { padding: 2px 14px 14px; }
.vs-help-step { font-size: 12px; color: var(--text-secondary); line-height: 1.7; margin-top: 10px; }
.vs-help-step b { color: var(--text-primary); font-weight: 600; }
.vs-help-step code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px; color: #A6734F; background: rgba(196,168,106,0.1);
    padding: 1px 4px; border-radius: 4px; word-break: break-all;
}
.vs-ts-slider-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.vs-ts-slider-label { font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
.vs-ts-slider-row input[type="range"] { flex: 1; }
.vs-ts-slider-val {
    font-size: 12px; color: var(--accent-rose, #C9A8A8);
    font-weight: 600; min-width: 24px; text-align: center;
    font-variant-numeric: tabular-nums;
}

/* 入口卡说明文字别压到右侧箭头 */
.api-entry-desc { padding-right: 26px; }

/* ============================================================
   账号与数据 页面（2026 重做）
   ============================================================ */

/* —— 账号信息行 —— */
.vs-account-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 2px;
    border-bottom: 1px dashed var(--border, rgba(196,168,106,0.22));
}
.vs-account-row:last-of-type { border-bottom: none; }
.vs-account-label {
    font-size: 13px; color: var(--text-secondary); letter-spacing: 0.5px;
}
.vs-account-value {
    font-size: 13px; color: var(--text-primary); font-weight: 500;
    font-family: 'Playfair Display', var(--font-decorative), serif;
    letter-spacing: 0.3px;
}
.vs-account-ok { color: var(--success, #6f8a63); }

/* —— 恢复码弹窗：当前状态行（已设置 → ****） —— */
.rc-status-line {
    font-size: 12px; color: var(--text-muted);
    text-align: center; letter-spacing: 0.3px;
    margin: -4px 0 10px;
}

/* —— 数据备份与导出：三种模式清单 —— */
.vs-export-list { margin-top: 4px; }
.vs-export-item {
    position: relative;
    border: 1px solid var(--border, rgba(196,168,106,0.22));
    border-radius: 12px;
    padding: 13px 14px 6px;
    margin-bottom: 12px;
    background: var(--surface, rgba(255,252,249,0.82));
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.vs-export-item:active { border-color: rgba(196,168,106,0.45); }
.vs-export-reco {
    border-color: rgba(201,168,168,0.4);
    background: linear-gradient(180deg, rgba(201,168,168,0.08), rgba(255,252,249,0.82) 70%);
}
.vs-export-head {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.vs-export-title {
    font-size: 14px; font-weight: 600; color: var(--text-primary); letter-spacing: 0.5px;
}
.vs-export-en {
    font-family: 'Playfair Display', var(--font-decorative), serif;
    font-style: italic; font-size: 11px;
    color: var(--gold, #C4A86A); opacity: 0.75; letter-spacing: 1px;
}
.vs-export-badge {
    margin-left: auto;
    font-size: 10px; letter-spacing: 1px;
    color: var(--accent-rose, #C9A8A8);
    border: 1px solid rgba(201,168,168,0.4);
    border-radius: 999px;
    padding: 2px 8px;
    background: rgba(201,168,168,0.08);
}
.vs-export-desc {
    font-size: 12px; color: var(--text-muted); line-height: 1.7;
    margin: 7px 0 4px;
}

/* —— 危险操作区 —— */
.vs-danger-zone {
    border: 1px solid rgba(201,168,168,0.35);
    border-radius: 14px;
    padding: 14px 16px 4px;
    background: linear-gradient(180deg, rgba(201,168,168,0.06), rgba(255,252,249,0.6) 60%);
    margin-top: 4px;
}
.vs-danger-head {
    display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px;
}
.vs-danger-title {
    font-size: 14px; font-weight: 600; color: var(--text-primary); letter-spacing: 0.5px;
}
.vs-danger-en {
    font-family: 'Playfair Display', var(--font-decorative), serif;
    font-style: italic; font-size: 11px;
    color: var(--gold, #C4A86A); opacity: 0.75; letter-spacing: 1px;
}
.vs-danger-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--border, rgba(196,168,106,0.2));
}
.vs-danger-row:last-child { border-bottom: none; }
.vs-danger-info { flex: 1; min-width: 0; }
.vs-danger-name { display: block; font-size: 13px; color: var(--text-primary); font-weight: 500; }
.vs-danger-desc {
    display: block; font-size: 11.5px; color: var(--text-muted);
    line-height: 1.6; margin-top: 3px;
}
.vs-btn-danger {
    flex-shrink: 0;
    padding: 8px 14px; border: 1px solid rgba(181,73,91,0.45); border-radius: 10px;
    background: rgba(181,73,91,0.08); color: var(--danger, #b5495b);
    font-size: 12.5px; font-family: inherit; cursor: pointer; white-space: nowrap;
    transition: background 0.15s ease, transform 0.15s ease;
}
.vs-btn-danger:active { background: rgba(181,73,91,0.16); transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
    .ssp-nest { transition: none; }
    .ssp-nest.ssp-nest-show { animation: none; }
    .vs-tool-group-body { transition: none; }
}

/* ===== 模型与连接：主页模式方块 + 管理入口 + 子面板 + 折叠 + 分层 ===== */
.ssp-save-spacer { width: 48px; }

/* 设置页键盘弹出时不随键盘高度增大底部留白 → 页面保持不动 */
/* ★ 2026 修复：这段 padding-bottom 原加在 flex 容器 #sub-settings 上，会把滚动容器 .settings-main-view
   往上提前 ~88px，导致滚动容器下方、底部导航上方漏出一条"同背景色、盖住设置内容"的空白带（甲方实锤）。
   正确做法：底部留白放进滚动容器内部（.settings-main-view 的 padding-bottom，随内容滚动），
   容器本身不再加，让滚动容器 flex:1 填满整个设置区、无空带。 */
#sub-settings.sub-tab-panel { padding-bottom: 0; }

/* 模型与连接整块正文统一用面板正衬线（与其它设置子页一致，避免细衬线/等宽混排） */
#api-config-panel, #api-manager-wrap, .api-mode-columns, .api-manager-entry, .api-panel-head { font-family: var(--font-body); }

/* 点1：卡片标题/介绍主次分明（标题大粗深，介绍小淡） */
#api-config-panel .vs-card { padding: 18px 16px; }
#api-config-panel .vs-card-title { font-size: 17px; font-weight: 700; color: var(--text-primary); letter-spacing: 0.4px; }
#api-config-panel .vs-card-en { font-size: 12px; margin-top: 3px; opacity: 0.8; }
#api-config-panel .vs-card-desc { font-size: 12.5px; color: var(--text-secondary); line-height: 1.6; margin: 8px 0 4px; }
#api-config-panel .vs-field-label { font-size: 12px; color: var(--text-muted); }

/* 主页两个模式方块 */
.api-mode-columns { display: flex; gap: 12px; margin-bottom: 16px; }
.api-mode-block {
    flex: 1; text-align: left; cursor: pointer;
    border: 1px solid var(--border); border-radius: 16px;
    background: var(--surface-solid); padding: 14px 14px 12px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.api-mode-block:active { transform: scale(0.98); }
.api-mode-block.active { border-color: var(--accent-rose, #C9A8A8); box-shadow: 0 0 0 1px rgba(201,168,168,0.25), 0 6px 16px rgba(201,168,168,0.14); }
.api-mode-block-top { display: flex; align-items: baseline; gap: 8px; }
.api-mode-name { font-size: 16px; font-weight: 600; font-family: var(--font-serif); color: var(--text-primary); }
.api-mode-en { font-family: 'Playfair Display', serif; font-style: italic; font-size: 11px; color: var(--gold-dark); opacity: 0.7; letter-spacing: 1px; }
.api-mode-status { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.api-mode-status-badge { font-size: 11px; border-radius: 8px; padding: 2px 8px; }
.api-mode-status-badge.on { color: #5c7d54; background: rgba(109,138,105,0.14); border: 1px solid rgba(109,138,105,0.3); }
.api-mode-status-badge.off { color: var(--text-muted); border: 1px solid var(--border); }
.api-mode-warn { font-size: 11px; color: var(--danger, #b5495b); border: 1px solid rgba(181,73,91,0.35); border-radius: 8px; padding: 2px 8px; }
.api-mode-actions-top { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.api-mode-switch { width: 100%; padding: 7px 10px; }
.api-mode-switch.is-current { display: inline-flex; align-items: center; justify-content: center; padding: 7px 10px; border: 1px solid rgba(109,138,105,0.3); border-radius: 10px; background: rgba(109,138,105,0.1); color: #5c7d54; font-size: 12.5px; }
.api-mode-enter { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 10px; border: 1px solid rgba(201,168,168,0.55); border-radius: 10px; background: rgba(212,184,184,0.14); color: var(--text-primary); font-size: 12.5px; font-family: inherit; cursor: pointer; white-space: nowrap; transition: background 0.15s ease, border-color 0.15s ease; }
.api-mode-enter:active { background: rgba(212,184,184,0.26); }
.api-mode-enter .api-enter-arrow { color: var(--accent-rose, #C9A8A8); font-size: 15px; line-height: 1; }

/* 管理中转站入口框 */
.api-manager-entry { position: relative; cursor: pointer; width: 100%; text-align: left; margin-bottom: 16px; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; }
.api-manager-entry:hover { transform: translateY(-1px); border-color: var(--accent-rose, #C9A8A8); box-shadow: 0 6px 18px rgba(0,0,0,0.06); }
.api-manager-entry:active { transform: scale(0.985); }
.api-manager-entry-head { display: flex; align-items: baseline; gap: 10px; }
.api-manager-entry-title { font-size: 15px; font-weight: 600; font-family: var(--font-serif); color: var(--text-primary); }
.api-manager-entry-en { font-family: 'Playfair Display', serif; font-style: italic; font-size: 11px; color: var(--gold-dark); opacity: 0.7; }
.api-manager-entry-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.55; margin-top: 6px; }

/* 内置模型卡（2026-11）：一排胶囊选模型，触碰有反馈，窄屏自动换行不横向溢出 */
.api-builtin-card { margin-bottom: 16px; }
.api-builtin-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.api-builtin-title { font-size: 15px; font-weight: 600; font-family: var(--font-serif); color: var(--text-primary); }
.api-builtin-en { font-family: 'Playfair Display', serif; font-style: italic; font-size: 11px; color: var(--gold-dark); opacity: 0.7; }
.api-builtin-badge { font-size: 10px; letter-spacing: 1px; padding: 2px 8px; border-radius: 999px; color: var(--rose-dark, #A97B7B); background: rgba(201,168,168,0.16); }
.api-builtin-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.55; margin-top: 6px; }
.api-builtin-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.api-builtin-chip { font-family: var(--font-body); font-size: 12px; line-height: 1; padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(201,168,168,0.45); background: rgba(255,255,255,0.5); color: var(--text-secondary); cursor: pointer; transition: transform 0.16s ease, border-color 0.16s ease, color 0.16s ease, background 0.16s ease; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.api-builtin-chip:hover { border-color: var(--accent-rose, #C9A8A8); }
.api-builtin-chip:active { transform: scale(0.96); }
.api-builtin-chip.on { color: var(--rose-dark, #A97B7B); border-color: var(--accent-rose, #C9A8A8); background: rgba(201,168,168,0.18); }
/* 模型卡片墙（2026-11-05 宝宝要的：每家什么特点、大概多少星光、现在通不通，一眼能看） */
.api-mcards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
@media (max-width: 370px) { .api-mcards { grid-template-columns: 1fr; } }
.api-mcard { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 10px 11px; border-radius: 14px; border: 1px solid rgba(201,168,168,0.4); background: rgba(255,255,255,0.56); cursor: pointer; transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease; min-width: 0; }
.api-mcard:hover { border-color: var(--accent-rose, #C9A8A8); box-shadow: 0 4px 14px rgba(201,168,168,0.16); }
.api-mcard:active { transform: scale(0.975); }
.api-mcard.on { border-color: var(--accent-rose, #C9A8A8); background: rgba(201,168,168,0.16); }
.api-mcard-top { display: flex; align-items: center; gap: 5px; min-width: 0; }
.api-mcard-dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: rgba(160,175,165,0.9); box-shadow: 0 0 0 2px rgba(160,175,165,0.14); }
.api-mcard-dot.slow { background: rgba(214,178,110,0.95); box-shadow: 0 0 0 2px rgba(214,178,110,0.16); }
.api-mcard-dot.down { background: rgba(201,150,150,0.85); box-shadow: 0 0 0 2px rgba(201,150,150,0.14); }
.api-mcard-name { font-family: var(--font-body); font-size: 11.5px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.api-mcard-tip { font-size: 11px; line-height: 1.5; color: var(--text-secondary); }
.api-mcard-cost { font-size: 10.5px; letter-spacing: 0.2px; color: var(--rose-dark, #A97B7B); }
.api-mcard-st { margin-left: auto; flex: 0 0 auto; font-size: 10px; color: var(--text-secondary); opacity: 0.75; }

/* 四块布局（2026-11 第二批）：顶上并排两颗，下面四张卡，每张都明写扣不扣星光 */
.api-home-acts { display: flex; gap: 12px; margin-bottom: 14px; }
.api-home-act { flex: 1 1 0; min-width: 0; font-family: var(--font-body); font-size: 13px; line-height: 1; padding: 13px 10px; border-radius: 14px; border: 1px solid rgba(201,168,168,0.5); background: rgba(255,255,255,0.55); color: var(--text-primary); cursor: pointer; transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease; }
.api-home-act:hover { border-color: var(--accent-rose, #C9A8A8); }
.api-home-act:active { transform: scale(0.96); }
.api-quad { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.api-quad-block { padding: 14px 15px; }
.api-quad-block.on { border-color: var(--accent-rose, #C9A8A8); }
.api-quad-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.api-quad-title { font-size: 15px; font-weight: 600; font-family: var(--font-serif); color: var(--text-primary); }
.api-quad-en { font-family: 'Playfair Display', serif; font-style: italic; font-size: 11px; color: var(--gold-dark); opacity: 0.7; }
.api-quad-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.55; margin-top: 6px; }
.api-quad-desc b { color: var(--text-primary); font-weight: 600; }
.api-quad-note { font-size: 12px; color: var(--text-secondary); opacity: 0.85; margin-top: 10px; line-height: 1.5; }
.api-quad-actions { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.api-quad-btn { flex: 1 1 0; min-width: 0; font-family: var(--font-body); font-size: 12px; line-height: 1; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(201,168,168,0.45); background: rgba(255,255,255,0.5); color: var(--text-secondary); cursor: pointer; transition: transform 0.16s ease, border-color 0.16s ease, color 0.16s ease, background 0.16s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.api-quad-btn:hover { border-color: var(--accent-rose, #C9A8A8); }
.api-quad-btn:active { transform: scale(0.96); }
.api-quad-btn.on { color: var(--rose-dark, #A97B7B); border-color: var(--accent-rose, #C9A8A8); background: rgba(201,168,168,0.18); }
@media (max-width: 369px) {
  .api-quad-btn { font-size: 11.5px; padding: 9px 8px; }
  .api-home-act { font-size: 12.5px; padding: 12px 8px; }
}

/* 子面板标题（简洁版/高级版/管理中转站） */
.api-panel-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.api-panel-title { font-size: 16px; font-weight: 600; font-family: var(--font-serif); color: var(--text-primary); }
.api-panel-en { font-family: 'Playfair Display', serif; font-style: italic; font-size: 11px; color: var(--gold-dark); opacity: 0.75; letter-spacing: 1px; }
.api-panel-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 12px; }

/* 主模型/备用主模型 切换标签 */
.api-main-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.api-main-tab { flex: 1; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-solid); color: var(--text-secondary); font-size: 13px; font-family: var(--font-serif); cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; }
.api-main-tab.active { border-color: var(--accent-rose, #C9A8A8); color: var(--text-primary); background: rgba(212,184,184,0.14); box-shadow: 0 0 0 1px rgba(201,168,168,0.2); }

/* 可折叠容器 */
.api-collapse { margin-top: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-solid); }
.api-collapse-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 12px; cursor: pointer; user-select: none; transition: background 0.15s ease; }
.api-collapse-head:active { background: rgba(201,168,168,0.1); }
.api-collapse-title { font-size: 13px; font-weight: 600; color: var(--text-primary); font-family: var(--font-serif); }
.api-collapse-chevron { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); color: var(--text-muted); transition: transform 0.25s ease; }
.api-collapse.open .api-collapse-chevron { transform: rotate(225deg); }
.api-collapse-body { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.32s ease, opacity 0.28s ease; }
.api-collapse.open .api-collapse-body { max-height: 1600px; opacity: 1; overflow: visible; }

/* 记忆库字段分组（统一成框，不再黑大字） */
.api-field-group { border: 1px solid var(--border); border-radius: 12px; background: var(--surface-solid); padding: 12px; margin-bottom: 10px; }
.api-field-group .vs-switch-row { padding: 5px 0; }
.api-field-label { font-size: 12.5px; color: var(--text-secondary); margin: 10px 0 6px; letter-spacing: 0.3px; }
.api-field-group .api-field-label:first-child { margin-top: 0; }
.api-field-row { margin-top: 4px; }
.api-field-row .vs-select { margin-top: 0; }

/* 管理中转站子页：工具栏 + 站/密钥分层 */
.api-manager-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.api-manager-toolbar-hint { font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; flex: 1; font-family: inherit; }
.api-station-card { border: 1px solid var(--border); border-radius: 14px; background: var(--card-bg); padding: 12px 14px; margin-bottom: 12px; }
.api-station-head { display: flex; align-items: center; gap: 8px; }
.api-station-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-rose, #C9A8A8); flex-shrink: 0; }
.api-station-name { font-size: 14px; font-weight: 600; color: var(--text-primary); font-family: var(--font-serif); }
.api-station-head-actions { margin-left: auto; display: flex; gap: 6px; }
.api-station-url { font-size: 11px; color: var(--text-muted); word-break: break-all; margin-top: 6px; padding: 5px 8px; border-radius: 8px; background: rgba(30,28,26,0.05); font-family: 'SF Mono','Consolas',monospace; }
.api-key-item { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--surface-solid); margin-top: 8px; }
.api-key-label { font-size: 11px; color: var(--text-muted); margin-bottom: 2px; }
.api-alias-input { width: 100%; margin-top: 0; font-size: 13px; padding: 8px 11px; border: 1px solid rgba(30,28,26,0.18); border-radius: 9px; background: #fff; color: var(--text-primary); transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.api-alias-input:focus { border-color: var(--accent-rose, #C9A8A8); box-shadow: 0 0 0 3px rgba(201,168,168,0.12); }
.api-alias-input::placeholder { color: var(--text-muted); }
.api-key-meta { font-size: 11px; color: var(--text-muted); margin-top: 6px; font-family: 'SF Mono','Consolas',monospace; }
.api-key-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

/* 接口协议选择（通用 / Claude 原生）——2028-09 B 方案：自绘胶囊，禁用系统控件 */
.api-proto-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.api-proto-label { font-size: 11px; color: var(--text-muted); }
.api-proto-pill {
    font-family: inherit; font-size: 11.5px; line-height: 1; color: var(--text-secondary);
    background: transparent; border: 1px solid var(--border); border-radius: 999px;
    padding: 5px 11px; cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.api-proto-pill:active { transform: scale(0.96); }
.api-proto-pill.on { background: var(--rose-soft, rgba(201,168,168,0.16)); border-color: var(--accent-rose, #C9A8A8); color: var(--text-primary); }
.api-proto-hint { font-size: 10.5px; color: var(--text-muted); width: 100%; }

/* ============================================================
   高级功能限时体验卡片（设置页底部）+ 锁定时样式 + 功能受阻提示
   ============================================================ */
.premium-remaining-card {
    position: relative;
    margin: 4px 0 20px;
    border-radius: 18px;
    padding: 20px 18px 18px;
    background:
        radial-gradient(120% 160% at 100% 0%, rgba(200,168,124,0.16) 0%, rgba(255,255,255,0) 46%),
        radial-gradient(120% 160% at 0% 100%, rgba(201,168,168,0.14) 0%, rgba(255,255,255,0) 50%),
        var(--surface);
    border: 1px solid rgba(196,168,106,0.32);
    box-shadow: 0 10px 32px rgba(139,110,94,0.10);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.premium-remaining-card:active { transform: scale(0.99); }
.premium-remaining-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(200,168,124,0), rgba(200,168,124,0.85), rgba(201,168,168,0.85), rgba(200,168,124,0));
}
.prc-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.prc-title { font-size: 15px; font-weight: 600; color: var(--text-primary); letter-spacing: 0.4px; font-family: var(--font-serif); }
.prc-title-en { font-family: var(--font-decorative, 'Playfair Display'), serif; font-style: italic; font-size: 11px; color: var(--gold, #C8A87C); opacity: 0.85; margin-left: 6px; letter-spacing: 0.5px; }
.prc-status {
    font-size: 11px;
    padding: 2.5px 9px;
    border-radius: 20px;
    letter-spacing: 0.4px;
    flex-shrink: 0;
}
.prc-status.live { color: #7d9b76; background: rgba(140,180,150,0.16); }
.prc-status.ended { color: var(--text-muted); background: rgba(30,28,26,0.06); }

.prc-hours { display: flex; align-items: baseline; gap: 6px; margin-bottom: 3px; }
.prc-hours-num {
    font-size: 34px;
    line-height: 1;
    font-weight: 300;
    font-family: var(--font-decorative, 'Playfair Display'), serif;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}
.prc-hours-unit { font-size: 12.5px; color: var(--text-muted); letter-spacing: 1px; }
.prc-hours-hint { font-size: 11.5px; color: var(--text-secondary); margin-bottom: 12px; }
.prc-source { font-size: 11.5px; color: var(--text-secondary); line-height: 1.7; margin: -6px 0 10px; }
.prc-source b { font-weight: 500; }
.prc-dash { height: 1px; background: linear-gradient(90deg, rgba(196,168,106,0.5), rgba(196,168,106,0.06)); margin: 10px 0 12px; }

/* 邀请码行：默认一行排满（标签+码+复制+分享），字号收敛避免 370px 换行挤成两行乱序 */
.prc-code-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: nowrap; }
.prc-code-label { font-size: 12px; color: var(--text-secondary); flex-shrink: 0; }
.prc-code {
    flex: 1;
    min-width: 0;
    font-family: var(--font-decorative, 'Playfair Display'), serif;
    font-size: 14.5px;
    letter-spacing: 2px;
    color: var(--gold, #B89468);
    padding: 6px 8px;
    border: 1px dashed rgba(196,168,106,0.55);
    border-radius: 9px;
    background: rgba(255,255,255,0.4);
    text-align: center;
    user-select: all;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.prc-code-btn, .prc-share-btn {
    border: none;
    border-radius: 18px;
    padding: 6px 11px;
    font-size: 12px;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease, background 0.15s ease;
    font-family: inherit;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.prc-code-btn { color: #fff; background: linear-gradient(135deg, #D4B488, #C8A87C); box-shadow: 0 2px 10px rgba(200,168,124,0.35); }
.prc-code-btn:active { transform: scale(0.96); }
.prc-share-btn { color: var(--text-primary); background: var(--surface-solid, #fff); border: 1px solid rgba(196,168,106,0.45); }
.prc-share-btn:active { transform: scale(0.96); }

.prc-progress { margin-bottom: 12px; }
.prc-progress-line { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
.prc-progress-track { height: 5px; border-radius: 3px; background: rgba(196,168,106,0.16); overflow: hidden; }
.prc-progress-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, #D4B488, #C8A87C); transition: width 0.5s ease; }
.prc-rule { font-size: 11.5px; color: var(--text-muted); line-height: 1.65; }
.prc-rule b { color: var(--text-secondary); font-weight: 600; }

/* 窄屏（<370px）：邀请码行进一步收紧，保证单行排满不挤成乱序两行 */
@media (max-width: 370px) {
    .premium-remaining-card { padding: 16px 13px 15px; }
    .prc-hours-num { font-size: 28px; }
    .prc-code-row { gap: 6px; }
    .prc-code { font-size: 13px; letter-spacing: 1.5px; padding: 5px 6px; }
    .prc-code-btn, .prc-share-btn { padding: 5px 8px; font-size: 11.5px; }
    .prc-progress-line { font-size: 11px; }
    .prc-rule { font-size: 11px; }
}

/* 高级功能锁定（设置项变灰禁点，原因见 .premium-lock-reason 小字）
   2026 甲方要求：灰掉 = 完全点不动（不再弹提示框），原因直接写在灰项上 */
.vs-premium-locked,
.tool-row.premium-locked { opacity: 0.55; filter: saturate(0.72); pointer-events: none; }
.vs-premium-locked .vs-switch-row,
.vs-premium-locked input,
.vs-premium-locked button { cursor: default; }
.vs-premium-locked .ck-switch input[type="checkbox"] { pointer-events: none; }
.tool-row.premium-locked .ck-switch input[type="checkbox"] { pointer-events: none; }

/* 灰项原因小字（membership.js 注入）：管理员关闭 →「暂未开放」，体验到期 →「体验已结束」 */
.premium-lock-reason {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(150, 142, 130, 0.14);
    border: 0.5px solid rgba(150, 142, 130, 0.32);
    color: var(--text-muted);
    font-size: 10.5px;
    line-height: 1.5;
    letter-spacing: 0.03em;
    vertical-align: middle;
    white-space: nowrap;
}
.vs-card > .premium-lock-reason,
.vs-ts-box > .premium-lock-reason { display: block; margin: 10px 16px 2px; }

/* 功能受阻提示（统一「高级功能限时体验」文案，无付费字眼） */
.feature-notice-overlay {
    position: absolute;
    inset: 0;
    z-index: 5000;
    background: rgba(30,25,20,0.35);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    padding: 0 20px;
}
.feature-notice-overlay.show { opacity: 1; }
.feature-notice-panel {
    width: 100%;
    max-width: 340px;
    background: var(--bg-chat, #F8F4EF);
    border-radius: 22px;
    padding: 30px 24px 22px;
    text-align: center;
    box-shadow: 0 14px 48px rgba(139,110,94,0.18);
    border: 1px solid rgba(196,168,106,0.28);
    position: relative;
    overflow: hidden;
    transform: translateY(8px) scale(0.98);
    opacity: 0;
    transition: transform 0.22s ease, opacity 0.22s ease;
}
.feature-notice-overlay.show .feature-notice-panel { transform: translateY(0) scale(1); opacity: 1; }
.feature-notice-deco {
    position: absolute;
    top: -34px; left: 50%;
    width: 150px; height: 90px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(201,168,168,0.28), rgba(201,168,168,0));
    pointer-events: none;
}
.feature-notice-title {
    font-size: 17px;
    color: var(--text-primary);
    font-family: var(--font-serif);
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    font-weight: 600;
}
.feature-notice-sub {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.75;
    margin-bottom: 18px;
}
.feature-notice-actions { display: flex; gap: 10px; justify-content: center; }
.feature-notice-primary, .feature-notice-ghost {
    border: none;
    border-radius: 24px;
    padding: 10px 26px;
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.5px;
    transition: transform 0.15s ease, opacity 0.15s ease;
}
.feature-notice-primary { color: #fff; background: var(--rose, #C9A8A8); box-shadow: 0 3px 14px rgba(201,168,168,0.3); }
.feature-notice-primary:active, .feature-notice-ghost:active { transform: scale(0.96); }
.feature-notice-ghost { color: var(--text-secondary); background: transparent; border: 1px solid rgba(30,28,26,0.14); }





/* ============================================================
   ★ 2026 储存空间用量条（panels-storage.js）韩系法式
   ============================================================ */
.storage-card {
    margin: 14px 0 0;
    background: var(--surface, #fff);
    border-radius: 16px;
    padding: 18px 18px 14px;
    box-shadow: var(--shadow-xs, 0 1px 3px rgba(0,0,0,0.05)), var(--shadow-sm, 0 2px 10px rgba(0,0,0,0.06));
    border: 1px solid var(--border, rgba(180,170,155,0.22));
    position: relative;
    overflow: hidden;
}
.storage-card::before {
    content: '';
    position: absolute;
    top: 0; left: 18px; right: 18px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(196,168,106,0.45), transparent);
}
.storage-card-over { border-color: rgba(196,113,107,0.4); }
.sc-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; gap: 6px; }
/* 储存空间说明的问号：跟着标题那一行走（卡片里不再写大段说明） */
.sc-head .sc-info {
    margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%; cursor: pointer;
    color: var(--text-muted, #9B8579); background: rgba(180,170,155,0.12);
    transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.sc-head .sc-info:active { transform: scale(0.9); background: rgba(201,168,168,0.24); color: var(--accent-rose, #C9A8A8); }
.sc-title { font-size: 15px; color: var(--text-primary, #3A322C); letter-spacing: 1px; }
.sc-title-en { font-family: var(--font-display, 'Playfair Display', Georgia, serif); font-style: italic; font-size: 12px; color: var(--gold, #C4A86A); opacity: 0.85; }
.sc-track {
    height: 8px;
    border-radius: 6px;
    background: rgba(180,170,155,0.16);
    overflow: hidden;
    position: relative;
}
.sc-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.sc-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-secondary, #8B857E);
}
.sc-of { color: #B5A59A; }
.sc-left { color: var(--rose-dark, #A97F7F); }
.sc-note {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed rgba(196,168,106,0.3);
    font-size: 11px;
    line-height: 1.7;
    color: #9B8579;
}
.sc-warn {
    margin-top: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    background: rgba(196,113,107,0.1);
    color: #B4554F;
    font-size: 12px;
    line-height: 1.6;
}
.sc-warn-soft {
    background: rgba(196,168,106,0.12);
    color: #A98A3E;
}
.sc-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.sc-evict-btn {
    flex: 1;
    padding: 10px 14px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #C4716B, #D89A8F);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: transform 0.15s ease, opacity 0.15s ease;
}
.sc-evict-btn:active { transform: scale(0.96); }
.sc-admin-btn {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid rgba(196,168,106,0.5);
    border-radius: 12px;
    background: var(--surface, #fff);
    color: #9B8579;
    font-size: 13px;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: transform 0.15s ease, border-color 0.2s ease;
}
.sc-admin-btn:active { transform: scale(0.96); }

/* ★ 2026 清理导入任务按钮：次级样式（与「立即整理」主按钮区分，非会员必现） */
.sc-evict-btn-ghost {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid rgba(196,168,106,0.4);
    border-radius: 12px;
    background: var(--surface, #fff);
    color: #8B857E;
    font-size: 13px;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: transform 0.15s ease, border-color 0.2s ease, color 0.2s ease;
}
.sc-evict-btn-ghost:active { transform: scale(0.96); }

/* ★ 2026 存储按类别拆分（诊断） */
.sc-bd {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed rgba(196,168,106,0.3);
}
.sc-bd-sum {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11px;
    color: #9B8579;
    margin-bottom: 8px;
}
.sc-bd-tag {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 6px;
    border-radius: 6px;
    background: rgba(196,168,106,0.14);
    color: #A98A3E;
    font-size: 10px;
}
.sc-bd-tag-soft { background: rgba(180,170,155,0.14); color: #9B8579; }
.sc-bd-list { display: flex; flex-direction: column; gap: 6px; }
.sc-bd-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #8B857E;
}
.sc-bd-label { width: 92px; flex-shrink: 0; color: #6E6259; }
.sc-bd-bar {
    flex: 1;
    height: 6px;
    border-radius: 4px;
    background: rgba(180,170,155,0.16);
    overflow: hidden;
}
.sc-bd-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, rgba(196,168,106,0.55), rgba(196,168,106,0.35)); transition: width 0.5s ease; }
.sc-bd-size { width: 54px; flex-shrink: 0; text-align: right; color: #B5A59A; }
/* ★ 2026-10-13 媒体本地化：明细底下补「本机已存」那几行 + 自动存到本机的开关 */
.sc-bd-local {
    margin-top: 8px;
    font-size: 10px;
    color: #B5A59A;
    letter-spacing: 0.02em;
}
.sc-bd-loc-line { line-height: 1.6; }
.sc-bd-loc-tip {
    margin-top: 4px;
    font-size: 10px;
    line-height: 1.6;
    color: #C2B4A8;
}
.sc-bd-loc-row { padding: 6px 0 0; }
.sc-bd-loc-row .vs-switch-label { font-size: 12px; color: #A9968A; }
.sc-bd-loc-now { margin-top: 8px; }

/* ★ 2026 设置项变灰禁点（membership.js applyDisabled） */
.premium-disabled {
    opacity: 0.45 !important;
    pointer-events: none !important;
    filter: grayscale(0.4);
}
.premium-disabled .ck-switch-track { background: #D8D0C8 !important; }

/* ===== 记忆自动整理健康提示（设置「记忆与上下文」卡 + 记忆库页顶部共用）===== */
.mem-health-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 12px 0 4px;
    padding: 11px 12px;
    background: linear-gradient(135deg, rgba(181,73,91,0.08), rgba(214,168,142,0.06));
    border: 1px solid rgba(181,73,91,0.32);
    border-radius: 14px;
}
.mem-health-ico {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin-top: 1px;
    border-radius: 50%;
    background: rgba(181,73,91,0.12);
    color: #b5495b;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mem-health-main { flex: 1; min-width: 0; }
.mem-health-title { font-family: var(--font-serif); font-size: 13.5px; font-weight: 600; color: #9d4252; line-height: 1.45; }
.mem-health-desc { font-size: 11.5px; color: var(--text-muted); line-height: 1.55; margin-top: 3px; }
.mem-health-btn {
    flex: 0 0 auto;
    align-self: center;
    border: 1px solid rgba(181,73,91,0.5);
    color: #fff;
    background: linear-gradient(135deg, #b5495b, #cf7a86);
    border-radius: 999px;
    padding: 8px 15px;
    font-size: 12.5px;
    font-family: var(--font-body);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.2s ease;
    box-shadow: 0 2px 8px rgba(181,73,91,0.25);
}
.mem-health-btn:active { transform: scale(0.96); }
.mem-health-btn:disabled { opacity: 0.55; cursor: default; box-shadow: none; }
#mem-lib-health-strip .mem-health-banner { margin: 0 0 12px; }
@media (max-width: 370px) {
    .mem-health-banner { flex-wrap: wrap; }
    .mem-health-btn { width: 100%; justify-content: center; }
}

/* ===== 兑换激活码（TASK-PAY-002）：高级功能卡入口 + 兑换子页 ===== */
.prc-redeem-entry {
    margin-top: 14px; padding-top: 14px;
    border-top: 1px dashed var(--border);
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.prc-redeem-tip { font-size: 12.5px; color: var(--text-secondary); letter-spacing: 0.3px; }
.prc-redeem-btn {
    min-height: 36px; padding: 8px 18px;
    border: 1px solid var(--accent); border-radius: 12px;
    background: var(--surface-solid); color: var(--accent);
    font-family: var(--font-body); font-size: 12.5px; letter-spacing: 0.5px;
    cursor: pointer;
    transition: transform 0.16s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.prc-redeem-btn:active { transform: scale(0.96); background: rgba(201, 168, 168, 0.10); }

/* ===== 高级版介绍页入口（TASK-PAY-003）：高级功能卡上的主入口 =====
   放在兑换入口下面：先「了解高级版」（主路），再「我有激活码」（已经买过的人走的路）。 */
.prc-premium-entry {
    width: 100%; box-sizing: border-box;
    margin-top: 14px; padding: 11px 13px;
    display: flex; align-items: center; gap: 9px;
    border: 1px solid rgba(196, 168, 106, 0.42); border-radius: 13px;
    background: linear-gradient(135deg, rgba(216, 188, 147, 0.14), rgba(196, 168, 106, 0.06));
    font-family: inherit; text-align: left; cursor: pointer;
    transition: transform 0.16s ease, background 0.2s ease, border-color 0.2s ease;
}
.prc-premium-entry:active { transform: scale(0.985); background: rgba(201, 168, 168, 0.10); }
.prc-premium-entry-t {
    font-family: var(--font-serif); font-size: 13.5px; font-weight: 600;
    letter-spacing: 0.4px; color: var(--text-primary); flex: 0 0 auto;
}
.prc-premium-entry-s {
    flex: 1 1 auto; min-width: 0;
    font-size: 11.5px; color: var(--text-muted); letter-spacing: 0.2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prc-premium-entry-a { flex: 0 0 auto; font-size: 16px; line-height: 1; color: var(--gold, #C4A86A); }
@media (max-width: 370px) {
    .prc-premium-entry { padding: 10px 11px; gap: 7px; }
    .prc-premium-entry-s { display: none; }   /* 窄屏放不下就只留标题，绝不让它撑破一行 */
}

.rc-wrap { padding: 4px 0 24px; }
.rc-intro {
    font-size: 13px; color: var(--text-secondary); line-height: 1.75;
    margin-bottom: 16px; letter-spacing: 0.3px;
}
.rc-field { position: relative; }
.rc-input {
    width: 100%; box-sizing: border-box;
    padding: 15px 14px;
    border: 1px solid var(--border); border-radius: 14px;
    background: var(--input-bg); color: var(--text-primary);
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 16px; letter-spacing: 1.6px; text-align: center; text-transform: uppercase;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance: none; appearance: none;
}
.rc-input::placeholder { letter-spacing: 1.2px; color: var(--text-muted); }
.rc-input:focus { border-color: var(--accent-rose, #C9A8A8); box-shadow: 0 0 0 3px rgba(201, 168, 168, 0.16); }

.rc-btn {
    width: 100%; min-height: 48px; margin-top: 16px;
    border: none; border-radius: 14px;
    background: var(--accent); color: #fff;
    font-family: var(--font-body); font-size: 14px; letter-spacing: 1px;
    cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
    transition: transform 0.16s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}
.rc-btn:active { transform: scale(0.975); }
.rc-btn.busy, .rc-btn:disabled { opacity: 0.6; cursor: default; box-shadow: none; transform: none; }

/* 结果提示：隐藏态只透明 + 微下移，出现时才拉开（防闪） */
.rc-msg {
    margin-top: 12px; padding: 0 14px; max-height: 0; overflow: hidden;
    border-radius: 12px; border: 1px solid transparent;
    font-size: 13px; line-height: 1.8; color: var(--text-secondary);
    opacity: 0; transform: translateY(-4px);
    transition: opacity 0.24s ease, transform 0.24s ease, max-height 0.28s ease, padding 0.24s ease, background 0.24s ease;
}
.rc-msg.show { opacity: 1; transform: translateY(0); max-height: 220px; padding: 12px 14px; }
.rc-msg.ok { background: rgba(138, 155, 126, 0.10); border-color: rgba(138, 155, 126, 0.32); color: #6f8a63; }
.rc-msg.err { background: rgba(181, 73, 91, 0.07); border-color: rgba(181, 73, 91, 0.24); color: #b5495b; }
.rc-msg-sub { margin-top: 6px; font-size: 12px; color: var(--text-secondary); letter-spacing: 0.3px; }

.rc-help {
    margin-top: 20px; padding: 13px 14px;
    border-radius: 12px; border: 1px dashed var(--border);
    background: var(--surface-solid);
}
.rc-help-t { font-size: 12.5px; color: var(--text-secondary); line-height: 1.8; white-space: pre-line; }
.rc-help-s { font-size: 12px; color: var(--text-muted); line-height: 1.8; margin-top: 4px; white-space: pre-line; }
.rc-note {
    margin-top: 16px; font-size: 12px; color: var(--text-muted);
    line-height: 1.9; letter-spacing: 0.2px;
}

/* 窄屏（含 <370px）：兑换按钮与输入框不挤、不横向溢出 */
@media (max-width: 370px) {
    .rc-input { font-size: 15px; letter-spacing: 1px; padding: 14px 10px; }
    .prc-redeem-entry { gap: 8px; }
    .prc-redeem-btn { flex: 1 1 auto; }
}

/* ============================================================
   设置页底图「轻微一点点」模糊（宝宝 2026-10-29：「我希望可以稍微模糊一点点，
   轻微一点点我觉得会更有质感」）
   ------------------------------------------------------------
   为什么不能直接给这一页加 filter：底图就是 #sub-settings 自己的 background-image
   （主题层铺的），文字和控件全在同一个元素里 —— 加 filter / opacity 会把字一起糊掉，
   那正是上次「设置页乱码」之后最怕再踩的那一步。
   为什么用 ::before + backdrop-filter 而不是另铺一张图：模糊只作用在这一层背后的
   **已经画好的底图**上，图从哪来、雾多浓全交给主题层，这里不复写任何图片地址或颜色
   （主题 13 套换图时这层自动跟着变，不用改这里一行）。
   为什么挂在没有子节点的伪元素上：filter 会创建包含块，层里的 position:fixed 全屏子元素
   会错位；backdrop-filter 挂在叶子层上，等于把「谁会被糊」这件事锁死在底图这一层，
   文字那一层一个像素都不动。
   这一层必须是绝对定位：.mysec-page 是 flex 容器，没定位的伪元素会变成 flex 项把整页挤乱
   （css/theme-craft-base.css 里那条警告就是踩过这个坑）。
   强度 2px：三档宽度（360 / 390 / 430，2 倍图）实测底图高频能量掉 72～73%，
   而卡片文字和标题的墨芯灰度一个像素都没动 —— 就是「图柔了、字没动」；
   4px 起开始糊成一团，所以取 2px。 */
html[data-theme-skin] #sub-settings::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
/* 低端机 / 省电模式里 js/perf-guard.js 会把毛玻璃降级掉 —— 那时这层就自然退回清晰底图，
   不会留下半截效果，也不需要额外开关。 */
/* 它的「整屏滤镜剥离」只扫真元素（document.querySelectorAll），扫不到伪元素，
   所以轻量档在这里自己撤掉这一层：低端机省一次全屏模糊，底图退回清晰，观感不破。 */
body.perf-lite #sub-settings::before {
    display: none;
}

/* ===== 语音三档（TASK-MODEL-004-B3 v2：标准音色 / 高质量 / 我自己的语音接口） =====
   只在「语音与通话 → 语音通道」这张卡里出现，结构与文案的判定全在 js/panels/panels-settings-voice.js，
   这里只管长相：衬线小标题 + 细线 + 触碰反馈，色一律走主题令牌，360/390/430 都不横向溢出。 */
.vc-tier-block {
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px dashed rgba(196, 168, 106, 0.32);
}

/* 三档选择条：内置两档并排、自接那一层独占一整行（360 宽下名字和说明都放得下，不挤成两行字） */
#vc-tier-picker {
    flex-wrap: wrap;
    margin-bottom: 12px;
}

#vc-tier-picker .api-mode-opt {
    flex: 1 1 42%;
    min-width: 0;
    padding: 10px 8px;
}

#vc-tier-picker #vc-channel-custom {
    flex: 1 1 100%;
}

#vc-tier-picker .api-mode-name {
    font-size: 13.5px;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
}

#vc-tier-picker .hint {
    font-size: 10px;
    line-height: 1.5;
    text-align: center;
    min-height: 0;
}

/* 说明行（还没选 / 内置没开通 / 卡怎么来） */
.vc-tier-note {
    margin-top: 9px;
    padding: 7px 10px;
    border-left: 2px solid rgba(196, 168, 106, 0.45);
    border-radius: 0 8px 8px 0;
    background: rgba(196, 168, 106, 0.08);
    font-size: 11px;
    line-height: 1.62;
    color: var(--text-secondary);
}

.vc-note {
    margin-top: 8px;
    font-size: 10.5px;
    line-height: 1.62;
    color: var(--text-muted);
}

/* 「怎么克隆音色」三步引导：编号圆点借用新建音色页的 .vs-step-num，这里只补行距与说明字（不新造皮肤） */
.vc-guide-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
}

.vc-guide-row .vs-step-num {
    margin-top: 1px;
}

.vc-guide-tx {
    flex: 1;
    min-width: 0;
    font-size: 11.5px;
    line-height: 1.62;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.vc-guide-tx b {
    display: block;
    font-family: var(--font-serif);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary);
}

.vc-sub-t {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 13px;
    margin-bottom: 7px;
    font-family: var(--font-serif);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
}

/* 小标题后面那句浅灰说明：不抢标题，也不单独占一行 */
.vc-sub-x {
    font-family: inherit;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--text-muted);
}

/* 预置音色格子：一行三个，名字长了省略，点下去有反馈（每个至少 44px 高，手指好点） */
.vc-preset-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.vc-preset {
    min-height: 44px;
    max-width: 100%;
    padding: 4px 6px;
    border: 1px solid rgba(201, 168, 168, 0.42);
    border-radius: var(--radius-md, 14px);
    background: rgba(255, 252, 251, 0.72);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 11.5px;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.16s ease;
    -webkit-tap-highlight-color: transparent;
}

.vc-preset:active {
    transform: scale(0.96);
}

.vc-preset.active {
    border-color: var(--accent-rose, #C9A8A8);
    background: var(--accent-rose, #C9A8A8);
    color: #fff;
}

/* 复刻那一行：按钮 + 已存几条 */
.vc-clone-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.vc-clone-row .vs-btn-ghost {
    flex: 1 1 62%;
    min-height: 44px;
}

.vc-count {
    flex: none;
    font-size: 11px;
    letter-spacing: 0.02em;
    color: var(--gold-dark);
}

.vc-count.full {
    color: var(--accent-rose, #C9A8A8);
}

/* 我的声音：一条一行（点名字换、点右边的叉删） */
.vc-my-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.vc-myvoice {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-height: 52px;
    padding: 4px 4px 4px 11px;
    border: 1px solid rgba(201, 168, 168, 0.3);
    border-radius: var(--radius-md, 14px);
    background: rgba(255, 252, 251, 0.7);
    transition: border-color 0.22s ease, background 0.22s ease, transform 0.16s ease, opacity 0.22s ease;
}

/* 选中态挂在里面那颗「换用它」按钮上，整行跟着亮（老 WebView 也认，不依赖 :has） */
.vc-myvoice.active {
    border-color: var(--accent-rose, #C9A8A8);
    background: rgba(201, 168, 168, 0.12);
}

.vc-myvoice-pick {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 0.16s ease;
    -webkit-tap-highlight-color: transparent;
}

.vc-myvoice-pick:active {
    transform: scale(0.985);
}

.vc-myvoice.off .vc-myvoice-name {
    color: var(--text-muted);
}

/* 删掉的那条：先淡出再拔掉（不整块重刷，防闪） */
.vc-myvoice.leaving {
    opacity: 0;
    transform: scale(0.97);
    pointer-events: none;
}

.vc-myvoice-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12.5px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 属于哪一档：小小一枚，不抢名字 */
.vc-myvoice-tier {
    flex: none;
    padding: 1px 6px;
    border: 1px solid rgba(196, 168, 106, 0.42);
    border-radius: 999px;
    font-size: 9.5px;
    letter-spacing: 0.02em;
    color: var(--gold-dark);
    white-space: nowrap;
}

.vc-myvoice-tier:empty {
    display: none;
}

.vc-myvoice-tag {
    flex: none;
    font-size: 10.5px;
    letter-spacing: 0.02em;
    color: var(--accent-rose, #C9A8A8);
    white-space: nowrap;
}

.vc-myvoice-tag:empty {
    display: none;
}

/* 删除：44px 的方点，叉用两条线自己画（不用字符、不用图标字体） */
.vc-myvoice-del {
    position: relative;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.16s ease;
    -webkit-tap-highlight-color: transparent;
}

.vc-myvoice-del:active {
    transform: scale(0.92);
    background: rgba(201, 168, 168, 0.14);
}

.vc-myvoice-del::before,
.vc-myvoice-del::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 1px;
    margin: -0.5px 0 0 -6px;
    background: var(--text-muted);
    transition: background 0.2s ease;
}

.vc-myvoice-del::before {
    transform: rotate(45deg);
}

.vc-myvoice-del::after {
    transform: rotate(-45deg);
}

.vc-myvoice-del:active::before,
.vc-myvoice-del:active::after {
    background: var(--accent-rose, #C9A8A8);
}

.vc-my-empty {
    font-size: 11px;
    line-height: 1.65;
    color: var(--text-muted);
}

.vc-cards-line {
    margin-top: 10px;
    font-size: 10.5px;
    line-height: 1.6;
    color: var(--text-muted);
}

/* 换档不丢声音那句：跟上面几块用一条虚线分开，压在最下面 */
.vc-tier-sub {
    margin-top: 14px;
    padding-top: 11px;
    border-top: 1px dashed rgba(196, 168, 106, 0.28);
}

/* 两块面板 / 「我的声音」那一块：只是容器，留出上下呼吸（内容由 JS 决定） */
.vc-panel,
.vc-my-block {
    margin-top: 12px;
}

/* 窄屏（<370）：预置音色一行三个太挤 → 两个；复刻按钮独占一行，别把「已存 x/3」挤掉 */
@media (max-width: 369px) {
    .vc-preset-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vc-clone-row .vs-btn-ghost {
        flex: 1 1 100%;
    }
}