/* ============================================================
   金蝉子
   设计 token 取自目标站 index 构建产物
   ============================================================ */

:root {
    /* 参考图色板：深紫罗兰底 + 兰花紫高光 + 靛蓝次要色 */
    --bg-darker: #130b23;   /* 全局背景（参考图页面底色） */
    --bg-card: #221a34;     /* 卡片/次级背景（比页面底更亮一档） */
    --bg-deep: #0f081c;     /* 更深一层的底（顶栏/底栏） */
    --bg-raised: #2c2343;   /* 再抬升一档的表面 */
    --purple: #a75cf6;      /* 主紫 text-purple / border-purple */
    --purple-300: #dbb7fb;
    --purple-400: #c387f9;
    --purple-500: #ab56f6;
    --purple-600: #9431ec;
    --purple-700: #7e20d0;  /* 源站 purple-700 实际值 */
    --purple-900: #561b88;
    --blue: #4963e8;        /* 主蓝（次要/信息色） */
    --blue-600: #2d4be3;
    --blue-700: #2441d1;
    --green: #14b580;
    --red: #eb485e;
    --gray-400: #a499af;
    --gray-500: #746289;
    --gray-600: #564767;
    --gray-700: #433751;
    --gray-800: #281c3a;

    /* 参考图主操作渐变：深紫罗兰 → 兰花紫 */
    --accent-grad: linear-gradient(135deg, #7d3bf0 0%, #c94ffb 100%);
    --accent-grad-soft: linear-gradient(135deg, rgba(125, 59, 240, 0.30) 0%, rgba(201, 79, 251, 0.20) 100%);
    --accent-glow: 0 6px 18px rgba(140, 60, 240, 0.35);

    --text: #ffffff;
    --text-sub: #a499af;
    --text-muted: #746289;
    --border: rgba(167, 130, 240, 0.14);
    --border-strong: rgba(190, 150, 255, 0.24);

    /* 间距基准 16px，源站 :root font-size:16px */
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 16px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    height: 100%;
}

body {
    background-color: var(--bg-darker);
    /* 参考图顶部有一圈紫罗兰辉光，往下渐隐到近黑紫 */
    background-image: radial-gradient(120% 42% at 50% 0%, rgba(126, 45, 226, 0.30) 0%, rgba(126, 45, 226, 0) 62%);
    background-repeat: no-repeat;
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
                 "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* 手机端容器：源站为移动端优先布局 */
#app {
    min-height: 100%;
    position: relative;
    max-width: 480px;
    margin: 0 auto;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ==================== 视图切换 ==================== */
.view {
    display: none;
    min-height: 100vh;
    flex-direction: column;
}

.view.active {
    display: flex;
}

/* ==================== 顶部导航栏 ==================== */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 16px;
    background: var(--bg-darker);
    position: sticky;
    top: 0;
    z-index: 50;
}

.navbar-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
    flex: 1;
    text-align: center;
}

.navbar-side {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: var(--r-md);
    color: var(--text);
    font-size: 20px;
    flex-shrink: 0;
    /* 文字型右侧按钮（如「主播音色」）不能被固定 44px 宽度挤成两行 */
    white-space: nowrap;
}

/* 右侧文字按钮：按内容自适应宽度，字号调小以保证一行放得下 */
.navbar-side.navbar-text {
    width: auto;
    min-width: 44px;
    padding: 0 10px;
    font-size: 13px;
}

.navbar-side:active {
    background: rgba(255, 255, 255, 0.06);
}

/* 列表页的紫色导航条（源站为圆角悬浮通栏条，非贴顶通栏） */
.navbar-purple {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    margin: 12px 12px 0;
    padding: 0 14px;
    border-radius: var(--r-md);
    background: linear-gradient(90deg, #3a1470 0%, #521f93 100%);
    position: sticky;
    top: 12px;
    z-index: 50;
}

.navbar-purple .menu-btn {
    width: 24px;
    height: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
}

.navbar-purple .menu-btn span {
    display: block;
    width: 20px;
    height: 2px;
    background: #ffffff;
    border-radius: 1px;
}

.navbar-purple .create-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 500;
    color: #ffffff;
    cursor: pointer;
    padding: 8px 4px;
}

/* ==================== 页面内容区 ==================== */
.page-body {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.page-body.no-pad {
    padding: 0;
}

/* ==================== 卡片 ==================== */
.card {
    background: var(--bg-card);
    border-radius: var(--r-lg);
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid var(--border);
}

.card-flat {
    background: var(--bg-card);
    border-radius: var(--r-lg);
    padding: 16px;
    margin-bottom: 12px;
}

/* ==================== Tab 切换（产品信息 / 话术内容 / 启动AI主播） ==================== */
.tab-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 12px;
}

.tab-bar > .tab-btn,
.tab-bar > .tab-action {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    margin-left: 0;
    padding: 0 6px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.tab-btn {
    height: 34px;
    border-radius: var(--r-md);
    font-size: 14px;
    font-weight: 500;
    color: #ddd8e2;
    background: #251a3a;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.18s;
}

.tab-btn.active {
    background: var(--accent-grad);
    color: #ffffff;
    box-shadow: var(--accent-glow);
    font-weight: 500;
}

.tab-action {
    height: 34px;
    border-radius: var(--r-md);
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    background: var(--accent-grad);
    border: none;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}

.tab-action:active {
    opacity: 0.85;
}

/* ==================== 表单 ==================== */
.field {
    margin-bottom: 20px;
}

.field-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 10px;
}

.field-label .bar {
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background: var(--accent-grad);
    flex-shrink: 0;
}

.field-label .req {
    color: #f25a6f;
    font-size: 14px;
    margin-left: 1px;
}

.input,
.textarea {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 12px;
    color: #ffffff;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.18s;
    resize: none;
}

.input:focus,
.textarea:focus {
    border-color: var(--purple);
}

.input::placeholder,
.textarea::placeholder {
    color: var(--text-muted);
}

.textarea {
    min-height: 96px;
    line-height: 1.6;
}

/* 未启用副播时，副播人设输入框置灰（人设不生效，避免误以为已在用） */
.textarea.persona-off,
.textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 输入框外层卡片包裹（源站表单卡片） */
.field-card {
    background: #1c132e;
    border: 1px solid rgba(167, 130, 240, 0.16);
    border-radius: var(--r-lg);
    padding: 12px;
}

.field-card .input,
.field-card .textarea {
    background: #180f28;
    border-color: var(--border);
}

/* 表单内的提示文字 */
.field-hint {
    font-size: 12px;
    color: var(--text-sub);
    line-height: 1.6;
    margin-top: 8px;
}

/* ==================== 开关控件 ==================== */
.switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* 开关本体样式见文件下方「开关控件（源站紫色开启态）」 */

/* ==================== 按钮 ==================== */
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 46px;
    border-radius: var(--r-md);
    font-size: 15px;
    font-weight: 500;
    font-family: inherit;
    border: none;
    cursor: pointer;
    transition: opacity 0.18s;
    padding: 0 16px;
}

.btn:active {
    opacity: 0.85;
}

.btn-primary {
    background: var(--accent-grad);
    color: #ffffff;
    box-shadow: var(--accent-glow);
}

.btn-secondary {
    background: #2a1d3f;
    color: #ffffff;
    border: 1px solid #3a2a52;
}

.btn-block {
    width: 100%;
}

.btn-row {
    display: flex;
    gap: 12px;
    padding: 0 16px;
}

.btn-row .btn {
    flex: 1;
}

/* ==================== 抽屉导航 ==================== */
.drawer-mask {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.26s;
    max-width: 480px;
    margin: 0 auto;
}

.drawer-mask.show {
    opacity: 1;
    pointer-events: auto;
}

.drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 58%;
    max-width: 278px;
    background: var(--bg-darker);
    z-index: 101;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    padding: 20px 0;
    overflow-y: auto;
}

.drawer.show {
    transform: translateX(0);
}

.drawer-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 20px 24px;
}

.drawer-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f0dcff, #c07fff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    box-shadow: 0 0 16px rgba(170, 105, 247, 0.45);
}

.drawer-user-info {
    min-width: 0;
}

.drawer-username {
    font-size: 16px;
    font-weight: 700;
    color: #b479f8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drawer-role {
    font-size: 12px;
    color: #cbb7f5;
    margin-top: 2px;
}

.drawer-menu {
    flex: 1;
    padding: 0 12px;
}

.drawer-item {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 44px;
    padding: 0 10px;
    margin-bottom: 16px;
    border-radius: var(--r-md);
    font-size: 15px;
    color: #ffffff;
    cursor: pointer;
    transition: background 0.16s;
}

.drawer-item:active,
.drawer-item.active {
    background: rgba(167, 92, 246, 0.14);
}

.drawer-icon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

/* 源站图标为彩色立体立方体 */
.icon-purple { background: linear-gradient(135deg, #c08cf9, #8126db); }
.icon-green  { background: linear-gradient(135deg, #4eda81, #187d3e); }
.icon-orange { background: linear-gradient(135deg, #ffc266, #d97a17); }
.icon-red    { background: linear-gradient(135deg, #ff8a9b, #c7304a); }

/* 抽屉里「未开通」平台（客户第 2 条）：名称照常列出，
   用虚化 + 角标说明状态，点一下只给「正在对接中」提示，不进任何页面。 */
.drawer-item-upcoming {
    opacity: 0.62;
}
.drawer-item-upcoming .drawer-icon {
    filter: grayscale(0.45);
}
.drawer-tag {
    margin-left: auto;
    flex-shrink: 0;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 10.5px;
    line-height: 16px;
    color: #cbb8e8;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

/* 当前模型卡片（手机端抽屉）：让客户随时看清「我在哪个模型里」 */
.drawer-current {
    margin: 0 12px 12px;
    padding: 12px;
    border-radius: var(--r-md);
    background: rgba(167, 92, 246, 0.1);
    border: 1px solid rgba(167, 92, 246, 0.32);
}
.drawer-current-label { font-size: 11.5px; color: var(--text-sub); margin-bottom: 4px; }
.drawer-current-name {
    font-size: 15px; font-weight: 600; color: #ffffff;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.drawer-current-btn {
    margin-top: 10px; width: 100%; height: 34px;
    border-radius: var(--r-sm); border: 1px solid rgba(167, 92, 246, 0.45);
    background: rgba(167, 92, 246, 0.16); color: #d7b7fb;
    font-size: 12.5px; font-family: inherit; cursor: pointer;
}

.drawer-footer {
    padding: 16px 12px 0;
}

.member-card {
    background: var(--bg-card);
    border-radius: var(--r-lg);
    padding: 14px;
}

.member-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.member-level {
    font-size: 14px;
    font-weight: 600;
    color: #d7b7fb;
}

.member-credit {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
}

.member-expire {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* 会员到期回落提示（客户第 15 条）：到期会把等级降回免费、算力清零，
   必须在会员卡上明说，否则客户只会以为「后台又把参数改回去了」。 */
.member-expire-notice {
    margin-top: 6px;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(92, 21, 30, 0.5);
    border: 1px solid rgba(235, 72, 94, 0.35);
    color: #f9c1c9;
    font-size: 11.5px;
    line-height: 1.5;
}

.member-bill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 13px;
}

.member-bill .detail {
    color: var(--text-muted);
}

/* 抽屉内的退出登录 */
.drawer-logout {
    width: 100%;
    margin-top: 10px;
    height: 36px;
    border-radius: var(--r-md);
    background: rgba(235, 72, 94, 0.1);
    border: 1px solid rgba(235, 72, 94, 0.25);
    color: #f47586;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}

.drawer-logout:active {
    background: rgba(235, 72, 94, 0.18);
}

/* ==================== 项目列表 ==================== */
.project-list {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.project-card {
    background: #221a34;
    border-radius: var(--r-lg);
    padding: 16px;
    border: 1px solid rgba(167, 130, 240, 0.12);
    cursor: pointer;
    transition: border-color 0.18s;
}

.project-card:active {
    border-color: var(--purple);
}

.project-name {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
    margin-bottom: 8px;
}

.project-platform {
    font-size: 13px;
    color: #a495b3;
    margin-bottom: 8px;
}

.project-date {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #8e7ca2;
    margin-bottom: 16px;
}

.project-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.project-tag {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    background: rgba(226, 182, 68, 0.15);
    color: #e1b346;
}

.project-manage {
    position: relative;
    height: 28px;
    padding: 0 12px;
    border-radius: var(--r-sm);
    font-size: 12px;
    color: #c7bfcf;
    background: transparent;
    border: 1px solid #473a55;
    cursor: pointer;
    font-family: inherit;
}

/* 触控热区：按钮视觉只有 28px 高，手机上容易点不中；
   用透明伪元素把命中范围撑到 44px（视觉不变）。
   覆盖项目卡片上的重命名✎（.project-rename）、删除🗑（.project-del）与「管理项目」（.project-manage）。
   注意伪元素定位以最近的定位祖先为参照：.project-rename / .project-del 自身是 absolute 已满足，
   .project-manage 需要显式 position: relative（见上一条规则）。 */
.project-manage::before,
.project-rename::before,
.project-del::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -8px;
    bottom: -8px;
}

/* 本地生活门店类字段：黄色主题（对齐源站 bg-yellow-500） */
.field-label .bar.theme-yellow {
    background: #daab18;
}

.input.theme-yellow:focus,
.field-card.theme-yellow:focus-within {
    border-color: #daab18;
}

.project-card {
    position: relative;
}

/* 卡片右上角操作区：重命名 + 删除。
   两个按钮并排 → 删除保持最靠右、重命名在它左边，避免改动客户已经习惯的删除位置。 */
.project-rename {
    position: absolute;
    top: 12px;
    right: 48px;
    width: 30px;
    height: 30px;
    border-radius: var(--r-sm);
    background: rgba(167, 130, 240, 0.1);
    border: 1px solid rgba(167, 130, 240, 0.24);
    color: #c3aef0;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.18s;
}

.project-rename:hover,
.project-rename:active {
    background: rgba(167, 130, 240, 0.24);
}

.project-del {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border-radius: var(--r-sm);
    background: rgba(235, 72, 94, 0.1);
    border: 1px solid rgba(235, 72, 94, 0.22);
    color: #f47586;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.18s;
}

.project-del:hover,
.project-del:active {
    background: rgba(235, 72, 94, 0.22);
}

/* 危险操作按钮 */
.btn-danger {
    background: #7d1f2c;
    color: #fbcdd3;
    border: 1px solid rgba(235, 72, 94, 0.45);
}

.btn-danger:hover,
.btn-danger:active {
    background: #961e2e;
}

/* 确认框 */
.sheet-sm {
    max-width: 380px;
}

/* ==================== 弹窗内统一版式（对齐参考图：分区卡片 + 胶囊标签） ==================== */
/* 弹窗里的每个分区做成一张卡，形成参考图那种「一屏多卡」的节奏 */
.sheet-body > .field {
    background: #1e1533;
    border: 1px solid rgba(167, 130, 240, 0.14);
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 14px;
}
.sheet-body > .field:last-child { margin-bottom: 0; }

/* 步骤徽章（启动AI主播的两步） */
.step-no {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent-grad);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(140, 60, 240, 0.45);
}

/* 弹窗底部的操作行：主按钮渐变 + 次按钮描边（已是同一套，这里补一层分隔） */
.sheet-footer .btn-secondary {
    background: #2a1d3f;
    border: 1px solid rgba(167, 130, 240, 0.22);
}

/* 确认框：居中显示更符合参考图的卡片弹窗 */
.sheet-mask.sheet-center { align-items: center; }
.sheet-center .sheet {
    max-width: 360px;
    border-radius: 18px;
    border-bottom: 1px solid rgba(167, 130, 240, 0.22);
    box-shadow: 0 20px 60px rgba(40, 8, 90, 0.6);
}
.sheet-center .sheet::before { height: 70px; border-radius: 18px 18px 0 0; }
.sheet-center .sheet::after { display: none; }
.sheet-center .sheet-footer { border-radius: 0 0 18px 18px; }

.confirm-title {
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 12px;
}

/* ==================== 动态变量标注：【用户昵称】 ==================== */
.nick-var {
    display: inline-block;
    padding: 0 6px;
    margin: 0 1px;
    border-radius: 6px;
    background: linear-gradient(150deg, rgba(125, 59, 240, 0.34), rgba(201, 79, 251, 0.2));
    border: 1px solid rgba(190, 150, 255, 0.45);
    color: #e6d6ff;
    font-weight: 600;
    line-height: 1.5;
    cursor: help;
}
.nick-var-note {
    font-size: 12px;
    line-height: 1.7;
    color: #b6a6c8;
    background: rgba(167, 130, 240, 0.08);
    border: 1px dashed rgba(167, 130, 240, 0.28);
    border-radius: 12px;
    padding: 8px 10px;
    margin-bottom: 12px;
}
.nick-var-note.off {
    background: rgba(167, 130, 240, 0.05);
    border-color: rgba(167, 130, 240, 0.18);
    color: #a495b3;
}
/* 互动话术的「直播实际播报」预览行 */
.script-preview {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.6;
    color: #8fdcb8;
    border-left: 2px solid rgba(20, 181, 128, 0.5);
    padding-left: 8px;
    word-break: break-word;
    display: block;
    width: 100%;
}

/* PC 端：底部抽屉已是居中对话框（沿用文件里既有的 PC 规则），
   这里只补参考图卡片弹窗需要的圆角与把手处理 */
@media (min-width: 768px) {
    .sheet { border-bottom: 1px solid rgba(167, 130, 240, 0.22); }
    .sheet::before { border-radius: 16px 16px 0 0; height: 80px; }
    .sheet::after { display: none; }
    .sheet-footer { border-radius: 0 0 16px 16px; }
    .sheet-center .sheet { max-width: 360px; }
}

/* 弹窗内滚动条（PC） */
.sheet-body::-webkit-scrollbar { width: 6px; }
.sheet-body::-webkit-scrollbar-thumb {
    background: rgba(167, 130, 240, 0.28);
    border-radius: 3px;
}

.confirm-body {
    padding: 24px 24px 8px;
    text-align: center;
}

.confirm-title {
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 12px;
}

/* 弹窗正文：文案里带 \n 的整段说明（切换模式 / 核心信息影响）必须按换行渲染，
   而且小屏上要能自己滚 —— 否则「确认」按钮会被顶出视口，客户点不到。 */
.confirm-text {
    font-size: 14px;
    color: var(--text-sub);
    line-height: 1.7;
    word-break: break-word;
    white-space: pre-line;
    text-align: left;
    max-height: 46vh;
    overflow-y: auto;
}

/* 通用输入框弹窗（重命名模型）：标题左对齐、输入框满宽、下方一行提示/校验文案。
   提示行固定占位，避免「重名提示」出现时把按钮顶下去、手指正好点在别处。 */
.prompt-body {
    padding: 22px 22px 6px;
}

.prompt-body .confirm-title {
    text-align: center;
    margin-bottom: 14px;
}

.prompt-body .input {
    text-align: center;
    font-size: 15px;
}

/* 手机端把输入框字号提到 16px：iOS Safari 对 <16px 的输入框会「聚焦即整页放大」，
   一旦缩放，弹窗就跑到屏幕外面去了（客户会以为按钮点不动）。
   ⚠️ 必须写在这条基础规则之后（同权重按先后覆盖），否则会被上面的 15px 顶掉。 */
@media (max-width: 767px) {
    .prompt-body .input {
        font-size: 16px;
    }
}

.prompt-hint {
    min-height: 18px;
    margin-top: 8px;
    font-size: 12px;
    line-height: 18px;
    color: #8e7ca2;
    text-align: center;
}

.prompt-hint.warn {
    color: #f2a03f;
}

/* 空状态 */
.empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 32px;
    text-align: center;
    gap: 16px;
}

.empty-text {
    font-size: 14px;
    color: var(--text-sub);
    line-height: 1.6;
}

.empty-btn {
    padding: 10px 28px;
    border-radius: var(--r-md);
    background: var(--purple-700);
    color: #ffffff;
    font-size: 14px;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

/* ==================== 弹窗（Modal / Sheet） ==================== */
.sheet-mask {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 200;
    display: none;
    align-items: flex-end;
    justify-content: center;
}

.sheet-mask.show {
    display: flex;
}

.sheet {
    width: 100%;
    max-width: 480px;
    max-height: 88vh;
    background: #221a34;
    border-radius: 22px 22px 0 0;
    border: 1px solid rgba(167, 130, 240, 0.22);
    border-bottom: none;
    box-shadow: 0 -18px 50px rgba(50, 12, 100, 0.55);
    display: flex;
    flex-direction: column;
    position: relative;
    animation: sheet-up 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 顶部把手 + 一层紫罗兰辉光，贴合参考图的圆角卡片质感 */
.sheet::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 90px;
    border-radius: 22px 22px 0 0;
    background: linear-gradient(180deg, rgba(126, 45, 226, 0.22), rgba(126, 45, 226, 0));
    pointer-events: none;
}
.sheet::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: rgba(190, 150, 255, 0.35);
    pointer-events: none;
}

@keyframes sheet-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 16px 14px;
    flex-shrink: 0;
    position: relative;
}

/* 弹窗标题左侧的「‹ 返回」（客户反馈：进弹窗找不到返回，只能刷新页面出来）。
   与 ✕ 并存的目的是：✕ 在很多客户眼里是「关闭/取消」，而「返回」才是他们要的动作。
   触控热区 ≥44px（移动端要求），视觉上仍是一个小胶囊。 */
.sheet-return {
    flex: 0 0 auto;
    height: 30px;
    padding: 0 12px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid rgba(167, 130, 240, 0.28);
    background: rgba(167, 130, 240, 0.10);
    color: #cfc0e6;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    position: relative;
}
.sheet-return::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: -7px; bottom: -7px;
}
.sheet-return:hover,
.sheet-return:active {
    background: rgba(167, 130, 240, 0.2);
    color: #fff;
}
/* 返回按钮占位后标题自动靠左（flex:1 让它吃掉剩余空间，标题不会被挤成两行） */
.sheet-header .sheet-title { flex: 1; min-width: 0; }

.sheet-title {
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sheet-title::before {
    content: "";
    width: 4px;
    height: 17px;
    border-radius: 2px;
    background: var(--accent-grad);
    flex-shrink: 0;
}

.sheet-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #b6a6c8;
    cursor: pointer;
    background: rgba(167, 130, 240, 0.12);
    border: 1px solid rgba(167, 130, 240, 0.2);
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.18s;
}
.sheet-close:hover,
.sheet-close:active {
    background: rgba(235, 72, 94, 0.16);
    border-color: rgba(235, 72, 94, 0.35);
    color: #f47586;
}

.sheet-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 16px 20px;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

.sheet-footer {
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0));
    display: flex;
    gap: 12px;
    flex-shrink: 0;
    border-top: 1px solid rgba(167, 130, 240, 0.14);
    background: #1d1430;
    border-radius: 0 0 0 0;
}

/* ==================== 选项卡片（项目类型 / 脚本风格） ==================== */
.option-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.option-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 10px;
    border-radius: 14px;
    background: #241a38;
    border: 1px solid rgba(167, 130, 240, 0.16);
    font-size: 14px;
    color: #ddd8e2;
    cursor: pointer;
    transition: all 0.18s;
    font-family: inherit;
    text-align: center;
}

.option-item.selected {
    border-color: rgba(167, 92, 246, 0.75);
    background: linear-gradient(150deg, rgba(125, 59, 240, 0.30), rgba(201, 79, 251, 0.14));
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(140, 60, 240, 0.28);
}
/* 选中角标（参考图的胶囊化选中提示） */
.option-item.selected::after {
    content: "✓";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent-grad);
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
}

.option-item.full {
    grid-column: 1 / -1;
}

/* 项目类型：竖向大卡片 */
.type-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.type-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 14px;
    background: #241a38;
    border: 1px solid rgba(167, 130, 240, 0.16);
    font-size: 14px;
    color: #ddd8e2;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.18s;
}
.type-item > span:first-child { font-size: 18px; line-height: 1; }

.type-item.selected {
    border-color: rgba(167, 92, 246, 0.75);
    background: linear-gradient(150deg, rgba(125, 59, 240, 0.30), rgba(201, 79, 251, 0.14));
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(140, 60, 240, 0.28);
}
.type-item.selected::after {
    content: "✓";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent-grad);
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
}

/* ==================== 底部固定操作栏 ==================== */
.bottom-bar {
    position: sticky;
    bottom: 0;
    background: #180f2a;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0));
    display: flex;
    gap: 12px;
    border-top: 1px solid var(--border);
}

.bottom-bar .btn {
    flex: 1;
}

/* 清空输入项：与「生成话术」等高，字号/内边距随按钮宽度自适应，避免文字挤压换行 */
.bottom-bar .btn-clear {
    flex: 0 0 42%;
    font-size: 13px;
    font-weight: 400;
    padding-left: 8px;
    padding-right: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bottom-bar .btn-gen {
    flex: 1;
}

/* 备案号（ICP）已按客户要求全站删除：.icp / .copyright-text / .login-footer 三个只会
   服务于备案号与默认账号提示的样式一并移除，避免留下无引用的死样式。 */

/* ==================== 场景列表（互动设置） ==================== */
/* 互动设置页整体字号比产品信息页略小（用户要求） */
.interact-page .field-label { font-size: 13px; margin-bottom: 8px; }
.interact-page .field { margin-bottom: 16px; }

.scene-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.scene-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: var(--r-md);
    background: #241a38;
    border: 1px solid rgba(167, 130, 240, 0.16);
    cursor: pointer;
    transition: all 0.18s;
}

.scene-item.active {
    border-color: var(--purple);
    box-shadow: 0 0 0 1px var(--purple);
}

.scene-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
}

.scene-name {
    flex: 1;
    font-size: 12.5px;
    color: #dcd7e1;
}

/* ==================== 开关控件（源站紫色开启态） ==================== */
.switch {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: #433751;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.22s;
    border: none;
    padding: 0;
}

/* 触控热区：开关本体只有 24px 高，达不到移动端 44px 最低要求，手机上容易点不中。
   用透明伪元素把可点区域上下各撑 10px（合计 44px）——视觉尺寸不变，只扩大命中范围。 */
.switch::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    bottom: -10px;
}

.switch.on {
    background: var(--purple);
}

.switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    transition: transform 0.22s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.switch.on::after {
    transform: translateX(20px);
}
.num-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 14px;
    color: #ddd8e2;
}

.interact-page .num-row { font-size: 12.5px; }
.interact-page .hint { font-size: 12px; }
.interact-page .script-text { font-size: 12.5px; }
.interact-page .script-input-row input { font-size: 12.5px; }

.num-input {
    width: 54px;
    height: 34px;
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    color: #ffffff;
    font-size: 14px;
    font-family: inherit;
    outline: none;
}

.num-input:focus {
    border-color: var(--purple);
}

/* ==================== 话术卡片 ==================== */
.script-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 10px 12px;
    margin-bottom: 12px;
}

.script-input-row input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    font-size: 14px;
    font-family: inherit;
    min-width: 0;
}

.script-input-row input::placeholder {
    color: var(--text-muted);
}

.script-add {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: transparent;
    color: #ffffff;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    font-family: inherit;
}

.script-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 12px;
    margin-bottom: 10px;
}

.script-text {
    flex: 1;
    font-size: 14px;
    color: #cec7d6;
    line-height: 1.6;
}

/* 话术正文 + 「直播实际播报」预览行：整体作为一列，避免与删除按钮挤在一行 */
.script-body {
    flex: 1;
    min-width: 0;
}

.script-del {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 15px;
    cursor: pointer;
    flex-shrink: 0;
}

/* ==================== 声音卡片 ==================== */
.voice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* 互动事件音色选择（主播 / 副播 二选一） */
.voice-pick-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 8px;
}

.voice-pick {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 12px;
    border-radius: var(--r-md, 12px);
    background: var(--bg-card, #221a34);
    border: 1px solid var(--border, #352d4d);
    color: #cec7d6;
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.voice-pick.active {
    border-color: rgba(167, 92, 246, 0.85);
    background: linear-gradient(150deg, rgba(125, 59, 240, 0.28), rgba(201, 79, 251, 0.12));
    box-shadow: 0 6px 18px rgba(140, 60, 240, 0.25);
}

.voice-pick.disabled { opacity: .62; }

.voice-pick .vp-role { font-weight: 600; color: #ffffff; }

.voice-pick .vp-name {
    font-size: 11.5px;
    color: #9685a3;
    word-break: break-all;
}

.voice-pick.active .vp-name { color: #cbb8e6; }

/* 设置副播时的「清空副播」条 */
.voice-clear-sub {    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: var(--r-md, 12px);
    background: var(--bg-raised, #2c2343);
    border: 1px dashed var(--border, #433b5c);
    font-size: 12.5px;
    color: #9685a3;
}

.voice-card {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 56px;
    padding: 8px 10px;
    background: #241a38;
    border: 1px solid rgba(167, 130, 240, 0.14);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: all 0.18s;
    min-width: 0;
}

.voice-card.selected {
    border-color: rgba(167, 92, 246, 0.8);
    background: linear-gradient(150deg, rgba(125, 59, 240, 0.28), rgba(201, 79, 251, 0.12));
    box-shadow: 0 6px 18px rgba(140, 60, 240, 0.3);
}

.voice-icon {
    color: #a85df6;
    font-size: 16px;
    flex-shrink: 0;
}

.voice-name {
    flex: 1;
    font-size: 12px;
    line-height: 1.3;
    color: #dcd7e1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
    min-width: 0;
}

.voice-play {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #271a39;
    color: #a85df6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    flex-shrink: 0;
}

.voice-play.playing {
    background: var(--purple);
    color: #ffffff;
}

/* 声音定制推广卡 */
.voice-promo {
    background: linear-gradient(135deg, rgba(106, 32, 190, 0.55), rgba(160, 48, 208, 0.28));
    border: 1px solid rgba(167, 92, 246, 0.35);
    border-radius: var(--r-lg);
    padding: 14px;
    margin-bottom: 20px;
}

.voice-promo-text {
    font-size: 13px;
    color: #d4ced9;
    margin-bottom: 14px;
}

.voice-promo-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.voice-promo-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #ffffff;
}

.voice-promo-tag {
    padding: 6px 12px;
    border-radius: var(--r-sm);
    background: #261938;
    font-size: 12px;
    color: #d4cddb;
}

.section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.section-title {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
}

.section-note {
    font-size: 11.5px;
    color: #cbb7f5;
    background: rgba(167, 92, 246, 0.14);
    border: 1px solid rgba(167, 92, 246, 0.28);
    border-radius: 999px;
    padding: 2px 10px;
    line-height: 1.6;
}

/* ==================== 话术内容页 ==================== */
.speed-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.speed-btn {
    height: 30px;
    padding: 0 12px;
    border-radius: var(--r-sm);
    background: #231736;
    border: none;
    color: #ddd8e2;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
}

.speed-btn.active {
    background: var(--accent-grad);
    color: #ffffff;
}

.voice-assign {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.voice-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--r-sm);
    background: rgba(167, 92, 246, 0.14);
    border: 1px solid rgba(167, 92, 246, 0.3);
    font-size: 13px;
    color: #d7b7fb;
}

.mini-btn {
    height: 27px;
    padding: 0 10px;
    border-radius: 5px;
    border: none;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    color: #ffffff;
    background: #261938;
}

.mini-purple { background: #9438ef; }
/* ⚠️ 客户第 4 条：副播音色按钮原来的 #2d4be3 是纯正蓝，在这个紫色主题里很突兀
   （确认信息页上尤其明显，客户直接反馈「颜色要修」）。
   统一收敛到与主题同族的靛蓝，和 .mini-indigo 一致，全站副播相关按钮一起变。 */
.mini-blue   { background: #697eeb; }
.mini-indigo { background: #697eeb; }
.mini-green  { background: #108c65; }

/* 确认信息页 / 话术页的「主播 · 副播」两行：强制单行，按钮不许被挤到下一行。
   原来 chip 里的默认文案很长（未选择（讲稿与互动全部由主播播报）），
   会把按钮顶到第二行、孤零零一个色块，看起来就像样式坏了。 */
.voice-assign-row {
    flex-wrap: nowrap;
}
.voice-assign-row .voice-chip {
    flex: 1 1 auto;
    min-width: 0;
    /* ⚠️ 必须 nowrap：chip 内部是「emoji + 标签文字 + <b>值</b>」，
       不加 nowrap 时被压缩的会是标签文字（出现「副」「播：」竖排两行）。 */
    white-space: nowrap;
}
.voice-assign-row .voice-chip b {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.voice-assign-row > button {
    flex: 0 0 auto;
    white-space: nowrap;
}

.risk-tip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    border-radius: var(--r-md);
    border: 1px solid rgba(218, 171, 24, 0.35);
    background: #0e0817;
    font-size: 12px;
    margin-bottom: 16px;
}

.risk-tip .risk-label {
    color: #daab18;
}

.risk-tip .risk-body {
    color: #ddd8e2;
}

.script-block {
    margin-bottom: 20px;
}

.script-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.script-head-title {
    font-size: 15px;
    font-weight: 600;
    color: #cbb7f5;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.script-head-title .count {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 400;
}

.script-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

/* 说明：这里是「话术内容」页里 .script-block 的卡片外框。
   互动设置 / 插话模板的回复卡片同样用了 .script-body 类名，
   若不加 .script-block 限定，会给每张回复卡片再套一层外框 + 12px 内边距，
   并且 white-space: pre-wrap 会把模板里的换行与缩进渲染成空行，把弹窗撑到近 2000px 高 */
.script-block .script-body {
    background: #221a34;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
    font-size: 14px;
    color: #ddd8e2;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ==================== AI主播直播中 ==================== */
/* 顶部控制区吸顶（任务18）：
   往下翻话术时，状态、暂停/继续与真人接管都要一直看得见。
   用 sticky 而不是 fixed，是为了不脱离文档流、不影响下面话术列表的滚动位置计算。

   ⚠️ 客户 9.22 标注「空起来的这个地方删除」：这里原来有一行
   `padding-top: env(safe-area-inset-top, 0)`，在客户那台机器上被算成了约 60px，
   顶上就凭空多出一条空白带（截图里红字标注的那块）—— 已删除。
   顶部已经由 .navbar（56px、同样 sticky）占位，不需要再叠一层安全区高度。

   ⚠️ 另外删掉了折叠区（#live-fold-group）、监控提示行（#live-monitor）、
   计费条（#live-billing）、弹幕互动条（#v12-feed）四块显示，
   所以这里也不再需要「限高 + 折叠区内部滚动」那套规则。 */
.live-top {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--bg-deep);
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
}
.live-top > .live-status-bar,
.live-top > .v12-takeover { flex: 0 0 auto; }

/* 顶栏第一行（客户 9.22 追加反馈：状态与按钮同一行、整行左对齐）。
   历史：暂停与继续拆成两个按钮时，窄屏放不下 → flex-wrap 折行 →
   状态在第一行、按钮掉到第二行，看起来像"最上方空了一行空白"。
   所以这里固定 nowrap：
     · .live-state 可收缩，状态文字自己省略号收尾；
     · .live-actions 不收缩、紧跟状态文字之后（不再靠右）。
   任何屏幕宽度都只有一行，不会再出现多余的空白行。 */
.live-status-bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-deep);
    border-bottom: 1px solid var(--border);
}

.live-state {
    /* 可收缩：状态文字过长时让 .live-label 走省略号，把宽度留给两个按钮 */
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.live-dot {
    width: 6px;
    height: 14px;
    border-radius: 3px;
    background: #14b580;
    flex-shrink: 0;
}

/* 顶栏状态三态：直播中（绿）/ 本地预览（黄，未连直播间）/ 已暂停（灰）。
   状态色只用于状态语义，不做装饰。 */
.live-status-bar.is-live .live-dot { background: #14b580; }
.live-status-bar.is-local .live-dot { background: #d97706; }
.live-status-bar.is-paused .live-dot { background: #8c8c8c; }
.live-status-bar.is-local .live-label { color: #fcd9a4; font-weight: 600; }
.live-status-bar.is-paused .live-label { color: #c9c2d4; }

.live-label {
    font-size: 13px;
    color: #ffffff;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-phase {
    font-size: 12px;
    color: var(--text-sub);
    flex: 0 0 auto;
}

.live-actions {
    /* 客户 9.22 标注：按钮挪到状态那一行、跟左边对齐 ——
       所以不再独占一行，也不再 justify-content: flex-end 顶到右边。 */
    flex: 0 0 auto;
    margin-left: 2px;
    display: flex;
    justify-content: flex-start;
    gap: 8px;
}

.live-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px 16px;
    border-radius: var(--r-md);
    border: none;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
}

.live-btn.pause {
    background: #5c151e;
    color: #f9c1c9;
}

.live-btn.stop {
    background: #6c1823;
    color: #fbd4d9;
}

/* 暂停/继续合并后的同一个按钮（客户 9.22 反馈）：
   已暂停时这个按钮变成绿色的「▶ 继续」，一眼能看出现在点它是继续播报。 */
.live-btn.pause.is-active {
    background: #14b580;
    color: #06251b;
    font-weight: 700;
}

/* ===== 直播中页面折叠区（客户要求 8）已删除（客户 9.22 标注「红框内删除显示！」）=====
   原来这里有 7 组折叠条：连接状态 / 真人接管 / 本场计费 / 动态调整 / 弹幕互动 /
   音色与语速 / 直播间信息，默认收起、只留一行标题，另有「全部展开 / 全部收起」。
   客户认为它整块占篇幅（红框圈的就是这一块），要求删除显示 ——
   DOM（#live-fold-group）、渲染函数（renderLiveFolds 等）与这里的
   .live-fold-toolbar / .live-fold / .live-fold-head / .live-fold-title /
   .live-fold-hint / .live-fold-arrow / .live-fold-body / .live-fold-row /
   .live-fold-label / .live-fold-text 已一并清掉，别再加回来。
   这些信息与开关仍在别处可用：状态看顶栏第一行，真人接管看吸顶区的接管条，
   账目在「账单」页，音色/语速在「声音设置」，动态调整在话术页，直播间信息在模型配置。 */

/* 当前播报句大字卡（客户要求 9）已被删除（客户 9.22 追加反馈）：
   下面的话术列表已经是一句一行、当前句高亮并自动滚到屏幕中间，
   大字卡信息重叠、白占约 130px 屏高，字号一大一小也是从这来的。
   进度改由 .sentence-head 一行小字承担（见下面的样式）。 */

/* 已经念过的句子淡化：一眼看出进度滚到哪儿了 */
.sentence-card.done .sentence-text { opacity: 0.45; }

/* 话术区标题 = 循环名 + 当前句进度（第 x/y 句）。
   ⚠️ 它**不做 sticky**：`.page-body` 带 overflow-y:auto（是滚动容器但不是真正的滚动宿主），
   里面的 sticky 元素会相对这个不滚动的盒子定位，结果就是"滚着滚着标题被顶出屏幕、
   该吸住的时候不吸住"。真正需要一直看得见的（状态 + 暂停/继续）由 .live-top 承担，
   进度会随列表一起滚走 —— 但当前句本身有高亮 + 自动居中，定位信息不会丢。 */
.sentence-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px 10px;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    background: var(--bg-deep);
    border-bottom: 1px solid var(--border);
}

.sentence-head::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 14px;
    border-radius: 3px;
    background: linear-gradient(180deg, #a75cf6, #7c9ef8);
}

/* 直播页句子列表（任务18）：
   一句话一张卡片、一行一条，一行一个字号（客户 9.22 反馈的「字体有大有小」根因是
   原来按 240 字的合成片段渲染，一张卡几百字，长短差异让字号看着忽大忽小）。
   吸顶区已经占掉一部分高度，所以这里把卡片压薄一点，一屏能多看几行。 */
.sentence-list {
    padding: 10px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sentence-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: #1e1430;
    border: 1px solid rgba(167, 130, 240, 0.12);
    border-radius: 10px;
}

/* 正在播放的那一片：**只亮边框**（客户 10.10 指定方案）。
   ⚠️ 为什么改成"亮边框、不亮字"：句级高亮只能靠字数权重估算音频位置，
      估偏 1~2 句就会让人看到"念的和大字亮的不是同一句"（客户反复反馈"对不上"）。
      边框按"正在播的这一片"打，天然与音频一致，不存在估算误差。 */
.sentence-card.strap-live {
    border-color: #a75cf6;
    border-width: 2px;
    box-shadow: 0 0 0 1px rgba(167, 92, 246, 0.35), 0 0 14px rgba(167, 92, 246, 0.18);
}

/* ── 一段 = 一张卡，**段内每句仍单独一行** ─────────────────────────────
   ⚠️ 客户 10.10 现场修正：「现在一个大段落越搞越没法看了」——
      上一版把片内句子拼成一整段（240 字一坨），读起来很难受。
      现在：卡片仍是"一片"（边框/进度天然对齐、不用估算），
            但段内句子逐行排版；当前句只**轻微加粗**（不换色、不铺底），
            所以"哪段在响"是事实、"段内念到哪句"是辅助信息。 */
.seg-card { flex-direction: column; gap: 8px; }
.seg-body { width: 100%; }
.seg-lines { display: block; }
.seg-line {
    font-size: 15px;
    line-height: 1.7;
    color: #d4ced9;
    word-break: break-word;
    padding: 1px 0;
}
/* ⚠️ 客户 10.10 起**不再使用**句级高亮（`.hl-on` 仍留着，以防回退）：
   现场埋点证明长片段的第一句会延迟 9~12 秒才跳、同段 bounds 自相矛盾
   （两条推进器交错写），靠调参修不干净。
   所以视觉只保留两件**事实驱动、不可能错**的信息：
     · 正在播放的那一段 → 紫色边框（`.sentence-card.strap-live`）
     · 段内进度 → 按 audio.currentTime / duration 推进的进度条（`.seg-progress`） */
.seg-line.hl-on {
    color: #efe9f7;
    font-weight: 600;
}
/* 段内进度条：按这一片音频的真实播放比例推进（事实驱动，不会对不上） */
.seg-progress {
    margin-top: 6px;
    height: 3px;
    border-radius: 2px;
    background: rgba(167, 130, 240, 0.16);
    overflow: hidden;
}
.seg-progress i {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #7c4dff, #c084fc);
    transition: width 0.25s linear;
}

/* ⚠️ 正在念的这一句（客户 10.10 最终口径：**保留句级高亮**）。
   中途我曾为"绝不错位"把句级高亮整个去掉，客户直接反馈
   「安卓跟苹果都是大得整段，没高亮。要修复为高亮」——所以这条是必须的。
   视觉上做得**清楚但不刺眼**：左侧一道亮条 + 淡紫底 + 边框 + 文字提亮，
   即使估算偶尔偏一句，也不会像"整块大红"那样刺眼。 */
.sentence-card.playing {
    background: #2a1a44;
    border-color: rgba(167, 92, 246, 0.85);
    box-shadow: inset 3px 0 0 0 #a75cf6, 0 0 10px rgba(167, 92, 246, 0.22);
}

.sentence-text {
    flex: 1;
    font-size: 15px;
    color: #d4ced9;
    line-height: 1.65;
    /* 一条播报单元自然折行；不强制 nowrap（长句硬撑一行会横向溢出） */
    word-break: break-word;
}

/* 当前句的文字提亮（与其它行同字号，避免忽大忽小） */
.sentence-card.playing .sentence-text {
    color: #ffffff;
    font-weight: 600;
}

.sentence-status {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    font-size: 12px;
    white-space: nowrap;
}

.st-ready  { color: #14b580; }
.st-play   { color: #9984b1; }
.st-paused { color: #9984b1; }
.st-gen    { color: #4862e8; display: inline-flex; align-items: center; gap: 4px; }
.st-wait   { color: #746289; }

.st-spin {
    display: inline-block;
    animation: spin 1.2s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.st-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #445089;
}

/* 直播间监控提示条（.live-monitor / -icon / -text）与本场计费条
   （.live-billing / .lb-tag）已删除（客户 9.22 标注「红框内删除显示！」）：
   前者是「正在监控直播间 xxx，请稍候…」，后者是「本场播报 x 字 / 已扣 x 算力 /
   剩余 x / x 算力每字」那一行 —— 两块加起来占掉吸顶区一大截，客户圈了红框要求删除显示。
   扣费本身照旧（server 侧按播报字数扣），账目在「账单」页查看；
   顶栏第一行仍然会显示「直播中 / 已暂停 / 本地预览播报」，连接状态不会丢。
   DOM 与渲染函数（renderLiveBilling / spiralMetricTag）已一并删除，别再加回来。 */

/* ==================== 启动AI主播弹窗（登录 / 直播间） ==================== */
.start-live-hint {
    min-height: 18px;
    font-size: 12.5px;
    color: #4862e8;
    text-align: center;
    /* 连接失败/需手工粘贴 Cookie 时文案较长，允许换行并留出点击按钮的空间 */
    line-height: 1.6;
    word-break: break-word;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.wx-qr-box,
.wx-shot-box {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    padding: 8px;
    background: #1c132e;
    border: 1px dashed rgba(167, 130, 240, 0.3);
    border-radius: 14px;
    overflow: hidden;
}

.wx-qr-img {
    width: 160px;
    height: 160px;
    object-fit: contain;
    background: #ffffff;
    border-radius: 8px;
    padding: 6px;
}

.wx-shot-box img {
    width: 100%;
    max-height: 260px;
    object-fit: contain;
    border-radius: 6px;
}

.wx-qr-empty {
    font-size: 12.5px;
    color: var(--text-muted);
    text-align: center;
}

/* 音色弹窗：空态/加载态占位 */
.voice-empty {
    grid-column: 1 / -1;
    padding: 16px 12px;
    font-size: 12.5px;
    color: #a495b3;
    text-align: center;
    background: rgba(167, 130, 240, 0.06);
    border: 1px dashed rgba(167, 130, 240, 0.28);
    border-radius: 14px;
}

/* 插话模板与互动设置中话术列表更紧凑（对标参考站精致排版） */
#sheet-interact #reply-list .script-card,
#sheet-interrupt #interrupt-list .script-card {
    padding: 6px 9px;
    margin-bottom: 5px;
    gap: 6px;
    border-radius: 8px;
    min-height: auto;
}

#sheet-interact #reply-list .script-text,
#sheet-interrupt #interrupt-list .script-text {
    font-size: 12px;
    line-height: 1.35;
}

#sheet-interact #reply-list .script-preview,
#sheet-interrupt #interrupt-list .script-preview {
    font-size: 10.5px;
    margin-top: 2px;
    line-height: 1.25;
}

#sheet-interact #reply-list .script-del,
#sheet-interrupt #interrupt-list .script-del {
    width: 26px;
    height: 26px;
    font-size: 12px;
    flex-shrink: 0;
}

#sheet-interact .chip-wrap {
    gap: 5px;
    margin-top: 5px;
    margin-bottom: 8px;
}

#sheet-interact .chip {
    padding: 3px 8px;
    font-size: 11px;
    line-height: 1.3;
}

#sheet-interact .nick-var-note {
    margin-bottom: 6px;
    padding: 5px 8px;
    font-size: 10.5px;
}
#sheet-interrupt .script-input-row input,
#sheet-start-live .input {
    font-size: 13px;
}

#sheet-interrupt #interrupt-ai-btn {
    font-size: 13.5px;
    font-weight: 600;
    padding: 10px 14px;
    line-height: 1.35;
    white-space: nowrap;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==================== 互动配置弹窗：小标题 ==================== */
.sub-title {
    font-size: 14px;
    font-weight: 500;
    color: #ddd8e2;
    margin-bottom: 10px;
}

.sub-title-sm {
    font-size: 12.5px;
    color: #cbc4d3;
}

.sub-note {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 3px;
}

/* 未设置副主播时开关置灰不可点（对齐参考站 cursor-not-allowed opacity-50） */
.switch.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==================== 详情页右上角三个点菜单 ==================== */
.navbar-side.navbar-more {
    cursor: pointer;
    font-size: 18px;
    letter-spacing: 1px;
    line-height: 1;
    padding: 4px 6px;
}

.navbar {
    position: relative;
}

.more-menu {
    position: absolute;
    top: 46px;
    right: 12px;
    min-width: 148px;
    background: #231734;
    border: 1px solid #342746;
    border-radius: var(--r-md);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    z-index: 60;
    display: none;
}

.more-menu.show {
    display: block;
}

.more-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    font-size: 13.5px;
    color: #ffffff;
    cursor: pointer;
    white-space: nowrap;
}

.more-item:active {
    background: #302343;
}

.more-icon {
    font-size: 14px;
    line-height: 1;
}

/* 最后一项：紫→蓝渐变高亮（复刻参考站 primary 菜单项） */
.more-item.more-primary {
    margin-top: 4px;
    background: var(--accent-grad);
    font-weight: 500;
}

.more-item.more-primary:active {
    opacity: 0.88;
}

/* ==================== 通用工具类 ==================== */
.row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }

.hint {
    font-size: 12px;
    color: var(--text-sub);
    line-height: 1.6;
}

/* 快捷标签 chips */
.chip-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.chip {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    background: rgba(218, 171, 24, 0.1);
    border: 1px solid rgba(218, 171, 24, 0.28);
    color: #e7c128;
    cursor: pointer;
    font-family: inherit;
}

.chip:active {
    background: rgba(218, 171, 24, 0.2);
}

/* 已选中的标签（对应源站点击后追加进输入框的状态） */
.chip.chip-on {
    background: rgba(218, 171, 24, 0.28);
    border-color: rgba(218, 171, 24, 0.6);
    color: #ecd558;
}

/* 「换一批」随机生成按钮（不参与选中态） */
.chip.chip-random {
    background: rgba(148, 56, 239, 0.14);
    border: 1px dashed rgba(167, 92, 246, 0.6);
    color: #d7b7fb;
}

.chip.chip-random:active {
    background: rgba(148, 56, 239, 0.28);
}

/* AI 生成中的占位标签 */
.chip.chip-loading {
    background: rgba(255, 255, 255, 0.05);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    color: var(--text-sub);
    cursor: default;
    animation: chip-pulse 1.2s ease-in-out infinite;
}

/* 已选标签回显（有标签的字段无输入框，这里展示最终取值） */
.chip-selected-summary {
    flex: 0 0 100%;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.6;
    color: #ecd558;
    word-break: break-all;
}

@keyframes chip-pulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}

/* toast */
.toast {
    position: fixed;
    left: 50%;
    top: 76px;
    transform: translateX(-50%) translateY(-16px);
    background: rgba(20, 181, 128, 0.95);
    color: #ffffff;
    padding: 10px 20px;
    border-radius: var(--r-md);
    font-size: 13px;
    z-index: 300;
    opacity: 0;
    pointer-events: none;
    transition: all 0.26s;
    max-width: 90vw;
    text-align: center;
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.toast.error {
    background: rgba(235, 72, 94, 0.95);
}

/* 加载中 */
.loading-inline {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 滚动条隐藏 */
.page-body::-webkit-scrollbar,
.sheet-body::-webkit-scrollbar,
.drawer::-webkit-scrollbar {
    width: 0;
}

/* ============================================================
   PC 端布局（断点 768px，与源站 md: 一致）
   源站骨架：顶部栏 h-[60px] + flex-col md:flex-row
             左栏 w-full md:w-[35%] + 右栏 flex-1
   ============================================================ */

/* 默认（手机端）：PC 专属元素全部隐藏 */
.topbar,
.pc-sidebar,
.pc-placeholder {
    display: none;
}

/* ---------------- PC 端 ---------------- */
@media (min-width: 768px) {

    body {
        height: 100vh;
        overflow: hidden;
    }

    #app {
        max-width: none;
        margin: 0;
        height: calc(100vh - 60px);
        display: flex;
        padding-bottom: 0;
    }

    /* 手机端专属元素在 PC 隐藏（对应源站 md:hidden） */
    .drawer,
    .drawer-mask,
    .navbar,
    .navbar-purple {
        display: none !important;
    }

    /* ---------- 顶部栏 ---------- */
    .topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 60px;
        padding: 0 24px;
        background: var(--bg-deep);
        border-bottom: 1px solid var(--border);
        position: relative;
        z-index: 60;
    }

    .topbar-left {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
    }

    .topbar-logo {
        font-size: 22px;
        line-height: 1;
    }

    .topbar-brand {
        font-size: 17px;
        font-weight: 700;
        color: #ffffff;
    }

    .topbar-nav {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-left: 32px;
        flex: 1;
    }

    .topbar-item {
        padding: 7px 14px;
        border-radius: var(--r-md);
        font-size: 14px;
        color: var(--text-sub);
        cursor: pointer;
        transition: all 0.18s;
    }

    .topbar-item:hover {
        background: rgba(255, 255, 255, 0.05);
        color: #ffffff;
    }

    .topbar-item.active {
        background: rgba(167, 92, 246, 0.16);
        color: #d7b7fb;
        font-weight: 500;
    }

    .topbar-right {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-shrink: 0;
    }

    .pc-voice-entry {
        height: 34px;
        padding: 0 14px;
        border-radius: var(--r-md);
        background: #211531;
        border: 1px solid var(--border);
        color: #ddd8e2;
        font-size: 13px;
        font-family: inherit;
        cursor: pointer;
        transition: all 0.18s;
    }

    .pc-voice-entry:hover {
        border-color: var(--purple);
        color: #ffffff;
    }

    .pc-create-btn {
        height: 34px;
        padding: 0 16px;
        border-radius: var(--r-md);
        background: var(--accent-grad);
        border: none;
        color: #ffffff;
        font-size: 13px;
        font-weight: 500;
        font-family: inherit;
        cursor: pointer;
        box-shadow: var(--accent-glow);
    }

    .pc-create-btn:hover {
        opacity: 0.9;
    }

    .topbar-user {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 5px 10px 5px 6px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.04);
        cursor: pointer;
        position: relative;
    }

    .topbar-avatar {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: linear-gradient(135deg, #f0dcff, #c07fff);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
    }

    .topbar-user-info {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
    }

    .topbar-username {
        font-size: 13px;
        font-weight: 600;
        color: #b479f8;
    }

    .topbar-role {
        font-size: 11px;
        color: var(--text-muted);
    }

    .topbar-caret {
        font-size: 10px;
        color: var(--text-muted);
    }

    /* 用户下拉菜单 */
    .topbar-menu {
        position: absolute;
        top: 46px;
        right: 0;
        min-width: 150px;
        background: var(--bg-card);
        border: 1px solid var(--border-strong);
        border-radius: var(--r-md);
        padding: 6px;
        display: none;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
        z-index: 80;
    }

    .topbar-menu.show {
        display: block;
    }

    .topbar-menu-item {
        padding: 9px 12px;
        border-radius: var(--r-sm);
        font-size: 13px;
        color: #ddd8e2;
        cursor: pointer;
    }

    .topbar-menu-item:hover {
        background: rgba(255, 255, 255, 0.06);
        color: #ffffff;
    }

    .topbar-menu-item.danger {
        color: #f47586;
    }

    .topbar-menu-item.danger:hover {
        background: rgba(235, 72, 94, 0.12);
    }

    /* ---------- PC 侧边栏（左侧 35%，对应源站 md:w-[35%]） ---------- */
    .pc-sidebar {
        display: flex;
        flex-direction: column;
        width: 340px;
        flex-shrink: 0;
        background: #180f28;
        border-right: 1px solid var(--border);
        overflow: hidden;
    }

    .pc-sidebar-title {
        padding: 18px 20px 12px;
        font-size: 13px;
        font-weight: 600;
        color: var(--text-sub);
        letter-spacing: 0.5px;
    }

    .pc-sidebar-filter {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding: 0 20px 14px;
    }

    .pc-filter-chip {
        padding: 4px 12px;
        border-radius: 999px;
        font-size: 12px;
        background: rgba(255, 255, 255, 0.05);
        color: var(--text-sub);
        cursor: pointer;
        border: 1px solid transparent;
        font-family: inherit;
        transition: all 0.18s;
    }

    .pc-filter-chip:hover {
        color: #ffffff;
    }

    .pc-filter-chip.active {
        background: rgba(167, 92, 246, 0.16);
        border-color: rgba(167, 92, 246, 0.4);
        color: #d7b7fb;
    }

    .pc-filter-chip.pc-filter-upcoming {
        border-style: dashed;
        border-color: rgba(255, 255, 255, 0.14);
        color: #7d7391;
    }

    .pc-sidebar-list {
        flex: 1;
        overflow-y: auto;
        padding: 0 12px 12px;
    }

    .pc-sidebar-list::-webkit-scrollbar {
        width: 6px;
    }

    .pc-sidebar-list::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 3px;
    }

    .pc-proj-item {
        padding: 12px 14px;
        border-radius: var(--r-md);
        cursor: pointer;
        border: 1px solid transparent;
        margin-bottom: 6px;
        transition: all 0.18s;
        position: relative;
    }

    /* PC 侧边栏卡片操作按钮：默认隐藏，悬停/选中时显示。
       删除与重命名共用一套定位/尺寸/显隐规则，删除保持最靠右。 */
    .pc-proj-del,
    .pc-proj-rename {
        position: absolute;
        top: 10px;
        width: 26px;
        height: 26px;
        border-radius: var(--r-sm);
        font-size: 12px;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-family: inherit;
        opacity: 0;
        transition: opacity 0.18s, background 0.18s;
    }

    .pc-proj-del {
        right: 10px;
        background: rgba(235, 72, 94, 0.12);
        border: 1px solid rgba(235, 72, 94, 0.22);
        color: #f47586;
    }

    .pc-proj-rename {
        right: 40px;
        background: rgba(167, 130, 240, 0.12);
        border: 1px solid rgba(167, 130, 240, 0.24);
        color: #c3aef0;
    }

    .pc-proj-item:hover .pc-proj-del,
    .pc-proj-item.active .pc-proj-del,
    .pc-proj-item:hover .pc-proj-rename,
    .pc-proj-item.active .pc-proj-rename {
        opacity: 1;
    }

    .pc-proj-del:hover {
        background: rgba(235, 72, 94, 0.25);
    }

    .pc-proj-rename:hover {
        background: rgba(167, 130, 240, 0.25);
    }

    /* 给删除 + 重命名两个按钮预留空间，避免与名称/标签重叠 */
    .pc-proj-name {
        padding-right: 60px;
    }

    .pc-proj-item:hover {
        background: rgba(255, 255, 255, 0.04);
    }

    .pc-proj-item.active {
        background: rgba(167, 92, 246, 0.1);
        border-color: rgba(167, 92, 246, 0.35);
    }

    .pc-proj-name {
        font-size: 14px;
        font-weight: 600;
        color: #ffffff;
        margin-bottom: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pc-proj-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        font-size: 12px;
    }

    .pc-proj-platform {
        color: #a495b3;
    }

    .pc-proj-type {
        padding: 2px 8px;
        border-radius: 999px;
        font-size: 11px;
        background: rgba(226, 182, 68, 0.15);
        color: #e1b346;
        flex-shrink: 0;
    }

    .pc-sidebar-empty {
        padding: 40px 20px;
        text-align: center;
        font-size: 13px;
        color: var(--text-muted);
        line-height: 1.7;
    }

    .pc-sidebar-footer {
        padding: 12px;
        border-top: 1px solid var(--border);
        flex-shrink: 0;
    }

    .pc-member-card {
        background: var(--bg-card);
        border-radius: var(--r-md);
        padding: 12px 14px;
    }

    /* ---------- 右侧内容区（flex-1） ---------- */
    .view {
        flex: 1;
        min-width: 0;
        height: 100%;
        overflow-y: auto;
        display: none;
    }

    .view.active {
        display: flex;
        flex-direction: column;
    }

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

    .page-body::-webkit-scrollbar {
        width: 6px;
    }

    .page-body::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 3px;
    }

    /* PC 端 Tab 栏间距加大 */
    .tab-bar {
        padding: 0 28px 16px;
        border-bottom: 1px solid var(--border);
    }

    /* PC 端内容网格加宽（对应源站 md:grid-cols-3） */
    .project-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        padding: 0;
    }

    .option-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .voice-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .type-list {
        flex-direction: row;
    }

    .type-item {
        flex: 1;
    }

    /* PC 端表单不再需要卡片包裹感那么强 */
    .field-card {
        padding: 14px;
    }

    /* PC 端底部操作栏改为非吸附 */
    .bottom-bar {
        position: sticky;
        bottom: 0;
        background: var(--bg-darker);
        padding: 16px 28px;
        border-top: 1px solid var(--border);
    }

    .bottom-bar .btn {
        max-width: 220px;
    }

    /* PC 端弹窗改为居中卡片（源站 PC 使用居中 Modal） */
    .sheet-mask {
        align-items: center;
    }

    .sheet {
        max-width: 560px;
        width: 560px;
        border-radius: var(--r-xl);
        max-height: 82vh;
        animation: modal-in 0.2s ease-out;
    }

    @keyframes modal-in {
        from { transform: scale(0.96); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
    }

    .sheet-body {
        padding: 0 24px 20px;
    }

    .sheet-header {
        padding: 22px 24px 16px;
    }

    .sheet-footer {
        padding: 16px 24px 22px;
    }

    /* PC 端空态占位 */
    .pc-placeholder {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pc-placeholder-inner {
        text-align: center;
        max-width: 380px;
        padding: 40px;
    }

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

    .pc-placeholder-title {
        font-size: 17px;
        font-weight: 600;
        color: #ffffff;
        margin-bottom: 8px;
    }

    .pc-placeholder-desc {
        font-size: 13px;
        color: var(--text-sub);
        line-height: 1.7;
        margin-bottom: 22px;
    }

    /* PC 端句子卡片双列 */
    .sentence-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 0 28px 20px;
    }

    .sentence-head {
        padding: 20px 28px 12px;
    }

    .live-status-bar {
        padding: 14px 28px;
    }

    /* ---------- 登录页（源站 Element Plus 结构） ---------- */
    /* ---------- 登录页（PC 两栏） ---------- */
    body.logged-out {
        height: 100vh;
        overflow: hidden;
    }

    body.logged-out #app {
        height: 100vh;
        width: 100%;
    }
}

/* 登录态下隐藏所有主界面外壳元素（与屏幕宽度无关，全局生效） */
body.logged-out .topbar,
body.logged-out .pc-sidebar,
body.logged-out .pc-placeholder {
    display: none !important;
}

/* ============================================================
   登录页 —— PC 端暗黑双栏（参考设计图）
   左：品牌发光环展示区  |  右：表单卡片
   ============================================================ */
/* 登录态下禁止任何弹窗叠加显示（双保险，JS 也会清理） */
body.logged-out .sheet-mask {
    display: none !important;
}

#view-login.active {
    display: block;
    min-height: 100vh;
}

.admin-login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    background:
        radial-gradient(circle at 25% 80%, #1d0b2e 0%, #09050f 50%, #11091b 100%);
    padding: 20px;
    position: relative;
    overflow: hidden;
}

/* ---------- 左侧品牌展示区（仅 PC） ---------- */
.login-brand-side {
    display: none;
}

/* ---------- 右侧表单区 ---------- */
.login-wrapper {
    width: 100%;
    max-width: 420px;
    padding: 20px;
    position: relative;
    z-index: 2;
}

.login-header {
    text-align: center;
    margin-bottom: 8px;
}

.logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 手机端品牌环（复用 PC 的 brand-inner-ring / brand-badge 一套） */
.mobile-brand-ring {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    padding: 4px;
    background: conic-gradient(from 200deg, #ad16c4, #d01cec, #697eeb, #ad16c4);
    box-shadow:
        0 0 18px rgba(173, 22, 196, 0.45),
        0 0 32px rgba(105, 126, 235, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

/* 内环（PC / 手机共用） */
.brand-inner-ring {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #0e0817;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 徽章（PC / 手机共用，尺寸随容器自适应） */
.brand-badge {
    width: 72%;
    height: 72%;
    border-radius: 50%;
    background: linear-gradient(135deg, #f0dcff, #c07fff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    line-height: 1;
    box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.35);
}

/* 品牌 LOGO 真图（客户第 4 条）：
   BRAND_LOGO.url 填好后 applyBrandLogos() 会把各占位节点换成 <img>，
   这里统一约束尺寸，保证顶栏/抽屉/头像/登录徽标四种容器里都不变形。
   占位阶段（url 为空）不会有这个元素，样式空转无副作用。 */
.brand-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.topbar-logo .brand-logo-img { width: 24px; height: 24px; }
.topbar-avatar .brand-logo-img,
.drawer-avatar .brand-logo-img { width: 100%; height: 100%; border-radius: 50%; }

/* 有真 LOGO 时（body.has-brand-logo，由 applyBrandLogos 打标记）：
   把原来「给 emoji 当地板」的渐变底、发光环、内阴影全部去掉 ——
   图标本身自带橙色圆环，再叠一圈彩色光晕只会脏。
   注意：这些规则只在「确实配了 LOGO 图片」时生效，占位阶段视觉与改动前完全一致。 */
body.has-brand-logo .brand-glow-ring,
body.has-brand-logo .mobile-brand-ring {
    background: none;
    box-shadow: none;
    padding: 0;
}
body.has-brand-logo .brand-inner-ring {
    background: transparent;
}
body.has-brand-logo .brand-badge {
    width: 100%;
    height: 100%;
    background: none;
    box-shadow: none;
    font-size: 0;
}
body.has-brand-logo .topbar-logo,
body.has-brand-logo .topbar-avatar,
body.has-brand-logo .drawer-avatar {
    background: none;
    box-shadow: none;
}

.system-title {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

/* ---------- 表单卡片 ---------- */
.login-form-card {
    background: #1c1230;
    border: 1px solid rgba(167, 130, 240, 0.16);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(60, 20, 110, 0.5);
    overflow: hidden;
    margin-top: 16px;
}

/* 登录方式 Tab */
.login-tabs {
    display: flex;
    gap: 32px;
    padding: 24px 24px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* 触控目标：原为 35px 高，达不到移动端 44px 最低要求，容易点不中 */
.login-tab {
    position: relative;
    padding: 0 0 16px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    font-size: 16px;
    font-weight: 400;
    color: #9988ac;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.2s;
}

.login-tab.active {
    color: #ffffff;
    font-weight: 600;
}

.login-tab.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    border-radius: 1px;
    background: linear-gradient(90deg, #ac44f1, #a75cf6);
}

.form-body {
    padding: 24px 28px 28px;
}

/* Element 风格表单项 */
.el-form-item {
    margin-bottom: 20px;
}

.el-form-label {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: #beb4c7;
    margin-bottom: 8px;
}

.el-input {
    display: flex;
    align-items: center;
    width: 100%;
    height: 44px;
    background: #251a39;
    border: 1px solid #3d2d55;
    border-radius: 6px;
    padding: 0 14px;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.el-input:focus-within {
    border-color: #a75cf6;
}

.el-input-inner {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: #ffffff;
    font-family: inherit;
    height: 100%;
}

.el-input-inner::placeholder {
    color: #645378;
}

/* 获取验证码按钮 */
.code-button {
    flex-shrink: 0;
    height: 30px;
    padding: 0 12px;
    margin-left: 8px;
    border-radius: 4px;
    border: 1px solid #392c4b;
    background: rgba(167, 92, 246, 0.12);
    color: #beb4c7;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.code-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 主按钮：紫→靛蓝渐变 */
.el-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 44px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    color: #ffffff;
    background: var(--accent-grad);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: opacity 0.2s, box-shadow 0.2s;
}

.el-button:hover {
    opacity: 0.92;
    box-shadow: 0 6px 20px rgba(150, 48, 244, 0.32);
}

.el-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-icon {
    font-size: 14px;
    line-height: 1;
}

.login-button {
    margin-top: 4px;
}

.login-err {
    min-height: 18px;
    font-size: 12px;
    color: #f26f81;
    margin-bottom: 8px;
}

/* 登录 / 注册 互切的一行提示 */
.login-switch-line {
    margin: 2px 0 12px;
    font-size: 12.5px;
    color: #746289;
}

.login-switch-line a {
    color: #b07dfb;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* 注册页的短信通道状态说明（未配置时高亮告警） */
.reg-sms-note {
    margin: 4px 0 12px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.7;
    color: #b6a6c8;
    background: rgba(167, 130, 240, 0.08);
    border: 1px dashed rgba(167, 130, 240, 0.28);
}

.reg-sms-note.warn {
    color: #ffca7a;
    background: rgba(255, 176, 60, 0.08);
    border-color: rgba(255, 176, 60, 0.35);
}

.reg-sms-note b { color: #ffffff; }

/* .reg-sms-note b { color: #ffffff; } —— 保留在上面 */

/* 备案号与登录页默认账号提示已按客户要求全站删除，
   这三条只为它们服务的样式（.login-hint / .login-footer / .copyright-text）也一并移除，
   避免留下无引用的死样式。 */

/* ============================================================
   PC 端（≥768px）：双栏布局
   ============================================================ */
@media (min-width: 768px) {
    .admin-login-container {
        justify-content: space-between;
        padding: 0 6%;
    }

    /* 左侧品牌展示区 */
    .login-brand-side {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        min-height: 100vh;
    }

    /* 发光同心环 */
    .brand-glow-ring {
        width: 340px;
        height: 340px;
        border-radius: 50%;
        padding: 7px;
        background: conic-gradient(from 200deg, #ad16c4, #d01cec, #697eeb, #ad16c4);
        box-shadow:
            0 0 25px rgba(173, 22, 196, 0.5),
            0 0 45px rgba(105, 126, 235, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        animation: ring-pulse 4s ease-in-out infinite;
    }

    @keyframes ring-pulse {
        0%, 100% { box-shadow: 0 0 25px rgba(173, 22, 196, 0.5), 0 0 45px rgba(105, 126, 235, 0.3); }
        50%      { box-shadow: 0 0 35px rgba(173, 22, 196, 0.7), 0 0 65px rgba(105, 126, 235, 0.45); }
    }

    .brand-text {
        margin-top: 40px;
        text-align: center;
    }

    .brand-name {
        font-size: 20px;
        font-weight: 700;
        color: #ffffff;
        margin: 0 0 8px;
        letter-spacing: 2px;
    }

    .brand-sub {
        font-size: 12px;   /* 正文下限 12px：11px 在手机上已经偏小 */
        font-weight: 400;
        color: #d0cad7;
        letter-spacing: 2px;
        text-transform: uppercase;
        margin: 0;
    }

    /* 右侧表单区固定宽度 */
    .login-wrapper {
        flex: 0 0 420px;
        max-width: 420px;
        padding: 0;
    }

    /* PC 端隐藏手机用的 logo 头 */
    .login-header {
        display: none;
    }

    .login-form-card {
        margin-top: 0;
    }
}

/* ---------------- 手机端登录页微调 ---------------- */
@media (max-width: 767px) {
    .login-brand-side {
        display: none;
    }

    .admin-login-container {
        padding: calc(20px + env(safe-area-inset-top, 0)) 16px
                 calc(20px + env(safe-area-inset-bottom, 0));
        align-items: center;
    }

    .login-wrapper {
        padding: 4px;
    }

    .system-title {
        font-size: 18px;
    }

    .login-tabs {
        padding: 18px 20px 0;
        gap: 24px;
    }

    .form-body {
        padding: 20px;
    }
}

/* ==================== 声音复刻入口与录音 ==================== */
.voice-clone-entry {
    border: 1px dashed rgba(167, 92, 246, 0.55);
    justify-content: center;
}

.voice-clone-entry .voice-name {
    color: #ab56f6;
}

.clone-record-row {
    display: flex;
    gap: 10px;
}

.clone-record-row .btn {
    flex: 1;
}

.clone-file {
    width: 100%;
    font-size: 12.5px;
    color: #ddd8e2;
    font-family: inherit;
}

/* ==================== 会员中心 ==================== */
.member-now {
    background: linear-gradient(150deg, #2a1d45 0%, #221a34 62%);
    border: 1px solid rgba(167, 130, 240, 0.22);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 18px;
    box-shadow: 0 8px 22px rgba(60, 20, 110, 0.35);
}
.member-now-level { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #b6a6c8; font-weight: 500; }
.member-now-credit { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; color: #b6a6c8; margin-top: 10px; }
.member-now-credit b { color: #ffffff; font-size: 30px; font-weight: 700; line-height: 1; text-shadow: 0 4px 18px rgba(160, 90, 255, 0.45); }
.member-now-expire { font-size: 12px; color: #9381a7; margin-top: 8px; }
.member-table-wrap { overflow-x: auto; border: 1px solid rgba(167, 130, 240, 0.14); border-radius: 12px; background: #1c132e; }
.member-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.member-table th, .member-table td {
    padding: 9px 10px; text-align: left; border-bottom: 1px solid rgba(167, 130, 240, 0.1); white-space: nowrap;
}
.member-table tr:last-child td { border-bottom: none; }
.member-table th { color: #b6a6c8; font-weight: 500; font-size: 12px; background: rgba(167, 130, 240, 0.08); }
.member-table td { color: #ddd8e2; }
.member-row-cur td { background: linear-gradient(90deg, rgba(125, 59, 240, 0.24), rgba(201, 79, 251, 0.1)); color: #ffffff; }
.member-now-tag {
    display: inline-block; padding: 1px 6px; border-radius: 999px;
    font-size: 10.5px; background: #933ce4; color: #ffffff;
}
.drawer-member {
    width: 100%; height: 38px; margin-bottom: 8px;
    background: #2441d1; color: #ffffff; border: none; border-radius: 8px;
    font-size: 13px; font-family: inherit; cursor: pointer;
}

/* ==================== 会员等级差异化 ==================== */
.locked { opacity: .55; }
.voice-clone-entry.locked { border-style: dotted; border-color: #574769; }
.voice-clone-entry.locked .voice-name { color: #9381a7; }

.member-badge-free { background: #433751 !important; color: #d4cddb !important; }
.member-badge-trial { background: rgba(20, 181, 128, .2) !important; color: #38cf98 !important; }
.member-badge-platinum { background: rgba(147, 60, 228, .25) !important; color: #d2aafb !important; }
.member-badge-diamond { background: rgba(232, 177, 49, .22) !important; color: #e8b131 !important; }

.member-card.lm-free { border-color: #433751; }
.member-card.lm-trial { border-color: rgba(20, 181, 128, .4); }
.member-card.lm-platinum { border-color: rgba(147, 60, 228, .45); }
.member-card.lm-diamond { border-color: rgba(232, 177, 49, .5); }

/* ==================== 会员套餐 / 充值 ==================== */
.plan-list { display: flex; flex-direction: column; gap: 8px; }
.plan-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; background: #180e25;
    border: 1px solid #291c3b; border-radius: 10px; cursor: pointer;
}
.plan-row:active { background: #231634; }
.plan-main { min-width: 0; }
.plan-name { font-size: 13.5px; color: #ffffff; }
.plan-desc { font-size: 11.5px; color: #9381a7; margin-top: 3px; }
.plan-price { font-size: 15px; color: #e8b131; font-weight: 600; flex-shrink: 0; margin-left: 10px; }
.member-link { color: #6d82ed; word-break: break-all; }

/* 一键清空已选标签 */
.chip.chip-clear {
    background: rgba(235, 72, 94, 0.12);
    border: 1px dashed rgba(235, 72, 94, 0.5);
    color: #f8a9b4;
}
.chip.chip-clear:active {
    background: rgba(235, 72, 94, 0.24);
}

/* ==================== 全屏加载等待 ==================== */
.loading-mask {
    position: fixed;
    inset: 0;
    background: rgba(9, 5, 15, 0.72);
    backdrop-filter: blur(2px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 3000;
}
.loading-mask.show { display: flex; }
.loading-box {
    min-width: 200px;
    padding: 26px 28px;
    background: #221a34;
    border: 1px solid #342746;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(40, 10, 80, .6);
}
.loading-spinner {
    width: 38px;
    height: 38px;
    margin: 0 auto 16px;
    border: 3px solid rgba(167, 92, 246, 0.25);
    border-top-color: #933ce4;
    border-radius: 50%;
    animation: loading-spin .85s linear infinite;
}
@keyframes loading-spin {
    to { transform: rotate(360deg); }
}
.loading-text { font-size: 14px; color: #ffffff; }
.loading-sub { font-size: 12px; color: #9381a7; margin-top: 8px; min-height: 16px; }

/* ==================== 声音弹窗：训练音色 / 会员锁定态 ==================== */
.pc-member-user {
    font-size: 12.5px;
    color: #e8e5ec;
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.voice-desc {
    flex: 0 0 100%;
    font-size: 10.5px;
    color: #8a77a0;
    line-height: 1.25;
    margin-top: 2px;
}
.voice-card { flex-wrap: wrap; }
.voice-card.locked {
    opacity: .6;
    cursor: not-allowed;
    border-style: dashed;
    border-color: #473a55;
}
.voice-card.locked .voice-name { color: #9381a7; }
.voice-card.locked .voice-icon { color: #76618e; }

/* 平台展位音色（控制台把某个槽位设为展位）：在「平台训练声音」里用金色标识，
   并标注「已训练完成」。这类音色不能再训练，但试听/选用与普通训练音色完全一致。 */
.voice-card.showcase { border-color: rgba(232, 177, 49, 0.42); }
.voice-card.showcase .voice-icon { color: #e8b131; }
.voice-card.showcase .voice-desc { color: #e8b131; }

/* 自己的复刻音色：排在「平台训练声音」第一位，用紫色边框与「我的」标签区分，
   让客户一眼看到「这就是我训练出来的那个声音」。 */
.voice-card.voice-mine { border-color: rgba(167, 130, 240, 0.55); background: rgba(167, 130, 240, 0.08); }
.voice-card.voice-mine .voice-icon { color: #c4a6ff; }
.voice-mine-tag { display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 999px;
    background: rgba(167, 130, 240, 0.22); color: #d9c6ff; margin-left: 6px; }

.voice-promo { cursor: pointer; transition: border-color .18s; }
.voice-promo:hover { border-color: rgba(171, 86, 246, .75); }
.voice-promo.locked { border-color: #574769; }
.voice-promo.locked .voice-promo-tag { background: #2c1f3f; color: #a497b1; }
.voice-promo-tag.locked { background: #2c1f3f; color: #a497b1; }

.error-text { color: #f47586 !important; }

/* 已识别 / 已填入的绿色反馈（客户 9.26：启动AI主播页填了地址就该变绿或高亮）。
   与 .error-text 对应的正向状态，靠 !important 盖掉 .hint 的灰色。 */
.ok-text { color: #4ade80 !important; font-weight: 600; }

/* ==================== 话术预览播放页（播放全部） ==================== */
.preview-head {
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--border);
    background: #180f2a;
}
.preview-now { font-size: 14px; font-weight: 600; color: #ffffff; }
.preview-meta { font-size: 12px; color: #9381a7; margin-top: 6px; line-height: 1.5; }
.preview-progress {
    height: 4px;
    margin-top: 10px;
    border-radius: 999px;
    background: #241835;
    overflow: hidden;
}
.preview-progress-inner {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--accent-grad);
    transition: width .25s ease;
}
.preview-seg-card { flex-direction: column; align-items: stretch; gap: 6px; }
.preview-seg-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.preview-seg-title { font-size: 13px; font-weight: 600; color: #d7b7fb; }
/* 右上角状态：待生成 / 生成中 / 就绪（播放中·已暂停），与直播页同一套视觉 */
.preview-seg-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    white-space: nowrap;
    flex-shrink: 0;
}
.preview-seg-status > span { display: inline-flex; align-items: center; gap: 4px; }
/* 段落右下角的音色说明（讲稿统一用主播音色） */
.preview-seg-voice { font-size: 11.5px; color: #9984b1; white-space: nowrap; text-align: right; }
/* 当前正在播报的段落：更明显的描边，配合自动滚动便于定位 */
.preview-seg-card.current { border-color: rgba(167, 92, 246, 0.55); }
.preview-bar { position: sticky; bottom: 0; z-index: 20; }
.preview-bar .preview-nav { flex: 0 0 27%; font-size: 13px; padding: 0 6px; }

/* ==================== 账单明细（算力消费流水） ==================== */
.bill-summary {
    display: flex;
    gap: 18px;
    font-size: 12.5px;
    color: #b6a6c8;
    margin-bottom: 8px;
}
.bill-summary b { font-size: 18px; font-weight: 700; }
.bill-list { display: flex; flex-direction: column; gap: 10px; }

/* 计费规则清单（费用明细口径）：一事一行，避免手机上要横读一整句 */
.bill-rules { display: flex; flex-direction: column; gap: 8px; }
.bill-rule-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
    border-radius: var(--r-sm, 8px);
}
.bill-rule-name {
    flex: 0 0 auto;
    min-width: 118px;
    font-size: 12.5px;
    color: #e8e2f0;
    font-weight: 600;
}
.bill-rule-rule {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    color: var(--text-sub);
    line-height: 1.6;
    word-break: break-word;
}
/* 极窄屏（<360px）时名称与说明改上下排，避免名称被压成两行 */
@media (max-width: 360px) {
    .bill-rule-row { flex-direction: column; gap: 3px; }
    .bill-rule-name { min-width: 0; }
}
.bill-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: #1e1430;
    border: 1px solid rgba(167, 130, 240, 0.12);
    border-radius: 10px;
}
.bill-main { min-width: 0; }
.bill-name { font-size: 13px; color: #e8e5ec; }
.bill-time { font-size: 11.5px; color: #8a77a0; margin-top: 4px; word-break: break-all; }
.bill-right { text-align: right; flex-shrink: 0; }
.bill-amount { font-size: 14px; font-weight: 600; }
.bill-amount.consume, .bill-summary b.consume { color: #f47586; }
.bill-amount.grant, .bill-summary b.grant { color: #38cf98; }
.bill-remain { font-size: 11.5px; color: #8a77a0; margin-top: 4px; }

/* ==================== 充值弹窗（生成订单 → 客服微信 → 线下支付） ==================== */
.purchase-order {
    padding: 16px;
    border-radius: var(--r-md, 14px);
    background: linear-gradient(150deg, #2a1d45 0%, #221a34 62%);
    border: 1px solid var(--border, #352d4d);
    text-align: center;
    margin-bottom: 14px;
}

.purchase-plan { font-size: 15px; font-weight: 600; color: #ffffff; }

.purchase-price {
    font-size: 28px;
    font-weight: 700;
    margin: 6px 0 2px;
    background: var(--accent-grad, linear-gradient(135deg, #7d3bf0, #c94ffb));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.purchase-detail { font-size: 12.5px; color: #9685a3; margin-bottom: 10px; }

.purchase-no {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    color: #cbb8e6;
    margin-top: 6px;
    word-break: break-all;
}

.purchase-no b { color: #ffffff; }

.purchase-qr {
    text-align: center;
    margin-bottom: 14px;
}

.purchase-qr img {
    width: 200px;
    max-width: 70%;
    border-radius: 12px;
    border: 1px solid var(--border, #352d4d);
    background: #ffffff;
    padding: 6px;
}

.purchase-qr .hint { margin-top: 8px; }

.wechat-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wechat-id {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border-radius: var(--r-md, 12px);
    background: var(--bg-raised, #2c2343);
    border: 1px dashed var(--accent, #a06bf5);
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
    word-break: break-all;
}

.purchase-tip { display: inline-block; margin-top: 6px; color: #ffb26b; }

/* ==================== 项目列表页布局（对齐参考图结构） ====================
   结构：顶部栏（菜单 + 页面标题 + 创建） → 统计卡 → 平台筛选条 → 项目卡列表 → 底部 Tab 栏
   交互全部沿用原有函数，仅调整排布与视觉。 */

/* 顶部栏中间的页面标题 */
.navbar-purple .navbar-page-title {
    flex: 1;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.5px;
}

/* 统计卡：两张并排，标签在上、大数字在下（数字用白色粗体，同参考图） */
.stat-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 16px 16px 6px;
}
.stat-card {
    background: linear-gradient(150deg, #2a1d45 0%, #221a34 62%);
    border: 1px solid rgba(167, 130, 240, 0.18);
    border-radius: 16px;
    padding: 14px 16px 16px;
    min-height: 86px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 8px 22px rgba(60, 20, 110, 0.35);
}
.stat-label {
    font-size: 12.5px;
    color: #b6a6c8;
    letter-spacing: 0.3px;
}
.stat-num {
    font-size: 34px;
    line-height: 1.05;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 4px 18px rgba(160, 90, 255, 0.45);
}

/* 平台筛选条：选中项为紫罗兰渐变胶囊（同参考图） */
.filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.filter-row::-webkit-scrollbar { display: none; }
/* 筛选按钮：原 34px 高，移动端触控最低 44px。
   这里直接加高（不是撑热区）—— 它是独立胶囊按钮，加高不挤占别的元素，
   而且筛选是「进项目列表」的高频动作，值得给足点击面积。 */
.filter-chip {
    flex: 0 0 auto;
    height: 44px;
    padding: 0 20px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: #b6a6c8;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.18s;
}
.filter-chip.active {
    background: var(--accent-grad);
    color: #ffffff;
    font-weight: 600;
    box-shadow: var(--accent-glow);
}
/* 预告位平台筛选（淘宝/快手/京东/小红书）：虚线 + 弱化，明示暂未接入 */
.filter-chip.filter-chip-upcoming { color: #7d7391; border: 1px dashed rgba(255,255,255,0.14); }

/* 项目卡：标题行 + 信息行 + 状态胶囊 + 底部操作行 */
.project-list { gap: 14px; }
/* 标题行右侧必须留出右上角两个绝对定位按钮的宽度（✎ 重命名 + 🗑 删除，见文件上方 .project-rename /
   .project-del）：绝对定位的元素不占布局空间，名字和平台标签一长就会钻到按钮底下、尾巴被吃掉。
   两个按钮 30px + 间距 + 右边距 = 84px，名字与标签各自挤在剩下的空间里。 */
.project-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding-right: 84px;
}
.project-card-head .project-name { margin-bottom: 0; flex: 1; min-width: 0; }

.project-name {
    overflow-wrap: anywhere;      /* 名字超长换行显示，不做截断：模型名是客户唯一的识别依据 */
}
.project-meta {
    font-size: 12.5px;
    color: #a495b3;
    margin-top: 7px;
    line-height: 1.5;
}
.project-code {
    color: #cbb7f5;
    font-weight: 600;
    letter-spacing: 0.4px;
}
.project-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.project-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(167, 130, 240, 0.12);
}
.project-card-foot .project-date { margin-bottom: 0; }

/* 状态胶囊（参考图里的绿/橙/紫小标签） */
.pchip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    color: #c9bcd6;
    background: rgba(167, 130, 240, 0.12);
    border: 1px solid rgba(167, 130, 240, 0.2);
    white-space: nowrap;
}
.pchip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.pchip-ok { color: #38cf98; background: rgba(20, 181, 128, 0.14); border-color: rgba(20, 181, 128, 0.34); }
.pchip-warn { color: #e8b131; background: rgba(232, 177, 49, 0.14); border-color: rgba(232, 177, 49, 0.32); }
.pchip-blue { color: #7d93f2; background: rgba(73, 99, 232, 0.16); border-color: rgba(73, 99, 232, 0.36); }
.pchip-purple { color: #cbb7f5; background: rgba(167, 92, 246, 0.16); border-color: rgba(167, 92, 246, 0.36); }
.pchip-green { color: #4eda81; background: rgba(20, 181, 128, 0.16); border-color: rgba(20, 181, 128, 0.34); }

/* 底部 Tab 栏：4 项 + 中间凸起的创建按钮 */
.tabbar {
    position: sticky;
    bottom: 0;
    z-index: 45;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    height: 62px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0));
    background: #190f2b;
    border-top: 1px solid rgba(167, 130, 240, 0.16);
}
.tabbar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 11.5px;
    color: #8e7ca2;
    cursor: pointer;
    border-radius: 999px;
    padding: 4px 0;
    transition: all 0.18s;
}
.tabbar-icon { font-size: 16px; line-height: 1; }
.tabbar-item.active {
    color: #ffffff;
    font-weight: 600;
    background: var(--accent-grad);
    box-shadow: var(--accent-glow);
}
.tabbar-item.tabbar-item-main { background: transparent; box-shadow: none; }
.tabbar-plus {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent-grad);
    color: #ffffff;
    font-size: 24px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(140, 60, 240, 0.55);
}

/* 详情页切换 Tab：做成参考图那种分段控件（选中项渐变胶囊） */
.tab-bar {
    background: #1b1130;
    border-radius: 12px;
    margin: 0 16px;
    padding: 6px;
    gap: 6px;
}
.tab-bar > .tab-btn,
.tab-bar > .tab-action { height: 36px; }
.tab-btn { background: transparent; }
.tab-btn.active { background: var(--accent-grad); }

/* PC 端：底部 Tab 栏由顶栏/侧栏承担，隐藏 */
@media (min-width: 768px) {
    /* 修复：原来 body 不是 flex，导致「侧边栏」与「内容区」上下堆叠，
       内容区被挤到首屏之下（下半屏空白）。这里改成一行两列：
       顶栏占满整行 → 侧边栏 340 + 内容区自适应。仅作用于 PC，手机端不受影响。 */
    body {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .topbar { width: 100%; flex: 0 0 auto; }
    .pc-sidebar { height: calc(100vh - 60px); }
    #app { flex: 1 1 0; min-width: 0; height: calc(100vh - 60px); min-height: 0; }
    /* 基础规则里 .view 有 min-height:100vh，会把视图撑出内容区（底部被裁掉 60px） */
    .view { min-height: 0; }

    .tabbar { display: none; }
    .stat-cards { max-width: 760px; }
    .filter-row { max-width: 760px; }
    .navbar-purple .navbar-page-title { text-align: left; }
}

/* ==================== v1.2 新三屏（Input / Confirm / Result） ==================== */

.v12-hero { padding: 18px 4px 6px; }
.v12-hero-title { font-size: 21px; font-weight: 700; color: #fff; line-height: 1.35; }
.v12-hero-sub { font-size: 13px; color: var(--text-muted); margin-top: 6px; }

.v12-input-card {
    background: var(--bg-card);
    border: 1px solid rgba(167, 130, 240, 0.28);
    border-radius: var(--r-lg);
    padding: 12px;
}
.v12-input {
    width: 100%; min-height: 96px; background: transparent; border: none; outline: none;
    color: #fff; font-size: 15px; line-height: 1.7; font-family: inherit; resize: none;
}
.v12-input::placeholder { color: var(--text-muted); }
.v12-input-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.v12-count { font-size: 12px; color: var(--text-muted); }
.v12-clear { background: rgba(255,255,255,0.06); border: 1px solid var(--border); color: #cfc6dd;
    border-radius: 8px; padding: 4px 10px; font-size: 12px; }

.v12-scene-line { display: flex; align-items: center; gap: 8px; min-height: 34px; }
.v12-scene-hint { font-size: 13px; color: var(--text-muted); }
.v12-scene-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
    border-radius: 999px; font-size: 13px; font-weight: 600; }
.v12-scene-tag.ok { background: rgba(16,185,129,0.14); color: #34d399; border: 1px solid rgba(16,185,129,0.35); }
.v12-scene-tag.maybe { background: rgba(245,158,11,0.14); color: #fbbf24; border: 1px solid rgba(245,158,11,0.35); }
.v12-scene-edit { margin-left: auto; font-size: 12px; color: #a782f0; background: none; border: none; }
.v12-scene-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.v12-scene-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md);
    padding: 12px 6px; text-align: center; color: #d8dde6; display: flex; flex-direction: column; gap: 3px; }
.v12-scene-card.active { border-color: var(--purple); background: rgba(167,130,240,0.14); color: #fff; }
.v12-scene-icon { font-size: 20px; }
.v12-scene-name { font-size: 13px; font-weight: 600; }
.v12-scene-desc { font-size: 11px; color: var(--text-muted); }
.v12-scene-conf { font-size: 12px; color: var(--text-muted); margin-top: 6px; }

/* 平台选择：横向滑动（抖音/视频号已接入 + 淘宝/快手/京东/小红书 预告位） */
.v12-platform-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.v12-platform-row::-webkit-scrollbar { display: none; }
.v12-platform { flex: 0 0 auto; min-width: 92px; padding: 12px; border-radius: var(--r-md); border: 1px solid var(--border);
    background: var(--bg-card); color: #d8dde6; font-size: 14px; white-space: nowrap; }
.v12-platform.active { border-color: var(--purple); background: rgba(167,130,240,0.14); color: #fff; font-weight: 600; }
/* 预告位平台（淘宝/快手/京东/小红书）：虚线边框 + 弱化文字，明示暂不可用 */
.v12-platform.upcoming { border-style: dashed; color: #8d84a0; }

.v12-examples { display: flex; flex-direction: column; gap: 8px; }
.v12-example { text-align: left; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--r-md); padding: 10px 12px; color: #c9c1d6; font-size: 13px; line-height: 1.5; }
.v12-example:active { border-color: rgba(167,130,240,0.5); color: #fff; }

/* 确认卡 */
.v12-conf-stat { display: flex; gap: 8px; margin: 4px 0 14px; }
.v12-stat-pill { flex: 1; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md);
    padding: 10px 8px; text-align: center; }
.v12-stat-num { font-size: 18px; font-weight: 700; color: #fff; }
.v12-stat-label { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.v12-field-row { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 8px; }
.v12-field-mark { flex: 0 0 auto; font-size: 14px; line-height: 1.5; }
.v12-field-main { flex: 1; min-width: 0; }
.v12-field-label { font-size: 12px; color: var(--text-muted); }
.v12-field-value { font-size: 14px; color: #fff; margin-top: 3px; word-break: break-all; line-height: 1.5; }
.v12-field-value.empty { color: #f59e0b; }
.v12-field-edit { flex: 0 0 auto; font-size: 12px; color: #a782f0; background: none; border: none; padding: 2px 4px; }
.v12-field-input { width: 100%; margin-top: 6px; }

.v12-tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.v12-tag { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--border);
    background: var(--bg-card); color: #c9c1d6; font-size: 13px; }
.v12-tag.active { border-color: var(--purple); background: rgba(167,130,240,0.16); color: #fff; font-weight: 600; }
.v12-combo { font-size: 12px; color: #34d399; margin-top: 8px; }

/* 结果页 */
.v12-loop-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: 14px; margin-bottom: 12px; }
.v12-loop-head { display: flex; align-items: center; gap: 8px; }
.v12-loop-icon { font-size: 16px; }
.v12-loop-name { font-size: 15px; font-weight: 700; color: #fff; }
.v12-loop-dur { font-size: 11px; color: var(--text-muted); background: rgba(255,255,255,0.06);
    padding: 2px 8px; border-radius: 999px; }
.v12-loop-score { margin-left: auto; font-size: 12px; color: #34d399; font-weight: 700; }
.v12-loop-text { font-size: 14px; color: #e6e1ee; line-height: 1.75; margin: 10px 0; white-space: pre-wrap; }
.v12-loop-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.v12-tool { font-size: 12px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border);
    background: rgba(255,255,255,0.04); color: #cfc6dd; }
.v12-tool:disabled { opacity: 0.5; }
.v12-loop-warn { font-size: 12px; color: #fbbf24; margin-top: 6px; }

.v12-score-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: 14px; margin-bottom: 12px; }.v12-score-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.v12-score-label { flex: 0 0 44px; font-size: 12px; color: var(--text-muted); }
.v12-score-bar { flex: 1; height: 8px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; }
.v12-score-fill { height: 100%; background: linear-gradient(90deg, #a782f0, #34d399); border-radius: 999px; }
.v12-score-num { flex: 0 0 30px; text-align: right; font-size: 12px; color: #fff; font-weight: 600; }
.v12-score-total { display: flex; align-items: baseline; gap: 8px; }
.v12-score-total-num { font-size: 26px; font-weight: 800; color: #34d399; }

/* ==================== v1.1 螺旋循环：结果页模式卡 / 折叠面板 / 池展示 ==================== */

/* 模式卡：开关置顶，是结果页唯一的主操作 */
.v12-mode-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: 14px; margin-bottom: 12px; }
.v12-mode-title { font-size: 15px; font-weight: 700; color: #fff; }
.v12-mode-hint { font-size: 12px; color: #cbbfe0; margin-top: 8px; line-height: 1.6; }
/* ⚠️ 结果页成本估算那一行的样式已随该注释一起删除（客户 9.26 第 3 条）。 */
.v12-mode-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.v12-mode-badge { font-size: 11px; padding: 3px 9px; border-radius: 999px;
    background: rgba(255,255,255,0.06); color: var(--text-muted); }
.v12-mode-badge.on { background: rgba(52,211,153,0.16); color: #34d399; font-weight: 700; }
.v12-mode-badge.off { background: rgba(255,255,255,0.08); color: #cfc6dd; }
.v12-mode-badge.none { background: rgba(251,191,36,0.14); color: #fbbf24; }

/* 折叠面板：默认收起，首屏只给开关与模板 */
.v12-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
    margin-bottom: 12px; overflow: hidden; }
.v12-panel-head { display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 13px 14px; background: none; border: none; cursor: pointer;
    font-size: 14px; font-weight: 700; color: #fff; font-family: inherit; text-align: left; }
.v12-panel-sub { margin-left: auto; font-size: 11px; color: var(--text-muted); font-weight: 400; }
.v12-panel-arrow { font-size: 12px; color: var(--text-muted); transition: transform 0.2s; }
.v12-panel-arrow.open { transform: rotate(180deg); }
.v12-panel-body { padding: 0 14px 14px; }

/* 模板预览：每段一行，右侧标「预合成 / 实时合成」，成本差异一眼可见 */
.v12-tpl-row { padding: 9px 0; border-top: 1px dashed rgba(255,255,255,0.07); }
.v12-tpl-row:first-child { border-top: none; }
.v12-tpl-head { display: flex; align-items: center; gap: 8px; }
.v12-tpl-name { font-size: 13px; font-weight: 600; color: #e6e1ee; }
.v12-tpl-text { font-size: 13px; color: #cbbfe0; line-height: 1.7; margin-top: 4px; }
.v12-tpl-note { font-size: 11px; color: var(--text-muted); margin-left: 4px; }
.v12-layer { margin-left: auto; font-size: 10px; padding: 2px 8px; border-radius: 999px; }
.v12-layer.fixed { background: rgba(52,211,153,0.14); color: #34d399; }
.v12-layer.dynamic { background: rgba(167,130,240,0.18); color: #c4a8ff; }

/* 池展示：槽位高亮，让客户看清「哪些字会每轮变」 */
.v12-pool-block { margin-top: 12px; }
.v12-pool-block:first-child { margin-top: 0; }
.v12-pool-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.v12-pool-name { font-size: 13px; font-weight: 600; color: #e6e1ee; }
.v12-pool-count { font-size: 11px; color: var(--text-muted); }
.v12-pool-item { font-size: 12.5px; color: #cbbfe0; line-height: 1.7;
    padding: 5px 8px; border-radius: 6px; background: rgba(255,255,255,0.03); margin-bottom: 4px; }
.v12-slot { color: #fbbf24; background: rgba(251,191,36,0.14);
    border-radius: 4px; padding: 0 4px; font-weight: 600; }

/* 规则行 */
.v12-rule-row { display: flex; gap: 10px; font-size: 12.5px; padding: 6px 0;
    border-top: 1px dashed rgba(255,255,255,0.07); }
.v12-rule-row:first-child { border-top: none; }
.v12-rule-key { flex: 0 0 52px; color: var(--text-muted); }
.v12-rule-val { flex: 1; color: #cbbfe0; line-height: 1.6; }

/* 分段明细（收起态里的简表） */
.v12-mini-loop { display: flex; align-items: center; gap: 8px; font-size: 13px;
    padding: 7px 0; border-top: 1px dashed rgba(255,255,255,0.07); }
.v12-mini-loop:first-child { border-top: none; }
.v12-mini-icon { font-size: 14px; }
.v12-mini-name { color: #e6e1ee; }
.v12-mini-dur { margin-left: auto; font-size: 11px; color: var(--text-muted); }

/* ==================== v1.1 客户手改：内联编辑 / 槽位药丸 / 影响清单 ==================== */

/* 版本状态条：客户改完后看得见「以谁的版本为准」「哪些音频待重合成」 */
.v12-edit-status { display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    background: rgba(52,211,153,0.10); border: 1px solid rgba(52,211,153,0.28);
    border-radius: var(--r-md); padding: 9px 12px; margin-bottom: 12px;
    font-size: 12.5px; color: #a7f3d0; }
.v12-edit-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; flex-shrink: 0; }
.v12-edit-status-warn { color: #fbbf24; }
.v12-edit-status-clear { margin-left: auto; background: none; border: none; cursor: pointer;
    font-size: 12px; color: #a7f3d0; text-decoration: underline; font-family: inherit; padding: 0; }

/* 卡片内联编辑区（已改为独立编辑页，这里保留基础样式供编辑页复用） */
.script-inline-edit { margin-top: 10px; }
.script-edit-area { width: 100%; box-sizing: border-box; font-size: 14px; line-height: 1.7;
    font-family: inherit; resize: vertical; }
/* 独立编辑页的编辑框：整页只编辑这一段，给足高度与字号，长文本改起来不费眼 */
.script-edit-page-area { min-height: 46vh; font-size: 15px; line-height: 1.85; padding: 14px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); }
.script-edit-tools { display: flex; align-items: center; gap: 10px; margin-top: 8px; position: relative; }
.script-edit-count { font-size: 12px; color: var(--text-muted); }
.script-edit-actions { display: flex; gap: 8px; margin-top: 10px; }
.script-edit-actions .btn { height: 40px; font-size: 14px; }

/* 「生成话术时的配置已变更」提示条：人设改了要重写、音色/语速改了即时生效 */
.v12-sync-bar { margin: 0 16px 12px; padding: 12px 14px; border-radius: var(--r-md);
    background: rgba(245,158,11,0.10); border: 1px solid rgba(245,158,11,0.4); }
.v12-sync-title { font-size: 13.5px; font-weight: 700; color: #fcd9a4; }

/* 「改哪一句」切换条：固定层正文 + 该段关联的池句 */
.v12-src-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.v12-src-tab { font-size: 12px; padding: 5px 11px; border-radius: 999px;
    border: 1px solid var(--border); background: rgba(255,255,255,0.04);
    color: #cfc6dd; font-family: inherit; cursor: pointer; }
.v12-src-tab.active { background: rgba(167,130,240,0.22); border-color: var(--purple); color: #fff; }

/* 槽位药丸：可点删除；「插入变量」下拉 */
.v12-slot-chip { display: inline-flex; align-items: center; gap: 3px;
    background: rgba(251,191,36,0.16); color: #fbbf24; border-radius: 6px;
    padding: 1px 4px 1px 7px; margin: 0 2px; font-weight: 600; font-size: 12.5px; }
.v12-slot-del { background: none; border: none; cursor: pointer; color: #fbbf24;
    font-size: 13px; line-height: 1; padding: 0 2px; font-family: inherit; }
/* 变量状态面板（客户 9.23 第 2 条）：把每个变量的真实来源与当前是否生效写在编辑页上，
   客户不用猜「插了到底有没有用」；{名额剩余} 的起始值也在这里填。 */
.v12-slot-status { margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 10px; }
.v12-slot-status-row { font-size: 12.5px; line-height: 1.8; color: var(--text-dim); }
.v12-slot-status-row b { color: #fbbf24; font-weight: 600; margin-right: 4px; }
.v12-slot-status-ok { display: inline-block; margin: 0 4px; padding: 0 6px; border-radius: 999px;
    background: rgba(52,211,153,0.16); color: #34d399; font-size: 11.5px; }
.v12-slot-status-warn { display: inline-block; margin: 0 4px; padding: 0 6px; border-radius: 999px;
    background: rgba(251,191,36,0.16); color: #fbbf24; font-size: 11.5px; }
.v12-slot-inline-input { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; }
.v12-slot-inline-input input { width: 68px; height: 28px; padding: 0 8px; font-size: 12.5px;
    background: rgba(255,255,255,0.04); color: inherit;
    border: 1px solid var(--border); border-radius: 8px; }
.v12-slot-tools { position: relative; display: inline-block; }
.v12-slot-menu { position: absolute; z-index: 30; top: 110%; left: 0; min-width: 150px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md);
    padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.45); }
.v12-slot-menu button { display: block; width: 100%; text-align: left; background: none;
    border: none; cursor: pointer; color: #e6e1ee; font-size: 12.5px;
    padding: 7px 9px; border-radius: 6px; font-family: inherit; }
.v12-slot-menu button:hover { background: rgba(255,255,255,0.06); }

/* ==================== v1.1 确认页（重点信息 / 其他信息） ==================== */

/* 一行提示告诉客户「现在该干什么、还差什么」，比让他自己数 12 行字段强 */
.v12-conf-tip { font-size: 13px; line-height: 1.6; color: #a7f3d0;
    background: rgba(52,211,153,0.10); border: 1px solid rgba(52,211,153,0.26);
    border-radius: var(--r-md); padding: 12px 12px; margin-bottom: 16px; }
.v12-conf-tip.warn { color: #fcd9a4; background: rgba(251,191,36,0.10);
    border-color: rgba(251,191,36,0.28); }
.v12-conf-count { float: right; font-size: 12px; color: var(--text-muted); font-weight: 400; }

/* ==================== 底部操作栏（双行） ==================== */

/* 两行布局：第一行次要按钮并排，第二行主操作整宽。
   用途：手机上三个按钮挤一行必然挤成两行文字（实测「保存设置 / 启动AI主播」错乱换行），
   与其让它自己乱折，不如明确排成两行。
   约束：单行内的按钮不收缩、文字不换行，空间不够时宁可让整行滚动也不压字。 */
.bottom-bar-stack { display: block; padding: 8px 16px 12px; }
.bottom-bar-row { display: flex; gap: 8px; }
.bottom-bar-row .btn { flex: 1; min-width: 0; }
.bottom-bar-stack .btn {
    flex: 0 0 auto;              /* 不参与 flex 分配：由 .btn-block / 行内 flex 决定宽度 */
    font-size: 14px;
    white-space: nowrap;
    padding-left: 10px;
    padding-right: 10px;
}
.bottom-bar-stack .btn-block { display: block; width: 100%; margin-top: 8px; }
/* 第二行的主操作在手机上占满整宽，保证「启动AI主播」一行放得下 */
.bottom-bar-stack > .btn-primary { width: 100%; }

/* ==================== 确认弹窗（可读性 + 长文案） ==================== */

/* 弹窗正文可能很长（切换模式/核心信息修改的影响说明是整段文本），
   必须自己能滚，否则小屏上「确认」按钮会被顶出视口、客户点不到。 */
#confirm-text { white-space: pre-line; }

/* ==================== 开播前准备自检 ==================== */

/* 开播是「准备没做完就会卡住」的动作：没有音色播不出声、没有话术没内容。
   与其让客户点下去收到一句 toast 再自己去别处找，不如先把缺的项摆出来并给直达按钮。 */
.ready-check { border-radius: var(--r-md); padding: 12px; margin-bottom: 16px; font-size: 13px; line-height: 1.6; }
.ready-check-ok { background: rgba(52,211,153,0.10); border: 1px solid rgba(52,211,153,0.26); color: #a7f3d0; }
.ready-check-warn { background: rgba(251,191,36,0.10); border: 1px solid rgba(251,191,36,0.30); color: #fcd9a4; }
.ready-check-icon { font-weight: 700; margin-right: 4px; }
.ready-check-title { font-weight: 700; margin-bottom: 8px; }
.ready-check-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.ready-check-row:first-of-type { margin-top: 0; }
.ready-check-text { flex: 1; min-width: 0; }

/* ==================== 必填校验的字段级错误态 ==================== */

/* 校验失败只弹 toast 是不够的：toast 2 秒就消失，客户回来时看不出哪一项没填。
   红框 + 说明挂在字段上，输入后由 JS 自动清除。 */
.input-error,
.field-card .input-error {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.18) !important;
}
.field-error-note { font-size: 12px; color: #fca5a5; margin-top: 6px; line-height: 1.5; }

/* ==================== 直播页空态（未开播） ==================== */

/* 空态必须可行动：一句说明 + 一个直接去做那件事的按钮，
   不能只写「暂无数据」让客户自己猜下一步。 */
.live-empty { display: flex; flex-direction: column; align-items: center;
    padding: 64px 24px; text-align: center; }
.live-empty-icon { font-size: 40px; opacity: 0.5; }
.live-empty-title { font-size: 18px; font-weight: 600; color: #fff; margin-top: 16px; }
.live-empty-text { font-size: 14px; line-height: 1.6; color: var(--text-muted); margin-top: 8px; max-width: 320px; }
.live-empty-btn { margin-top: 24px; min-width: 160px; }

/* 结果页「查看与调整细节」：把 5 个折叠面板收进一个入口，
   首屏只留模式开关 + 成本 + 这一个按钮，小白不用判断「这 5 个词哪个该点」。 */
.v12-advanced-toggle { display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 14px 16px; margin-bottom: 16px;
    background: var(--bg-card); border: 1px dashed var(--border);
    border-radius: var(--r-lg); cursor: pointer;
    font-size: 14px; font-weight: 600; color: #cfc6dd; font-family: inherit; text-align: left; }
.v12-advanced-toggle:active { opacity: 0.85; }

/* ==================== 首次使用引导（第一屏） ==================== */

/* ⚠️ 「第一次用？照这个格式写就行」首次引导的整块样式已删除（客户 9.26 第 1 条），
   包含引导容器、一句话公式与模板卡三部分；不要再加回来。 */

/* ==================== 无障碍与动效偏好 ==================== */

/* 尊重系统「减少动态效果」：本项目有展开箭头旋转、按压缩放、音频闪避等动效，
   对前庭敏感用户会造成不适，这里统一关掉。 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* 键盘可达：所有可交互元素必须在聚焦时看得见（原先只有部分元素有 focus 样式） */
button:focus-visible,
.switch:focus-visible,
.v12-panel-head:focus-visible,
.v12-src-tab:focus-visible,
.v12-tool:focus-visible,
[onclick]:focus-visible {
    outline: 2px solid var(--purple);
    outline-offset: 2px;
}

/* 核心信息影响清单 */
.v12-affected-row { padding: 8px 0; border-top: 1px dashed rgba(255,255,255,0.07); }
.v12-affected-row:first-child { border-top: none; }
.v12-affected-where { display: inline-block; font-size: 11px; color: #c4a8ff;
    background: rgba(167,130,240,0.16); border-radius: 999px; padding: 2px 8px; margin-bottom: 4px; }
.v12-affected-text { display: block; font-size: 13px; color: #cbbfe0; line-height: 1.7; }

/* 直播中的弹幕互动日志条（.v12-feed 及其子元素）已删除
   （客户 9.22 标注「红框内删除显示！」）。
   原来它是吸顶区里可折叠 / 可隐藏的一行：标题 + 实时状态子串 + 「隐藏」按钮 +
   限高 132px 的日志列表（观众弹幕、意图、副播回复）。
   删除的是显示：弹幕照收、意图照判、副播照插播，只是直播页不再有这块日志；
   实时互动配置仍在「互动配置」页。
   ⚠️ 代价说清楚：原来这里能一眼看到「收到多少条 / 去重多少 / 事件关闭多少」的抓取诊断，
   现在直播页没有显示位了（「数据中心」还在开发中）。要排查「抓不到弹幕」，
   走服务端的弹幕链路探针 GET /api/live/debug-stats（见 server.js）。
   JS 侧的 pushFeedItem / renderFeed / paintFeedSub 只是取不到容器直接 return，
   日志数据（liveState.danmakuLog）仍然保留给预热与统计用。 */

/* 互动配置页 */
.v12-ev-label { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: #d8dde6; }
.v12-ev-desc { font-size: 11.5px; color: var(--text-muted); }
.v12-voice-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 0; border-bottom: 1px dashed rgba(255,255,255,0.07); }
.v12-voice-row:last-child { border-bottom: none; }
/* .v12-test-card / .v12-test-row / .v12-test-k 原来服务于「试一条弹幕 → 测试回复效果」
   结果卡；该区块已按客户要求整栏删除，这几个类一并清掉。 */

/* 称呼设置（互动配置页顶部）：
   · .nick-err 让「自定义称呼不合法」的提示变红，客户一眼看到为什么不生效；
   · .v12-tag-sub 让回复字数档位标签能带上字数区间。 */
.hint.nick-err { color: #f87171; }
.v12-tag-sub { display: block; font-size: 10px; opacity: 0.75; margin-top: 2px; }

/* 真人接管状态条（直播页吸顶区内，全局开关）
   任务18：窄屏下「AI 播报中」与「继续 / 停止」原来的字号与换行都不合适 ——
   状态字太小看不清、按钮文字被折成两行。这里把整条锁成单行：
   状态字放大到 13.5px 加粗，提示文字超出省略，按钮 nowrap 且不收缩。 */
.v12-takeover { display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin: 0 12px 10px; padding: 9px 12px; border-radius: var(--r-md);
    background: rgba(255,255,255,0.04); border: 1px solid var(--border); flex-wrap: nowrap; }
.v12-takeover.on { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.45); }
.v12-takeover.manual { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.45); }
.v12-tk-left { display: flex; align-items: center; gap: 7px; min-width: 0; flex: 1 1 auto; }
.v12-tk-dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; flex: 0 0 auto; }
.v12-takeover.on .v12-tk-dot { background: #f59e0b; box-shadow: 0 0 8px rgba(245,158,11,0.8); }
.v12-takeover.manual .v12-tk-dot { background: #ef4444; box-shadow: 0 0 8px rgba(239,68,68,0.8); }
/* 状态字放大到 13.5px（原 13px 在窄屏偏小），提示文字可省略但不挤压按钮 */
.v12-tk-state { font-size: 13.5px; font-weight: 700; color: #fff; white-space: nowrap; flex: 0 0 auto; }
.v12-tk-hint { font-size: 11px; color: var(--text-muted); overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
.v12-tk-right { display: flex; gap: 6px; flex: 0 0 auto; }
/* 按钮文字绝不换行（「开启真人检测 / 手动接管」被折成两行时非常难看且容易误点） */
.v12-tk-btn { font-size: 11.5px; padding: 5px 9px; border-radius: 999px;
    border: 1px solid var(--border); background: rgba(255,255,255,0.05); color: #cfc6dd;
    white-space: nowrap; flex: 0 0 auto; font-family: inherit; }
.v12-tk-btn.active { border-color: rgba(52,211,153,0.6); color: #34d399; }

/* 语音输入按钮（功能已下线，样式保留以免历史节点错位） */
.v12-foot-right { display: flex; align-items: center; gap: 8px; }
.v12-voice.active { border-color: rgba(239,68,68,0.65); color: #fca5a5; }

/* 预览页「一句一行」清单：当前句高亮并自动滚到屏幕中间。
   ⚠️ .preview-seg-sentences / .preview-sent（整段平铺时的行内 span 形态）与
   .preview-nowcard-nav（大字卡里那组上一句/下一句）都已随对应 DOM 一起删除，
   别再加回来：底部工具条已经有「上一句 / 下一句」，卡片里再放一组就是重复入口。 */

/* ===== 预览页「一句一句往下走」形态（客户 9.22 要求） =====
   痛点原话：「话术不管分为4大段还是5大段，预览播放的时候不要一整个大的段落显示，
   看能不能调成一句话一句话的往下走」。
   所以：按段列出「一行一句」的清单，当前句高亮、已念过的淡化，播到哪滚到哪。
   合成虽然是一段一口气（语气连贯），但展示粒度永远是一句话。

   ⚠️ 原来清单上面还有一张「当前句」大字卡（.preview-nowcard / -meta / -text /
   -cur / -ctx），已按客户要求整张删除：它和清单里的当前句高亮显示的是同一句话，
   等于把这一句又放大念一遍，还把清单挤到屏幕下半截。样式已随 DOM 一起删掉，
   别再加回来 —— 段/句进度仍由页面抬头（.preview-now 与 .preview-meta）显示。 */

/* 一行一句的清单：当前句高亮并自动滚到中间 */
.preview-sent-list { display: block; }
.sentence-line { display: flex; gap: 8px; align-items: flex-start; padding: 7px 8px; border-radius: 6px;
    font-size: 14px; line-height: 1.7; color: #e6e1ee; cursor: pointer;
    transition: background 0.15s, color 0.15s, opacity 0.2s; }
.sentence-line:hover { background: rgba(255,255,255,0.04); }
.sentence-line-no { flex: 0 0 20px; font-size: 11px; color: var(--text-muted); text-align: right;
    line-height: 1.9; }
.sentence-line-text { flex: 1; min-width: 0; }
.sentence-line.done { opacity: 0.45; }
.sentence-line.playing { background: rgba(167,130,240,0.22); color: #fff; font-weight: 600;
    box-shadow: 0 0 0 1px rgba(167,130,240,0.45) inset; }
.sentence-line.playing .sentence-line-no { color: #c9b6f5; }

/* 预览页节奏调整条 */
.preview-tune { display: flex; align-items: center; gap: 8px; padding: 8px 12px 2px; flex-wrap: wrap; }
.preview-tune-label { font-size: 12px; color: var(--text-muted); flex: 0 0 auto; }
.preview-tune-row { display: flex; gap: 6px; flex-wrap: wrap; }
.preview-tune .v12-tool { padding: 4px 10px; }
.preview-tune .v12-tool.active { border-color: var(--purple); background: rgba(167,130,240,0.18); color: #fff; font-weight: 600; }

/* 预览页「本次试听免费 / 按等级费率计费」提示条（客户 9.27 第 8 条）。
   免费用绿色、计费用琥珀色 —— 客户往下翻话术时抬眼就能确认这次在不在花钱，
   不用回想刚才那个弹窗写的是什么。 */
.preview-bill-hint {
    margin: 0 12px 6px;
    padding: 6px 10px;
    border-radius: var(--r-sm, 8px);
    border: 1px solid transparent;
    font-size: 12px;
    line-height: 1.5;
}
.preview-bill-hint.free { color: #6ee7b7; background: rgba(16,185,129,0.10); border-color: rgba(16,185,129,0.32); }
.preview-bill-hint.paid { color: #fcd34d; background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.34); }

/* 模板卡片 */
.v12-tpl-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md);
    padding: 12px; margin-bottom: 8px; }
.v12-tpl-head { display: flex; align-items: center; gap: 8px; }
.v12-tpl-name { font-size: 14px; font-weight: 700; color: #fff; }
.v12-tpl-meta { font-size: 11.5px; color: var(--text-muted); margin: 6px 0 8px; line-height: 1.5; }

/* ============================================================
   话术云端同步状态条（客户 10.11：两台设备各存一份 → 账号云端对齐）
   ============================================================ */
.sync-bar {
    padding: 0 16px 8px;
}
.sync-bar-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(167, 92, 246, 0.10);
    border: 1px solid rgba(167, 92, 246, 0.22);
}
.sync-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--gray-400, #a499af);
}
.sync-dot.ok { background: var(--green, #14b580); }
.sync-dot.warn { background: #f0a020; }
.sync-text {
    flex: 1 1 auto;
    font-size: 12px;
    line-height: 16px;
    color: var(--gray-400, #a499af);
}
.sync-btn {
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid rgba(167, 92, 246, 0.35);
    background: transparent;
    color: var(--purple-300, #dbb7fb);
    font-size: 12px;
    cursor: pointer;
}
.sync-btn:active { background: rgba(167, 92, 246, 0.16); }