:root {
  --bg: #0e1116;
  --bg-soft: #151a22;
  --panel: #171d26;
  --panel-2: #1e2632;
  --line: #2a3444;
  --text: #e6ebf2;
  --muted: #8f9cb0;
  --accent: #4c8dff;
  --accent-2: #22c55e;
  --warn: #f59e0b;
  --danger: #ef4444;
  --radius: 12px;

  /* 字体：正文 / 标题 / 编码数字 */
  --font-sans: 'Inter', 'Noto Sans SC', 'Microsoft YaHei', 'PingFang SC', Arial, sans-serif;
  --font-serif: Georgia, 'Songti SC', 'Source Han Serif SC', 'Noto Serif SC', 'SimSun', serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Cascadia Mono', 'Noto Sans SC', monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.6 var(--font-sans);
  font-feature-settings: 'tnum' 0;
}

/* 标题走衬线，正文走无衬线，数字与编码走等宽 */
h1, h2, .panel-title, .brand h1 { font-family: var(--font-serif); }
code, kbd, pre, .preview, input[type="number"], .size-tag, .meta code, .if-v code { font-family: var(--font-mono); }
input[type="number"], .size-tag { font-variant-numeric: tabular-nums; }

code { background: #0b0e13; padding: 1px 5px; border-radius: 4px; font-size: 12px; color: #9ecbff; }

/* 表单控件默认不继承字体，统一到这里 */
input, select, textarea, button, .btn, .chip, .tab, .subtab {
  font-family: var(--font-sans);
}
textarea, input[type="text"], input[type="password"] { font-family: var(--font-sans); }

/* ---------- 顶栏 ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 22px;
  background: linear-gradient(180deg, #131924, #0e1116);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
.brand { display: flex; align-items: center; gap: 12px; }
.logo { font-size: 26px; color: var(--accent); }
.topbar h1 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: .3px; }
.topbar p { margin: 0; font-size: 12px; color: var(--muted); }
.topbar-right { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot-ok { background: var(--accent-2); box-shadow: 0 0 8px var(--accent-2); }
.dot-warn { background: var(--warn); }
.dot-err { background: var(--danger); }

/* ---------- 标签页 ---------- */
.tabs { display: flex; gap: 4px; padding: 10px 22px 0; border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 63px; z-index: 29; }
.tab {
  background: transparent; border: 1px solid transparent; border-bottom: none;
  color: var(--muted); padding: 9px 18px; border-radius: 10px 10px 0 0;
  cursor: pointer; font-size: 13px; font-weight: 600;
}
.tab:hover { color: var(--text); background: #141a23; }
.tab.active { color: var(--text); background: var(--panel); border-color: var(--line); }
.tab-panel { display: none; padding: 18px 22px 60px; }
.tab-panel.active { display: block; }

/* ---------- 布局 ---------- */
.layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }
/* 结果卡片：图上信息更紧凑 */
.card-body { gap: 5px; }
.card-prompt { -webkit-line-clamp: 2; }

.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; margin-bottom: 16px;
}
.params { position: sticky; top: 118px; max-height: calc(100vh - 140px); overflow-y: auto; }
.params::-webkit-scrollbar { width: 8px; }
.params::-webkit-scrollbar-thumb { background: #2b3648; border-radius: 8px; }
.work { min-width: 0; }

.panel-title { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: #b9c6d8; letter-spacing: .4px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.panel-head .panel-title { margin: 0; }
.sep { border: none; border-top: 1px solid var(--line); margin: 14px 0; }

/* ---------- 表单 ---------- */
.field { display: block; margin-bottom: 10px; }
.lbl { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.hint { font-style: normal; color: #6d7c92; font-size: 11px; }

input[type=text], input[type=password], input[type=number], input[type=search], select, textarea {
  width: 100%; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px;
  font-size: 13px; font-family: inherit; outline: none;
}
textarea { resize: vertical; line-height: 1.65; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(76,141,255,.15); }
input[type=file] { padding: 6px; font-size: 12px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.row-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* 面板头部工具条：给控件固定宽度，否则 width:100% 会把它们挤成竖排 */
.panel-head { align-items: flex-start; }
.panel-head .row-inline { justify-content: flex-end; }
.panel-head input[type=search] { width: 220px; }
.panel-head select { width: auto; min-width: 150px; }
.check { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); margin: 6px 0; cursor: pointer; }
.check input { width: auto; }

/* ---------- 按钮 ---------- */
.btn {
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  padding: 9px 16px; border-radius: 9px; cursor: pointer; font-size: 13px; font-weight: 600;
  font-family: inherit; transition: .15s;
}
.btn:hover:not(:disabled) { border-color: #3d4c63; transform: translateY(-1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: linear-gradient(180deg, #4c8dff, #2f6fe0); border-color: #3a7ae8; color: #fff; }
.btn-primary:hover:not(:disabled) { background: linear-gradient(180deg, #5c99ff, #3a7ae8); }
.btn-sm { padding: 6px 11px; font-size: 12px; }
.btn-ghost { background: transparent; }
.actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

/* ---------- chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--muted); font-size: 12px; cursor: pointer; user-select: none;
}
.chip:hover { color: var(--text); border-color: #3d4c63; }
.chip.on { background: rgba(76,141,255,.16); border-color: var(--accent); color: #bcd4ff; }

/* ---------- 折叠 ---------- */
.adv { margin-top: 10px; border: 1px solid var(--line); border-radius: 9px; background: #131a23; }
.adv > summary { cursor: pointer; padding: 9px 12px; font-size: 12px; color: #a9b8cd; font-weight: 600; }
.adv > *:not(summary) { margin: 0 12px 10px; }
.adv textarea { width: calc(100% - 0px); }
.preview {
  background: #0b0e13; border: 1px solid var(--line); border-radius: 8px;
  padding: 10px; white-space: pre-wrap; word-break: break-word;
  font-size: 12px; color: #cfe0ff; max-height: 220px; overflow: auto; margin: 0 12px 12px !important;
  width: calc(100% - 24px);
}
.muted { color: var(--muted); }
.small { font-size: 12px; }

/* 模型提示与尺寸告警 */
.notes {
  margin-top: 10px; padding: 10px 12px; border-radius: 9px;
  background: #121a24; border: 1px solid var(--line);
  font-size: 11.5px; line-height: 1.7; color: #9fb0c6;
}
.notes ul { margin: 0; padding-left: 16px; }
.notes li + li { margin-top: 3px; }
.warnbox {
  margin-top: 8px; padding: 8px 11px; border-radius: 8px; font-size: 11.5px; line-height: 1.6;
  background: #2a2113; border: 1px solid #6b5520; color: #ffd58a;
}
.warnbox:empty { display: none; }

/* ---------- 结果网格 ---------- */
.results { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 16px; align-items: start; }
.card { background: var(--panel-2); border: 1px solid var(--line); border-radius: 11px; overflow: hidden; display: flex; flex-direction: column; }
/* 固定图片框：不同比例（16:9 / 1:1 / 9:16）混排时卡片高度仍然整齐 */
.card img {
  width: 100%; display: block; background: #0b0e13; cursor: zoom-in;
  aspect-ratio: 3 / 2; object-fit: contain;
}
.card-body { padding: 10px; font-size: 12px; display: flex; flex-direction: column; gap: 6px; }
.card-prompt { color: #cbd8ea; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-meta { color: var(--muted); font-size: 11px; display: flex; flex-wrap: wrap; gap: 6px; }
.tag { background: #101821; border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; font-size: 11px; color: #93a3b9; }
.tag-ok { color: #6ee7a8; border-color: #1f5138; }
.tag-bad { color: #ffb4b4; border-color: #5a2626; }
.card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.card-actions .btn {
  text-align: center; text-decoration: none; display: inline-block;
  white-space: nowrap; padding: 6px 4px; font-size: 12px; overflow: hidden; text-overflow: ellipsis;
}
.loading { display: grid; place-items: center; min-height: 200px; color: var(--muted); font-size: 13px; gap: 10px; }
.spinner { width: 26px; height: 26px; border: 3px solid #2a3444; border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 进度条 ---------- */
.progress { height: 6px; background: #101821; border-radius: 99px; overflow: hidden; margin: 12px 0 6px; }
.progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, #4c8dff, #22c55e); transition: width .3s; }

/* ---------- 分镜列表 ---------- */
.shot-list { display: flex; flex-direction: column; gap: 8px; max-height: 70vh; overflow-y: auto; }
.shot {
  display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
}
.shot:hover { border-color: #3d4c63; }
.shot input { margin-top: 3px; width: auto; }
.shot-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.shot-no { font-weight: 700; color: #bcd4ff; }
.shot-time { color: var(--muted); font-size: 12px; }
.shot-action { color: #cbd8ea; font-size: 12.5px; }
.shot-audio { color: #7f8ea4; font-size: 11.5px; white-space: pre-wrap; margin-top: 4px; }

/* ---------- 顶栏 ---------- */
.topbar { position: sticky; }

/* ---------- 文生文 · 会话列表 ---------- */
.btn-block { width: 100%; display: block; }
.session-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; max-height: 42vh; overflow-y: auto; }
.session-item {
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
  padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--panel-2); cursor: pointer; font-size: 12.5px;
}
.session-item:hover { border-color: #3d4c63; }
.session-item.on { border-color: var(--accent); background: rgba(76, 141, 255, .12); }
.session-item .s-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-item .s-meta { color: var(--muted); font-size: 11px; white-space: nowrap; }
.session-empty { color: var(--muted); font-size: 12px; padding: 8px 2px; }

/* ---------- 文生文 · 对话区 ---------- */
.chat-panel { display: flex; flex-direction: column; height: calc(100vh - 190px); min-height: 420px; }
.chat-messages { flex: 1; overflow-y: auto; padding: 4px 2px 12px; display: flex; flex-direction: column; gap: 14px; }
.chat-empty { color: var(--muted); font-size: 13px; text-align: center; margin: auto; line-height: 2; }
.msg { display: flex; gap: 10px; align-items: flex-start; }
.msg-role {
  flex: 0 0 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; background: var(--panel-2); border: 1px solid var(--line);
}
.msg.user .msg-role { color: #9ecbff; border-color: #2b4a7a; }
.msg.assistant .msg-role { color: #a7f3c9; border-color: #1f5138; }
.msg-body { flex: 1; min-width: 0; }
.msg-text {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 11px;
  padding: 10px 13px; font-size: 13.5px; line-height: 1.75; word-break: break-word; white-space: normal;
}
.msg.user .msg-text { background: #16202e; }
.msg-text code { background: #0b0e13; padding: 1px 5px; border-radius: 4px; font-size: 12px; color: #9ecbff; }
.msg-text pre.md-code {
  background: #0b0e13; border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; overflow-x: auto; margin: 8px 0; font-size: 12px; color: #cfe0ff; white-space: pre;
}
.msg-text ul { margin: 6px 0; padding-left: 20px; }
.msg-foot { color: var(--muted); font-size: 11px; margin-top: 5px; display: flex; gap: 10px; flex-wrap: wrap; }
.msg-err { color: #ffb4b4; }
.cursor-blink::after { content: '▋'; color: var(--accent); animation: blink 1s steps(2) infinite; margin-left: 2px; }
@keyframes blink { 50% { opacity: 0; } }

.chat-input { border-top: 1px solid var(--line); padding-top: 12px; }
.chat-input textarea { resize: vertical; }
.chat-input-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
/* ---------- 任务记录 ---------- */
.task-list { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.task {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px;
  border-left: 3px solid var(--accent-2);
}
.task.err { border-left-color: var(--danger); }
.task-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 7px; }
.task-time { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.task-head .task-actions { margin-left: auto; display: flex; gap: 6px; }
.task-prompt { font-size: 13px; color: #cbd8ea; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
.task-prompt.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.task-thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
.task-thumbs img {
  width: 82px; height: 62px; object-fit: cover; border-radius: 7px;
  border: 1px solid var(--line); cursor: zoom-in; background: #0b0e13;
}
.task-err {
  margin-top: 8px; padding: 8px 10px; border-radius: 7px; font-size: 12px; line-height: 1.7;
  background: #2a1a1a; border: 1px solid #6b2626; color: #ffb4b4; word-break: break-word;
}
.task-err .hint { color: #ffd58a; display: block; margin-top: 4px; }
/* ---------- 预设提示词 ---------- */

/* ---------- 预设：名称 + 预设值 + 补充（一行三选） ---------- */
.preset-picker {
  background: linear-gradient(180deg, #141d28, #121a24);
  border: 1px solid var(--line); border-radius: 11px; padding: 12px 12px 10px;
  margin-bottom: 10px;
}
.pick-row { display: grid; grid-template-columns: minmax(125px, .9fr) minmax(160px, 1.25fr) minmax(140px, 1fr); gap: 10px; }
/* 选到只有一个预设值的名称时，后两列被隐藏，网格也要跟着收成一列 */
.pick-row.single { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 860px) { .pick-row { grid-template-columns: 1fr; } }
.set-cell { position: relative; }
.set-cell .c-label {
  position: absolute; top: -7px; left: 9px; padding: 0 5px; font-size: 10px;
  background: #121a24; color: #7f8ea4; letter-spacing: .5px;
}
.set-cell select { width: 100%; }
.set-cell.active select { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(76, 141, 255, .12); }
.pick-foot { display: flex; align-items: center; gap: 10px; margin-top: 9px; flex-wrap: wrap; }
.set-summary { font-size: 11.5px; color: #9fb0c6; flex: 1; min-width: 0; }
.set-summary b { color: #bcd4ff; font-weight: 600; }
.set-clear {
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  border-radius: 7px; font-size: 11px; padding: 3px 9px; cursor: pointer; white-space: nowrap;
}
.set-clear:hover { color: var(--text); border-color: #3d4c63; }
.set-hint { margin: 7px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.6; }

/* ---------- 参考图（带参考图模式） ---------- */
.ref-block {
  margin: 4px 0 12px; padding: 12px; border-radius: 10px;
  background: #121a24; border: 1px dashed var(--line);
}
.ref-block .field { margin-bottom: 6px; }
.ref-preview { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.ref-item { position: relative; width: 76px; height: 76px; }
.ref-item img { width: 76px; height: 76px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; background: #0b0e13; }
.ref-thumb { position: relative; display: block; width: 84px; height: 84px; }
.ref-item .ref-tag {
  /* 相对 .ref-thumb（图片本身）定位，就不会落到下面文件名那一行 */
  position: absolute; left: 3px; bottom: 3px; font-size: 10px; line-height: 1;
  padding: 2px 5px; border-radius: 4px; background: rgba(6, 9, 14, .82); color: #cfe0ff;
}
.ref-item .ref-tag.url { color: #a7f3c9; }
.ref-item .ref-del {
  position: absolute; right: -6px; top: -6px; z-index: 3; width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid #6b2626; background: #2a1a1a; color: #ffb4b4; font-size: 12px; line-height: 1;
  cursor: pointer; display: grid; place-items: center; padding: 0;
}
.ref-item .ref-del:hover { background: #3a2020; }
.ref-item.bad img { border-color: #6b2626; opacity: .45; }
.ref-item .ref-bad {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  font-size: 10px; color: #ffb4b4; padding: 4px; line-height: 1.3;
}

/* ---------- 看图器（灯箱）----------
   注意：不要用 grid 的 1fr 装图。1fr 的最小尺寸是内容尺寸，
   大图会把行撑开，max-height:100% 在不确定高度的行里失效 —— 图就溢出了。
   这里用 flex + min-height:0 让舞台能真正收缩，图由 JS 按像素设尺寸，
   放大后靠舞台自身的 overflow 滚动平移。 */
.lightbox { position: fixed; inset: 0; background: #05070b; z-index: 100; display: flex; flex-direction: column; }
.lightbox[hidden] { display: none; }
.lightbox-top {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid var(--line); background: #10151d;
}
.lightbox-info { font-size: 12px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.lightbox-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.lb-zoom { font-size: 12px; color: var(--text); min-width: 48px; text-align: center; font-variant-numeric: tabular-nums; }
.lightbox-close { background: none; border: none; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; padding: 0 6px; }
.lightbox-close:hover { color: var(--accent); }
/* 不用 justify-content:center —— 内容溢出时 flex 居中会让起始部分滚不到。
   改成子元素 margin:auto：小时居中，大时两端都能滚到。 */
.lightbox-stage {
  flex: 1; min-height: 0; overflow: auto; padding: 16px;
  display: flex; cursor: grab; overscroll-behavior: contain;
}
.lightbox-stage.grabbing { cursor: grabbing; }
.lightbox-stage img { margin: auto; flex: 0 0 auto; display: block; border-radius: 6px; user-select: none; -webkit-user-drag: none; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  background: #202b3a; border: 1px solid var(--line); color: var(--text);
  padding: 10px 18px; border-radius: 10px; font-size: 13px; z-index: 200;
  box-shadow: 0 10px 30px rgba(0,0,0,.45); max-width: 80vw;
}
.toast.err { border-color: #6b2626; background: #2a1a1a; }
.toast.ok { border-color: #1f5138; background: #14251c; }

/* ---------- 系统设置 ---------- */
.settings-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  align-items: start;
}
.settings-grid .panel { margin-bottom: 0; }
.iface-summary {
  background: #121a24; border: 1px solid var(--line); border-radius: 9px;
  padding: 9px 11px; display: flex; flex-direction: column; gap: 6px;
}
.if-line { display: flex; gap: 10px; align-items: baseline; font-size: 12px; }
.if-k { color: var(--muted); flex: 0 0 62px; }
.if-v { color: #cbd8ea; min-width: 0; word-break: break-all; }
.if-v code { font-size: 11px; }
.iface-summary .btn { margin-top: 4px; }

/* 诊断里的上游原文：默认收两行，鼠标悬停看全 */
.step-body {
  color: #7f8ea4; font-size: 11px; line-height: 1.55; word-break: break-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- 两级导航 ---------- */
.tabs { gap: 6px; padding: 12px 22px 0; }
.tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 20px; font-size: 13.5px; border-radius: 11px 11px 0 0;
}
.tab .t-ico { font-size: 13px; opacity: .55; }
.tab.active .t-ico { opacity: 1; color: var(--accent); }

.subbar { padding: 12px 22px 0; background: var(--bg); position: sticky; top: 116px; z-index: 28; }
.subtabs { display: inline-flex; gap: 4px; padding: 4px; background: #121a24; border: 1px solid var(--line); border-radius: 11px; }
.subtab {
  border: none; background: transparent; color: var(--muted); cursor: pointer;
  font-size: 12.5px; font-weight: 600; font-family: inherit;
  padding: 7px 16px; border-radius: 8px; transition: .15s;
}
.subtab:hover { color: var(--text); background: #182130; }
.subtab.active { color: #fff; background: var(--accent); }

/* ---------- 视觉收敛 ---------- */
.layout { grid-template-columns: 356px minmax(0, 1fr); } /* 桌面上两栏；窄屏断点在文件末尾覆盖它 */
.params { padding: 18px; }
.work .panel { padding: 20px 22px; }
.panel-title { font-size: 13.5px; letter-spacing: .3px; }

/* 主按钮更醒目、更好点 */
.actions .btn-primary, .btn-primary {
  padding: 11px 26px; font-size: 14px; border-radius: 10px;
  box-shadow: 0 4px 14px rgba(76, 141, 255, .22);
}
.actions { gap: 12px; margin-top: 16px; }

/* 折叠块更像「次要内容」 */
.adv { background: #111823; border-color: #232e3d; }
.adv > summary { color: #93a3b9; font-weight: 500; padding: 10px 13px; }
.adv > summary:hover { color: var(--text); }
.adv[open] > summary { color: #b9c6d8; border-bottom: 1px solid var(--line); margin-bottom: 10px; }

/* 提示词框更突出 */
#prompt { font-size: 14px; line-height: 1.75; padding: 12px 14px; border-radius: 11px; }

/* 预设选择器轻一点 */
.preset-picker { background: #111823; border-color: #232e3d; }
.set-summary { color: #8b9ab0; }

/* 顶栏：仅在缺少 Key 时出现 */
.key-warn {
  border: 1px solid #6b4a1f; background: #2a2013; color: #ffcf87;
  font-family: inherit; font-size: 12px; padding: 6px 12px; border-radius: 8px;
  cursor: pointer; margin-right: 4px;
}
.key-warn:hover { background: #34280f; border-color: #8a6229; }

/* ---------- 窄屏：参数折叠到顶部，内容优先 ---------- */
.params-toggle { display: none; }

@media (max-width: 1180px) {
  .layout { grid-template-columns: 1fr; gap: 14px; }
  .params-toggle { display: inline-flex; }
  /* 折叠态：只留标题条，提示词/对话立刻可见 */
  .params.collapsed > *:not(.panel-title) { display: none; }
  .params.collapsed > .panel-title { margin-bottom: 0; }
  .params { padding: 14px 16px; }
  .results { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
}

@media (max-width: 760px) {
  .topbar { padding: 12px 14px; flex-wrap: wrap; gap: 10px; }
  .topbar h1 { font-size: 15px; }
  .topbar p { display: none; }
  .tabs { padding: 10px 14px 0; overflow-x: auto; white-space: nowrap; }
  .tab { padding: 9px 15px; font-size: 13px; }
  .subbar { padding: 10px 14px 0; top: 104px; overflow-x: auto; }
  .subbar .subtabs { white-space: nowrap; }
  main { padding: 12px 14px 40px !important; }
  .panel { padding: 15px 16px; }
  .work .panel { padding: 16px; }
  .results { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  .card img { aspect-ratio: 1 / 1; }
  .grid2, .settings-grid { grid-template-columns: 1fr !important; }
  .actions { flex-wrap: wrap; }
  .actions .btn { flex: 1 1 auto; }
}

/* ---------- 折叠摘要：左边标题、右边当前值 ---------- */
.adv > summary.adv-sum { display: flex; align-items: center; gap: 8px; }
.adv-sum > span:first-of-type { flex: 1; }
.adv-val { font-size: 11.5px; color: var(--muted); font-weight: 400; white-space: nowrap; }
.adv-val b { color: #bcd4ff; font-weight: 600; }

/* 左栏里的二级小标题：不要像 section 那样占一整行 */
.params hr.sep { display: none; }   /* 有二级标题了，分隔线是多余的 */

/* 显式钉住左右两栏的位置：只靠 auto 放置时，某个子元素的隐式跨度会让它掉到下一行 */
.layout > .params { grid-column: 1; grid-row: 1; }
.layout > .work   { grid-column: 2; grid-row: 1; }
@media (max-width: 1180px) {
  .layout > .params { grid-column: 1; grid-row: 1; }
  .layout > .work   { grid-column: 1; grid-row: 2; }
}

/* ---------- 折叠箭头：不用原生 ::marker ----------
   原生 marker 在「嵌套 details + 父级折叠」时会被画到容器外面（Chrome 的 quirk），
   而且各家浏览器样式不一致。改成 CSS 画箭头，位置可控。 */
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
summary::marker { content: ''; }

.adv > summary::before {
  content: '▸';
  color: #7f8ea4; font-size: 10px; flex: 0 0 auto;
  transition: transform .15s;
}
.adv[open] > summary::before { content: '▾'; color: var(--accent); }
.adv > summary.adv-sum::before { align-self: center; }

/* ---------- 参数面板：标签在左、控件在右的单行排列 ---------- */
.rowline {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.rowline:last-child { margin-bottom: 0; }
.inline-lbl {
  font-size: 12px; color: #93a3b9; text-align: right;
  white-space: nowrap; cursor: pointer; user-select: none;
}
.rowline select, .rowline input { width: 100%; margin: 0; }
.rowline select { padding-top: 7px; padding-bottom: 7px; }
.rowline .src { display: none; font-size: 10.5px; white-space: nowrap; min-width: 0; }
.rowline.has-src { grid-template-columns: 44px minmax(0, 1fr) auto; }
.rowline.has-src .src { display: block; }

/* 左栏顶部的「参数」标题在宽屏是多余的（只有窄屏的收起按钮需要它） */
.params > .panel-title:first-child { display: none; }
@media (max-width: 1180px) {
  .params > .panel-title:first-child { display: flex; }
}

/* ---------- 存为预设 对话框 ---------- */
.dlg {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(5, 8, 12, .66);
  display: grid; place-items: center; padding: 24px;
}
.dlg-box {
  width: min(560px, 100%); max-height: 88vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 20px 16px; box-shadow: 0 18px 60px rgba(0, 0, 0, .5);
}
.dlg-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.dlg-head h3 { margin: 0; font-size: 15px; font-family: var(--font-serif); }
.dlg-x {
  border: none; background: transparent; color: var(--muted); cursor: pointer;
  font-size: 20px; line-height: 1; padding: 2px 6px; border-radius: 6px;
}
.dlg-x:hover { color: var(--text); background: #1d2634; }
.dlg-box .field .lbl { font-size: 12px; color: #93a3b9; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.dlg-box textarea { font-size: 13px; line-height: 1.65; }

/* ══════════════════════════ 画布（节点式工作流） ══════════════════════════
   布局参考 LibTV：整屏画布 + 顶部条 + 底部浮动工具条 + 左下状态 + 生成浮条 */
.tab-panel[data-panel="canvas"] { padding: 0; }
.cv-root { position: relative; height: calc(100vh - 152px); min-height: 560px;
  background: #0a0d12; overflow: hidden; }

/* ---- 顶栏 ---- */
.cv-top { position: absolute; inset: 0 0 auto 0; height: 44px; z-index: 20;
  display: flex; align-items: center; gap: 8px; padding: 0 12px;
  background: linear-gradient(180deg, rgba(10,13,18,.96), rgba(10,13,18,.72));
  border-bottom: 1px solid #171d26; }
.cv-mark { color: var(--accent); font-size: 15px; }
.cv-dd { border: none; background: transparent; color: #cbd8ea; font-size: 12.5px;
  font-family: inherit; cursor: pointer; padding: 5px 8px; border-radius: 7px; }
.cv-dd:hover { background: #171f2b; }
.cv-dd i { color: var(--muted); font-style: normal; font-size: 10px; margin-left: 2px; }
.cv-ico { border: none; background: transparent; color: #8b9ab0; font-size: 13px;
  cursor: pointer; padding: 5px 8px; border-radius: 7px; font-family: inherit; }
.cv-ico:hover { background: #171f2b; color: var(--text); }
.cv-spacer { flex: 1; }
.cv-promo { border: 1px solid #4a3a1a; background: linear-gradient(180deg,#3a2c12,#2a2013);
  color: #ffcf87; font-size: 11.5px; padding: 5px 11px; border-radius: 8px; cursor: pointer; font-family: inherit; }
.cv-promo:hover { border-color: #6b5320; }
.cv-credits { display: inline-flex; align-items: center; gap: 4px; font-size: 12px;
  color: #ffd479; background: #1a1508; border: 1px solid #3a2f12; padding: 4px 10px; border-radius: 8px; }
.cv-credits i { font-style: normal; }
.cv-avatar { width: 26px; height: 26px; border-radius: 50%; border: 1px solid #2a3444;
  background: #1d2634; color: var(--accent); cursor: pointer; font-size: 11px; }

/* ---- 画布视口 ---- */
.cv-viewport { position: absolute; inset: 44px 0 0 0; overflow: hidden; cursor: default; touch-action: none; }
.cv-viewport.panning { cursor: grabbing; }
.cv-grid { position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, #161d27 1px, transparent 1px); background-size: 26px 26px; }
.cv-world { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.cv-edges { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; z-index: 1; }
.cv-edges path { fill: none; stroke: #55688a; stroke-width: 2.2; }
.cv-edges path.on { stroke: var(--accent); }
.cv-edges path.temp { stroke: var(--accent); stroke-dasharray: 5 5; }
.cv-nodes { position: absolute; top: 0; left: 0; z-index: 2; }

/* ---- 节点：标题在框外上方，端口是左右居中的 ＋ 圆钮 ---- */
.cv-node { position: absolute; }
.cv-node-title { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #9fb0c6;
  margin-bottom: 8px; padding-left: 2px; cursor: grab; user-select: none; }
.cv-node-title:active { cursor: grabbing; }
.cv-node-title .ti { font-size: 12px; opacity: .8; }
.cv-node-title .ts { margin-left: auto; font-size: 11px; color: #62708a; }
.cv-node.sel .cv-node-title { color: #cbd8ea; }
.cv-card { position: relative; background: #11161e; border: 1px solid #1e2733; border-radius: 14px;
  min-height: 200px; display: flex; flex-direction: column; overflow: hidden; }
.cv-node.sel .cv-card { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(76,141,255,.14); }
.cv-node.run .cv-card { border-color: var(--warn); }
.cv-node.err .cv-card { border-color: var(--danger); }
.cv-card-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 18px; min-height: 0; overflow: auto; }

/* 空图片占位 */
.cv-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; color: #3d4c63; }
.cv-empty .ph { font-size: 54px; opacity: .5; }
.cv-try { align-self: flex-start; margin-left: 34px; }
.cv-try .tt { font-size: 12px; color: #62708a; margin-bottom: 8px; }
.cv-try-btn { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #b9c6d8;
  padding: 8px 12px; border-radius: 9px; cursor: pointer; border: 1px solid transparent; }
.cv-try-btn:hover { background: #171f2b; border-color: #263243; }

/* 端口：左右居中，＋ 圆钮 */
.cv-port { position: absolute; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid #2b374a; background: #0e131b; color: #7f8ea4;
  display: grid; place-items: center; font-size: 14px; line-height: 1; cursor: crosshair; z-index: 4; }
.cv-port:hover, .cv-port.hot { background: #16233a; border-color: var(--accent); color: var(--accent); }
.cv-port.in { left: -13px; }
.cv-port.out { right: -13px; }
.cv-port .plabel { position: absolute; top: 50%; transform: translateY(-50%); font-size: 10.5px;
  color: #9fb0c6; white-space: nowrap; pointer-events: none; background: #0f1620;
  border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; opacity: 0; transition: opacity .12s; }
.cv-port:hover .plabel { opacity: 1; }
.cv-port.in .plabel { right: 32px; }
.cv-port.out .plabel { left: 32px; }

/* 节点里的图片网格 */
.cv-grid-imgs { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.cv-grid-imgs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 9px;
  border: 1px solid #1e2733; cursor: zoom-in; background: #0b0e13; }
.cv-node-note { font-size: 12px; color: #62708a; line-height: 1.6; }
.cv-node-note.err { color: #ffb4b4; }
.cv-node-note.ok { color: #6ee7a8; }
.cv-node-text { font-size: 12.5px; line-height: 1.7; color: #cbd8ea; white-space: pre-wrap;
  max-height: 240px; overflow: auto; }

/* ---- 生成浮条 ---- */
.cv-bar { position: absolute; z-index: 15; width: 760px; max-width: calc(100% - 32px);
  background: #10161f; border: 1px solid #212c3a; border-radius: 14px;
  box-shadow: 0 14px 44px rgba(0,0,0,.55); padding: 12px 14px 10px; }
.cv-bar-chips { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.cv-bchip { border: 1px solid #212c3a; background: #151d28; color: #9fb0c6; font-size: 11.5px;
  padding: 5px 11px; border-radius: 8px; cursor: pointer; font-family: inherit; }
.cv-bchip:hover { border-color: var(--accent); color: #cbd8ea; }
.cv-bchip-info { font-size: 11px; color: #62708a; margin-left: 4px; }
#cvBarText { width: 100%; background: transparent; border: none; outline: none; resize: none;
  color: var(--text); font-size: 13px; line-height: 1.65; min-height: 46px; max-height: 160px;
  font-family: var(--font-sans); padding: 2px 0 8px; }
#cvBarText::placeholder { color: #4e5c72; }
.cv-bar-foot { display: flex; align-items: center; gap: 8px; border-top: 1px solid #1a222d; padding-top: 9px; }
.cv-bar-foot select { background: #151d28; border: 1px solid #212c3a; color: #b9c6d8;
  font-size: 11.5px; padding: 5px 8px; border-radius: 8px; min-width: 0; }
#cvBarModel { flex: 1 1 200px; }
#cvBarRatio { flex: 0 1 150px; }
#cvBarSize  { flex: 1 1 190px; }
#cvBarCount { flex: 0 0 84px; }
.cv-bar-foot select:disabled { opacity: .45; }
.cv-bar-ico { color: #7f8ea4; font-size: 13px; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.cv-bar-ico:hover { background: #1b2432; color: var(--text); }
.cv-bar-cost { font-size: 11.5px; color: #ffd479; }
.cv-send { width: 30px; height: 30px; border-radius: 50%; border: none; background: #2b374a;
  color: #7f8ea4; cursor: pointer; font-size: 14px; }
.cv-send:hover { background: var(--accent); color: #fff; }
.cv-send.ready { background: var(--accent); color: #fff; }

/* ---- 底部浮动工具条 ---- */
.cv-dock { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 18;
  display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 14px;
  background: rgba(16,22,31,.94); border: 1px solid #212c3a; box-shadow: 0 10px 34px rgba(0,0,0,.5); }
.cv-dbtn { width: 32px; height: 32px; border-radius: 9px; border: none; background: transparent;
  color: #8b9ab0; font-size: 14px; cursor: pointer; font-family: inherit; display: grid; place-items: center; }
.cv-dbtn:hover { background: #1b2432; color: var(--text); }
.cv-dbtn.on { background: #1b2740; color: var(--accent); }
.cv-dbtn-main { background: var(--accent); color: #fff; border-radius: 50%; }
.cv-dbtn-main:hover { background: #5f9bff; color: #fff; }

/* ---- 左下状态 ---- */
.cv-status { position: absolute; left: 12px; bottom: 16px; z-index: 18; display: flex; align-items: center; gap: 6px; }
.cv-sbtn { background: rgba(16,22,31,.9); color: #8b9ab0; font-size: 11.5px;
  padding: 6px 10px; border-radius: 8px; cursor: pointer; font-family: inherit; border: 1px solid #1c2532; }
.cv-sbtn:hover { color: var(--text); border-color: #2b374a; }
.cv-zoom { font-size: 11.5px; color: #9fb0c6; background: rgba(16,22,31,.9); border: 1px solid #1c2532;
  padding: 6px 10px; border-radius: 8px; font-family: var(--font-mono); min-width: 52px; text-align: center; }
.cv-stat { font-size: 11px; color: #4e5c72; margin-left: 6px; }

/* ---- 弹层 / 抽屉 ---- */
/* ---- 添加节点菜单 ---- */
.cv-menu { position: absolute; left: 50%; bottom: 62px; transform: translateX(-50%); z-index: 30;
  width: 268px; background: #14181e; border: 1px solid #262c36; border-radius: 13px;
  box-shadow: 0 18px 52px rgba(0,0,0,.62); overflow: hidden; }
.cv-menu-head { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 9px; font-size: 12.5px; color: #8b93a1; }
.cv-menu-search { border: none; background: transparent; color: #8b93a1; font-size: 15px;
  cursor: pointer; padding: 0 2px; }
.cv-menu-search:hover { color: var(--text); }
.cv-menu-input { width: calc(100% - 20px); margin: 0 10px 8px; background: #0f1319;
  border: 1px solid #262c36; border-radius: 8px; color: var(--text); font-size: 12.5px;
  padding: 7px 10px; font-family: inherit; outline: none; }
.cv-menu-body { max-height: min(360px, calc(100vh - 260px)); overflow-y: auto; padding: 0 6px 8px; }
.cv-mi { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px;
  cursor: pointer; position: relative; }
.cv-mi-n { margin-right: auto; }
.cv-mi:hover { background: #1e242e; }
.cv-mi.off { cursor: not-allowed; }
.cv-mi.off .cv-mi-n, .cv-mi.off .cv-mi-i { color: #4a5361; }
.cv-mi.off:hover { background: transparent; }
.cv-mi-i { width: 17px; text-align: center; font-size: 13px; color: #b6bfcc; flex: 0 0 auto; }
.cv-mi-n { font-size: 13px; color: #e2e8f1; flex: 1; min-width: 0; white-space: nowrap; }
.cv-mi-b { font-size: 9.5px; padding: 1.5px 6px; border-radius: 5px; white-space: nowrap; }
.cv-mi-b.new { color: #7fd4a0; background: #12261c; border: 1px solid #1d3b2b; }
.cv-mi-b.beta { color: #9aa6b6; background: #1b2028; border: 1px solid #2a313b; }
.cv-mi-b.lm { color: #c9b6ff; background: #1d1830; border: 1px solid #322a4d; }
.cv-mi-b.gem { color: #ffd479; }
.cv-mi-why { font-size: 10px; color: #6d7686; white-space: nowrap; flex: 0 0 auto; }
.cv-mi-arrow { color: #5c6675; font-size: 12px; margin-left: auto; }
.cv-mi-sep { height: 1px; background: #232932; margin: 7px 8px; }
.cv-mi-head { font-size: 11px; color: #6d7686; padding: 8px 10px 5px; }
/* 二级菜单 */
.cv-submenu { position: fixed; z-index: 31; min-width: 170px; background: #1a1f27;
  border: 1px solid #2b323d; border-radius: 11px; padding: 6px;
  box-shadow: 0 14px 40px rgba(0,0,0,.6); }
.cv-submenu .cv-mi-n { font-size: 12.5px; }

.cv-drawer { position: absolute; left: 12px; top: 56px; bottom: 60px; width: 268px; z-index: 19;
  background: #0f151d; border: 1px solid #212c3a; border-radius: 13px; padding: 13px;
  overflow-y: auto; box-shadow: 0 14px 44px rgba(0,0,0,.5); }
.cv-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.cv-drawer-head b { font-size: 13px; font-family: var(--font-serif); }
.cv-help p { font-size: 11.5px; color: #7f8ea4; line-height: 1.85; margin: 0 0 6px; }
.cv-help b { color: #9fb0c6; }

.cv-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.cv-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px;
  border: 1px solid #1e2733; background: #131a24; cursor: pointer; }
.cv-item:hover { border-color: #33415a; }
.cv-item.on { border-color: var(--accent); background: #16233a; }
.cv-item .n { flex: 1; min-width: 0; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-item .m { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.cv-item .x { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; padding: 0 3px; }
.cv-item .x:hover { color: var(--danger); }
.cv-item .th { width: 26px; height: 26px; border-radius: 5px; object-fit: cover; background: #0b0e13; }

@media (max-width: 900px) {
  .cv-bar { width: calc(100% - 24px); }
  .cv-drawer { width: calc(100% - 24px); }
}

/* 节点拖动：整张卡片可拖，光标给出提示 */
.cv-card { cursor: grab; }
.cv-node.dragging .cv-card { cursor: grabbing; }
.cv-node.dragging { z-index: 5; }
.cv-card-body { cursor: default; }
.cv-card-body input, .cv-card-body textarea, .cv-card-body select { cursor: auto; }
.cv-try-btn, .cv-grid-imgs img { cursor: pointer; }
.cv-viewport.hand, .cv-viewport.hand .cv-node, .cv-viewport.hand .cv-card { cursor: grab; }
.cv-viewport.hand.panning, .cv-viewport.hand.panning .cv-card { cursor: grabbing; }

/* ---- 点端口弹出的「添加上下文」菜单 ---- */
.cv-portmenu { position: fixed; z-index: 60; width: 252px; padding: 7px;
  background: #10161f; border: 1px solid #263243; border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,.6); max-height: 78vh; overflow-y: auto; }
.pm-head { font-size: 11px; color: #62708a; padding: 4px 9px 8px; }
.pm-item { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 8px;
  cursor: pointer; }
.pm-item:hover { background: #1a2331; }
.pm-item.off { cursor: not-allowed; opacity: .42; }
.pm-item.off:hover { background: transparent; }
.pm-d { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.pm-n { font-size: 12.5px; color: #dbe5f2; }
.pm-s { font-size: 10.5px; color: #62708a; margin-left: auto; text-align: right; }
.pm-b { font-size: 10px; color: #8a7a4e; background: #241d0e; border: 1px solid #3a2f12;
  padding: 2px 7px; border-radius: 6px; margin-left: auto; white-space: nowrap; }

/* ---- 生成历史（全屏面板） ---- */
.cv-history { position: absolute; inset: 0; z-index: 40; background: #12161c;
  border: 1px solid #262c36; border-radius: 16px; display: flex; flex-direction: column;
  box-shadow: 0 24px 70px rgba(0,0,0,.7); overflow: hidden; }
.cv-hist-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px 12px; }
.cv-hist-head b { font-size: 16px; font-family: var(--font-serif); }
.cv-hist-spacer { flex: 1; }
.cv-hist-grid { display: flex; align-items: center; gap: 8px; }
.cv-hist-g { border: none; background: transparent; color: #8b93a1; cursor: pointer; font-size: 13px; }
.cv-hist-grid input[type=range] { width: 120px; accent-color: var(--accent); }
.cv-hist-bar { display: flex; align-items: center; gap: 12px; padding: 0 22px 12px;
  border-bottom: 1px solid #1e242e; flex-wrap: nowrap; overflow-x: auto; }
.cv-hist-tabs { display: flex; gap: 4px; background: #0f1319; border-radius: 9px; padding: 3px; flex: 0 0 auto; }
.cv-htab { border: none; background: transparent; color: #8b93a1; font-size: 12.5px;
  padding: 6px 14px; border-radius: 7px; cursor: pointer; font-family: inherit; }
.cv-htab.on { background: #232a34; color: var(--text); }
.cv-hist-counts { display: flex; gap: 14px; font-size: 12px; color: #6d7686; flex: 0 0 auto; }
.cv-hist-counts b { color: #b6bfcc; font-weight: 600; }
.cv-hist-sel { background: #0f1319; border: 1px solid #262c36; color: #b6bfcc;
  font-size: 12px; padding: 5px 9px; border-radius: 8px; max-width: 120px; flex: 0 0 auto; }
.cv-hist-btn { border: none; background: transparent; color: #8b93a1; font-size: 12px;
  cursor: pointer; font-family: inherit; padding: 5px 8px; border-radius: 7px;
  white-space: nowrap; flex: 0 0 auto; }
.cv-hist-btn:hover, .cv-hist-btn.on { background: #1e242e; color: var(--text); }
.cv-hist-grid-box { flex: 1; overflow-y: auto; padding: 16px 20px;
  display: grid; gap: 12px; align-content: start; }
.cv-hist-grid-box img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px;
  border: 1px solid #1e242e; cursor: zoom-in; background: #0b0e13; }
.cv-hist-empty { grid-column: 1/-1; text-align: center; color: #5c6675; font-size: 13px; padding: 80px 0; }
.cv-hist-cell { position: relative; }
.cv-hist-cell .pick { display: none; position: absolute; top: 6px; left: 6px; width: 20px; height: 20px;
  border-radius: 6px; border: 1px solid #3a4351; background: rgba(10,13,18,.8); cursor: pointer;
  place-items: center; font-size: 11px; color: transparent; }
.cv-hist-grid-box.batch .cv-hist-cell .pick { display: grid; }
.cv-hist-cell.picked .pick { background: var(--accent); border-color: var(--accent); color: #fff; }
.cv-hist-cell.picked img { border-color: var(--accent); }

/* ---- 快捷键（全屏面板） ---- */
.cv-keys { position: absolute; inset: 0; z-index: 41; background: #14181e;
  border: 1px solid #262c36; border-radius: 16px; display: flex; flex-direction: column;
  box-shadow: 0 24px 70px rgba(0,0,0,.7); overflow: hidden; }
.cv-keys-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 8px; }
.cv-keys-head b { font-size: 16px; font-family: var(--font-serif); }
.cv-keys-body { flex: 1; overflow-y: auto; padding: 8px 20px 24px;
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; }
.cv-kcol h4 { font-size: 12.5px; color: var(--accent); margin: 0 0 12px; font-weight: 600; }
.cv-krow { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.cv-krow .k { font-size: 12.5px; color: #dbe5f2; flex: 1; min-width: 0; }
.cv-krow .v { display: flex; gap: 4px; }
.cv-krow.off .k { color: #4a5361; }
.cv-krow.off .v kbd { opacity: .45; }
.cv-krow .why { font-size: 10px; color: #6d7686; }
kbd { background: #232a34; border: 1px solid #2e3742; border-bottom-width: 2px;
  border-radius: 6px; padding: 2px 7px; font-size: 11px; color: #c3ccd9;
  font-family: var(--font-sans); white-space: nowrap; }

@media (max-width: 1100px) { .cv-keys-body { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ══════════════════════════ 账号 / 用户管理 ══════════════════════════ */

/* 用户管理 */
.users-top { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.users-me { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 12.5px; color: #cbd8ea; }
.users-me .badge { font-size: 10.5px; padding: 2px 8px; border-radius: 6px;
  background: #16233a; border: 1px solid #26374f; color: var(--accent); }
.users-me .badge.user { background: #1a2029; border-color: #2a3444; color: #9fb0c6; }
.users-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.users-actions input { background: #0d1117; border: 1px solid var(--line); border-radius: 8px;
  color: var(--text); font-size: 12.5px; padding: 7px 11px; font-family: inherit; outline: none;
  flex: 0 1 200px; min-width: 140px; width: auto; }
.users-actions select { flex: 0 0 auto; width: auto; }
.users-actions .check { flex: 0 0 auto; white-space: nowrap; }
.users-actions .btn { flex: 0 0 auto; }
.users-actions input:focus { border-color: var(--accent); }
.users-actions select { background: #0d1117; border: 1px solid var(--line); border-radius: 8px;
  color: var(--text); font-size: 12.5px; padding: 7px 10px; width: auto; flex: 0 0 auto; }
.users-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 11px; }
.users-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.users-table th { text-align: left; font-weight: 600; color: var(--muted); font-size: 11.5px;
  padding: 11px 13px; border-bottom: 1px solid var(--line); background: #0f141b; white-space: nowrap; }
.users-table td { padding: 11px 13px; border-bottom: 1px solid #1a2029; color: #cbd8ea; white-space: nowrap; }
.users-table tr:last-child td { border-bottom: none; }
.users-table tr:hover td { background: #131a24; }
.users-table .ta-r { text-align: right; }
.users-table .u-actions { display: flex; gap: 6px; justify-content: flex-end; }
.users-table .on { color: var(--ok); }
.users-table .off { color: #5c6675; }
.users-table .role-admin { color: var(--accent); }
.users-table .role-user { color: #9fb0c6; }
.users-table .pill { font-size: 10.5px; padding: 2px 7px; border-radius: 5px;
  background: #1a2029; border: 1px solid #2a3444; color: #9fb0c6; }

/* 建号成功后给出的账号信息（方便直接复制发给对方） */
.credbox { margin: 14px 0; border: 1px solid #1d4433; background: #10221a;
  border-radius: 11px; padding: 13px 14px; }
.credbox-head { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; font-size: 12.5px; color: #b8f5cf; margin-bottom: 10px; flex-wrap: wrap; }
.credbox-actions { display: flex; gap: 6px; }
.credbox pre { margin: 0; background: #0a0d12; border: 1px solid #1d4433; border-radius: 8px;
  padding: 11px 13px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.75;
  color: #d7e6f5; white-space: pre-wrap; word-break: break-all; }
.credbox pre b { color: #ffd479; }

/* ---- 设置页 · 服务端配置（仅管理员可改） ---- */
.srvc { background: #0f141b; border: 1px solid var(--line); border-radius: 11px;
  padding: 14px 15px; display: flex; flex-direction: column; gap: 12px; }
.srvc-head { display: flex; align-items: center; gap: 8px; }
.srvc-head b { font-size: 12.5px; color: #cbd8ea; }
.srvc-state { font-size: 11.5px; color: var(--muted); margin-left: auto; }
.srvc .field { margin: 0; }
.srvc input[type=text], .srvc input[type=password] { font-size: 12.5px; padding: 8px 11px; }
.srvc input:disabled { opacity: .5; cursor: not-allowed; }
.srvc .row-inline { gap: 8px; flex-wrap: wrap; }
.srvc-msg { font-size: 11.5px; line-height: 1.7; border-radius: 8px; padding: 9px 11px; display: none; }
.srvc-msg.show { display: block; }
.srvc-msg.ok { color: #b8f5cf; background: #10221a; border: 1px solid #1d4433; }
.srvc-msg.err { color: #ffc9c9; background: #2a1416; border: 1px solid #4a2024; }
.srvc-msg.warn { color: #ffd479; background: #1a1508; border: 1px solid #3a2f12; }
.srvc-readonly { font-size: 11.5px; color: var(--muted); line-height: 1.7; }

/* ══════════════════════════ 参考图编号 + @ 菜单 ══════════════════════════ */
/* 缩略图左上角的「图N」—— 这个编号和提示词里写的「参考图N」是同一个 */
/* 基础样式里 .ref-item 是固定 76×76，加了文件名之后会溢出，这里放开高度 */
.ref-item { position: relative; width: 84px; height: auto; }
.ref-item img, .ref-thumb img { width: 84px; height: 84px; }
.ref-no { position: absolute; top: 4px; left: 4px; z-index: 2;
  background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 600;
  padding: 1px 6px; border-radius: 5px; pointer-events: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.5); }
/* 缩略图下面显示原文件名；鼠标悬停能看到发给上游时的实际文件名 */
.ref-name { display: block; width: 84px; margin-top: 4px; font-size: 10px;
  color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: center; }
.ref-preview { align-items: flex-start; }
.ref-legend-row { margin: 12px 0 4px; clear: both; }
.ref-legend-row .check { font-size: 11.5px; color: var(--muted); line-height: 1.6;
  align-items: flex-start; }

/* @ 参考图 下拉 */
.at-menu { position: fixed; z-index: 70; width: 290px; max-height: 340px; overflow-y: auto;
  background: #10161f; border: 1px solid #263243; border-radius: 12px; padding: 7px;
  box-shadow: 0 16px 48px rgba(0,0,0,.6); }
.at-head { font-size: 11px; color: #62708a; padding: 4px 9px 8px; }
.at-foot { font-size: 10.5px; color: #4e5c72; padding: 7px 9px 3px;
  border-top: 1px solid #1e242e; margin-top: 5px; }
.at-foot b { color: #9fb0c6; }
.at-item { display: flex; align-items: center; gap: 9px; padding: 7px 9px;
  border-radius: 8px; cursor: pointer; }
.at-item:hover, .at-item.on { background: #1b2740; }
.at-item img { width: 34px; height: 34px; object-fit: cover; border-radius: 6px;
  border: 1px solid #263243; flex: 0 0 auto; background: #0b0e13; }
.at-no { font-size: 11.5px; font-weight: 600; color: var(--accent);
  background: #16233a; border: 1px solid #26374f; border-radius: 6px;
  padding: 2px 7px; flex: 0 0 auto; }
.at-n { font-size: 11.5px; color: #9fb0c6; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ---- 参考图拖拽排序 ---- */
.ref-item { cursor: grab; touch-action: none; }   /* touch-action:none 否则手机上会被页面滚动抢走 */
.ref-item img { -webkit-user-drag: none; user-select: none; pointer-events: none; }
.ref-thumb { position: relative; }
.ref-item .ref-del { cursor: pointer; }
.ref-item.dragging { cursor: grabbing; z-index: 10; }
.ref-item.dragging img { transform: scale(1.06); box-shadow: 0 10px 26px rgba(0,0,0,.6);
  border-color: var(--accent); transition: transform .12s, box-shadow .12s; }
.ref-item.dragging .ref-no { background: var(--warn); color: #1a1508; }
.ref-preview.sorting .ref-item:not(.dragging) { transition: transform .12s ease; }
.ref-preview.sorting .ref-item:not(.dragging) img { opacity: .72; }
/* 拖动时别让文字被选中 */
.ref-preview.sorting { user-select: none; }

/* ---- 参考图命名 ---- */
.ref-label { display: block; width: 84px; margin-top: 2px; font-size: 10px; line-height: 1.4;
  text-align: center; color: #55637a; cursor: text; border-radius: 4px; padding: 1px 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-label:hover { color: var(--accent); background: #16233a; }
.ref-label.has { color: var(--accent); font-weight: 600; }
.ref-label-input { width: 84px; margin-top: 2px; font-size: 10px; line-height: 1.4;
  text-align: center; background: #0d1117; border: 1px solid var(--accent); border-radius: 4px;
  color: var(--text); padding: 1px 3px; font-family: inherit; outline: none; }
/* @ 菜单里的名字 */
.at-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.at-lb { font-size: 11.5px; color: var(--accent); font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.at-menu { width: 310px; }