/* ============================================================
   Suno Studio 页面 — 1:1 复刻 suno.com 工作区
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
        "Helvetica Neue", Arial, sans-serif;
    background: #0e0e10;
    color: #fff;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.5;
}
a { color: inherit; text-decoration: none; }

/* 设计 token */
:root {
    --bg-base: #0e0e10;
    --bg-card: #171719;
    --bg-card-hover: #1f1f22;
    --bg-elevated: #232326;
    --border-color: #2a2a2d;
    --border-active: #f97316;
    --text-primary: #ffffff;
    --text-secondary: #a1a1a3;
    --text-tertiary: #6c6c70;
    --accent-gradient: linear-gradient(135deg, #f97316, #ec4899);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-pill: 100px;
}

/* 顶部工具条 */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 56px;
    padding: 0 24px;
    border-bottom: 1px solid #1f1f1f;
    background: #0a0a0a;
    position: relative;
    z-index: 10;
}
.top-left { display: flex; align-items: center; gap: 16px; }
.logo { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.logo-icon { width: 28px; height: 28px; border-radius: 6px; background: linear-gradient(135deg,#f97316,#ec4899); display: inline-block; }
.logo-banner { height: 22px; width: auto; display: inline-block; }

/* Simple / Advanced 切换器（Suno 风格的双胶囊） */
.toggle-pill {
    display: inline-flex;
    background: #1a1a1a;
    border-radius: 100px;
    padding: 3px;
    border: 1px solid #2a2a2a;
}
.toggle-pill button {
    background: transparent;
    border: none;
    color: #777;
    padding: 6px 18px;
    border-radius: 100px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}
.toggle-pill button.active {
    background: #333;
    color: #fff;
}

/* 版本下拉 */
.version-select {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    color: #fff;
    padding: 6px 14px;
    border-radius: 100px;
    cursor: pointer;
    outline: none;
    font-size: 12px;
}

/* 积分徽章 */
.credits-badge {
    /* 2026-09-02：隐藏右上角 Suno 积分余额徽章（用 !important 强制覆盖其他规则） */
    display: none !important;
}
.credits-badge:hover { background: #2a1a0a; }
.credits-badge.loading { opacity: 0.5; }
.credits-badge.error { border-color: #ef4444; color: #ef4444; }

/* 2026-08-29：Suno 会员有效期徽章（金色调，订阅会员后展示） */
.vip-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; background: linear-gradient(135deg, #3a2a00, #5a4500);
    border: 1px solid #fbbf24; border-radius: 100px;
    font-size: 12px; color: #fbbf24; font-weight: 600;
    cursor: default; transition: all .15s ease;
}
.vip-badge.expired {
    background: #1a1a1a; border-color: #6b7280; color: #6b7280;
    font-weight: normal;
}

/* 2026-09-02：Suno VIP 赠送额度池徽章（紫蓝色调，订阅会员后展示剩余/总数 + 截止日） */
.vip-quota-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; background: linear-gradient(135deg, #1e1b4b, #312e81);
    border: 1px solid #818cf8; border-radius: 100px;
    font-size: 12px; color: #c7d2fe; font-weight: 600;
    cursor: default; transition: all .15s ease;
}
.vip-quota-badge.exhausted {
    background: #1a1a1a; border-color: #6b7280; color: #6b7280;
    font-weight: normal;
}

/* 2026-09-02：积分有效期徽章（永久 + 临时 + 最早过期） */
.credits-validity-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #064e3b, #047857);
    border: 1px solid #34d399; border-radius: 100px;
    font-size: 12px; color: #a7f3d0; font-weight: 600;
    cursor: default; transition: all .15s ease;
}
.credits-validity-badge.permanent-only {
    background: linear-gradient(135deg, #1e293b, #334155);
    border-color: #64748b; color: #cbd5e1;
}

/* ═══════════════════════════════════════════════════════════════
   More Options 内表单组件（仿官方 UI）
   ═══════════════════════════════════════════════════════════════ */

/* 表单组小卡 */
.form-group {
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: opacity .15s;
    flex-wrap: wrap;          /* 空间不够时控件换到下一行 */
    min-width: 0;             /* 关键：flex 子项默认 min-width:auto 会撑破容器 */
}
.form-group.disabled { opacity: 0.5; }
/* 隐藏"更多选项"中的"歌词模式"分段控件（write/prompt/instrumental）：用户已要求保留 simpler UI */
#lyricsModeGroup { display: none; }
.form-group .form-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    min-width: 0;             /* 配合 flex-wrap，长 label 可被截断 */
}
/* 当 flex-wrap 让控件换行后，给控件一个最小可达宽度 */
.form-group .segmented-control,
.form-group .slider-row {
    min-width: 0;
    flex-shrink: 1;
}
/* 2026-09-07：更多选项 - 选择模型下拉（与 form-label 同行，占剩余空间） */
.form-group .model-picker {
    flex: 1;                /* 占剩余空间，与 label 同行 */
    min-width: 0;
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.4;
}
/* 2026-09-07：统一下拉展开时 option / optgroup 的颜色（深色主题下默认样式不可见） */
.version-select option {
    background: #1a1a1a;
    color: #fff;
}
.version-select optgroup {
    background: #1a1a1a;
    color: #f97316;     /* 分组标题用主题橙，跟顶栏一致 */
    font-weight: 600;
    font-style: normal;  /* 去掉默认斜体 */
}
.form-group .form-hint {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 4px;
    width: 100%;
    flex-basis: 100%;
}
.info-icon {
    color: var(--text-tertiary);
    font-size: 12px;
    cursor: help;
}

/* 分段控制器（Write/Prompt/Instrumental、Male/Female） */
.segmented-control {
    display: inline-flex;
    background: var(--bg-card);
    border-radius: var(--radius-pill);
    padding: 2px;
    border: 1px solid var(--border-color);
    flex-shrink: 0;           /* 防止被挤压到看不见 */
}
.seg-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 4px 10px;        /* 略缩（12→10）让 3 按钮更紧凑 */
    border-radius: var(--radius-pill);
    font-size: 12px;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;      /* 防止按钮文字被换行 */
}
.seg-btn:hover:not(:disabled):not(.active) { color: var(--text-primary); }
.seg-btn.active {
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-weight: 500;
}
.seg-btn:disabled { cursor: not-allowed; opacity: 0.6; }

/* 滑条 */
.slider-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 160px;          /* 改：能伸能缩，最小 160px（容下"100%"字样 + 滑条） */
    min-width: 0;             /* 配合 .form-group flex-wrap */
    max-width: 220px;
}
.suno-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.suno-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--accent-gradient);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--bg-base);
}
.suno-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, #f97316, #ec4899);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--bg-base);
}
.suno-slider:disabled {
    background: var(--border-color);
    cursor: not-allowed;
}
.suno-slider:disabled::-webkit-slider-thumb {
    background: var(--text-tertiary);
}
.suno-slider:disabled::-moz-range-thumb {
    background: var(--text-tertiary);
}
.slider-value {
    font-size: 12px;
    color: var(--text-secondary);
    min-width: 36px;
    text-align: right;
}
    font-size: 13px;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='%23aaa'%3e%3cpath d='M0 0l5 6 5-6z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 30px;
}

.top-right { display: flex; align-items: center; gap: 12px; }
.apikey-input {
    display: none;  /* 2026-09-02：隐藏 API Key 输入框，登录后自动填入仍供 JS 读取（id="apikey" 不变） */
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    color: #fff;
    padding: 6px 12px;
    border-radius: 8px;
    width: 200px;
    font-size: 13px;
}
.apikey-input:focus { outline: none; border-color: #3b82f6; }
.back-link {
    color: #888;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.2s;
}
.back-link:hover { background: #1a1a1a; color: #fff; }

/* 中英文切换胶囊 */
.lang-switch {
    display: inline-flex;
    background: #1a1a1a;
    border-radius: 100px;
    padding: 3px;
    border: 1px solid #2a2a2a;
}
.lang-switch button {
    background: transparent;
    border: none;
    color: #777;
    padding: 5px 12px;
    border-radius: 100px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s;
}
.lang-switch button.active {
    background: #333;
    color: #fff;
}
.lang-switch button:hover:not(.active) { color: #aaa; }

/* 主体布局：左 1/3 + 右 2/3（高度扣除 56px 顶栏 + 64px 播放器）
   2026-09-02：JS 拖动时会 inline 写 grid-template-columns；
   fullscreen-right 模式下需要 !important 覆盖 JS 的 inline grid（让右栏 1fr 铺满）
   2026-09-02 修复：加 max-width: 100vw 兜底 */
.main-layout {
    display: grid;
    grid-template-columns: 240px 1fr 6px 720px;
    width: 100%;
    max-width: 100vw;
    height: calc(100vh - 56px - 64px);
    overflow: hidden;
}
/* 2026-08-28：积分明细全屏模式 —— 隐藏中间创作表单列，右栏铺满剩余空间
   2026-09-02：用 !important 强制覆盖 JS 写的 inline grid（避免浏览器缓存旧 JS 留下残留状态）
   2026-09-02：JS 切视图时也主动设 grid（双保险） */
.main-layout.fullscreen-right {
    grid-template-columns: 240px 6px 1fr !important;
}
/* 2026-09-02 关键修复：display:none 的 grid 子项会"跳过"占位，导致 right-panel 被分到第 2 列 6px
   这里显式给 right-panel 和 sidebar-nav 指定列号（!important 防御旧 JS 残留） */
.main-layout.fullscreen-right .sidebar-nav {
    grid-column: 1 !important;
    grid-row: 1 !important;
}
.main-layout.fullscreen-right .right-panel {
    grid-column: 3 !important;
    grid-row: 1 !important;
}
/* 2026-09-02：fullscreen-right 下强制隐藏 main-center / col-resizer（避免旧 JS 残留 display） */
.main-layout.fullscreen-right .main-center,
.main-layout.fullscreen-right .col-resizer {
    display: none !important;
}
/* 2026-09-02：列宽调整手柄（在 main-center 与 right-panel 之间）
   hover / 拖拽时显示 1px 橙色竖线 */
.col-resizer {
    cursor: col-resize;
    background: transparent;
    position: relative;
    user-select: none;
    z-index: 1;
}
.col-resizer::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #2a2a2d;
    transform: translateX(-0.5px);
    transition: background 0.15s;
}
.col-resizer:hover::before,
.col-resizer.dragging::before {
    background: #f97316;
}
/* 积分明细全屏模式（中间列隐藏）：手柄也隐藏（无中间区域可分隔） */
.main-layout.fullscreen-right .col-resizer {
    display: none;
}

/* ========= 左：侧边导航（240px） ========= */
.sidebar-nav {
    width: 240px;
    background: #0a0a0c;
    border-right: 1px solid var(--border-color);
    padding: 12px 8px;
    overflow-y: auto;
    flex-shrink: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.sidebar-nav .nav-content { flex: 1; }
.sidebar-nav .sidebar-footer { margin-top: auto; padding-top: 8px; }
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }
.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px 18px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 14px;
}
.sidebar-logo .logo-icon { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg,#f97316,#ec4899); display: inline-block; flex-shrink: 0; }
.sidebar-logo .logo-title { font-size: 14px; font-weight: 600; color: var(--text-primary); line-height: 1.2; }
.sidebar-logo .logo-subtitle { font-size: 10px; color: var(--text-tertiary); margin-top: 2px; }

.nav-group { margin-bottom: 12px; }
.nav-group-title {
    font-size: 10px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 8px;
    margin-bottom: 2px;
    font-weight: 500;
}
.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    font-size: 13px;    cursor: pointer;
    text-align: left;
    transition: all 0.15s;
    margin-bottom: 1px;
}
.nav-item:hover { background: var(--bg-card); color: var(--text-primary); }

/* 2026-08-30 新增：左侧菜单 CTA 按钮（开通订阅 / 积分充值）
   与 .nav-item 视觉一致 —— 2026-08-30 调整：去掉背景渐变，回归普通 nav 风格 */
.nav-cta-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    margin-bottom: 1px;
    text-align: left;
}
.nav-cta-btn:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}
.nav-cta-btn .nav-icon { font-size: 14px; }
.nav-cta-btn .nav-label { flex: 1; }

/* 2026-09-02：CTA 按钮选中态（与 .nav-item.active 一致） */
.nav-cta-btn.active {
    background: linear-gradient(90deg, rgba(249,115,22,0.18), rgba(236,72,153,0.06));
    color: var(--text-primary);
    font-weight: 500;
    position: relative;
}
.nav-cta-btn.active::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: linear-gradient(180deg, #f97316, #ec4899);
    border-radius: 0 2px 2px 0;
}

.nav-item.active {
    background: linear-gradient(90deg, rgba(249,115,22,0.18), rgba(236,72,153,0.06));
    color: var(--text-primary);
    font-weight: 500;
    position: relative;
}
.nav-item.active::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: linear-gradient(180deg, #f97316, #ec4899);
    border-radius: 0 2px 2px 0;
}
.nav-icon { font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; }
.nav-label { flex: 1; }
.nav-badge {
    background: linear-gradient(135deg, #f97316, #ec4899);
    color: #fff;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}
.nav-badge.credits-badge { background: var(--bg-card); border: 1px solid var(--border-active); color: var(--border-active); }

/* ========= 中：主区 ========= */
.main-center {
    display: flex;
    flex-direction: column;
    background: var(--bg-base);
    min-height: 0;     /* 关键：grid 子项默认 min-height:auto 会阻止内部滚动 */
    min-width: 0;
    overflow: hidden;  /* 兜底截断：避免 footer 之外的内容溢出 */
}

/* Create 大按钮（底部固定） */
.create-cta-wrap {
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-base);
    flex-shrink: 0;
}
.create-cta {
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #f97316, #ec4899);
    color: #fff;
    border: none;
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.create-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(249,115,22,0.35); }
.create-cta:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.create-cta .points-hint {
    font-size: 12px;
    font-weight: 400;
    opacity: 0.85;
}

/* ========= 左：输入面板 ========= */
.left-panel {
    flex: 1 1 auto;
    min-height: 0;       /* 关键：grid/flex 子项默认 min-height:auto 会阻止内部滚动 */
    border-right: 1px solid #1f1f1f;
    overflow-y: scroll;  /* 始终显示滚动条，避免内容超出后"消失看不见" */
    overflow-x: hidden;  /* 防止横向溢出造成视觉混乱 */
    padding: 20px;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    scroll-padding-bottom: 16px;
    scrollbar-gutter: stable;           /* 始终预留滚动条空间，避免内容跳动 */
    scrollbar-width: thin;              /* Firefox 细滚动条 */
    scrollbar-color: #555 transparent;
}
.left-panel::-webkit-scrollbar { width: 8px; }
.left-panel::-webkit-scrollbar-track { background: transparent; }
.left-panel::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 4px;
    border: 1px solid transparent;
    background-clip: padding-box;
}
.left-panel::-webkit-scrollbar-thumb:hover { background: #666; }

/* ========= 中：底部固定 Create 操作条 ========= */
.left-footer {
    flex: 0 0 auto;                     /* 不参与弹性伸缩，永远固定 */
    padding: 12px 20px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-base);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);  /* 顶部轻微阴影，提示上方可滚 */
}

/* 功能选项卡 +Inspo / +Voice / +Audio */
.feature-tabs {
    display: flex;
    gap: 0;
    background: #0f0f0f;
    border-radius: 10px;
    padding: 4px;
}
.feature-tab {
    flex: 1;
    padding: 10px 12px;
    background: transparent;
    border: none;
    color: #888;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}
.feature-tab.active { background: #1a1a1a; color: #fff; }
.feature-tab:hover:not(.active) { color: #ddd; }

/* 可折叠区块 */
.panel-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    /* 关键：折叠关闭时给最小高度，保证标签名（如"歌词""风格"）始终可见 */
    min-height: 56px;
    overflow: hidden;          /* 兜底：折叠动画瞬间内容不溢出圆角 */
    flex-shrink: 0;            /* 防止在 flex 容器中被压缩到 0 */
}
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    min-height: 44px;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.section-header:hover { background: var(--bg-card-hover); }
.section-header .title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1.4;
}
.section-header .chevron {
    color: var(--text-secondary);
    transition: transform 0.2s;
    font-size: 10px;
}
.panel-section.collapsed .chevron { transform: rotate(-90deg); }
.panel-section.collapsed .section-body { display: none; }
.section-body { padding: 0 16px 16px; }

/* 纯音乐开关：与 section-header 同行右侧（夹在标题和 chevron 之间） */
.instrumental-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    /* 强制推到右侧（与 chevron 之间留出一点空间） */
    margin-left: auto;
    margin-right: 8px;
    /* 阻止点击事件冒泡到 section-header（防止点开关同时折叠/展开） */
    position: relative;
    z-index: 1;
}
.instrumental-toggle input[type="checkbox"] {
    width: 28px;
    height: 16px;
    appearance: none;
    -webkit-appearance: none;
    background: #3a3a3a;
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
    vertical-align: middle;
    flex-shrink: 0;
}
.instrumental-toggle input[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}
.instrumental-toggle input[type="checkbox"]:checked {
    background: #f97316;
}
.instrumental-toggle input[type="checkbox"]:checked::before {
    transform: translateX(12px);
}
/* 不再启用 section-body 内部滚动：更多选项等内容完全按内容自适应，
   超出时由外层 .left-panel 统一滚动（避免嵌套滚动条割裂体验） */

/* 高级功能折叠区样式（高级创作/声音克隆/音频工具/辅助工具） */
.section-header .title .emoji {
    font-size: 14px;
    line-height: 1;
    display: inline-block;
}
.tool-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 0; }
.tool-btn {
    background: #1a1a1a; border: 1px solid #2a2a2a; color: #ddd;
    padding: 10px 12px; border-radius: 8px; cursor: pointer;
    font-size: 12px; display: flex; align-items: center; gap: 8px;
    transition: all .15s ease; text-align: left;
}
.tool-btn:hover { background: #2a2a2a; border-color: #f97316; transform: translateY(-1px); }
.tool-btn .emoji { font-size: 16px; }
.tool-btn .label { flex: 1; }
.tool-btn.disabled { opacity: 0.4; cursor: not-allowed; }

/* Lyrics 编辑区 */
.lyrics-area {
    width: 100%;
    min-height: 220px;
    background: transparent;
    color: #ddd;
    border: none;
    resize: none;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;
    padding: 0;
    outline: none;
}
.lyrics-area::placeholder { color: #555; font-style: italic; }
.lyrics-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    padding-top: 8px;
    border-top: 1px solid #1a1a1a;
    margin-top: 8px;
}
.lyrics-toolbar button {
    background: transparent;
    border: none;
    color: #888;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}
.lyrics-toolbar button:hover { background: #1a1a1a; color: #fff; }

/* 歌词魔法棒按钮：固定在 toolbar 最左，渐变样式区别于普通按钮 */
.lyrics-toolbar .lyrics-magic-btn {
    background: linear-gradient(135deg, #f97316, #ec4899);
    color: #fff;
    font-size: 14px;
}
.lyrics-toolbar .lyrics-magic-btn:hover {
    background: linear-gradient(135deg, #f97316, #ec4899);
    opacity: 0.9;
    color: #fff;
    box-shadow: 0 0 10px rgba(236, 72, 153, 0.5);
}
.lyrics-toolbar .lyrics-magic-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.lyrics-toolbar .lyrics-magic-btn:disabled:hover { box-shadow: none; }

/* ===== 歌词魔法棒：容器 + 加载动画 ===== */
.lyrics-toolbar .lyrics-magic-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: auto;              /* 整个 group 推到 toolbar 最左（继承原按钮行为） */
}

/* ---- 按钮内旋转光环 ---- */
.lyrics-toolbar .lyrics-magic-btn {
    position: relative;             /* 让 ::before 相对按钮居中 */
    flex-shrink: 0;
}
.lyrics-toolbar .lyrics-magic-btn.loading {
    color: transparent;             /* 隐掉 ✨，让位给光环 */
    overflow: hidden;               /* 只在 loading 时裁剪，不影响 hover 阴影 */
    cursor: wait;
}
.lyrics-toolbar .lyrics-magic-btn.loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-top-color: #fff;
    border-radius: 50%;
    box-sizing: border-box;
    animation: lyricsMagicSpin 0.8s linear infinite;
    pointer-events: none;
}
@keyframes lyricsMagicSpin {
    to { transform: rotate(360deg); }
}
/* 覆盖 :disabled 的 opacity 0.5，让动画期间保持清晰 */
.lyrics-toolbar .lyrics-magic-btn:disabled.loading {
    opacity: 1;
}

/* ===== V2 排版测试按钮（2026-11-03 调试用）=====
   ★ 默认隐藏（HTML hidden 属性），网址加 ?lyricstest=1 时由 JS 取消 hidden。
   显式写死 display:none，防止按钮自身的 display 规则覆盖 [hidden] 的浏览器默认值。
   与魔法棒 ✨ 并排，青色系区分。点它只调 /tts/lyrics-v2/rewrite
   （只排版 + 数字转中文，不加标签），结果弹窗对比展示，不影响 ✨ 的原有行为。 */
.lyrics-toolbar .lyrics-test-btn[hidden] {
    display: none !important;
}
.lyrics-toolbar .lyrics-test-btn {
    background: linear-gradient(135deg, #06b6d4, #3b82f6);
}
.lyrics-toolbar .lyrics-test-btn:hover {
    background: linear-gradient(135deg, #06b6d4, #3b82f6);
    opacity: 0.9;
    color: #fff;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.5);
}
.lyrics-toolbar .lyrics-test-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.lyrics-toolbar .lyrics-test-btn:disabled:hover { box-shadow: none; }

/* ===== V2 测试结果弹窗 ===== */
.lyrics-v2-test-overlay { z-index: 260; }
.lyrics-v2-test-modal {
    max-width: 760px;
    width: 92vw;
    text-align: left;
}
.lyrics-v2-test-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 8px;
    vertical-align: middle;
}
.lyrics-v2-test-badge.ok   { background: rgba(34,197,94,.15);  color: #4ade80; }
.lyrics-v2-test-badge.fail { background: rgba(239,68,68,.15);  color: #f87171; }
.lyrics-v2-test-meta {
    color: #888;
    font-size: 12px;
    margin-bottom: 14px;
    line-height: 1.7;
}
.lyrics-v2-test-meta code {
    background: #1a1a1a;
    padding: 1px 6px;
    border-radius: 4px;
    color: #9ca3af;
}
.lyrics-v2-test-pane {
    margin-bottom: 14px;
}
.lyrics-v2-test-pane > label {
    display: block;
    font-size: 12px;
    color: #aaa;
    margin-bottom: 6px;
}
.lyrics-v2-test-pane pre {
    background: #141414;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    padding: 12px;
    margin: 0;
    color: #ddd;
    font-size: 13px;
    line-height: 1.75;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 220px;
    overflow: auto;
    font-family: inherit;
}
.lyrics-v2-test-pane.result pre {
    border-color: #164e63;
    background: #0c1a1f;
}

/* ---- 文字 + 三点跳动 ---- */
.lyrics-toolbar .lyrics-loading-text:not([hidden]) {
    font-size: 12px;
    color: #ec4899;                 /* 呼应按钮渐变的粉色端 */
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    animation: lyricsTextFadeIn 0.2s ease-out;
}
.lyrics-loading-dots {
    display: inline-flex;
    gap: 2px;
    margin-left: 2px;
}
.lyrics-loading-dots span {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ec4899;
    animation: lyricsDotBounce 1.4s infinite ease-in-out both;
}
.lyrics-loading-dots span:nth-child(1) { animation-delay: 0s; }
.lyrics-loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.lyrics-loading-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes lyricsDotBounce {
    0%, 80%, 100% { transform: translateY(0);    opacity: 0.4; }
    40%           { transform: translateY(-4px); opacity: 1;   }
}
@keyframes lyricsTextFadeIn {
    from { opacity: 0; transform: translateX(-4px); }
    to   { opacity: 1; transform: translateX(0);    }
}

/* ---- 无障碍：尊重"减少动画"偏好 ---- */
@media (prefers-reduced-motion: reduce) {
    .lyrics-toolbar .lyrics-magic-btn.loading::before { animation-duration: 2s; }
    .lyrics-loading-dots span                          { animation-duration: 2.4s; }
}

/* Help me write lyrics 按钮 */
.help-write-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: linear-gradient(135deg,#8b5cf6,#6366f1);
    color: #fff;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
    box-shadow: 0 4px 14px rgba(99,102,241,0.3);
    align-self: flex-start;
    margin-top: -4px;
}
.help-write-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(99,102,241,0.4); }
.help-write-btn:active { transform: translateY(0); }
.help-write-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Styles 多行输入框（与歌词同风格） */
.styles-input {
    width: 100%;
    min-height: 112px;     /* 默认高度 2 倍（原 56px） */
    max-height: 480px;     /* 最大高度同步 2 倍（原 240px） */
    resize: vertical;
    background: transparent;
    color: #ddd;
    border: none;
    border-bottom: 1px solid #2a2a2a;
    padding: 8px 0;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
    outline: none;
    margin-bottom: 12px;
    overflow-y: auto;
}
.styles-input::placeholder { color: #555; font-style: italic; }
.tag-chips-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    /* 魔法棒固定左侧，chips 在剩余空间横向滚动 */
    margin-top: 8px;
    /* 右侧渐隐遮罩：滚动条是隐藏的，用它提示「右边还有更多 chip」 */
    position: relative;
}
.tag-chips-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 36px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to left, var(--bg-card, #141414) 20%, transparent);
    opacity: 0;
    transition: opacity 0.2s;
}
/* 只有右侧确实还有内容时才显示 */
.tag-chips-wrap.has-more::after { opacity: 1; }
.tag-magic-btn {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f97316, #ec4899);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s, box-shadow 0.15s;
}
.tag-magic-btn:hover {
    opacity: 0.9;
    box-shadow: 0 0 10px rgba(236, 72, 153, 0.5);
}
.tag-magic-btn:active { transform: scale(0.92); }
.tag-magic-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.tag-magic-btn:disabled:hover { box-shadow: none; }

/* 换一批风格建议（魔法棒右侧）：与魔法棒同尺寸，配色区分开 */
.tag-shuffle-btn {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #2f2f35;
    border: 1px solid #444;
    border-radius: 8px;
    color: #ddd;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s, border-color 0.15s, box-shadow 0.15s;
}
.tag-shuffle-btn:hover {
    opacity: 0.95;
    border-color: #6b7280;
    box-shadow: 0 0 8px rgba(156, 163, 175, 0.35);
}
.tag-shuffle-btn:active { transform: scale(0.92); }

.tag-chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    /* 让 chips 容器占满剩余宽度，且允许在魔法棒右侧滚动 */
    flex: 1;
    min-width: 0;
    /* 隐藏滚动条（保留滚动能力） */
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE/Edge legacy */
    /* iOS 惯性滚动 */
    -webkit-overflow-scrolling: touch;
}
.tag-chips::-webkit-scrollbar {     /* Chrome / Safari */
    display: none;
}
.tag-chips .tag-chip {
    flex-shrink: 0;                 /* chip 不被压缩，每个保持完整宽度 */
    white-space: nowrap;
}
.tag-chip {
    padding: 6px 14px;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 100px;
    cursor: pointer;
    font-size: 12px;
    color: #aaa;
    transition: all 0.2s;
    user-select: none;
}
.tag-chip:hover { border-color: #3b82f6; color: #fff; }
.tag-chip.active {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
}
.tag-chip.special { /* 灵感模式 chip：随机/全部 */
    background: transparent;
    border-style: dashed;
}

/* Styles 区域右上角操作按钮组：风格库 / 保存 / 删除 */
.styles-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    /* 强制推到右侧（与 chevron 之间留出一点空间） */
    margin-left: auto;
    margin-right: 8px;
    /* 阻止点击事件冒泡到 section-header（防止点按钮同时折叠/展开） */
    position: relative;
    z-index: 1;
}
.styles-action-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #aaa;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.styles-action-btn:hover {
    background: #1f1f1f;
    border-color: #2a2a2a;
    color: #fff;
}
.styles-action-btn:active { transform: scale(0.92); }
.styles-action-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* 风格库列表项 */
.style-library-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    background: #0f0f0f;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    margin-bottom: 8px;
    transition: border-color 0.15s, background 0.15s;
}
.style-library-item:hover {
    border-color: #3b82f6;
    background: #12161f;
}
.style-library-item-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.style-library-item-name {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.style-library-item-meta {
    font-size: 11px;
    color: #666;
    flex-shrink: 0;
}
.style-library-item-prompt {
    font-size: 12px;
    color: #aaa;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.style-library-item-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    margin-top: 4px;
}
.style-library-item-actions button {
    padding: 4px 12px;
    font-size: 11px;
    border-radius: 6px;
    border: 1px solid #2a2a2a;
    background: #1a1a1a;
    color: #ddd;
    cursor: pointer;
    transition: all 0.15s;
}
.style-library-item-actions button:hover { background: #2a2a2a; color: #fff; }
.style-library-item-actions .btn-use {
    background: linear-gradient(135deg, #f97316, #ec4899);
    color: #fff;
    border: none;
}
.style-library-item-actions .btn-use:hover { opacity: 0.9; }
.style-library-item-actions .btn-delete:hover { color: #ef4444; border-color: #ef4444; }

/* Song Title 输入 */
.title-input {
    width: 100%;
    background: transparent;
    border: none;
    color: #ddd;
    padding: 8px 0;
    font-family: inherit;
    font-size: 14px;
    outline: none;
}
.title-input::placeholder { color: #555; font-style: italic; }

/* Create 主按钮 */
.create-btn {
    width: 100%;
    padding: 14px;                      /* 略减（原 16px），避免过高占空间 */
    background: linear-gradient(135deg,#3b82f6,#2563eb);
    color: #fff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* margin-top: auto 已删除：现在 .left-footer 固定容器，弹性伸缩交给 .left-panel */
    box-shadow: 0 4px 16px rgba(59,130,246,0.3);
}
.create-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(59,130,246,0.4);
}
.create-btn:disabled {
    background: #333;
    cursor: not-allowed;
    box-shadow: none;
}
.create-btn .spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 创建立即态：进度显示 */
.progress-info {
    text-align: center;
    color: #888;
    font-size: 13px;
    margin-top: 10px;
}
.progress-bar {
    width: 100%;
    height: 3px;
    background: #1a1a1a;
    border-radius: 2px;
    overflow: hidden;
    margin-top: 10px;
}
.progress-bar-fill {
    height: 100%;
    background: #3b82f6;
    transition: width 0.4s ease;
}

/* ========= 右：作品工作区 ========= */
.right-panel {
    overflow-y: auto;
    background: #000;
    display: flex;
    flex-direction: column;
    min-height: 0;        /* 关键：grid 子项必须显式 min-height:0 才能滚动 */
    padding-bottom: 16px; /* 防止最底部歌曲卡贴到播放器 */
}
.right-panel::-webkit-scrollbar { width: 8px; }
.right-panel::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }

/* 右侧顶部筛选条 */
.filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.filter-bar .filter-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.filter-bar .filter-selects {
    display: flex;
    gap: 8px;
}
.filter-bar select {
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    outline: none;
}

/* 唱片空状态 */
.empty-disc {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--text-tertiary);
}
.empty-disc .disc {
    width: 160px; height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, #2a2a2d 30%, #1a1a1c 60%, #0f0f11 100%);
    position: relative;
    margin-bottom: 16px;
    animation: spin 8s linear infinite;
}
.empty-disc .disc::before {
    content: '';
    position: absolute;
    width: 50px; height: 50px;
    background: var(--bg-base);
    border-radius: 50%;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid #333;
}
.empty-disc .disc::after {
    content: '';
    position: absolute;
    width: 10px; height: 10px;
    background: #555;
    border-radius: 50%;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.empty-disc .disc-text {
    font-size: 13px;
    color: var(--text-secondary);
}

.workspace-header {
    padding: 20px 32px;
    border-bottom: 1px solid #1f1f1f;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.workspace-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #ccc;
}
.workspace-title .breadcrumb-sep { color: #555; }
.search-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.search-input {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    color: #fff;
    padding: 8px 14px;
    border-radius: 100px;
    width: 180px;
    font-size: 13px;
}
.filter-btn, .sort-btn {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    color: #aaa;
    padding: 8px 14px;
    border-radius: 100px;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.filter-btn:hover, .sort-btn:hover { color: #fff; border-color: #444; }

.pager {
    display: flex;
    gap: 4px;
    align-items: center;
}
.pager button {
    background: #1a1a1a;
    border: none;
    color: #888;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
}
.pager button:hover { color: #fff; }
.pager .page-num { color: #fff; font-weight: 600; }

/* Today 区块 */
.today-section { padding: 24px 32px; }
.today-section h2 {
    color: #ccc;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 16px;
}

/* 歌曲卡片 */
.song-list { display: flex; flex-direction: column; gap: 16px; }

/* 2026-08-30：我的创作视图最大宽度限制（大屏靠左，避免被无限拉宽） */
#songList {
    max-width: 960px;
    width: 100%;
    margin: 0;
}
.song-card {
    display: grid;
    grid-template-columns: 96px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 12px;
    border-radius: 12px;
    transition: background 0.2s;
}
.song-card:hover { background: #0f0f0f; }
.song-thumb {
    width: 96px;
    height: 96px;
    border-radius: 8px;
    background: linear-gradient(135deg,#1a1a1a,#2a2a2a);
    overflow: hidden;
    position: relative;
    cursor: pointer;
}
.song-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.song-thumb .duration {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
}
.song-thumb .play-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    font-size: 28px;
    pointer-events: none;
}
.song-thumb:hover .play-overlay { opacity: 1; }
/* 当前正在播放卡片：图标显示 ⏸，轻微提亮 */
.song-card.playing .song-thumb { box-shadow: 0 0 0 2px #3b82f6; }
.song-card.playing .play-overlay { opacity: 1; }

/* 正在生成中的占位卡片 */
.song-card.generating .song-thumb {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg,#1a1a1a,#0a0a0a);
}
.song-card.generating .song-thumb .spinner-mini {
    width: 28px; height: 28px; border: 2px solid #333; border-top-color: #3b82f6;
    border-radius: 50%; animation: spin 0.8s linear infinite;
}
.song-card.generating .progress-text {
    color: #3b82f6; font-weight: 500; font-size: 13px;
}
.song-card.generating {
    border-left: 3px solid #3b82f6;
    background: linear-gradient(90deg, rgba(59,130,246,0.05), transparent);
}
.song-title-row .status-badge.generating {
    background: #1e3a8a; color: #93c5fd;
    animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* 生成失败的卡片（2026-08-23 新增） */
.song-card.failed {
    border-left: 3px solid #ef4444;
    background: linear-gradient(90deg, rgba(239,68,68,0.05), transparent);
}
.song-card.failed .song-thumb {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg,#2a0a0a,#1a0505);
}
.song-card.failed .failed-thumb {
    display: flex; align-items: center; justify-content: center;
}
.song-card.failed .failed-icon {
    font-size: 28px; color: #ef4444; font-weight: bold;
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(239,68,68,0.1); border: 2px solid #ef4444;
    display: flex; align-items: center; justify-content: center;
}
.song-card.failed .error-text {
    color: #fda4af; font-size: 12px;
}

.song-info { min-width: 0; }
.song-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.song-title-row .name { font-size: 15px; font-weight: 500; color: #fff; }
.song-title-row .version-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    background: #2a2a2a;
    color: #aaa;
}
.song-title-row .version-badge.preview { background: #ef4444; color: #fff; }
.song-title-row .status-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
}
.song-title-row .status-badge.success { background: #064e3b; color: #6ee7b7; }
.song-title-row .status-badge.failed { background: #4c0519; color: #fda4af; }
.song-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: center;
    color: #888;
    font-size: 12px;
    line-height: 1.5;
}
.song-meta .tags {
    flex: 1 1 100%;
    color: #aaa;
    font-size: 11px;
    line-height: 1.4;
    /* 长 tags 自动换行，最多 2 行后省略 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
    word-break: break-word;
}

/* 2026-09-08：创作时间行（位于 song-meta 下方，单独一行） */
.song-time {
    margin-top: 4px;
    color: #888;
    font-size: 11px;
    line-height: 1.4;
}
.song-time .created-at {
    color: #777;
    font-variant-numeric: tabular-nums;
}

.song-actions { display: flex; gap: 6px; align-items: center; }
.icon-btn { background: transparent; border: none; color: #aaa; cursor: pointer; padding: 4px 6px; border-radius: 4px; font-size: 14px; }
.icon-btn:hover { background: #1f1f1f; color: #fff; }

/* 2026-08-24：字幕生成中加载特效（srt 按钮位置） */
.srt-loading-btn { cursor: default; padding: 7px 8px; }
.srt-loading-btn:hover { background: transparent; }
.srt-spinner {
    display: inline-block;
    width: 13px; height: 13px;
    border: 2px solid #3a3a3a; border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
}

/* 2026-08-28：升音质生成中加载特效（wav 按钮位置，仿照 srt 样式） */
.wav-loading-btn { cursor: default; padding: 7px 8px; }
.wav-loading-btn:hover { background: transparent; }
.wav-spinner {
    display: inline-block;
    width: 13px; height: 13px;
    border: 2px solid #3a3a3a; border-top-color: #8b5cf6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
}

/* 2026-08-28：MP4 视频生成中加载特效（mp4 按钮位置，红圈区分 wav 紫圈） */
.mp4-loading-btn { cursor: default; padding: 7px 8px; }
.mp4-loading-btn:hover { background: transparent; }
.mp4-spinner {
    display: inline-block;
    width: 13px; height: 13px;
    border: 2px solid #3a3a3a; border-top-color: #ef4444;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
}

/* 2026-09-08：本地 logo MP4 合成中加载特效（蓝圈，区别于灵龙红圈 mp4-spinner） */
.mp4-logo-loading-btn { cursor: default; padding: 7px 8px; }
.mp4-logo-loading-btn:hover { background: transparent; }
.mp4-logo-spinner {
    display: inline-block;
    width: 13px; height: 13px;
    border: 2px solid #3a3a3a; border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
}

/* 歌曲操作菜单（hover 弹出） */
.song-action-menu {
    position: absolute; right: 8px; top: 56px;
    background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 8px;
    padding: 6px; min-width: 200px; z-index: 100; box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    display: none;
}
.song-action-menu.show { display: block; }
.song-action-menu button {
    display: block; width: 100%; background: transparent; border: none;
    color: #ddd; padding: 8px 12px; text-align: left; cursor: pointer;
    border-radius: 4px; font-size: 12px;
}
.song-action-menu button:hover { background: #2a2a2a; color: #fff; }
/* 2026-11-03：菜单按钮内的小字标注（如"创建为声音库（只能创建1天内）"） */
.song-action-menu button .song-menu-sub {
    font-size: 10px; color: #999; margin-left: 4px; font-weight: normal; vertical-align: 1px;
}
.song-action-menu .divider { height: 1px; background: #2a2a2a; margin: 4px 0; }
.song-action-menu .group-title { font-size: 11px; color: #888; padding: 4px 12px; text-transform: uppercase; letter-spacing: 0.5px; }

/* 通用 Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 200; display: none; align-items: center; justify-content: center; }
.modal-overlay.show { display: flex; }
.modal {
    background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 12px;
    width: 480px; max-width: 90vw; max-height: 85vh; overflow-y: auto;
    padding: 24px; box-shadow: 0 16px 48px rgba(0,0,0,0.8);
}
.modal h3 { font-size: 16px; margin-bottom: 16px; color: #fff; }
.modal label { display: block; font-size: 12px; color: #aaa; margin-top: 12px; margin-bottom: 4px; }
.modal input, .modal textarea, .modal select {
    width: 100%; padding: 8px 12px; background: #0f0f0f; border: 1px solid #2a2a2a;
    border-radius: 6px; color: #fff; font-size: 13px; font-family: inherit;
}
.modal textarea { min-height: 80px; resize: vertical; }
.modal .actions { display: flex; gap: 8px; margin-top: 20px; justify-content: flex-end; }
.modal .actions button { padding: 8px 16px; border-radius: 6px; border: none; cursor: pointer; font-size: 13px; }
.modal .actions .cancel { background: #2a2a2a; color: #aaa; }
.modal .actions .confirm { background: linear-gradient(135deg,#f97316,#ec4899); color: #fff; }

/* ===== Persona 创建弹窗（音频上传样式） ===== */
.persona-modal-card { width: 520px; max-width: 90vw; }
.persona-upload-area { margin: 12px 0; }

/* Persona 名称 + 性别 同行 50/50 */
.persona-form-row {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}
.persona-form-col { flex: 1; min-width: 0; }
.persona-form-col label {
    display: block;
    font-size: 12px;
    color: #aaa;
    margin-top: 0;       /* 覆盖 .modal label 的 margin-top:12px，避免和 row 重复 */
    margin-bottom: 4px;
}
.persona-form-col input,
.persona-form-col select {
    width: 100%;
    padding: 8px 12px;
    background: #0f0f0f;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    color: #fff;
    font-size: 13px;
    font-family: inherit;
    box-sizing: border-box;
}
.persona-file-drop {
    border: 1px dashed #38bdf8;
    border-radius: 8px;
    padding: 24px;
    text-align: center;
    color: #38bdf8;
    cursor: pointer;
    background: rgba(56, 189, 248, 0.05);
    transition: background 0.15s;
}
.persona-file-drop:hover { background: rgba(56, 189, 248, 0.12); }
.persona-file-drop.dragover { background: rgba(56, 189, 248, 0.20); }
.persona-file-drop .icon { font-size: 28px; }
.persona-file-drop .label { font-size: 13px; margin-top: 6px; font-weight: 500; }
.persona-file-drop .hint { font-size: 11px; color: #888; margin-top: 4px; }
/* Persona 上传区双入口（2026-11-04：本地音频 / 视频提取音频）——窄列压缩留白 */
.persona-upload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.persona-upload-grid .persona-file-drop { padding: 16px 10px; }
.persona-upload-grid .persona-file-drop .icon { font-size: 24px; }
.persona-upload-grid .persona-file-drop .label { font-size: 12px; }
.persona-upload-grid .persona-file-drop .hint { font-size: 10px; }
.upload-step { font-size: 12px; color: #aaa; margin-top: 8px; }
.icon-btn {
    background: transparent;
    border: 1px solid #2a2a2a;
    color: #888;
    width: 36px; height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}
.icon-btn:hover { color: #fff; border-color: #444; }

/* 空状态 */
.empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #555;
    padding: 48px;
    text-align: center;
}
.empty-state .icon { font-size: 48px; opacity: 0.5; margin-bottom: 12px; }

/* 计数器 */
.song-counter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 32px;
    color: #888;
    font-size: 13px;
}

/* ========= 积分明细视图（2026-08-27 新增） ========= */
#creditsLogView {
    display: none;
    flex: 1;
    flex-direction: column;
    min-height: 0;     /* 让内部 list 能滚动 */
    padding-bottom: 16px;
    max-width: 960px;   /* 2026-08-30：大屏防止无限拉宽（居中→靠左） */
    width: 100%;
    margin: 0;
}
#creditsLogView.active { display: flex; }

/* 顶部汇总卡（2026-09-09：4 列——订阅积分 / 加购积分 / 累计消费 / 余额合计） */
.credits-log-summary {
    display: grid;
    grid-template-columns: 1.4fr 1.4fr 1fr 1.1fr;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.cls-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.cls-label {
    font-size: 11px;
    color: var(--text-tertiary);
    font-weight: 500;
}
.cls-value {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
}
.cls-meta {
    font-size: 11px;
    color: var(--text-tertiary);
    font-weight: 500;
    margin-top: 2px;
    line-height: 1.4;
}
.cls-quota    .cls-value { color: #c7d2fe; }   /* 紫蓝：订阅积分 */
.cls-recharge .cls-value { color: #4ade80; }   /* 绿：加购积分 */
.cls-add      .cls-value { color: #4ade80; }   /* 绿：充值 */
.cls-consume  .cls-value { color: #f87171; }   /* 红：消费 */
.cls-balance  .cls-value { color: #f5f5f5; }   /* 白：余额 */

/* 2026-09-02：订阅/加购积分卡里的 CTA 按钮定位锚点（按钮挪到加购积分卡里） */
.cls-item.cls-recharge {
    position: relative;
    padding-right: 90px;
}
.cls-recharge-btn {
    position: absolute;
    right: 12px;
    bottom: 12px;
    padding: 5px 12px;
    background: transparent;
    border: 1px solid #4ade80;
    border-radius: 100px;
    color: #4ade80;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    line-height: 1.2;
}
.cls-recharge-btn:hover {
    background: #4ade80;
    color: #0a0a0a;
    box-shadow: 0 0 12px rgba(74, 222, 128, 0.4);
}
.cls-recharge-btn:active {
    transform: scale(0.96);
}
.cls-recharge-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 类型筛选行 */
.credits-log-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.cls-type-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 4px 12px;
    border-radius: 14px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}
.cls-type-btn:hover { background: var(--bg-card); color: var(--text-primary); }
.cls-type-btn.active {
    background: linear-gradient(135deg, #f97316, #ec4899);
    border-color: transparent;
    color: #fff;
    font-weight: 500;
}
.cls-count {
    margin-left: auto;
    color: var(--text-tertiary);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* 流水列表 */
.credits-log-list {
    /* 2026-09-02：去掉 flex:1 + overflow-y:auto，让 right-panel 的滚动条统一接管
       （与开通订阅 / 积分充值 视图一致，使用浏览器原生滚动条） */
    padding: 4px 20px 8px;
}

.credits-log-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-top: 8px;
    transition: background 0.15s;
}
.credits-log-item:hover { background: #131316; }

.cli-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}
.cli-type {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid transparent;
}
.cli-type-add {
    background: rgba(74, 222, 128, 0.12);
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.28);
}
.cli-type-consume {
    background: rgba(248, 113, 113, 0.12);
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.28);
}
.cli-meta { min-width: 0; flex: 1; }
.cli-remark {
    font-size: 13px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
}
.cli-time {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.cli-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}
.cli-amount {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
}
.cli-amount-add     { color: #4ade80; }
.cli-amount-consume { color: #f87171; }
.cli-balance {
    font-size: 10px;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}

/* 加载更多 */
/* 2026-08-30 改造：把「加载更多」按钮换成翻页器
   显示：上一页 | 1 2 3 ... N | 下一页 + 总条数 */
.credits-log-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 20px 16px;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.cls-pager-info {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-right: 8px;
    font-variant-numeric: tabular-nums;
}
.cls-pager-nav,
.cls-pager-num {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    min-width: 28px;
    font-variant-numeric: tabular-nums;
}
.cls-pager-nav:hover:not(:disabled),
.cls-pager-num:hover:not(.active):not(:disabled) {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-active);
}
.cls-pager-num.active {
    background: linear-gradient(135deg, #fbbf24, #f97316);
    border-color: #f97316;
    color: #0a0a0a;
    font-weight: 700;
    cursor: default;
}
.cls-pager-nav:disabled,
.cls-pager-num:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.cls-pager-ellipsis {
    color: var(--text-tertiary);
    font-size: 12px;
    padding: 0 2px;
    user-select: none;
}

/* ========= 底部全局播放器 ========= */
.player-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    min-width: 560px;          /* 最小宽度：保证 5 个按钮能横排 */
    height: 64px;
    background: #0a0a0a;
    border-top: 1px solid #1f1f1f;
    display: flex !important;          /* 强制横排 */
    flex-direction: row !important;    /* 防止被改成 column */
    flex-wrap: nowrap !important;
    align-items: center;
    padding: 0 24px;
    gap: 12px;
    z-index: 100;
    overflow: hidden;           /* 极端窄屏时裁剪内容，不让按钮溢出 */
}
.player-thumb {
    width: 40px; height: 40px;
    border-radius: 6px;
    background: linear-gradient(135deg,#1a1a1a,#2a2a2a);
    overflow: hidden;
}
.player-thumb img { width: 100%; height: 100%; object-fit: cover; }
.player-thumb-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: #555;
}
.player-info {
    min-width: 160px;
    max-width: 220px;
    overflow: hidden;
}
.player-title {
    font-size: 13px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.player-subtitle {
    font-size: 11px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

/* 播放器下拉菜单（人声配乐 / 扩展音乐 / 翻唱 / 仿写 等高级操作入口） */
.player-dropdown {
    position: relative;
    flex-shrink: 0;
}
.player-dropdown-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    min-width: 90px;
    padding: 0 14px;
    border-radius: 16px;
    border: 1px solid #3a3a3a;
    background: linear-gradient(135deg, #2a2a2a, #1f1f1f);
    color: #ddd;
    font-size: 12px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    white-space: nowrap;
    align-self: center;
}
.player-dropdown-btn:hover {
    border-color: #555;
    background: linear-gradient(135deg, #333, #262626);
}
.player-dropdown-btn .caret {
    font-size: 10px;
    color: #888;
    transition: transform 0.15s;
}
.player-dropdown-btn.active {
    border-color: #555;
    background: linear-gradient(135deg, #3a3a3a, #2a2a2a);
}
.player-dropdown-btn.active .caret {
    transform: rotate(180deg);
}
.player-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px); /* 菜单向下展开（嵌在玩家卡片里） */
    left: 0;
    min-width: 180px;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    padding: 6px 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    z-index: 100;
}
.player-dropdown-menu.show {
    display: block;
    animation: playerMenuIn 0.15s ease-out;
}
@keyframes playerMenuIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.player-dropdown-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 14px;
    background: transparent;
    border: none;
    color: #ccc;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.player-dropdown-menu button:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}
.player-dropdown-menu button:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}
.player-dropdown-menu button:disabled:hover {
    background: transparent;
    color: #ccc;
}

/* ── 来源类型徽章：参考歌曲 / Remix / Persona / 官方声音 ─────────────── */
.src-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    margin-right: 6px;
    vertical-align: middle;
    line-height: 1.4;
    border: 1px solid transparent;
}
.src-badge.src-ref {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.4);
}
.src-badge.src-remix {
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
    border-color: rgba(168, 85, 247, 0.4);
}
.src-badge.src-voice {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.4);
}
.src-badge.src-singer {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
    border-color: rgba(148, 163, 184, 0.4);
}
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* ═════════════════════════════════════════════════════════════════════════
   放弃 flexbox，改用 inline-block 横向流式布局
   原因：flex 规则在某些情况下被覆盖/不生效，inline-block 是最稳的横排方案
   ═════════════════════════════════════════════════════════════════════════ */
.player-bar > .player-controls {
    display: block !important;       /* 普通块级容器，让 inline-block 子元素横向流式排列 */
    white-space: nowrap !important;  /* 禁止子元素换行（这是关键） */
    width: 200px !important;         /* 固定 200px，5 个按钮所需 */
    min-width: 200px !important;
    max-width: 200px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    text-align: center;              /* inline-block 子元素居中 */
    padding: 0 4px;
    line-height: 36px;               /* 撑开行高，让按钮垂直居中 */
    font-size: 0;                    /* 消除 inline-block 之间的空白间隙 */
}
.player-bar > .player-controls > .player-btn {
    display: inline-block !important;  /* 横向流式布局：5 个按钮会自动排成一行 */
    vertical-align: middle;            /* 垂直居中 */
    background: transparent;
    border: none;
    color: #ccc;
    cursor: pointer;
    font-size: 13px;                   /* 恢复字号（父元素 font-size:0 是为了消除间隙） */
    width: 28px;
    height: 28px;
    line-height: 28px;                 /* 行高 = 高度，文字垂直居中 */
    border-radius: 50%;
    padding: 0;
    margin: 0 1px;                     /* 按钮之间 1px 间距 */
    transition: color 0.2s, background 0.2s;
}
.player-bar > .player-controls > .player-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.08);
}
.player-bar > .player-controls > .player-btn.main {
    background: #fff;
    color: #000;
    width: 36px;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    margin: 0 3px;
}
.player-progress {
    flex: 1 1 auto;
    min-width: 80px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #888;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
}
.progress-track {
    flex: 1;
    height: 3px;
    background: #2a2a2a;
    border-radius: 2px;
    position: relative;
    cursor: pointer;
}
.progress-fill {
    height: 100%;
    background: #fff;
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s linear;
}
.volume-control {
    color: #888;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ═════════════════════════════════════════════════════════════════════════
   窄屏适配：播放器只保留播放按钮
   触发条件：视口宽度 ≤ 700px（平板竖屏及以下）
   隐藏：⇆ 随机 / ⏮ 上一首 / ⏭ 下一首 / ⛶ 全屏
   保留：▶ 播放/暂停
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
    .player-bar {
        gap: 8px;
        padding: 0 12px;
    }
    .player-bar > .player-info {
        min-width: 100px;
        max-width: 140px;
    }
    /* 窄屏：隐藏次要按钮，只保留播放按钮（HTML 顺序：⇆ ⏮ ▶ ⏭） */
    .player-bar > .player-controls > .player-btn:nth-child(1),
    .player-bar > .player-controls > .player-btn:nth-child(2),
    .player-bar > .player-controls > .player-btn:nth-child(4) {
        display: none !important;
    }
    .player-progress {
        min-width: 60px;
        gap: 6px;
    }
    .player-progress > #totalTime {
        display: none;
    }
}

/* 右下角 toast */
.toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
    z-index: 200;
    max-width: 500px;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.error { background: #4c0519; border-color: #ef4444; }
.toast.success { background: #064e3b; border-color: #10b981; }

/* ============================================================
   Cover 弹出层（覆盖整个工作室）
   ============================================================ */
.cover-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(8px);
    display: none;
    z-index: 300;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}
.cover-modal.show { display: flex; }
.cover-card {
    background: #0f0f0f;
    border: 1px solid #2a2a2a;
    border-radius: 16px;
    width: min(720px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
}
.cover-card .modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: transparent;
    border: none;
    color: #888;
    font-size: 22px;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
}
.cover-card .modal-close:hover { background: #1a1a1a; color: #fff; }
.cover-card h3 {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin: 0;
}
.cover-card p.desc {
    color: #888;
    font-size: 13px;
    margin: -6px 0 0 0;
}
.file-drop {
    border: 2px dashed #2a2a2a;
    border-radius: 12px;
    padding: 32px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: #0a0a0a;
}
.file-drop:hover, .file-drop.dragover { border-color: #3b82f6; background: #0a1428; }
.file-drop .icon { font-size: 36px; margin-bottom: 8px; color: #555; }
.file-drop .label { color: #aaa; font-size: 14px; }
.file-drop .hint { color: #555; font-size: 11px; margin-top: 6px; }
.file-info {
    display: none;
    align-items: center;
    gap: 12px;
    background: #1a1a1a;
    border-radius: 10px;
    padding: 12px 14px;
}
.file-info.show { display: flex; }
.file-info .file-name {
    flex: 1;
    color: #ddd;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.file-info .file-size { color: #888; font-size: 12px; }
.file-info .remove-btn {
    background: transparent;
    border: none;
    color: #888;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}
.file-info .remove-btn:hover { color: #ef4444; }
.clip-info {
    display: none;
    background: #0f2027;
    border: 1px solid #10b981;
    border-radius: 10px;
    padding: 12px 14px;
}
.clip-info.show { display: block; }
.clip-info .label { color: #6ee7b7; font-size: 12px; font-weight: 500; margin-bottom: 4px; }
.clip-info .value {
    font-family: 'Courier New', monospace;
    color: #d1fae5;
    font-size: 12px;
    word-break: break-all;
}
.cover-section {
    background: #1a1a1a;
    border-radius: 12px;
    padding: 14px 16px;
}
.cover-section .section-title {
    font-size: 13px;
    color: #aaa;
    margin-bottom: 8px;
    font-weight: 500;
}
.cover-section textarea {
    width: 100%;
    min-height: 100px;
    background: transparent;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    color: #ddd;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 13px;
    resize: vertical;
    outline: none;
}
.cover-section textarea:focus { border-color: #3b82f6; }
.cover-section input[type="text"] {
    width: 100%;
    background: transparent;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    color: #ddd;
    padding: 10px 12px;
    font-size: 13px;
    outline: none;
}
.cover-section input[type="text"]:focus { border-color: #3b82f6; }
.cover-row { display: flex; gap: 8px; align-items: center; }
.cover-row label { color: #aaa; font-size: 12px; min-width: 60px; }
.upload-step {
    color: #6ee7b7;
    font-size: 12px;
    margin-top: 6px;
}
.upload-step.error { color: #fca5a5; }
/* Cover 任务标记 */
.source-badge.cover {
    background: #f59e0b;
    color: #000;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
}
/* 2026-08-31：人声轨 / 伴奏轨标记（stemsByUrl 衍生品） */
.source-badge.vocal {
    background: #06b6d4;
    color: #fff;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
}
.source-badge.instrumental {
    background: #8b5cf6;
    color: #fff;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
}

/* ═══════════════════════════════════════════════════════════════
   muka 歌曲 — 横向三入口按钮（参考歌曲 / Remix / 自定义歌手）
   ═══════════════════════════════════════════════════════════════ */
.muka-source-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}
.muka-source-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px 14px;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 13px;
    transition: all .15s;
    white-space: nowrap;
    overflow: hidden;
}
.muka-source-btn:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-active);
}
.muka-source-btn.selected {
    background: rgba(56,189,248,0.1);
    border-color: #38bdf8;
    color: #38bdf8;
}
.muka-source-btn .plus {
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
}
.muka-source-btn.selected .plus {
    color: #38bdf8;
}
.muka-source-btn .label {
    font-weight: 500;
}

/* 选中来源后的摘要条 */
.muka-selected-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(56,189,248,0.08);
    border: 1px solid #38bdf8;
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 12px;
}
.muka-selected-summary .summary-icon {
    font-size: 14px;
}
.muka-selected-summary .summary-text {
    flex: 1;
    color: #ddd;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.muka-selected-summary .summary-clear {
    background: transparent;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 16px;
    padding: 0 4px;
}
.muka-selected-summary .summary-clear:hover { color: #ef4444; }

/* extend 区间手柄：单 A 手柄（续写起点），粉色标签样式 */
.range-handle {
    position: absolute;
    top: 0;
    height: 100%;
    cursor: ew-resize;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 11px;
    font-weight: 600;
    user-select: none;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
}
.range-handle-a {
    background: #ec4899;
    /* 宽度按内容自适应（"续写起点" 4 字符），最小 56px */
    width: auto;
    min-width: 56px;
    padding: 0 8px;
    border-radius: 6px;
    /* 让手柄中心对齐到 A 位置（因为宽度不再固定 12px） */
    transform: translateX(-50%);
    left: 0;  /* JS 会设置 calc(% - 6px)，由 translateX(-50%) 微调到中心 */
}
.range-handle:hover {
    filter: brightness(1.15);
}
.range-handle:active {
    filter: brightness(1.3);
}

/* Remix Tab 切换（上传 / 全部） */
.remix-tab {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 13px;
    cursor: pointer;
    transition: all .15s;
}
.remix-tab.active {
    background: rgba(56,189,248,0.15);
    color: #38bdf8;
    border: 1px solid #38bdf8;
}
.remix-tab:not(.active) {
    border: 1px solid var(--border-color);
}

/* 歌手 Tab（我的上传 / 官方 / 已收藏） */
.singer-tab {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 10px 0;
    font-size: 14px;
    cursor: pointer;
    position: relative;
    font-weight: 500;
}
.singer-tab.active {
    color: var(--text-primary);
}
.singer-tab.active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: linear-gradient(135deg,#f97316,#ec4899);
}

/* 新建角色按钮 */
.singer-create-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: rgba(56,189,248,0.06);
    border: 1px dashed #38bdf8;
    border-radius: 10px;
    padding: 14px 18px;
    color: #38bdf8;
    cursor: pointer;
    font-size: 14px;
    transition: all .15s;
}
.singer-create-btn:hover {
    background: rgba(56,189,248,0.12);
}

/* 新建角色卡片（声音库 modal 用，参考截图：青色虚线 + 三段式布局 + Premier 徽章） */
.create-persona-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: rgba(56, 189, 248, 0.06);
    border: 1px dashed #38bdf8;
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 14px;
    color: #38bdf8;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.15s;
    position: relative;
}
.create-persona-card:hover {
    background: rgba(56, 189, 248, 0.12);
}
.create-persona-card .cpc-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.create-persona-card .cpc-text {
    font-weight: 500;
    flex: 1;
}
.create-persona-card .cpc-badge {
    background: transparent;
    border: 1px solid #38bdf8;
    color: #38bdf8;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 500;
    flex-shrink: 0;
}

/* 歌手卡片 */
.singer-card {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    min-width: 0;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    background: linear-gradient(135deg,#1a1a1a,#2a2a2a);
    border: 2px solid transparent;
    display: block;
}
.singer-card:hover {
    transform: translateY(-2px);
    border-color: #38bdf8;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 12px rgba(56,189,248,0.45);
}
.singer-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* 声音库头像：异步加载，不阻塞渲染；位于最底层（z-index 0） */
.singer-card .singer-avatar-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    opacity: 0;
    transition: opacity .25s ease-in;
    background: transparent;
    pointer-events: none;
}
.singer-card .singer-avatar-img.loaded {
    opacity: 1;
}
.singer-card .singer-name {
    position: absolute;
    bottom: 12px; left: 14px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-shadow: 0 2px 6px rgba(0,0,0,0.85);
    z-index: 2;
    transition: opacity .2s, transform .2s;
}
.singer-card .singer-style {
    position: absolute;
    bottom: 40px; left: 14px;
    color: rgba(255,255,255,0.85);
    font-size: 11px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.85);
    z-index: 2;
    transition: opacity .2s;
}
/* 默认状态：标题/副标题可见，按钮组 + 悬停遮罩隐藏 */
.singer-card .singer-actions {
    position: absolute;
    inset: 0;
    z-index: 3;
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
}
.singer-card .singer-actions .use-btn,
.singer-card .singer-actions .play-btn {
    pointer-events: auto;
}
/* 悬停遮罩：覆盖在图片上，让按钮可读 */
.singer-card .hover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.0) 50%);
    z-index: 2;
    opacity: 0;
    transition: opacity .2s;
}
/* 悬停时：显示遮罩 + 按钮组；名字上移到按钮上方（避免被底部按钮遮挡），副标题隐藏 */
.singer-card:hover .hover-overlay { opacity: 1; }
.singer-card:hover .singer-actions { opacity: 1; pointer-events: auto; }
.singer-card:hover .singer-name { opacity: 1; transform: translateY(-48px); }
.singer-card:hover .singer-style { opacity: 0; }

/* 使用按钮：底部居中半透明胶囊（参考图片2 Felix 样式） */
.singer-card .use-btn {
    position: absolute;
    left: 14px;
    bottom: 14px;
    width: calc(100% - 14px - 14px - 48px - 8px); /* 卡片宽 - 左右内边距 - 播放按钮 - 间距 */
    height: 38px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.singer-card .use-btn:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.75);
}
.singer-card .use-btn:disabled,
.singer-card .use-btn.style-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* 播放按钮：右下角小方块（参考图片2 Felix 样式） */
.singer-card .play-btn {
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 40px;
    height: 38px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    transition: background .15s;
}
.singer-card .play-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.3);
}
.singer-card .play-btn:disabled,
.singer-card .play-btn.style-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.singer-card .play-btn svg {
    display: block;
    pointer-events: none;
}

/* 旧的 play-mini：保留但不再显示（防止 hover 状态重叠） */
.singer-card .play-mini {
    display: none;
}

/* 头像卡片：底部渐变遮罩让文字可读（默认状态） */
.singer-card.has-avatar .avatar-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 35%, transparent 65%);
    pointer-events: none;
    z-index: 1;
}
.singer-card.has-avatar .singer-name,
.singer-card.has-avatar .singer-style {
    z-index: 2;
}

/* ── 声音库卡片状态徽章 ─────────────────────────────────────────────── */
.singer-card .singer-status {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 500;
    z-index: 4;
    backdrop-filter: blur(6px);
}

/* ── 创建 Persona 弹窗：头像选择 ─────────────────────────────────────── */
.persona-avatar-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #0a0a0a;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    margin-bottom: 12px;
}
.persona-avatar-preview {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.persona-avatar-preview .placeholder {
    font-size: 24px;
    opacity: 0.5;
}
.persona-avatar-preview img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.persona-avatar-info {
    flex: 1;
    min-width: 0;
}
.persona-avatar-btn {
    background: transparent;
    border: 1px solid #2a2a2a;
    color: #aaa;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
}
.persona-avatar-btn:hover {
    background: #1a1a1a;
    color: #fff;
    border-color: #444;
}

/* ── 声音库卡片状态徽章 ─────────────────────────────────────────────── */
.singer-card .singer-status {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 500;
    z-index: 3;
    backdrop-filter: blur(4px);
}
.singer-card .badge-creating {
    background: rgba(251, 191, 36, 0.9);
    color: #000;
}
.singer-card .badge-failed {
    background: rgba(248, 113, 113, 0.9);
    color: #000;
}
.singer-card .badge-created {
    background: rgba(110, 231, 183, 0.85);
    color: #000;
}
.singer-card .fav-btn {
    position: absolute;
    top: 8px; right: 8px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    border: none;
    width: 28px; height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    z-index: 4;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: background .15s, transform .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}
.singer-card .fav-btn:hover { background: rgba(0,0,0,0.75); transform: scale(1.08); }
/* 2026-08-27：已收藏状态 — 红色高亮（收藏用 ❤） */
.singer-card .fav-btn.is-fav {
    background: linear-gradient(135deg, #f87171, #dc2626);
    color: #fff;
    box-shadow: 0 0 8px rgba(248, 113, 113, 0.55);
}
.singer-card .fav-btn.is-fav:hover { background: linear-gradient(135deg, #dc2626, #f87171); }

/* 2026-08-27：发现/推荐按钮 👍（横排：位于收藏按钮左侧，right:42px 与收藏并排） */
.singer-card .rec-btn {
    position: absolute;
    top: 8px; right: 42px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    border: none;
    width: 28px; height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 13px;
    z-index: 4;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: background .15s, transform .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}
.singer-card .rec-btn:hover { background: rgba(0,0,0,0.75); transform: scale(1.08); }
/* 2026-08-27：已发现状态 — 绿色高亮（推荐点赞用 👍） */
.singer-card .rec-btn.is-rec {
    background: linear-gradient(135deg, #4ade80, #16a34a);
    color: #0a1a0a;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.55);
}
.singer-card .rec-btn.is-rec:hover { background: linear-gradient(135deg, #16a34a, #4ade80); }

/* 2026-08-29：调试按钮 🔧（位于发现按钮左侧，right:76px；用于触发 AI 头像生成调试） */
.singer-card .debug-btn {
    position: absolute;
    top: 8px; right: 76px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    border: none;
    width: 28px; height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 13px;
    z-index: 4;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: background .15s, transform .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}
.singer-card .debug-btn:hover { background: rgba(0,0,0,0.75); transform: scale(1.08); }
.singer-card .debug-btn.is-loading {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    cursor: wait;
    animation: debug-spin 1.2s linear infinite;
}
@keyframes debug-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 2026-09-08：persona 角色类型徽章
   - 默认 top:8px（占位原「✓ 启用」徽章位置，用于成功/已创建场景）
   - 当存在 .singer-status（创建中/失败）时，用相邻兄弟选择器下移到 top:36px，避免与状态徽章重叠 */
.singer-card .singer-role-badge {
    position: absolute;
    top: 8px; left: 8px;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    z-index: 4;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    letter-spacing: 0.3px;
}
/* 有状态徽章（创建中/失败）时，角色徽章下移到状态徽章下方 */
.singer-card .singer-status + .singer-role-badge {
    top: 36px;
}
.singer-card .badge-role-vox {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.85), rgba(59, 130, 246, 0.85));
    color: #fff;
    box-shadow: 0 0 6px rgba(96, 165, 250, 0.4);
}
.singer-card .badge-role-artist {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.9), rgba(249, 115, 22, 0.9));
    color: #fff;
    box-shadow: 0 0 6px rgba(251, 146, 60, 0.5);
}

/* 2026-09-08：persona 角色类型切换（卡片底部 segmented control，位于歌手名下方） */
.singer-card .singer-role-switch {
    display: flex;
    gap: 4px;
    margin: 6px 10px 4px;
    padding: 3px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.singer-card .role-btn {
    flex: 1;
    padding: 5px 6px;
    background: transparent;
    color: #888;
    border: none;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, transform .1s;
}
.singer-card .role-btn:hover {
    color: #ccc;
    background: rgba(255, 255, 255, 0.05);
}
.singer-card .role-btn.active {
    background: linear-gradient(135deg, #f97316, #fb923c);
    color: #fff;
    box-shadow: 0 1px 3px rgba(249, 115, 22, 0.4);
}
.singer-card .role-btn.active:hover {
    transform: scale(1.02);
}

/* Mobile / 窄屏适配 */
@media (max-width: 1280px) {
    /* 中等屏幕：右侧历史缩到 480px */
    .main-layout { grid-template-columns: 220px 1fr 6px 480px; }
}
@media (max-width: 1024px) {
    /* 窄屏：右侧历史隐藏（可在 history 页查看），手柄也隐藏 */
    .main-layout { grid-template-columns: 200px 1fr; }
    .col-resizer { display: none; }
    .right-panel { display: none; }
}
@media (max-width: 768px) {
    /* 移动端：只保留中间 */
    .main-layout { grid-template-columns: 1fr; }
    .sidebar-nav { display: none; }
    .right-panel { display: none; }
    .left-panel { border-right: none; }
}

/* ============================================================
   2026-08-23 新增：用户登录按钮 + 登录 Modal
   ============================================================ */
.btn-login-top {
    padding: 6px 16px;
    border-radius: 6px;
    border: 1px solid #3b82f6;
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-login-top:hover {
    background: rgba(59, 130, 246, 0.3);
    border-color: #60a5fa;
}

.user-info-top {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid #15803d;
    font-size: 13px;
}
.user-info-phone {
    color: #86efac;
    font-weight: 500;
}
.btn-logout-top {
    background: transparent;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 4px;
    transition: color 0.15s;
}
.btn-logout-top:hover {
    color: #ef4444;
}

/* 登录 Modal */
.login-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(4px);
}
.login-modal-card {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 12px;
    width: 420px;
    max-width: 90vw;
    padding: 28px 24px 24px;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.login-modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: transparent;
    border: none;
    color: #888;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.login-modal-close:hover { color: #fff; }
.login-modal-title {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    margin-bottom: 20px;
}
.login-modal-tabs {
    display: flex;
    border-bottom: 1px solid #2a2a2a;
    margin-bottom: 20px;
}
.login-tab {
    flex: 1;
    padding: 10px 0;
    background: transparent;
    border: none;
    color: #888;
    font-size: 14px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.login-tab.active {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
}
.login-tab-pane {
    padding: 0 4px;
}
.login-form-row {
    margin-bottom: 14px;
}
.form-input-login {
    width: 100%;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #2a2a2a;
    background: #0f0f0f;
    color: #fff;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.form-input-login:focus {
    border-color: #3b82f6;
}
.btn-send-code {
    padding: 10px 16px;
    border-radius: 6px;
    border: 1px solid #3b82f6;
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.15s;
}
.btn-send-code:hover:not(:disabled) {
    background: rgba(59, 130, 246, 0.3);
}
.btn-send-code:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.login-modal-row-extra {
    margin-bottom: 14px;
}
.login-modal-error {
    color: #fda4af;
    font-size: 13px;
    min-height: 18px;
    margin-bottom: 10px;
    text-align: center;
}
.login-modal-btn {
    width: 100%;
    padding: 12px;
    border-radius: 6px;
    border: none;
    background: #3b82f6;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 6px;
    transition: background 0.15s;
}
.login-modal-btn:hover:not(:disabled) {
    background: #2563eb;
}
.login-modal-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================================
   2026-08-23 登录按钮移至左侧栏底部
   ============================================================ */
.btn-login-sidebar {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #2a2a2a;
    background: #171719;
    color: #888;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
}
.btn-login-sidebar:hover {
    border-color: #3b82f6;
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.08);
}
.user-info-sidebar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid #15803d;
    box-sizing: border-box;
}
.user-info-sidebar .user-info-phone {
    color: #86efac;
    font-weight: 500;
    font-size: 13px;
}
.btn-logout-sidebar {
    background: transparent;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 4px;
    transition: color 0.15s;
}
.btn-logout-sidebar:hover { color: #ef4444; }

/* 清理旧的右上角登录按钮 CSS（已迁移到左侧栏） */
.btn-login-top,
.user-info-top,
.user-info-phone,
.btn-logout-top { display: none !important; }

/* ================================================================
   2026-08-23 重构：用户中心组件
   积分卡 + 用户栏 + 下拉菜单
   ================================================================ */
.user-center {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

/* ---- 积分卡 ---- */
.user-credits-card {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.06), rgba(59, 130, 246, 0.06));
    border: 1px solid rgba(168, 85, 247, 0.18);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.credits-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.credits-card-left {
    display: flex;
    align-items: baseline;
    gap: 3px;
    min-width: 0;
    flex: 1;
}
.credits-spark {
    color: #c084fc;
    font-size: 13px;
    margin-right: 2px;
}
.credits-used {
    font-size: 15px;
    font-weight: 700;
    color: #f5f5f5;
    letter-spacing: -0.5px;
}
.credits-sep {
    color: #888;
    font-size: 12px;
    font-weight: 500;
}
.credits-total {
    color: #888;
    font-size: 12px;
    font-weight: 500;
}
.credits-level-badge {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, 0.3);
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}
.credits-card-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    overflow: hidden;
}
.credits-card-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #a855f7, #3b82f6);
    border-radius: 2px;
    transition: width 0.4s ease;
}
.credits-upgrade-btn {
    background: rgba(168, 85, 247, 0.06);
    border: 1px solid rgba(168, 85, 247, 0.18);
    border-radius: 8px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: #c4b5fd;
    font-size: 11px;
    transition: all 0.15s;
    margin-top: 2px;
}
.credits-upgrade-btn:hover {
    background: rgba(168, 85, 247, 0.14);
    border-color: rgba(168, 85, 247, 0.4);
}
.credits-upgrade-btn .diamond-icon {
    color: #c084fc;
    font-size: 12px;
}
.credits-upgrade-btn .upgrade-text {
    flex: 1;
    text-align: left;
    color: #c4b5fd;
    font-weight: 500;
}
.credits-upgrade-btn .upgrade-arrow {
    color: #c4b5fd;
    font-size: 13px;
}

/* ---- 用户栏 ---- */
.user-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
}
.user-bar:hover {
    background: rgba(255, 255, 255, 0.05);
}
.user-bar.active {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
}
.user-bar-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #1a1a1c;
}
.user-bar-name {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: #f5f5f5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-bar-bell {
    position: relative;
    background: transparent;
    border: none;
    color: #aaa;
    cursor: pointer;
    font-size: 14px;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.15s;
    line-height: 1;
}
.user-bar-bell:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}
.user-bar-bell .bell-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    background: #ef4444;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.user-bar-arrow {
    color: #888;
    font-size: 11px;
    transition: transform 0.2s;
    flex-shrink: 0;
}
.user-bar.active .user-bar-arrow {
    transform: rotate(180deg);
    color: #f5f5f5;
}

/* ---- 下拉菜单（fixed 定位，避免被 sidebar overflow 裁剪） ---- */
.user-dropdown {
    position: fixed;
    background: #1a1a1c;
    border: 1px solid #2a2a2e;
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.02);
    z-index: 1000;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: dropdownFadeIn 0.18s ease-out;
}
@keyframes dropdownFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.user-dropdown-title {
    font-size: 11px;
    color: #888;
    padding: 4px 10px 2px;
    font-weight: 500;
}
.user-dropdown-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}
.user-dropdown-profile:hover {
    background: rgba(255, 255, 255, 0.04);
}
.user-dropdown-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #1a1a1c;
}
.user-dropdown-name {
    flex: 1;
    font-size: 13px;
    color: #f5f5f5;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-dropdown-arrow {
    color: #888;
    font-size: 16px;
    line-height: 1;
}
.user-dropdown-team-btn {
    background: transparent;
    border: 1px solid #2a2a2e;
    border-radius: 8px;
    padding: 8px 10px;
    color: #f5f5f5;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 4px 0;
    transition: all 0.15s;
}
.user-dropdown-team-btn:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: #3a3a3e;
}
.user-dropdown-team-btn .team-icon {
    color: #888;
    font-size: 13px;
}
.user-dropdown-divider {
    height: 1px;
    background: #2a2a2e;
    margin: 4px 0;
}
.user-dropdown-item {
    background: transparent;
    border: none;
    padding: 8px 10px;
    border-radius: 6px;
    color: #d4d4d4;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    width: 100%;
    transition: all 0.15s;
}
.user-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
}
.user-dropdown-item .item-icon {
    width: 16px;
    text-align: center;
    font-size: 13px;
    color: #aaa;
    flex-shrink: 0;
}
.user-dropdown-item .item-label {
    flex: 1;
}
.user-dropdown-item .item-value {
    color: #888;
    font-size: 11px;
    margin-right: 4px;
}
.user-dropdown-item .item-arrow {
    color: #888;
    font-size: 14px;
}
.user-dropdown-item.logout {
    color: #f87171;
}
.user-dropdown-item.logout:hover {
    background: rgba(239, 68, 68, 0.08);
}
.user-dropdown-item.logout .item-icon {
    color: #f87171;
}

/* ============================================================
   2026-08-23 新增：Suno 订阅套餐 Modal
   ============================================================ */
.suno-upgrade-overlay {
    /* 2026-09-02：原 fixed 全屏背景移除；改为 right-panel 内的视图容器 */
    display: none;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    padding: 0;
    /* 2026-09-02 修复：去掉 overflow:hidden，让内容能突破到 right-panel 触发滚动
       （之前用 overflow:hidden 把超出视口的内容裁掉，导致 right-panel 不滚动） */
    position: relative;
}
.suno-upgrade-card {
    position: relative;
    background: transparent;
    border: none;
    border-radius: 0;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 28px 32px;
    box-shadow: none;
    color: #fff;
    /* 2026-09-02：去掉 max-height + overflow-y，让 right-panel 的滚动条统一接管
       （与积分明细 / 我的创作视图一致，使用浏览器原生滚动条） */
}
.suno-upgrade-close {
    /* 2026-09-02：right-panel 视图下不再需要 × 按钮（点击左侧导航切换即可） */
    display: none;
    position: absolute;
    top: 14px;
    right: 18px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid #2a2a2d;
    color: #aaa;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s;
}
.suno-upgrade-close:hover {
    background: rgba(239, 68, 68, 0.12);
    border-color: #f87171;
    color: #f87171;
}

/* 头部：标题 + 版本切换 + 计费方式 */
.suno-upgrade-header {
    text-align: center;
    margin-bottom: 24px;
}
.suno-upgrade-title {
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 16px;
    letter-spacing: -0.5px;
}
.suno-upgrade-tier-tabs {
    display: inline-flex;
    gap: 24px;
    margin-bottom: 14px;
}
.suno-upgrade-tier-tab {
    background: transparent;
    border: none;
    color: #a1a1a3;
    font-size: 15px;
    cursor: pointer;
    padding: 4px 0;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
}
.suno-upgrade-tier-tab.active {
    color: #fff;
    border-bottom-color: #f97316;
    font-weight: 600;
}
.suno-upgrade-tier-tab:hover:not(.active) {
    color: #fff;
}
.suno-upgrade-billing {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    border-radius: 100px;
    background: rgba(249, 115, 22, 0.08);
    border: 1px solid rgba(249, 115, 22, 0.25);
    font-size: 12px;
    color: #fdba74;
}
.suno-upgrade-billing-tag {
    color: #f97316;
    font-weight: 600;
}
.suno-upgrade-billing-divider {
    color: #555;
}
.suno-upgrade-billing-alt {
    color: #888;
}

/* 套餐卡片网格 */
.suno-upgrade-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}
.suno-upgrade-plan {
    background: #171719;
    border: 1px solid #2a2a2d;
    border-radius: 12px;
    padding: 22px 20px 20px;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s, transform 0.2s;
    position: relative;
}
.suno-upgrade-plan:hover {
    border-color: #3a3a3d;
}
.suno-upgrade-plan-featured {
    background: linear-gradient(180deg, rgba(249, 115, 22, 0.06) 0%, #171719 35%);
    border-color: rgba(249, 115, 22, 0.45);
    box-shadow: 0 8px 24px rgba(249, 115, 22, 0.08);
}
.suno-upgrade-plan-featured:hover {
    border-color: #f97316;
}
.suno-upgrade-plan-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 12px;
    border-radius: 100px;
    background: linear-gradient(135deg, #f97316, #ec4899);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.35);
}
.suno-upgrade-plan-head {
    margin-bottom: 16px;
}
.suno-upgrade-plan-name {
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 10px;
}
.suno-upgrade-plan-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}
.suno-upgrade-price-yuan {
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.5px;
}
.suno-upgrade-plan-featured .suno-upgrade-price-yuan {
    color: #fdba74;
}
.suno-upgrade-price-period {
    font-size: 13px;
    color: #a1a1a3;
}
.suno-upgrade-price-original {
    font-size: 12px;
    color: #6c6c70;
    text-decoration: line-through;
    margin-left: 4px;
}
.suno-upgrade-plan-credits {
    font-size: 13px;
    color: #a1a1a3;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.suno-upgrade-plan-tag {
    padding: 1px 8px;
    border-radius: 100px;
    background: rgba(249, 115, 22, 0.12);
    color: #fdba74;
    font-size: 10px;
    font-weight: 500;
}
.suno-upgrade-plan-summary {
    margin-top: 8px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.03);
    border-left: 2px solid rgba(249, 115, 22, 0.5);
    border-radius: 4px;
    font-size: 11.5px;
    line-height: 1.5;
    color: #a1a1a3;
}
.suno-upgrade-plan-btn {
    width: 100%;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #2a2a2d;
    background: transparent;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 16px;
    transition: all 0.15s;
}
.suno-upgrade-plan-btn:hover {
    border-color: #f97316;
    background: rgba(249, 115, 22, 0.06);
}
.suno-upgrade-plan-btn-primary {
    background: linear-gradient(135deg, #f97316, #ec4899);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
}
.suno-upgrade-plan-btn-primary:hover {
    filter: brightness(1.08);
    background: linear-gradient(135deg, #f97316, #ec4899);
    border-color: transparent;
}
.suno-upgrade-plan-features {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.7;
    color: #a1a1a3;
    flex: 1;
}
.suno-upgrade-plan-features li {
    padding: 2px 0;
}
.suno-upgrade-plan-features li:has(✓) {
    color: #d4d4d8;
}

/* 功能对比表 */
.suno-upgrade-compare {
    margin-top: 12px;
    padding-top: 24px;
    border-top: 1px solid #2a2a2d;
}
.suno-upgrade-compare-title {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 16px;
}
.suno-upgrade-compare-table {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid #2a2a2d;
}
.suno-upgrade-compare-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    min-width: 720px;
}
.suno-upgrade-compare-table th,
.suno-upgrade-compare-table td {
    padding: 8px 12px;
    text-align: center;
    border-bottom: 1px solid #1f1f22;
    color: #d4d4d8;
}
.suno-upgrade-compare-table th {
    background: #171719;
    color: #fff;
    font-weight: 500;
    font-size: 13px;
    position: sticky;
    top: 0;
}
.suno-upgrade-compare-table th.suno-upgrade-compare-feature {
    text-align: left;
    color: #a1a1a3;
}
.suno-upgrade-compare-table td:first-child {
    text-align: left;
    color: #a1a1a3;
}
.suno-upgrade-compare-table tbody tr:hover {
    background: rgba(249, 115, 22, 0.04);
}
.suno-upgrade-compare-group td {
    background: #131315;
    color: #f97316;
    font-weight: 600;
    text-align: left !important;
    padding: 6px 12px;
    font-size: 12px;
    letter-spacing: 0.3px;
}
.suno-upgrade-compare-table td:contains(✓) {
    color: #4ade80;
}
.suno-upgrade-compare-table td:contains(—) {
    color: #555;
}

/* 2026-09-01 新增：系统功能价格表（与 .suno-upgrade-compare-table 视觉对齐） */
.suno-upgrade-pricing {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #2a2a2d;
}
.suno-upgrade-pricing-table {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid #2a2a2d;
}
.suno-upgrade-pricing-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 640px;
}
.suno-upgrade-pricing-table th,
.suno-upgrade-pricing-table td {
    padding: 10px 14px;
    text-align: center;
    border-bottom: 1px solid #1f1f22;
    color: #d4d4d8;
}
.suno-upgrade-pricing-table th {
    background: #171719;
    color: #f97316;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.4;
}
.suno-upgrade-pricing-table th.suno-upgrade-pricing-feature,
.suno-upgrade-pricing-table td:first-child {
    text-align: left;
    color: #e4e4e7;
    font-weight: 500;
}
.suno-upgrade-pricing-table th.suno-upgrade-pricing-desc,
.suno-upgrade-pricing-table td.suno-upgrade-pricing-desc {
    text-align: left;
    color: #a1a1a3;
    font-weight: 400;
    font-size: 12.5px;
}
.suno-upgrade-pricing-table td:nth-child(2),
.suno-upgrade-pricing-table td:nth-child(3) {
    font-variant-numeric: tabular-nums;
    color: #fff;
    font-weight: 600;
}
.suno-upgrade-pricing-table td:nth-child(2) {
    color: #f97316;   /* 会员价：橙色高亮 */
}
.suno-upgrade-pricing-table td:nth-child(3) {
    color: #a1a1a3;   /* 非会员价：灰色弱化 */
}
.suno-upgrade-pricing-table tbody tr:hover {
    background: rgba(249, 115, 22, 0.04);
}
.suno-upgrade-pricing-table tr.suno-upgrade-pricing-free td:nth-child(2),
.suno-upgrade-pricing-table tr.suno-upgrade-pricing-free td:nth-child(3) {
    color: #4ade80;   /* 免费行：绿色 */
    font-weight: 500;
}
.suno-upgrade-pricing-tip {
    margin-top: 12px;
    font-size: 12px;
    color: #888;
    line-height: 1.6;
    padding: 8px 12px;
    background: rgba(249, 115, 22, 0.06);
    border-left: 2px solid #f97316;
    border-radius: 4px;
}
.suno-upgrade-pricing-tip code {
    background: #1a1a1a;
    color: #f97316;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11.5px;
}

/* 响应式：平板 */
@media (max-width: 1080px) {
    .suno-upgrade-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .suno-upgrade-card {
        padding: 28px 24px 24px;
    }
}

/* 响应式：手机 */
@media (max-width: 640px) {
    .suno-upgrade-grid {
        grid-template-columns: 1fr;
    }
    .suno-upgrade-card {
        padding: 24px 16px 20px;
    }
    .suno-upgrade-title {
        font-size: 22px;
    }
    .suno-upgrade-tier-tabs {
        gap: 16px;
    }
}

/* ============================================================
   2026-08-23 新增：Suno 支付 Modal（二维码 + 倒计时 + 轮询）
   ============================================================ */
.suno-pay-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 15, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 24px;
    animation: sunoPayFadeIn 0.2s ease-out;
}
@keyframes sunoPayFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.suno-pay-card {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: var(--bg-card, #1a1a1f);
    border-radius: 16px;
    padding: 28px 28px 20px;
    color: var(--text-primary, #f5f5f7);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: sunoPaySlideUp 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes sunoPaySlideUp {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.suno-pay-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-secondary, #9b9ba3);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.15s;
}
.suno-pay-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary, #f5f5f7);
}
.suno-pay-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}
.suno-pay-plan-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary, #f5f5f7);
}
.suno-pay-channel-tabs {
    display: flex;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    padding: 4px;
    border-radius: 10px;
}
.suno-pay-channel-tab {
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: var(--text-secondary, #9b9ba3);
    border-radius: 7px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s;
}
.suno-pay-channel-tab.active {
    background: var(--accent-gradient, linear-gradient(135deg, #ff7a45 0%, #ff4d8d 100%));
    color: white;
}
.suno-pay-channel-tab:hover:not(.active) {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary, #f5f5f7);
}
.suno-pay-body {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
    align-items: start;
}
.suno-pay-qr-wrap {
    width: 200px;
    height: 200px;
    border-radius: 12px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
.suno-pay-qr-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #333;
    font-size: 13px;
}
.suno-pay-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: var(--accent, #ff7a45);
    border-radius: 50%;
    animation: sunoPaySpin 0.8s linear infinite;
}
@keyframes sunoPaySpin {
    to { transform: rotate(360deg); }
}
.suno-pay-qr-box {
    display: flex;
    align-items: center;
    justify-content: center;
}
.suno-pay-qr-box img,
.suno-pay-qr-box canvas {
    display: block;
    max-width: 100%;
    max-height: 100%;
}
.suno-pay-qr-expired {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #666;
    font-size: 13px;
}
.suno-pay-qr-expired-icon {
    font-size: 48px;
}
.suno-pay-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.suno-pay-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    padding: 4px 0;
}
.suno-pay-info-label {
    color: var(--text-secondary, #9b9ba3);
}
.suno-pay-info-value {
    color: var(--text-primary, #f5f5f7);
    font-weight: 500;
}
.suno-pay-amount {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent, #ff7a45);
}
.suno-pay-credits {
    color: #fbbf24;
    font-weight: 600;
}
.suno-pay-order-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    opacity: 0.7;
    word-break: break-all;
    text-align: right;
    max-width: 160px;
}
.suno-pay-countdown {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--accent, #ff7a45);
    font-weight: 600;
}
.suno-pay-tip {
    margin-top: 8px;
    padding: 12px;
    background: rgba(255, 122, 69, 0.08);
    border-radius: 8px;
    border-left: 3px solid var(--accent, #ff7a45);
}
.suno-pay-tip-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text-primary, #f5f5f7);
}
.suno-pay-tip-text {
    font-size: 12px;
    color: var(--text-secondary, #9b9ba3);
    line-height: 1.6;
}
.suno-pay-error {
    color: #f87171;
    font-size: 13px;
    padding: 8px 0;
    min-height: 18px;
}
.suno-pay-footer {
    margin-top: 16px;
    display: flex;
    justify-content: center;
    gap: 12px;
}
.suno-pay-btn {
    padding: 8px 24px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: transparent;
    color: var(--text-secondary, #9b9ba3);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s;
}
.suno-pay-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary, #f5f5f7);
}
.suno-pay-btn-primary {
    background: var(--accent-gradient, linear-gradient(135deg, #ff7a45 0%, #ff4d8d 100%));
    border-color: transparent;
    color: white;
}
.suno-pay-btn-primary:hover {
    opacity: 0.9;
    color: white;
}
.suno-pay-btn-mock {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.4);
    color: #60a5fa;
}
.suno-pay-btn-mock:hover:not(:disabled) {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}
.suno-pay-btn-mock:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
@media (max-width: 560px) {
    .suno-pay-body {
        grid-template-columns: 1fr;
        justify-items: center;
    }
    .suno-pay-qr-wrap {
        width: 200px;
        height: 200px;
    }
    .suno-pay-info {
        width: 100%;
    }
    .suno-pay-order-id {
        max-width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════
   2026-08-30 新增：Suno 积分充值 Modal
   与会员订阅 Modal 解耦，纯积分、不续期会员、非会员也能买
   ═══════════════════════════════════════════════════════════════ */
.suno-recharge-overlay {
    /* 2026-09-02：原 fixed 全屏背景移除；改为 right-panel 内的视图容器 */
    display: none;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    padding: 0;
    /* 2026-09-02 修复：去掉 overflow:hidden，让内容能突破到 right-panel 触发滚动 */
    position: relative;
}
.suno-recharge-card {
    position: relative;
    background: transparent;
    border: none;
    border-radius: 0;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 28px 28px;
    box-shadow: none;
    color: #fff;
    max-height: 100%;
    overflow-y: auto;
}
.suno-recharge-close {
    /* 2026-09-02：right-panel 视图下不再需要 × 按钮（点击左侧导航切换即可） */
    display: none;
    position: absolute;
    top: 14px;
    right: 18px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid #2a2a2d;
    color: #aaa;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s;
}
.suno-recharge-close:hover {
    background: rgba(239, 68, 68, 0.12);
    border-color: #f87171;
    color: #f87171;
}
.suno-recharge-title {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
}
.suno-recharge-subtitle {
    margin: 0 0 28px;
    text-align: center;
    font-size: 13px;
    color: #9ca3af;
}
.suno-recharge-subtitle strong {
    color: #fbbf24;
    font-weight: 600;
}
.suno-recharge-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}
.suno-recharge-loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px;
    color: #6b7280;
}
.suno-recharge-card-item {
    /* 单张充值档位卡片（用 .suno-recharge-card 复用类名空间会冲突于外层容器，这里加 -item 后缀） */
}
.suno-recharge-grid > .suno-recharge-card-item {
    position: relative;
    background: #18181b;
    border: 1px solid #2a2a2d;
    border-radius: 12px;
    padding: 24px 14px 18px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
}
.suno-recharge-grid > .suno-recharge-card-item:hover {
    border-color: #fbbf24;
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(251, 191, 36, 0.18);
}
.suno-recharge-grid > .suno-recharge-card-item.featured {
    border-color: #fbbf24;
    background: linear-gradient(180deg, rgba(251, 191, 36, 0.08), #18181b);
}
.suno-recharge-grid > .suno-recharge-card-item.featured::before {
    content: '🔥 推荐';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 700;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.15);
    padding: 2px 10px;
    border-radius: 100px;
}
.suno-recharge-discount-tag {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #f97316, #fbbf24);
    color: #0a0a0a;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
}
.suno-recharge-name {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #d4d4d8;
}
.suno-recharge-price {
    margin: 8px 0 4px;
    font-size: 28px;
    font-weight: 800;
    color: #fbbf24;
    letter-spacing: -1px;
}
.suno-recharge-currency {
    font-size: 16px;
    font-weight: 600;
    margin-right: 2px;
}
.suno-recharge-credits {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin: 6px 0 2px;
}
.suno-recharge-credits-unit {
    font-size: 11px;
    color: #9ca3af;
    font-weight: 400;
    margin-left: 2px;
}
.suno-recharge-bonus {
    margin-top: 4px;
    font-size: 11px;
    color: #4ade80;
    font-weight: 600;
}
.suno-recharge-rate {
    margin-top: 6px;
    font-size: 10px;
    color: #6b7280;
}
/* 2026-09-02：积分有效期提示（充值档位卡片底部） */
.suno-recharge-validity {
    margin-top: 6px;
    font-size: 11px;
    color: #fbbf24;
    font-weight: 600;
}
.suno-recharge-cta {
    margin-top: 12px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid #fbbf24;
    border-radius: 100px;
    color: #fbbf24;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    transition: all 0.15s;
}
.suno-recharge-grid > .suno-recharge-card-item:hover .suno-recharge-cta {
    background: #fbbf24;
    color: #0a0a0a;
}
.suno-recharge-tip {
    text-align: center;
    font-size: 11px;
    color: #6b7280;
    margin: 16px 0 0;
    padding-top: 16px;
    border-top: 1px solid #1f1f23;
}

@media (max-width: 860px) {
    .suno-recharge-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 560px) {
    .suno-recharge-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .suno-recharge-card {
        padding: 24px 16px 20px;
    }
}

/* ============================================================
   参考歌曲 AI 分析进度条（2026-09-08）
   - 位置：#sunoSongSummaryMeta 下方一行
   - 进度数据：前端按轮询 attempts / maxAttempts 推算（纯前端时间模拟）
   - 视觉：橙色渐变填充层 + 白色光带循环动画（即使后端慢也能让用户感知"在动"）
   ============================================================ */
.ref-analyze-progress {
    height: 4px;
    background: #1f1f22;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}
.ref-analyze-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #f97316, #ec4899);
    border-radius: 2px;
    position: relative;
    transition: width 0.4s ease;
}
/* 流动光带：用伪元素 + keyframes 做从左到右的白色高光循环 */
.ref-analyze-progress-fill::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 40%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.45) 50%,
        transparent 100%
    );
    animation: ref-progress-shine 1.5s linear infinite;
}
@keyframes ref-progress-shine {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

/* ============================================================
   歌词文字计数（2026-09-08）
   - 位置：.lyrics-toolbar 末尾（清空按钮后面）
   - 数据：JS 监听 textarea 的 input 事件 → setLyricsValue() 统一更新
   - 视觉：低饱和灰色，接近上限（>4500 字）变红提示
   ============================================================ */
.lyrics-counter {
    color: #6c6c70;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    margin-left: 4px;
    padding: 0 6px;
    align-self: center;
    user-select: none;
    transition: color 0.2s ease;
}
.lyrics-counter.warn {
    color: #ef4444;
}

/* ============================================================
   2026-09-08 新增：未登录态覆盖式拦截（页面入口处强制显示登录弹窗）

   状态机：<body> 上的两个 class 表达登录态
     - body.auth-ready        脚本已完成 auth 流程判断（CSS 兜底遮罩解除）
     - body.is-logged-in      用户已登录（解开遮罩 + 关闭 loginModal）

   视觉：未登录时主体被黑色半透明遮罩盖住，#loginModal 强制显示为唯一可见 UI
   ============================================================ */

/* 脚本还没跑（页面打开瞬间）：用 body 背景色挡住主体，避免用户看到一闪而过的主内容 */
body:not(.auth-ready)::before {
    content: '';
    position: fixed;
    inset: 0;
    background: #0e0e10;
    z-index: 9997;
}

/* auth 已就绪但未登录：黑色遮罩覆盖主体，登录框成为唯一可交互元素 */
body.auth-ready:not(.is-logged-in)::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9997;
    pointer-events: none;  /* 让上层 #loginModal 接收事件 */
}

/* 未登录时强制显示登录 modal（覆盖默认的 display:none） */
body.auth-ready:not(.is-logged-in) #loginModal {
    display: flex !important;
}

/* 登录 modal 始终在遮罩之上 */
#loginModal {
    z-index: 9999;
}

/* ========= 使用教程视图（2026-09-12 新增） =========
   iframe 嵌入独立 tutorials.html（双栏布局：左目录 + 右详情）
   容器只负责占位 + 隐藏，样式全部在 tutorials.css 内 */
#tutorialView {
    display: none;
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: #0a0a0a;
}

/* ============================================================
   2026-09-20：移动端适配（CSS-only 抽屉 + :target 视图切换）
   - 抽屉菜单：checkbox + label hack，无 JS 依赖
   - 视图切换：URL 锚点 + :has() + :target，无 JS 依赖
   - 不动 switchRightPanelView、不动 resizer 逻辑
   - 末尾追加 = 后写的同名规则胜出（覆盖旧 768px 规则）
   ============================================================ */

/* ---- 桌面默认隐藏所有新增控件 ---- */
.suno-sb-toggle,
.suno-sb-burger,
.suno-sb-close,
.suno-sb-backdrop,
.suno-view-tab {
    display: none;
}

/* ---- ≤ 768px：手机 / 平板竖屏 ---- */
@media (max-width: 768px) {
    /* 用 !important 覆盖 JS 写的 inline grid + localStorage 旧宽度 */
    .main-layout,
    .main-layout.fullscreen-right {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        height: calc(100vh - 56px - 60px);
    }
    .col-resizer { display: none !important; }

    /* 默认状态：表单可见，作品栏隐藏 */
    .main-center { display: flex; }
    .right-panel { display: none; }

    /* 抽屉 UI 显示 */
    .suno-sb-burger {
        display: inline-flex; align-items: center; justify-content: center;
        width: 36px; height: 36px; border-radius: 8px;
        background: #1a1a1a; border: 1px solid #2a2a2a;
        color: #fff; cursor: pointer; font-size: 18px;
        flex-shrink: 0;
    }
    .suno-sb-close {
        display: inline-flex; align-self: flex-end;
        width: 32px; height: 32px; align-items: center; justify-content: center;
        background: #1a1a1a; border: 1px solid #2a2a2a;
        border-radius: 8px;
        color: #fff; cursor: pointer; font-size: 18px;
        margin-bottom: 8px;
    }
    .suno-sb-backdrop {
        display: block; position: fixed; inset: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: 199;
        opacity: 0; pointer-events: none;
        transition: opacity .2s ease;
    }
    .sidebar-nav {
        display: flex !important;
        position: fixed !important;
        top: 0; left: 0; bottom: 0;
        width: 280px; max-width: 85vw;
        z-index: 200;
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.5);
    }

    /* 复选框选中 → 抽屉展开 */
    .suno-sb-toggle:checked ~ .main-layout .sidebar-nav {
        transform: translateX(0);
    }
    .suno-sb-toggle:checked ~ .main-layout .suno-sb-backdrop {
        opacity: 1; pointer-events: auto;
    }

    /* 顶栏视图切换 tab */
    .suno-view-tab {
        display: inline-flex; align-items: center;
        padding: 5px 10px; border-radius: 100px;
        background: #1a1a1a; border: 1px solid #2a2a2a;
        color: #aaa; font-size: 12px; text-decoration: none;
        cursor: pointer; white-space: nowrap;
        flex-shrink: 0;
    }
    .suno-view-tab.active,
    body:not(:has(:target)) .suno-view-tab-form {
        background: var(--accent-gradient);
        color: #fff;
        border-color: transparent;
    }
    .top-bar { padding: 0 12px; gap: 8px; }
    .logo-banner { max-height: 20px; }

    /* :target 视图切换
       注意：main-center 的 display:none 不加 !important
       —— 这样 JS 把 mainCenter.style.display 改回 '' 时能胜出，
       避免「作品 tab → 抽屉创作歌曲」的死锁 */
    body:has(#suno-view-works:target) .main-center {
        display: none;
    }
    body:has(#suno-view-works:target) .right-panel {
        display: flex !important;
    }
    body:has(#suno-view-works:target) .suno-view-tab-form {
        display: none;
    }
    body:has(#suno-view-form:target) .suno-view-tab-works {
        display: none;
    }
    body:has(#suno-view-form:target) .suno-view-tab-form {
        background: var(--accent-gradient);
        color: #fff;
        border-color: transparent;
    }

    /* JS 全屏视图兼容（switchRightPanelView 隐藏 main-center 时显示 right-panel）
       —— 加 !important 防止被 inline style 或 :target 默认规则覆盖 */
    body:has(.main-center[style*="display: none"]) .right-panel {
        display: flex !important;
    }

    /* 表单触摸友好 */
    .left-panel { padding: 14px; }
    .left-panel input[type="text"],
    .left-panel textarea,
    .left-panel select {
        min-height: 40px;
        font-size: 14px;
    }

    /* 模态框全宽 */
    .cover-card,
    .suno-upgrade-card,
    .suno-pay-card,
    .login-modal-card {
        width: calc(100vw - 24px) !important;
        max-width: none !important;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
    }
}

/* ---- ≤ 480px：小屏手机 ---- */
@media (max-width: 480px) {
    /* 解除 player-bar 560px 最小宽度（700px 规则没覆盖，是个真 bug） */
    .player-bar {
        min-width: 0 !important;
        padding: 0 8px; gap: 6px; height: 56px;
    }
    .player-bar > .player-info {
        min-width: 60px; max-width: 100px;
    }
    .player-progress { min-width: 50px; }

    /* 顶栏进一步压缩 */
    .top-bar .vip-badge,
    .top-bar .vip-quota-badge,
    .top-bar .credits-validity-badge { display: none; }
    .lang-switch button {
        padding: 4px 8px;
        font-size: 11px;
    }
    .top-bar { padding: 0 8px; }
    .suno-view-tab { padding: 4px 8px; font-size: 11px; }
}