:root {
  --accent: #16b8d4;
  --accent-dark: #0d9db8;
  --bg: #ffffff;
  --sidebar: #f7f8fa;
  --border: #e8eaee;
  --text: #1a1d21;
  --text2: #8a9099;
  --card: #ffffff;
  --shadow: 0 2px 16px rgba(0,0,0,.06);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; color: var(--text); background: var(--bg); }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; outline: none; color: inherit; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #d5d8dd; border-radius: 3px; }

/* ============ layout ============ */
.layout { display: flex; height: 100vh; }
.rail { width: 64px; background: #fff; border-right: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; padding: 14px 0; gap: 6px; flex-shrink: 0; }
.rail .logo { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, #35d0e8, #1688d4); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; margin-bottom: 14px; }
.rail-item { width: 48px; padding: 8px 0 6px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; color: var(--text2); }
.rail-item svg { width: 21px; height: 21px; }
.rail-item.active { background: #eef7fa; color: var(--accent); }
.rail-item:hover { background: #f2f4f7; }
.rail .spacer { flex: 1; }
.rail .credits-chip { font-size: 11px; color: var(--text2); text-align: center; line-height: 1.5; }
.rail .credits-chip b { color: var(--text); font-size: 13px; display: block; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg,#a8c6fa,#7c9ef0); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; }

/* ============ conversation sidebar ============ */
.conv-side { width: 260px; background: var(--sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; }
.conv-head { padding: 16px 16px 10px; font-size: 16px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.new-conv { margin: 4px 12px 10px; padding: 10px; border-radius: 12px; background: #fff; border: 1px solid var(--border); display: flex; align-items: center; gap: 8px; font-size: 14px; box-shadow: var(--shadow); }
.new-conv:hover { border-color: var(--accent); color: var(--accent); }
.conv-list { flex: 1; overflow-y: auto; padding: 0 8px 12px; }
.conv-label { font-size: 12px; color: var(--text2); padding: 8px 10px 4px; }
.conv-item { padding: 9px 10px; border-radius: 10px; font-size: 13.5px; cursor: pointer; display: flex; align-items: center; gap: 8px; color: #333; position: relative; }
.conv-item:hover { background: #eceef2; }
.conv-item.active { background: #e4f5f9; color: var(--accent-dark); }
.conv-item .t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-item .del { display: none; color: #b6bac2; font-size: 15px; padding: 2px 5px; }
.conv-item:hover .del { display: block; }
.conv-item .del:hover { color: #e2534f; }
.conv-thumb { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: #dde0e5; }

/* ============ main ============ */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }
.topbar { height: 52px; display: flex; align-items: center; justify-content: flex-end; padding: 0 20px; gap: 10px; }
.asset-btn { padding: 7px 14px; border: 1px solid var(--border); border-radius: 10px; font-size: 13px; background: #fff; }
.asset-btn:hover { border-color: var(--accent); color: var(--accent); }
.chat { flex: 1; overflow-y: auto; padding: 24px 40px 20px; }
.chat-inner { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 26px; }
.empty-state { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 27px; font-weight: 600; color: #2a2e33; letter-spacing: 1px; }

/* messages */
.msg-user { display: flex; gap: 12px; }
.msg-user .u-ava { width: 38px; height: 38px; border-radius: 10px; background: #eef0f3; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; overflow: hidden; }
.msg-user .u-ava img { width: 100%; height: 100%; object-fit: cover; }
.msg-body { flex: 1; min-width: 0; }
.msg-prompt { font-size: 14.5px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
.msg-opt { margin-top: 6px; font-size: 12.5px; border: 1px solid #e5e8ee; border-radius: 8px; background: #fafbfd; }
.msg-opt summary { padding: 6px 10px; cursor: pointer; color: var(--text2); user-select: none; }
.msg-opt .opt-body { padding: 8px 10px; border-top: 1px solid #e5e8ee; white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow-y: auto; line-height: 1.6; color: #333; }
/* admin 中台任务表：优化稿展开 */
.opt-detail { display: inline-block; margin-left: 6px; font-size: 11.5px; }
.opt-detail summary { color: #6a53d8; cursor: pointer; user-select: none; white-space: nowrap; }
.opt-detail[open] { display: block; margin: 4px 0 0; }
.opt-detail .opt-text { white-space: pre-wrap; word-break: break-word; max-width: 520px; max-height: 300px; overflow-y: auto; background: #f7f6fd; border: 1px solid #e3e0f5; border-radius: 8px; padding: 8px 10px; font-size: 12px; line-height: 1.6; margin: 4px 0; }
.msg-tags { margin-top: 6px; font-size: 12px; color: var(--text2); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.msg-tags .tag { background: #f2f4f7; padding: 2px 8px; border-radius: 6px; }
.msg-refs { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.msg-refs img, .msg-refs video { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; border: 1px solid var(--border); }
.msg-refs .ref-audio { width: 64px; height: 64px; border-radius: 10px; background: #eef0f3; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.msg-result { margin-top: 12px; }
.msg-result img, .msg-result video { max-width: 460px; max-height: 420px; border-radius: 14px; display: block; box-shadow: var(--shadow); }
.msg-actions { margin-top: 10px; display: flex; gap: 10px; }
.msg-actions a, .msg-actions button { font-size: 12.5px; color: #555; background: #f4f5f7; padding: 6px 14px; border-radius: 9px; text-decoration: none; }
.msg-actions a:hover, .msg-actions button:hover { background: #e9ebef; }
.gen-card { width: 460px; max-width: 100%; height: 240px; border-radius: 14px; background: linear-gradient(120deg, #e8f6fb 25%, #f4fafc 50%, #e8f6fb 75%); background-size: 200% 100%; animation: shimmer 1.6s infinite; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #6b7280; font-size: 13px; }
@keyframes shimmer { 0% {background-position: 200% 0;} 100% {background-position: -200% 0;} }
.gen-card .spin { width: 26px; height: 26px; border: 3px solid #cfe8ef; border-top-color: var(--accent); border-radius: 50%; animation: rot 0.9s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }
.gen-card .st { text-align: center; padding: 0 20px; line-height: 1.6; }
.gen-card .st-sub { font-size: 12px; color: #98a2ad; }
.gen-card .cancel { color: var(--accent); font-size: 12.5px; }
.err-card { padding: 14px 18px; border-radius: 12px; background: #fef2f2; color: #b4392f; font-size: 13px; max-width: 460px; }

/* ============ composer ============ */
.composer-wrap { padding: 8px 40px 22px; }
.composer { max-width: 860px; margin: 0 auto; border: 1px solid var(--border); border-radius: 20px; background: #fff; box-shadow: var(--shadow); padding: 14px 16px 10px; }
.composer:focus-within { border-color: #c3d5e8; }
.comp-refs { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.comp-ref { position: relative; width: 56px; height: 56px; }
.comp-ref img, .comp-ref video { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; border: 1px solid var(--border); }
.comp-ref .ra { width: 56px; height: 56px; border-radius: 10px; background: #eef0f3; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.comp-ref .x { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,.65); color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.comp-ref .ts-input { position: absolute; left: 0; right: 0; bottom: -22px; width: 56px; height: 20px; border: 1px solid var(--border); border-radius: 6px; font-size: 11px; text-align: center; background: var(--bg, #fff); color: var(--text, #111); padding: 0 2px; }
.comp-ref .ts-input:focus { outline: none; border-color: #4f7cff; }
.comp-ref .ts-input::-webkit-outer-spin-button, .comp-ref .ts-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.comp-ref .ts-input { -moz-appearance: textfield; appearance: textfield; }
.comp-ref:has(.ts-input) { margin-bottom: 24px; }
/* LTX 首帧固定徽标 / AI 自动定时徽标（与 ts-input 同位置） */
.comp-ref .ts-fixed, .comp-ref .ts-auto-tag { position: absolute; left: 0; bottom: -22px; height: 20px; line-height: 20px; font-size: 11px; padding: 0 6px; border-radius: 6px; white-space: nowrap; }
.comp-ref .ts-fixed { background: #eef2ff; color: #4f7cff; border: 1px solid #d7e0ff; }
.comp-ref .ts-auto-tag { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.comp-ref:has(.ts-fixed), .comp-ref:has(.ts-auto-tag) { margin-bottom: 24px; }
/* 分镜时机模式切换条（手动秒数 / AI 自动分析） */
.ts-auto-bar { font-size: 12px; color: var(--text, #111); margin: 2px 0 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ts-auto-bar.hidden { display: none; }
.ts-mode-btn { border: 1px solid var(--border, #ddd); background: transparent; color: inherit; border-radius: 6px; padding: 2px 8px; font-size: 12px; cursor: pointer; }
.ts-mode-btn.on { border-color: #4f7cff; color: #4f7cff; background: #eef2ff; }
.ts-mode-hint { color: #9aa0a8; }
.comp-input-row { display: flex; gap: 12px; align-items: flex-start; }
.upload-tile { width: 52px; height: 52px; border-radius: 12px; background: #f3f4f6; border: 1px dashed #d8dbe0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #9aa0a8; font-size: 20px; flex-shrink: 0; }
.upload-tile span { font-size: 9px; margin-top: 1px; }
.upload-tile:hover { border-color: var(--accent); color: var(--accent); }
.composer textarea { flex: 1; border: none; resize: none; font-size: 14.5px; line-height: 1.6; min-height: 52px; max-height: 160px; background: transparent; }
.comp-toolbar { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; }
.comp-tools { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; min-width: 0; align-items: center; }
.tool-select { position: relative; }
.tool-select > button { display: flex; align-items: center; gap: 5px; font-size: 13px; color: #333; background: #f4f5f7; padding: 7px 12px; border-radius: 10px; }
.tool-select > button:hover { background: #e9ebef; }
.tool-select > button .caret { font-size: 9px; color: #999; }
.tool-select.primary > button { background: #e8f7fb; color: var(--accent-dark); font-weight: 500; }
.dropdown { position: absolute; bottom: calc(100% + 6px); left: 0; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.12); padding: 6px; min-width: 180px; z-index: 50; display: none; }
.dropdown.open { display: block; }
.dropdown.scroll { max-height: 52vh; overflow-y: auto; min-width: 300px; }
.dropdown .opt-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; flex: 0 0 44px; }
.dropdown .opt:has(.opt-thumb) { justify-content: flex-start; }
/* 悬停放大预览浮层（风格缩略图等）：合理放大，不撑满视口 */
#hover-preview { position: fixed; z-index: 200; display: none; pointer-events: none; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 36px rgba(0,0,0,.2); padding: 6px; max-width: 400px; max-height: 52vh; }
#hover-preview img { display: block; max-width: 388px; max-height: calc(52vh - 12px); border-radius: 8px; }
.dropdown .opt { padding: 9px 12px; border-radius: 9px; font-size: 13px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.dropdown .opt:hover { background: #f2f7fa; }
.dropdown .opt.sel { color: var(--accent-dark); font-weight: 500; }
.dropdown .opt .d { font-size: 11.5px; color: var(--text2); margin-top: 2px; }
.comp-right { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.wf-hint { font-size: 11.5px; color: var(--text2); }
.cost-chip { font-size: 12.5px; color: var(--text2); }
.cost-chip b { color: var(--text); }
.send-btn { width: 40px; height: 40px; border-radius: 50%; background: #1a1d21; color: #fff; font-size: 17px; display: flex; align-items: center; justify-content: center; }
.send-btn:disabled { background: #d6d9de; cursor: not-allowed; }
.send-btn:not(:disabled):hover { background: #000; }

/* ============ assets view ============ */
.assets-view { flex: 1; overflow-y: auto; padding: 24px 40px; display: none; }
.assets-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.asset-card { border-radius: 14px; overflow: hidden; border: 1px solid var(--border); background: #fff; }
.asset-card img, .asset-card video { width: 100%; height: 170px; object-fit: cover; display: block; background: #f0f1f4; }
.asset-card .info { padding: 8px 12px; font-size: 12px; color: var(--text2); }
.asset-card .info .p { color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.view-title { max-width: 1100px; margin: 0 auto 18px; font-size: 19px; font-weight: 600; }

/* ============ login ============ */
.login-wrap { height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #eef9fc 0%, #f7f8fa 60%); }
.login-card { width: 380px; background: #fff; border-radius: 22px; box-shadow: 0 12px 48px rgba(20,60,90,.10); padding: 38px 36px; }
.login-card .logo-lg { width: 52px; height: 52px; border-radius: 15px; background: linear-gradient(135deg, #35d0e8, #1688d4); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 26px; margin-bottom: 16px; }
.login-card h1 { font-size: 21px; margin-bottom: 4px; }
.login-card .sub { font-size: 13px; color: var(--text2); margin-bottom: 24px; }
.login-tabs { display: flex; gap: 18px; margin-bottom: 18px; }
.login-tabs div { font-size: 14.5px; color: var(--text2); cursor: pointer; padding-bottom: 6px; border-bottom: 2px solid transparent; }
.login-tabs div.active { color: var(--text); font-weight: 600; border-color: var(--accent); }
.login-card input { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; font-size: 14px; margin-bottom: 12px; background: #fafbfc; }
.login-card input:focus { border-color: var(--accent); background: #fff; }
.login-card .submit { width: 100%; padding: 12px; border-radius: 12px; background: #1a1d21; color: #fff; font-size: 15px; }
.login-card .submit:hover { background: #000; }
.login-err { color: #d43d33; font-size: 12.5px; min-height: 18px; margin-bottom: 8px; }
/* 登录页右上角主题切换（深浅色） */
.login-theme-btn { position: fixed; top: 18px; right: 18px; z-index: 50; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,.85); color: #59606a; font-size: 13px; backdrop-filter: blur(8px); }
.login-theme-btn:hover { border-color: var(--accent); color: var(--accent-dark); }

/* ============ admin ============ */
.admin-layout { display: flex; height: 100vh; }
.admin-side { width: 200px; background: #14181d; color: #c8cdd5; display: flex; flex-direction: column; padding: 18px 10px; flex-shrink: 0; }
.admin-side .brand { color: #fff; font-size: 16px; font-weight: 600; padding: 6px 12px 20px; display: flex; align-items: center; gap: 8px; }
.admin-nav { padding: 10px 12px; border-radius: 10px; font-size: 13.5px; cursor: pointer; margin-bottom: 2px; }
.admin-nav:hover { background: #1f262e; }
.admin-nav.active { background: #243040; color: #fff; }
.admin-main { flex: 1; overflow-y: auto; padding: 26px 32px; background: #f6f7f9; }
.admin-main h2 { font-size: 18px; margin-bottom: 16px; }
.stat-cards { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.stat-card { background: #fff; border-radius: 14px; padding: 16px 22px; min-width: 150px; box-shadow: var(--shadow); }
.stat-card .v { font-size: 24px; font-weight: 700; }
.stat-card .k { font-size: 12.5px; color: var(--text2); margin-top: 2px; }
.panel { background: #fff; border-radius: 14px; box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 20px; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; color: var(--text2); font-weight: 500; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl td { padding: 9px 10px; border-bottom: 1px solid #f2f3f5; vertical-align: middle; }
.tbl tr:hover td { background: #fafbfc; }
.btn-sm { padding: 5px 11px; border-radius: 8px; font-size: 12px; background: #f0f2f5; margin-right: 5px; }
.btn-sm:hover { background: #e4e7ec; }
.btn-sm.accent { background: #e3f6fb; color: var(--accent-dark); }
.btn-sm.danger { background: #fdeceb; color: #cf4238; }
.badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11.5px; }
.badge.running { background: #fff5e0; color: #b57e10; }
.badge.optimizing { background: #ece9fd; color: #6a53d8; }
.badge.success { background: #e5f8ee; color: #1d9e5f; }
.badge.failed { background: #fdeceb; color: #cf4238; }
.badge.canceled { background: #eef0f3; color: #777; }
.badge.admin { background: #ece9fd; color: #6a53d8; }
.badge.user { background: #e9f3fe; color: #2f76c4; }
.badge.realism { background: #fdeee3; color: #c2600c; }
.form-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.form-row input, .form-row select { padding: 8px 11px; border: 1px solid var(--border); border-radius: 9px; font-size: 13px; background: #fafbfc; }
.filter-row { display: flex; gap: 10px; margin-bottom: 14px; align-items: center; flex-wrap: wrap; }
.filter-row select { padding: 7px 10px; border: 1px solid var(--border); border-radius: 9px; font-size: 13px; }
.conv-detail { padding: 10px 14px; border-left: 3px solid var(--accent); background: #fafcfd; border-radius: 8px; margin-bottom: 10px; font-size: 13px; }
.conv-detail .meta { color: var(--text2); font-size: 12px; margin-bottom: 5px; }
.conv-detail img, .conv-detail video { max-width: 220px; border-radius: 10px; margin-top: 8px; }
.toast { position: fixed; top: 22px; left: 50%; transform: translateX(-50%); background: #1a1d21; color: #fff; padding: 10px 22px; border-radius: 12px; font-size: 13.5px; z-index: 999; box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.hidden { display: none !important; }

/* user dropdown menu */
.user-menu { position: fixed; left: 72px; bottom: 18px; width: 210px; background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,.14); padding: 8px; z-index: 200; display: none; }
.user-menu.open { display: block; }
.um-head { display: flex; gap: 10px; align-items: center; padding: 8px 10px 12px; border-bottom: 1px solid #f0f1f4; margin-bottom: 6px; }
.um-name { font-size: 14px; font-weight: 600; }
.um-role { font-size: 11.5px; color: var(--text2); margin-top: 1px; }
.um-item { padding: 9px 12px; border-radius: 10px; font-size: 13.5px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.um-item:hover { background: #f2f4f7; }
.um-item.danger { color: #d0433a; }
.um-item.danger:hover { background: #fdf0ef; }
.um-credits { cursor: default; color: #555; }
.um-credits b { color: var(--text); }
.um-credits:hover { background: none; }

/* asset card ops */
.asset-media { position: relative; }
.asset-ops { position: absolute; top: 8px; right: 8px; display: none; gap: 6px; }
.asset-card:hover .asset-ops { display: flex; }
.asset-op { width: 32px; height: 32px; border-radius: 10px; background: rgba(20,24,28,.72); color: #fff; font-size: 15px; display: flex; align-items: center; justify-content: center; text-decoration: none; backdrop-filter: blur(4px); }
.asset-op:hover { background: rgba(20,24,28,.9); }
.asset-op.del:hover { background: #d0433a; }

/* ref limit hint */
.ref-hint-line { font-size: 11.5px; color: var(--text2); margin-top: 8px; padding: 0 4px; }
.ref-hint-line.warn { color: #d08a10; }

/* drag & drop */
.composer.dragover { border-color: var(--accent); background: #f0fbfe; box-shadow: 0 0 0 3px rgba(22,184,212,.15); }
.composer.dragover .upload-tile { border-color: var(--accent); color: var(--accent); }

/* queue busy banner */
.queue-banner { max-width: 860px; margin: 0 auto 8px; font-size: 12.5px; color: #9a6b0a; background: #fff7e2; border: 1px solid #f0e0b0; padding: 8px 16px; border-radius: 12px; display: flex; align-items: center; gap: 8px; }

/* @ reference picker & chips */
.comp-input-row { position: relative; }
.at-btn { width: 34px; height: 34px; border-radius: 10px; background: #f4f5f7; font-size: 15px; font-weight: 600; color: #555; align-self: center; }
.at-btn:hover { background: #e8f7fb; color: var(--accent-dark); }
.at-picker { position: absolute; bottom: calc(100% + 8px); left: 64px; min-width: 240px; max-width: 320px; max-height: 280px; overflow-y: auto; background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,.14); padding: 8px; z-index: 100; }
.at-title { font-size: 12px; color: var(--text2); padding: 6px 10px 4px; }
.at-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; cursor: pointer; }
.at-item:hover { background: #f2f7fa; }
.at-item img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; }
.at-ico { width: 34px; height: 34px; border-radius: 8px; background: #eef0f3; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.at-label { font-size: 13.5px; font-weight: 500; }
.at-name { font-size: 11.5px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.at-empty { padding: 14px 12px; font-size: 12.5px; color: var(--text2); }
.at-chip { display: inline-flex; align-items: center; gap: 4px; background: #e8f5fa; color: var(--accent-dark); border-radius: 8px; padding: 1px 8px 1px 2px; font-size: 12.5px; vertical-align: middle; margin: 0 1px; }
.at-chip img { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; }
.at-chip .at-ico { width: 22px; height: 22px; font-size: 12px; border-radius: 6px; }

/* duration slider popover (即梦风格, 紧凑版) */
.dur-popover { position: fixed; width: 300px; background: #fff; border: 1px solid #e8eaee; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,.12); padding: 16px 18px 12px; z-index: 150; }
.dur-header { font-size: 13px; color: #555; margin-bottom: 14px; }
.dur-slider-wrap { position: relative; padding: 0 2px 4px; }
.dur-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 3px; background: linear-gradient(to right, #2a2d33 0%, #2a2d33 var(--dur-fill, 16%), #e9ebef var(--dur-fill, 16%), #e9ebef 100%); outline: none; --dur-fill: 16%; }
.dur-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: none; box-shadow: 0 1px 4px rgba(0,0,0,.2), 0 0 0 1px rgba(0,0,0,.05); cursor: grab; }
.dur-slider::-webkit-slider-thumb:active { cursor: grabbing; }
.dur-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: none; box-shadow: 0 1px 4px rgba(0,0,0,.2); cursor: grab; }
.dur-ticks { display: flex; justify-content: space-between; margin-top: 8px; padding: 0 3px; }
.dur-tick-label { font-size: 11px; color: #aaa; text-align: center; min-width: 16px; position: relative; }
.dur-tick-label::before { content: ''; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); width: 1px; height: 4px; background: #d5d8dc; }
.dur-tick-label:first-child::before { left: 1px; transform: none; }
.dur-tick-label:last-child::before { left: auto; right: 1px; transform: none; }
.dur-display { position: absolute; top: 12px; right: 16px; display: flex; align-items: baseline; gap: 2px; background: #f2f3f5; padding: 4px 12px; border-radius: 10px; }
.dur-num { font-size: 17px; font-weight: 600; color: #1a1d21; }
.dur-unit { font-size: 12px; color: #999; margin-left: 1px; }

/* ---- music mode (MiniMax Music 3) ---- */
.lyrics-box { margin-top: 10px; position: relative; }
.lyrics-box textarea { width: 100%; border: 1px solid #e5e8ee; border-radius: 12px; padding: 9px 12px; font-size: 13px; line-height: 1.5; resize: vertical; min-height: 52px; max-height: 200px; font-family: inherit; background: #fafbfd; outline: none; }
.lyrics-box textarea:focus { border-color: var(--accent, #1070ff); background: #fff; }
.lyrics-at-picker { position: absolute; bottom: calc(100% + 8px); left: 0; min-width: 240px; max-width: 320px; max-height: 280px; overflow-y: auto; background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,.14); padding: 8px; z-index: 100; }
.msg-lyrics { margin-top: 6px; font-size: 12.5px; border: 1px solid #e5e8ee; border-radius: 8px; background: #fafbfd; }
.msg-lyrics summary { padding: 6px 10px; cursor: pointer; color: var(--text2); user-select: none; }
.msg-lyrics .lyrics-body { padding: 8px 10px; border-top: 1px solid #e5e8ee; white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow-y: auto; line-height: 1.7; color: #333; font-family: inherit; margin: 0; }
.constraints-box textarea { min-height: 40px; background: #f6f9ff; }
.constraints-box textarea:focus { background: #fff; }
.msg-constraints summary { color: #8a6d1a; }
.audio-card { display: flex; align-items: center; gap: 12px; background: #fafbfd; border: 1px solid #e5e8ee; border-radius: 14px; padding: 12px 14px; margin: 4px 0; max-width: 560px; }
.audio-card .audio-ico { font-size: 22px; flex-shrink: 0; }
.audio-card audio { width: 100%; height: 36px; }
.asset-media .audio-card { margin: 0; width: calc(100% - 28px); }

/* ---------------- 修改密码弹窗 ---------------- */
.modal-mask { position: fixed; inset: 0; background: rgba(20, 24, 33, .45); z-index: 1000; display: flex; align-items: center; justify-content: center; }
.modal-mask.hidden { display: none; }
.modal-card { background: #fff; border-radius: 14px; padding: 22px 24px 18px; width: 320px; box-shadow: 0 12px 40px rgba(0, 0, 0, .18); display: flex; flex-direction: column; gap: 10px; }
.modal-title { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.modal-input { border: 1px solid #dcdfe5; border-radius: 10px; padding: 9px 12px; font-size: 14px; outline: none; width: 100%; box-sizing: border-box; }
.modal-input:focus { border-color: #4a6cf7; }
.modal-err { color: #d0433a; font-size: 12.5px; min-height: 16px; }
.modal-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.modal-btn { border: none; border-radius: 10px; padding: 8px 16px; font-size: 13.5px; cursor: pointer; }
.modal-btn.ghost { background: #f2f4f7; color: #333; }
.modal-btn.primary { background: #4a6cf7; color: #fff; }
.modal-btn.primary:disabled { opacity: .55; cursor: default; }

/* ================= 深色模式（2026-09-14）：html[data-theme="dark"] 覆盖，只改配色不动布局 ================= */
:root { --node-bg: #ffffff; }
html[data-theme="dark"] {
  --bg: #17191d;
  --sidebar: #1b1e23;
  --border: #2c3138;
  --text: #e8eaee;
  --text2: #9aa2ad;
  --card: #1e2126;
  --shadow: 0 2px 16px rgba(0,0,0,.4);
  --err-muted-bg: #24282f;
  --err-muted-text: #8a9099;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a3f46; }
/* 主题切换按钮图标（月亮=切换到深色，太阳=切换到浅色） */
.ti-sun { display: none; }
[data-theme-toggle].on-dark .ti-sun { display: inline-flex; }
[data-theme-toggle].on-dark .ti-moon { display: none; }
[data-theme-toggle] .ti-moon, [data-theme-toggle] .ti-sun { align-items: center; justify-content: center; }

html[data-theme="dark"] .rail { background: #1a1d21; }
html[data-theme="dark"] .rail-item.active { background: rgba(22,184,212,.12); }
html[data-theme="dark"] .rail-item:hover { background: #24282f; }
html[data-theme="dark"] .conv-item { color: #d5d9e0; }
html[data-theme="dark"] .conv-item:hover { background: #24282f; }
html[data-theme="dark"] .conv-item.active { background: rgba(22,184,212,.14); color: #2bc8e4; }
html[data-theme="dark"] .conv-item .del { color: #6b7280; }
html[data-theme="dark"] .conv-thumb { background: #2a2f37; }
html[data-theme="dark"] .new-conv { background: #1e2126; }
html[data-theme="dark"] .empty-state { color: #cfd4db; }
html[data-theme="dark"] .asset-btn { background: #1e2126; }
html[data-theme="dark"] .msg-user .u-ava { background: #262b33; }
html[data-theme="dark"] .msg-opt { border-color: #2c3138; background: #1d2126; }
html[data-theme="dark"] .msg-opt .opt-body { border-top-color: #2c3138; color: #d5d9e0; }
html[data-theme="dark"] .opt-detail .opt-text { background: #1d1b2b; border-color: #36315a; color: #cfc9ea; }
html[data-theme="dark"] .msg-tags .tag { background: #24282f; }
html[data-theme="dark"] .msg-refs .ref-audio { background: #262b33; }
html[data-theme="dark"] .msg-actions a, html[data-theme="dark"] .msg-actions button { color: #c5cad2; background: #24282f; }
html[data-theme="dark"] .msg-actions a:hover, html[data-theme="dark"] .msg-actions button:hover { background: #2c313a; }
html[data-theme="dark"] .gen-card { background: linear-gradient(120deg, #1b2830 25%, #212b31 50%, #1b2830 75%); background-size: 200% 100%; color: #9aa2ad; }
html[data-theme="dark"] .gen-card .spin { border-color: rgba(22,184,212,.25); }
html[data-theme="dark"] .gen-card .st-sub { color: #7d858f; }
html[data-theme="dark"] .err-card { background: rgba(180,57,47,.16); color: #e89890; }
html[data-theme="dark"] .composer { background: #1e2126; }
html[data-theme="dark"] .composer:focus-within { border-color: #33505c; }
html[data-theme="dark"] .composer.dragover { background: rgba(22,184,212,.07); }
html[data-theme="dark"] .comp-ref .ra { background: #262b33; }
html[data-theme="dark"] .upload-tile { background: #24282f; border-color: #3a3f46; color: #8a9099; }
html[data-theme="dark"] .tool-select > button { color: #d5d9e0; background: #24282f; }
html[data-theme="dark"] .tool-select > button:hover { background: #2c313a; }
html[data-theme="dark"] .tool-select > button .caret { color: #7d858f; }
html[data-theme="dark"] .tool-select.primary > button { background: rgba(22,184,212,.12); color: #2bc8e4; }
html[data-theme="dark"] .dropdown { background: #1e2126; box-shadow: 0 8px 30px rgba(0,0,0,.5); }
html[data-theme="dark"] .dropdown .opt:hover { background: rgba(22,184,212,.08); }
html[data-theme="dark"] #hover-preview { background: #1e2126; box-shadow: 0 10px 36px rgba(0,0,0,.55); }
html[data-theme="dark"] .send-btn { background: #e8eaee; color: #17191d; }
html[data-theme="dark"] .send-btn:not(:disabled):hover { background: #ffffff; }
html[data-theme="dark"] .send-btn:disabled { background: #3a3f46; }
html[data-theme="dark"] .asset-card { background: #1e2126; }
html[data-theme="dark"] .asset-card img, html[data-theme="dark"] .asset-card video { background: #121418; }
html[data-theme="dark"] .asset-card .info .p { color: #d5d9e0; }
/* 登录页 */
html[data-theme="dark"] .login-wrap { background: linear-gradient(135deg, #101418 0%, #17191d 60%); }
html[data-theme="dark"] .login-card { background: #1e2126; box-shadow: 0 12px 48px rgba(0,0,0,.45); }
html[data-theme="dark"] .login-card input { background: #21252b; border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .login-card input:focus { background: #1e2126; border-color: var(--accent); }
html[data-theme="dark"] .login-card .submit { background: #e8eaee; color: #17191d; }
html[data-theme="dark"] .login-card .submit:hover { background: #ffffff; }
html[data-theme="dark"] .login-theme-btn { background: #24282f; color: #c5cad2; border-color: var(--border); }
html[data-theme="dark"] .login-theme-btn:hover { border-color: var(--accent); color: #2bc8e4; }
/* 管理后台（侧边栏本身已是深色，只翻主区域） */
html[data-theme="dark"] .admin-main { background: #14161a; }
html[data-theme="dark"] .stat-card, html[data-theme="dark"] .panel { background: #1e2126; }
html[data-theme="dark"] .tbl td { border-bottom-color: #262b32; }
html[data-theme="dark"] .tbl tr:hover td { background: #1d2126; }
html[data-theme="dark"] .btn-sm { background: #262b32; }
html[data-theme="dark"] .btn-sm:hover { background: #2e333b; }
html[data-theme="dark"] .btn-sm.accent { background: rgba(22,184,212,.12); }
html[data-theme="dark"] .form-row input, html[data-theme="dark"] .form-row select,
html[data-theme="dark"] .filter-row select { background: #17191d; color: var(--text); }
html[data-theme="dark"] .conv-detail { background: #1a1f24; }
html[data-theme="dark"] .toast { background: #e8eaee; color: #17191d; }
/* 用户菜单 / 弹层 */
html[data-theme="dark"] .user-menu { background: #1e2126; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
html[data-theme="dark"] .um-head { border-bottom-color: #262b32; }
html[data-theme="dark"] .um-item:hover { background: #24282f; }
html[data-theme="dark"] .um-item.danger:hover { background: rgba(208,67,58,.12); }
html[data-theme="dark"] .um-credits { color: #aab1ba; }
/* 提示条 / 选择器 */
html[data-theme="dark"] .queue-banner { color: #d8a94e; background: #26200f; border-color: #4d3f1c; }
html[data-theme="dark"] .at-btn { background: #24282f; color: #c5cad2; }
html[data-theme="dark"] .at-btn:hover { background: rgba(22,184,212,.12); }
html[data-theme="dark"] .at-picker, html[data-theme="dark"] .lyrics-at-picker { background: #1e2126; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
html[data-theme="dark"] .at-item:hover { background: rgba(22,184,212,.08); }
html[data-theme="dark"] .at-ico { background: #262b33; }
html[data-theme="dark"] .at-chip { background: rgba(22,184,212,.12); }
/* 时长滑块 */
html[data-theme="dark"] .dur-popover { background: #1e2126; border-color: #2c3138; box-shadow: 0 8px 32px rgba(0,0,0,.5); }
html[data-theme="dark"] .dur-header { color: #c5cad2; }
html[data-theme="dark"] .dur-slider { background: linear-gradient(to right, #16b8d4 0%, #16b8d4 var(--dur-fill, 16%), #2c313a var(--dur-fill, 16%), #2c313a 100%); }
html[data-theme="dark"] .dur-tick-label { color: #7d858f; }
html[data-theme="dark"] .dur-tick-label::before { background: #3a3f46; }
html[data-theme="dark"] .dur-display { background: #24282f; }
html[data-theme="dark"] .dur-num { color: #e8eaee; }
html[data-theme="dark"] .dur-unit { color: #8a9099; }
/* 音乐模式 */
html[data-theme="dark"] .lyrics-box textarea { border-color: #2c3138; background: #17191d; color: var(--text); }
html[data-theme="dark"] .lyrics-box textarea:focus { background: #1e2126; }
html[data-theme="dark"] .msg-lyrics { border-color: #2c3138; background: #17191d; }
html[data-theme="dark"] .msg-lyrics .lyrics-body { border-top-color: #2c3138; color: #d5d9e0; }
html[data-theme="dark"] .constraints-box textarea { background: #161d26; }
html[data-theme="dark"] .constraints-box textarea:focus { background: #1e2126; }
html[data-theme="dark"] .audio-card { background: #17191d; border-color: #2c3138; }
/* 修改密码弹窗 */
html[data-theme="dark"] .modal-mask { background: rgba(0,0,0,.6); }
html[data-theme="dark"] .modal-card { background: #1e2126; }
html[data-theme="dark"] .modal-input { background: #17191d; border-color: #2c3138; color: var(--text); }
html[data-theme="dark"] .modal-btn.ghost { background: #24282f; color: #d5d9e0; }