:root {
  --bg: #12141c;
  --panel: #1a1d29;
  --panel2: #202433;
  --border: #2c3145;
  --text: #e8eaf2;
  --text-dim: #9aa1b5;
  --accent: #5b8cff;
  --accent2: #7aa0ff;
  --red: #ff5c6c;
  --green: #3ddc84;
  --amber: #ffb020;
  --radius: 10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font: 14px/1.55 "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.topbar { flex-shrink: 0; }
button { font: inherit; cursor: pointer; color: inherit; }
input[type=text], input[type=number] {
  background: var(--panel2); border: 1px solid var(--border); color: var(--text);
  border-radius: 7px; padding: 7px 10px; width: 100%; outline: none;
}
input[type=text]:focus, input[type=number]:focus { border-color: var(--accent); }
input[type=range] { accent-color: var(--accent); width: 100%; }
code { background: #2a3044; padding: 1px 6px; border-radius: 5px; font-size: 12px; }

/* ---- topbar ---- */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 18px; background: var(--panel); border-bottom: 1px solid var(--border);
  height: 60px;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.logo { color: var(--accent2); font-size: 26px; }
.brand h1 { font-size: 17px; font-weight: 600; }
.paths { color: var(--text-dim); font-size: 12px; max-width: 560px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.top-actions { display: flex; gap: 8px; align-items: center; }
.status-chip { font-size: 12px; color: var(--green); background: rgba(61,220,132,.12);
  padding: 4px 10px; border-radius: 20px; }
.status-chip.busy { color: var(--amber); background: rgba(255,176,32,.12); }

.btn {
  background: var(--accent); color: #fff; border: none; padding: 7px 14px;
  border-radius: 8px; font-size: 13px;
}
.btn:hover { filter: brightness(1.1); }
.btn.ghost { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent2); }
.btn.primary { background: var(--accent); }
.btn.danger { background: var(--red); }
.btn.danger-ghost { background: transparent; border: 1px solid rgba(255,92,108,.5); color: var(--red); }
.btn.danger-ghost:hover { background: rgba(255,92,108,.12); }
.btn.small { padding: 4px 10px; font-size: 12px; }
.icon-btn {
  background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  border-radius: 7px; min-width: 30px; height: 30px; padding: 0 8px;
}
.icon-btn:hover { color: var(--accent2); border-color: var(--accent); }
.mini { color: var(--text-dim); font-size: 12px; }
.link { background: none; border: none; color: var(--accent2); padding: 0; font-size: 13px; }
.link:hover { text-decoration: underline; }

/* ---- layout ---- */
.layout { display: flex; flex: 1; min-height: 0; }

.sidebar {
  width: 270px; min-width: 230px; background: var(--panel);
  border-right: 1px solid var(--border); overflow-y: auto; padding: 10px 12px 30px;
}
.sidebar .panel { margin-bottom: 12px; }
.sidebar h3 { font-size: 13px; color: var(--text-dim); font-weight: 600;
  margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center;}
.panel .mini { font-weight: 400; }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.stat-cell { background: var(--panel2); border-radius: 8px; padding: 6px 8px; }
.stat-cell .n { font-size: 17px; font-weight: 700; }
.stat-cell .t { font-size: 11px; color: var(--text-dim); }
.stat-cell.c-green .n { color: var(--green); }
.stat-cell.c-amber .n { color: var(--amber); }
.stat-cell.c-red .n { color: var(--red); }
.stat-cell.c-blue .n { color: var(--accent2); }

.seg { display: flex; background: var(--panel2); border-radius: 8px; padding: 3px; gap: 2px; }
.seg button { flex: 1; background: transparent; border: none; color: var(--text-dim);
  padding: 6px 2px; border-radius: 6px; font-size: 12px; }
.seg button.active { background: var(--accent); color: #fff; }

.class-list { display: flex; flex-wrap: wrap; gap: 6px; }
.class-chip {
  border: 1px solid var(--border); background: var(--panel2); color: var(--text);
  border-radius: 20px; padding: 4px 10px; font-size: 12px; display: flex; gap: 6px; align-items: center;
}
.class-chip .dot { width: 9px; height: 9px; border-radius: 50%; }
.class-chip .cnt { color: var(--text-dim); }
.class-chip.on { border-color: var(--accent); background: rgba(91,140,255,.15); }

.rule-box label, .rule-row label { display: flex; gap: 8px; align-items: center;
  font-size: 13px; color: var(--text-dim); padding: 3px 0; cursor: pointer; }
.rule-row { margin-top: 6px; }
.rule-row input[type=number] { width: 70px; display: inline-block; padding: 3px 6px; }
input[type=checkbox] { accent-color: var(--accent); }

.folder-head { display: flex; justify-content: space-between; margin-bottom: 4px; }
.folder-list { max-height: 170px; overflow-y: auto; }
.folder-item {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  background: none; border: none; color: var(--text-dim); padding: 1px 4px;
  border-radius: 6px; font-size: 12.5px; text-align: left;
}
.folder-item:hover { background: var(--panel2); color: var(--text); }
.folder-item.on { background: rgba(91,140,255,.14); color: var(--accent2); }
.folder-item .folder-main {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px;
  background: none; border: none; color: inherit; font: inherit; cursor: pointer;
  padding: 4px 2px; text-align: left;
}
.folder-item .folder-main span.mini { flex-shrink: 0; }
.folder-item .bar { flex: 1; height: 4px; background: #2c3145; border-radius: 2px;
  overflow: hidden; min-width: 12px; }
.folder-item .bar i { display: block; height: 100%; background: var(--green); }
.folder-item .folder-go {
  background: rgba(61,220,132,.15); border: 1px solid rgba(61,220,132,.45);
  color: var(--green); border-radius: 6px; padding: 2px 7px; font-size: 12px;
  cursor: pointer; flex-shrink: 0; margin-left: 4px;
}
.folder-item .folder-go:hover { background: rgba(61,220,132,.3); }
.folder-item .folder-go:disabled { opacity: .45; cursor: default; }

/* ---- main grid ---- */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.toolbar { display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px; border-bottom: 1px solid var(--border); gap: 10px; flex-wrap: wrap; }
.toolbar .left, .toolbar .right { display: flex; gap: 8px; align-items: center; }
.toolbar .center { color: var(--text-dim); font-size: 13px; }
.sel-count.on { color: var(--amber); }

.grid-wrap { flex: 1; overflow-y: auto; padding: 14px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px; }
.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; cursor: pointer; position: relative; transition: border-color .15s;
}
.card:hover { border-color: var(--accent); }
.card.sel { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
.card .thumb { position: relative; aspect-ratio: 4/3; background: #0d0f16; overflow: hidden; }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .overlay-num {
  position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,.65);
  color: #fff; font-size: 11px; padding: 2px 7px; border-radius: 10px;
}
.card.badge-empty .thumb::after, .card.badge-missing .thumb::after {
  content: attr(data-state); position: absolute; top: 6px; left: 6px;
  font-size: 11px; padding: 2px 8px; border-radius: 10px;
}
.card.badge-empty .thumb::after { background: rgba(255,176,32,.85); color: #3a2600; content: "空标注"; }
.card.badge-missing .thumb::after { background: rgba(255,92,108,.85); color: #fff; content: "缺失"; }
.card .meta { padding: 8px 10px; }
.card .fname { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-bottom: 6px; color: var(--text-dim); }
.card .class-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.mini-chip { font-size: 10.5px; padding: 1px 6px; border-radius: 10px; border: 1px solid var(--border); }
.mini-chip b { font-weight: 600; }
.card .selbox { position: absolute; top: 8px; left: 8px; width: 18px; height: 18px; z-index: 3;
  accent-color: var(--amber); display: none; }
.card:hover .selbox { display: block; }
.card.sel .selbox { display: block; }
body.select-mode .card .selbox { display: block; }
.flag-tag { font-size: 10px; background: rgba(255,92,108,.16); color: var(--red);
  padding: 1px 6px; border-radius: 8px; margin-left: 4px; }

.empty-hint { text-align: center; color: var(--text-dim); padding: 60px 0; }
.pager { display: flex; justify-content: center; gap: 6px; padding: 10px; align-items: center; }
.pager button {
  background: var(--panel2); border: 1px solid var(--border); color: var(--text-dim);
  min-width: 30px; height: 30px; border-radius: 7px;
}
.pager button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.pager button:disabled { opacity: .4; cursor: default; }

/* ---- viewer ---- */
.modal-mask { position: fixed; inset: 0; background: rgba(8,10,16,.78); z-index: 100;
  display: flex; align-items: center; justify-content: center; }
.modal-mask[hidden] { display: none !important; }
[hidden] { display: none !important; }
.viewer { width: 96vw; height: 94vh; background: var(--panel); border: 1px solid var(--border);
  border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; }
.viewer-head { display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px; border-bottom: 1px solid var(--border); gap: 10px; flex-wrap: wrap; }
.v-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.v-title span { font-weight: 600; }
.v-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.v-sep { width: 1px; height: 20px; background: var(--border); margin: 0 2px; }
.viewer-body { flex: 1; display: flex; min-height: 0; }
.canvas-area { flex: 1; overflow: auto; background: #0b0d14; position: relative; cursor: grab; }
.canvas-area.dragging { cursor: grabbing; }
.world { position: relative; transform-origin: 0 0; margin: 0; }
#vImg { position: absolute; left: 0; top: 0; display: block; user-select: none; }
#vSvg { position: absolute; left: 0; top: 0; overflow: visible; }
#vSvg .poly { fill: rgba(91,140,255,.12); stroke-width: 1.6; cursor: pointer; transition: fill .12s; }
#vSvg .poly:hover { fill: rgba(91,140,255,.30); }
#vSvg .poly.active { fill: rgba(255,176,32,.35); stroke-width: 2.6; }
#vSvg .poly-idx { font-size: 13px; fill: #fff; paint-order: stroke; stroke: rgba(0,0,0,.6);
  stroke-width: 3px; pointer-events: none; font-weight: 600; }
.canvas-tip { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  color: var(--text-dim); font-size: 12px; background: rgba(0,0,0,.5); padding: 4px 12px;
  border-radius: 16px; pointer-events: none; white-space: nowrap; }
.v-side { width: 320px; min-width: 280px; border-left: 1px solid var(--border);
  overflow-y: auto; padding: 12px; }
.v-side h4 { font-size: 13px; color: var(--text-dim); margin: 12px 0 8px; }
.v-info { font-size: 13px; }
.v-info table { width: 100%; border-collapse: collapse; }
.v-info td { padding: 4px 0; border-bottom: 1px dashed var(--border); }
.v-info td:last-child { text-align: right; font-weight: 600; }
.inst-list { display: flex; flex-direction: column; gap: 6px; }
.inst-item {
  border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px;
  cursor: pointer; background: var(--panel2); font-size: 13px;
}
.inst-item.on { border-color: var(--amber); background: rgba(255,176,32,.08); }
.inst-item .row { display: flex; justify-content: space-between; align-items: center; }
.inst-item .cls { font-weight: 600; }
.inst-item .cname { font-weight: 600; }
.inst-item .attr { font-size: 11px; color: var(--text-dim); }
.raw-box { margin-top: 14px; }
.raw-box summary { cursor: pointer; color: var(--text-dim); font-size: 13px; }
.raw-box pre { background: #0d0f16; padding: 8px; border-radius: 8px; font-size: 11px;
  white-space: pre-wrap; word-break: break-all; color: var(--text-dim); margin-top: 6px;
  max-height: 160px; overflow: auto; }

/* ---- modal & config ---- */
.modal { background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 22px; width: 640px; max-width: 94vw; max-height: 90vh; overflow-y: auto; }
.modal.small { width: 480px; }
.modal h2 { font-size: 17px; margin-bottom: 8px; }
.modal .desc { color: var(--text-dim); font-size: 13px; margin-bottom: 14px; }
.cfg-field { margin-bottom: 10px; }
.cfg-field label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 4px; }
.cfg-field select {
  width: 100%; background: var(--panel2); border: 1px solid var(--border);
  color: var(--text); border-radius: 7px; padding: 7px 10px;
  font-size: 13px; font-family: inherit;
}
.cfg-field select:focus { border-color: var(--accent); outline: none; }
#exportDesc b { color: var(--accent2); }
.cfg-btns { display: flex; gap: 8px; margin-top: 12px; }
.cfg-btns.right { justify-content: flex-end; }
.cfg-status { background: var(--panel2); border-radius: 8px; padding: 10px 12px;
  font-size: 13px; margin-bottom: 14px; }
.cfg-status.ok { border-left: 3px solid var(--green); }
.cfg-status.err { border-left: 3px solid var(--red); }
.browser { margin-top: 12px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.browser-bar { display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px; background: var(--panel2); font-size: 12.5px; }
.browser-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browser-list { max-height: 260px; overflow-y: auto; padding: 6px; }
.dir-row { display: flex; justify-content: space-between; align-items: center; width: 100%;
  background: none; border: none; color: var(--text); padding: 6px 8px; border-radius: 6px;
  text-align: left; font-size: 13px; }
.dir-row:hover { background: var(--panel2); }
.dir-row .mark { font-size: 10.5px; color: var(--amber); border: 1px solid var(--border);
  border-radius: 8px; padding: 0 6px; }
.browser-foot { padding: 6px 10px; border-top: 1px solid var(--border); }
.cfg-tip { margin-top: 12px; }
.cfg-tip h4 { font-size: 13px; margin-bottom: 8px; color: var(--text-dim); }
.discover-item { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--panel2); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; margin-bottom: 6px; font-size: 12.5px; }
.discover-item .paths { font-size: 12px; }
.discover-item button { flex-shrink: 0; }
.cfg-demo { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--border);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.op-result { margin-top: 10px; font-size: 13px; }
.op-result.ok { color: var(--green); }
.op-result.err { color: var(--red); }
.confirm p { color: var(--text-dim); margin: 8px 0 4px; font-size: 14px; line-height: 1.7;
  word-break: break-all; }

/* toast */
.toast-area { position: fixed; top: 70px; right: 18px; z-index: 300; display: flex;
  flex-direction: column; gap: 8px; }
.toast { background: var(--panel2); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  padding: 10px 16px; border-radius: 8px; font-size: 13px; box-shadow: 0 6px 18px rgba(0,0,0,.4);
  animation: slidein .2s ease; }
.toast.ok { border-left-color: var(--green); }
.toast.err { border-left-color: var(--red); }
.toast.info { border-left-color: var(--accent); }
@keyframes slidein { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #333a52; border-radius: 5px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---- 类别管理（classMask） ---- */
.class-tbl { width: 100%; border-collapse: collapse; margin-top: 4px; font-size: 13px; }
.class-tbl th { text-align: left; color: var(--text-dim); font-weight: 500;
  border-bottom: 1px solid var(--border); padding: 6px 8px; font-size: 12px; }
.class-tbl td { padding: 5px 8px; border-bottom: 1px dashed var(--border); vertical-align: middle; }
.class-tbl input[type=text] { width: 100%; padding: 5px 8px; font-size: 13px; }
.class-tbl .cls-name-view { display: inline-block; padding: 4px 6px; }
.class-tbl .del-btn { background: none; border: 1px solid var(--border); color: var(--red);
  border-radius: 6px; font-size: 12px; padding: 3px 8px; cursor: pointer; }
.class-tbl .del-btn:hover:not(:disabled) { background: rgba(255,66,77,.12); }
.class-tbl .del-btn:disabled { opacity: .35; cursor: not-allowed; }
.cls-msg-ok { color: var(--green); }
.cls-msg-err { color: var(--red); }

/* ---- 查看器：选中标注的改类面板 ---- */
.inst-edit { margin-top: 10px; padding: 10px; border: 1px solid var(--amber);
  border-radius: 10px; background: rgba(255,176,32,.06); }
.inst-edit .ie-title { font-size: 13px; color: var(--amber); margin-bottom: 6px; }
.inst-edit .ie-row { display: flex; gap: 6px; align-items: center; }
.inst-edit select { flex: 1; min-width: 0; background: var(--panel2); color: var(--text);
  border: 1px solid var(--border); border-radius: 7px; padding: 5px 6px; font-size: 13px; }

/* ---- 登录覆盖层 ---- */
.login-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.75); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
}
.login-overlay[hidden] { display: none; }
.login-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 16px; padding: 40px 48px; text-align: center;
  width: 400px; max-width: 90vw; box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.login-logo { font-size: 48px; color: var(--accent2); margin-bottom: 8px; }
.login-card h2 { font-size: 20px; margin-bottom: 6px; }
.login-desc { color: var(--text-dim); font-size: 13px; margin-bottom: 24px; }
.login-btns { display: flex; flex-direction: column; gap: 12px; }
.login-btn {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; border-radius: 12px; text-align: left;
  transition: transform .15s, box-shadow .15s;
}
.login-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.login-icon { font-size: 28px; flex-shrink: 0; }
.login-btn b { display: block; font-size: 15px; }
.login-btn small { color: var(--text-dim); font-size: 12px; }
.guest-btn { background: var(--panel2); border: 1px solid var(--border); }
.guest-btn:hover { border-color: var(--accent); background: var(--panel); }
.admin-btn { background: var(--accent); color: #fff; }
.admin-btn:hover { background: var(--accent2); }
.key-input-box { margin-top: 20px; text-align: left; }
.key-input-box input { margin-bottom: 10px; }
.key-btns { display: flex; gap: 8px; justify-content: flex-end; }
.key-error { color: var(--red); font-size: 12px; margin-top: 8px; min-height: 18px; }
.user-badge {
  font-size: 12px; padding: 4px 10px; border-radius: 20px;
  background: rgba(91,140,255,.15); color: var(--accent2);
}
.user-badge[hidden] { display: none; }
.user-badge.guest { background: rgba(255,176,32,.12); color: var(--amber); }

/* 游客模式下隐藏的元素 */
body.guest-mode .admin-only { display: none !important; }
.inst-edit .ie-hint { margin-top: 6px; font-size: 11px; color: var(--text-dim); }

/* ---- 标记星标 ---- */
.mark-star {
  position: absolute; top: 6px; right: 6px;
  background: rgba(0,0,0,.5); border: none; border-radius: 50%;
  width: 28px; height: 28px; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; transition: opacity .2s, transform .15s;
  z-index: 2;
}
.card:hover .mark-star, .mark-star.marked { opacity: 1; }
.mark-star:hover { transform: scale(1.2); }
.mark-star.marked { background: rgba(255,176,32,.3); }

/* 已标记筛选按钮激活态 */
#btnFilterMarked.active {
  background: var(--amber); color: #000; border-color: var(--amber);
}

/* 查看器标记按钮 */
#vMark.marked {
  background: rgba(255,176,32,.2); color: var(--amber); border: 1px solid var(--amber);
}

/* ================= 标注链路总览（横向分层 / CNN 架构图风格） ================= */
.pipeline-panel {
  flex-shrink: 0; background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.pipe-head {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 16px; border-bottom: 1px solid transparent;
}
.pipeline-panel:not(.collapsed) .pipe-head { border-bottom-color: var(--border); }
.pipe-toggle {
  background: none; border: none; color: var(--text);
  display: flex; align-items: center; gap: 7px; padding: 2px 0;
}
.pipe-caret { color: var(--accent2); font-size: 12px; transition: transform .18s; }
.pipeline-panel.collapsed .pipe-caret { transform: rotate(-90deg); }
.pipe-title { font-size: 14px; font-weight: 600; }
.pipe-spacer { flex: 1; }
.pipeline-panel.collapsed .pipe-body { display: none; }

.pipe-body {
  max-height: 46vh; overflow: auto; padding: 16px 20px 22px;
  background:
    radial-gradient(circle at 1px 1px, rgba(122,160,255,.09) 1px, transparent 0) 0 0/22px 22px;
}
.pipe-empty { color: var(--text-dim); font-size: 13px; padding: 10px 4px; }

.pipe-canvas { position: relative; display: flex; gap: 84px;
  align-items: flex-start; min-width: max-content; }
.pipe-svg { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.pipe-edge { fill: none; stroke-width: 1.5; }
.edge-in { stroke: rgba(91,140,255,.42); }
.edge-out { stroke: rgba(122,160,255,.26); }

.pipe-col { display: flex; flex-direction: column; }
.col-input { justify-content: center; align-self: stretch; min-width: 152px; }
.col-model { justify-content: space-around; align-self: stretch; gap: 14px; min-width: 210px; }
.col-out { gap: 10px; min-width: 250px; }
.pipe-group { display: flex; flex-direction: column; gap: 10px; }
.pipe-group + .pipe-group { margin-top: 22px; }

.pipe-node {
  background: var(--panel2); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 14px; position: relative;
}
.pipe-node .pn-kind {
  font-size: 10px; letter-spacing: .6px; color: var(--text-dim); margin-bottom: 4px;
}
.pipe-node .pn-title { font-size: 14px; font-weight: 700; }
.pipe-node .pn-sub { font-size: 11px; color: var(--text-dim); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.pipe-node .pn-note { font-size: 11px; color: var(--text-dim); margin-top: 3px; }
.pipe-node .pn-stat { font-size: 11.5px; color: var(--text-dim); margin-top: 4px; }
.pipe-node .pn-stat b { color: var(--accent2); font-weight: 700; font-size: 13px; }

/* 输入节点 */
.node-input {
  background: linear-gradient(135deg, rgba(91,140,255,.16), rgba(91,140,255,.04));
  border-color: rgba(91,140,255,.5);
}
.node-input .pn-kind { color: var(--accent2); }
.node-input .pn-title { font-size: 15px; }

/* 模型节点 */
.node-model {
  background: linear-gradient(135deg, rgba(61,220,132,.10), rgba(61,220,132,.02));
  border-color: rgba(61,220,132,.32);
}
.node-model .pn-kind { color: var(--green); }

/* 产出节点 */
.node-out { cursor: pointer; transition: border-color .15s, transform .12s; }
.node-out:hover { border-color: var(--accent); transform: translateX(2px); }
.node-out.active {
  border-color: var(--amber);
  box-shadow: 0 0 0 1px rgba(255,176,32,.35), 0 0 16px rgba(255,176,32,.12);
}
.node-out.active .pn-title::after {
  content: "当前"; margin-left: 7px; font-size: 10px; font-weight: 500;
  color: var(--amber); border: 1px solid var(--amber);
  border-radius: 8px; padding: 0 5px; vertical-align: 1px;
}
.node-out .pn-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.node-out .pn-badge {
  font-size: 10.5px; color: var(--text-dim); border: 1px solid var(--border);
  border-radius: 8px; padding: 1px 7px; flex-shrink: 0; cursor: help;
  transition: color .15s, border-color .15s;
}
.node-out .pn-badge:hover { color: var(--accent2); border-color: var(--accent); }
.node-out .pn-bar {
  height: 3.5px; background: #2c3145; border-radius: 2px;
  overflow: hidden; margin: 7px 0 5px;
}
.node-out .pn-bar i { display: block; height: 100%; background: var(--green); }

/* 「X类」悬停提示 */
.class-tip {
  position: fixed; z-index: 500; pointer-events: none;
  background: var(--panel); border: 1px solid var(--accent);
  border-radius: 10px; padding: 10px 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.55);
  max-width: 560px;
}
.class-tip .ct-head { font-size: 11px; color: var(--text-dim); margin-bottom: 7px; }
.class-tip .ct-grid { display: flex; flex-wrap: wrap; gap: 5px; }
.class-tip .ct-item {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--text);
  background: var(--panel2); border: 1px solid var(--border);
  border-radius: 12px; padding: 2px 9px 2px 4px;
}
.class-tip .ct-item i {
  font-style: normal; font-size: 10px; color: var(--text-dim);
  background: rgba(122,160,255,.14); border-radius: 8px;
  min-width: 15px; text-align: center; padding: 0 3px;
}

/* 只看链路：隐藏下方数据集列表，链路图占满 */
body.pipe-solo .layout { display: none; }
body.pipe-solo .pipe-body { max-height: calc(100vh - 108px); }

@media (max-width: 960px) {
  .pipe-canvas { gap: 44px; }
  .col-model { min-width: 170px; }
  .col-out { min-width: 210px; }
  .pipe-node .pn-sub { max-width: 150px; }
}

/* ================= 双球工作台 · 2026-09-25 ================= */
:root { --bg:#0c111b; --panel:#121a27; --panel2:#192333; --border:#293449; --text:#e5edf8; --text-dim:#93a4bb; --accent:#7eabff; --green:#6dd9bd; }
[hidden] { display:none !important; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
input[type=search] { width:100%; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:7px; padding:8px 10px; margin-bottom:10px; font:inherit; }
.topbar { padding:12px 22px; background:#0e1521; }
.brand h1 { font-size:17px; letter-spacing:.5px; }
.brand .logo { color:var(--green); }
.paths { max-width:480px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.top-actions { flex-wrap:wrap; }
.btn { border-radius:7px; }
.pipeline-panel { background:linear-gradient(115deg,#121b2b,#0e1722); }
.pipe-head { padding:10px 22px; flex-wrap:wrap; }
.pipe-title { font-size:13px; }
#pipeSummary { color:#afbfce; }
#pipeStatus { font-size:10px; }
.pipe-body { padding:0 20px; max-height:none; overflow:visible; background:none; }
.galaxy-layout { display:grid; grid-template-columns:minmax(0,1fr) 278px; gap:20px; }
.galaxy-space { height:clamp(280px,35vh,400px); position:relative; min-width:0; user-select:none; touch-action:none; background:radial-gradient(ellipse at 30% 50%,#20304455,transparent 62%); overflow:hidden; }
.galaxy-wires { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.sphere-ring { fill:none; stroke:#4d6580; stroke-width:.7; opacity:.32; }
.galaxy-edge { fill:none; stroke:#5b748a; stroke-width:.8; opacity:.22; }
.galaxy-edge.lit { stroke:#6dd9bd; stroke-width:1.6; opacity:.9; }
.galaxy-edge.category.lit,.galaxy-edge.bridge { stroke:#e6bd83; opacity:.7; }
.galaxy-node { position:absolute; transform:translate(-50%,-50%); border:0; background:none; padding:0; width:30px; height:30px; display:flex; align-items:center; justify-content:center; --node:#6dd9bd; }
.galaxy-node.source { --node:#83afff; }.galaxy-node.model { --node:#b4a1f3; }.galaxy-node.category { --node:#e6bd83; }
.galaxy-node i { display:block; width:8px; height:8px; border-radius:50%; background:var(--node); box-shadow:0 0 13px color-mix(in srgb,var(--node) 35%,transparent); }
.galaxy-node.source i { width:15px;height:15px;box-shadow:0 0 0 7px #83afff14,0 0 28px #83afff70; }
.galaxy-node.model i { width:10px;height:10px;border-radius:2px;transform:rotate(45deg); }
.galaxy-node.category i { width:6px;height:6px; }
.galaxy-node span { position:absolute; top:24px; left:50%; margin-left:0; translate:-50% 0; white-space:nowrap; font-size:11px; line-height:18px; padding:0 5px; border-radius:4px; background:#101925e8; color:#aebed0; }
.galaxy-node.lit span { color:#edf5ff; }
.galaxy-node[aria-pressed=true] span { color:#101b27; background:#d8ece8; }
.galaxy-node[aria-pressed=true] i { box-shadow:0 0 0 5px color-mix(in srgb,var(--node) 20%,transparent),0 0 18px var(--node); }
.galaxy-node em { margin-left:5px; font-style:normal; font-size:9px; color:#6dd9bd; }
.galaxy-node[aria-pressed=true] em { color:#26594e; }
.sphere-title { position:absolute; top:10px; transform:translateX(-50%); font-size:11px; letter-spacing:1px; color:#a7bbd0; white-space:nowrap; pointer-events:none; }
.sphere-title span { color:#627b96; font-size:10px; margin-left:8px; letter-spacing:0; }
.galaxy-hub { position:absolute; transform:translate(-50%,-50%); border:1px solid #61543d; background:#1b2330; padding:3px 9px; color:#e6bd83; border-radius:20px; font-size:10px; pointer-events:none; z-index:50; }
.galaxy-detail { margin:8px 0; padding:16px 18px; border:1px solid #2d3d51; border-radius:12px; background:#152030; overflow:auto; max-height:clamp(264px,35vh - 16px,384px); scrollbar-width:thin; }
.galaxy-eyebrow { font-size:10px; color:#85a2be; letter-spacing:1px; }
.galaxy-detail h2 { font-size:21px; font-weight:600; margin:5px 0; overflow-wrap:anywhere; }
.galaxy-sub { font-size:11px; color:var(--text-dim); line-height:1.7; overflow-wrap:anywhere; }
.galaxy-metrics { display:flex; gap:22px; margin:14px 0 10px; }
.galaxy-metrics b { display:block; font-size:22px; font-weight:500; font-variant-numeric:tabular-nums; }
.galaxy-metrics span { font-size:10px; color:var(--text-dim); }
.galaxy-progress { height:3px; background:#28384d; border-radius:2px; overflow:hidden; }.galaxy-progress i { display:block; height:100%; background:var(--green); }
.galaxy-meta { display:flex; justify-content:space-between; font-size:10px; color:var(--text-dim); margin-top:5px; }
.galaxy-route { border-top:1px solid var(--border); padding-top:10px; margin-top:12px; font-size:11px; }.galaxy-route span { color:#617891; margin:0 3px; }
.galaxy-detail-actions { display:grid; gap:7px; margin-top:12px; }.galaxy-detail-actions .btn { font-size:12px; }
.galaxy-class-list { display:flex; gap:5px; flex-wrap:wrap; margin-top:12px; }
.galaxy-class-list button { font-size:10px; padding:3px 7px; background:#101925; color:#acbcd0; border:1px solid #2b3b50; border-radius:5px; }
.galaxy-class-list button[aria-pressed=true] { border-color:#e6bd83;color:#e6bd83; }.galaxy-class-list small { margin-right:4px; color:#6b819d; }
.galaxy-footer { display:flex; align-items:center; flex-wrap:wrap; gap:14px; padding:8px 0 12px; }
.galaxy-legend { display:flex; gap:14px; font-size:10px; color:#83afff; }.galaxy-legend span:nth-child(2){color:#b4a1f3}.galaxy-legend span:nth-child(3){color:#6dd9bd}.galaxy-legend span:nth-child(4){color:#e6bd83}
.galaxy-help { font-size:10px; color:#6f859e; flex:1; }.galaxy-controls { display:flex; gap:6px; }
.galaxy-controls .btn { font-size:10px; padding:4px 9px; }
body.pipe-solo .pipe-body { max-height:none; }
body.pipe-solo .galaxy-space { height:calc(100vh - 195px); min-height:400px; }
body.pipe-solo .galaxy-detail { max-height:calc(100vh - 215px); }
.sidebar { width:248px; min-width:220px; padding:16px; background:#111925; scrollbar-width:thin; }
.sidebar .panel { margin-bottom:20px; }
.sidebar h3 { margin-bottom:10px; font-size:12px; flex-wrap:wrap; gap:6px; }
.stat-grid { gap:6px; }.stat-cell { background:#192434; padding:8px 10px; }.stat-cell .n { font-size:20px; font-weight:500; }
.stat-distribution { grid-column:1/-1; padding-top:7px; }.stat-distribution summary { font-size:11px;color:var(--text-dim);cursor:pointer; }.stat-distribution>div { margin-top:8px;display:flex;flex-wrap:wrap;gap:4px; }
.class-list { max-height:180px; overflow:auto; scrollbar-width:thin; }.class-chip { font-size:11px; border-radius:6px; padding:4px 7px; }
.advanced-filters summary { cursor:pointer;font-size:12px;font-weight:600; }.advanced-filters summary span { display:block; color:var(--text-dim);font-size:10px;font-weight:400;margin:5px 0 10px; }
.folder-list { max-height:200px; overflow:auto; scrollbar-width:thin; }
.workbench-heading { padding:15px 20px 10px; display:flex;align-items:center;justify-content:space-between;gap:16px; flex-shrink:0; }
.workbench-kicker { font-size:9px;letter-spacing:1.8px;color:#6f859e; }.workbench-heading h2 { font-size:17px;font-weight:600;margin-top:3px; }
.active-filters { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:0 20px 10px;flex-shrink:0; }
.filter-chip { border:1px solid #36516e; background:#192c40; border-radius:5px; color:#b9d6f9; padding:3px 8px; font-size:11px; }
.toolbar { padding:9px 20px;gap:10px;flex-wrap:wrap; background:#111a27; }.toolbar .left,.toolbar .right {gap:7px;flex-wrap:wrap}.toolbar .center {margin-left:auto;display:flex;align-items:center;gap:10px; flex-wrap:wrap; }
.toolbar .btn {font-size:11px;padding:5px 9px}.toolbar .right {margin-left:auto;}
.more-actions { position:relative; }.more-actions summary {list-style:none;cursor:pointer}.more-actions summary::-webkit-details-marker{display:none}.more-actions>div {position:absolute;right:0;top:35px;background:var(--panel);border:1px solid var(--border);padding:10px;z-index:100;white-space:nowrap;border-radius:8px;box-shadow:0 12px 35px #0008;}
.grid-wrap {padding:16px 20px;}.grid {grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:12px}.card {border-radius:9px;background:#141e2b;}.card .meta {padding:9px}.card .fname{font-size:11px}.card .class-chips{font-size:10px}.pager{padding:9px;}
.v-tools {flex-wrap:wrap;}.v-tools .danger,.v-tools .danger-ghost {font-size:11px}.v-side {background:#111b29;}.canvas-tip {max-width:calc(100% - 30px);font-size:10px;}
.guest-mode #btnDeleteSel,.guest-mode #btnSelAll,.guest-mode #btnSelNone,.guest-mode .selbox {display:none!important;}
@media(max-width:1100px) { .galaxy-layout{grid-template-columns:minmax(0,1fr) 245px;gap:10px}.galaxy-help{display:none}.topbar{padding:10px 14px}.paths{max-width:280px}.toolbar .center{order:3;width:100%;margin:0}.workbench-heading>span{display:none} }
@media(max-width:800px) { html,body{height:auto;min-height:100%;overflow:auto}.topbar{flex-wrap:wrap;gap:10px}.top-actions{gap:6px}.pipeline-panel{flex-shrink:0}.pipe-head{padding:10px 14px}#pipeStatus{display:none}.pipe-body{padding:0 12px}.galaxy-layout{grid-template-columns:1fr}.galaxy-space{height:560px}.galaxy-detail{max-height:280px;margin:0}.galaxy-footer{justify-content:space-between}.galaxy-controls{flex-wrap:wrap}.layout{display:flex;flex-direction:column;min-height:600px}.sidebar{width:100%;min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px}.sidebar .panel{margin:0}.sidebar .panel:first-child{grid-column:1/-1}.sidebar .advanced-filters{grid-column:1/-1}.main{min-height:500px}.grid-wrap{overflow:visible}.grid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr))}.toolbar .right{margin-left:0}.workbench-heading{padding:14px}.active-filters{padding:0 14px 10px}.v-side{width:230px;min-width:180px}.viewer-body{min-height:0}body.pipe-solo .galaxy-space{height:560px;min-height:0}body.pipe-solo .galaxy-detail{max-height:300px} }
@media(prefers-reduced-motion:reduce) { * {scroll-behavior:auto!important;} }
@media(max-width:800px) {
  .topbar{height:auto;min-height:60px}.paths{max-width:300px}
  .viewer-body{flex-direction:column}.canvas-area{min-height:240px}.v-side{width:100%;min-width:0;max-height:180px;border-left:0;border-top:1px solid var(--border)}
  .v-title{max-width:100%}.v-title span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.canvas-tip{white-space:normal;border-radius:8px;width:90%}
}
.viewer-danger>div{display:grid;gap:8px}.viewer-help>div{font-size:12px;line-height:2;color:var(--text-dim)}
.card .overlay-num{right:38px}.card .mark-star{right:7px}
body.pipe-solo .layout{display:none!important}
.galaxy-detail{align-self:start;width:100%}

/* ================= v2 · 独立视图与页面滚动 ================= */
html,body { height:auto; min-height:100%; overflow:visible; }
body { display:block; }
.topbar { height:auto; min-height:64px; }
.view-nav { position:sticky; top:0; z-index:150; display:flex; justify-content:space-between; align-items:center; gap:20px; min-height:54px; padding:0 24px; border-bottom:1px solid var(--border); background:#101925; }
.view-tabs { display:flex; align-self:stretch; gap:28px; }
.view-tab { padding:16px 2px 13px; background:none; border:0; border-bottom:3px solid transparent; color:var(--text-dim); font-size:14px; font-weight:600; }
.view-tab.active { border-bottom-color:var(--green); color:#e8f5f1; }
.view-tab:hover { color:#e8f5f1; }
.view-description { font-size:11px; color:#829ab4; }
body[data-view=workspace] .pipeline-panel { display:none; }
body[data-view=galaxy] .layout { display:none!important; }
.layout { min-height:calc(100dvh - 120px); align-items:stretch; }
.sidebar { flex:0 0 264px; width:264px; min-width:0; overflow:visible; padding:22px 20px; }
.sidebar .panel { margin-bottom:24px; }
.class-list,.folder-list { max-height:none; overflow:visible; }
.main { overflow:visible; min-height:0; }
.workbench-heading { padding:20px 24px 12px; scroll-margin-top:65px; }
.workbench-heading h2 { font-size:22px; }
.workbench-heading>span { display:inline; }
.workspace-context { display:flex; align-items:center; gap:10px; }
.active-filters { padding:0 24px 14px; }
.toolbar { padding:11px 24px; }
.grid-wrap { flex:none; overflow:visible; padding:20px 24px; }
.grid { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; }
.card .meta { padding:11px; }
.pager { padding:16px 24px 24px; border-top:1px solid var(--border); }
#btnFilters { display:none; }
.pipeline-panel { min-height:calc(100dvh - 120px); }
.pipe-head { padding:18px 24px; }
.pipe-body { overflow:visible; max-height:none; padding:0 24px 16px; }
.galaxy-layout { grid-template-columns:minmax(0,1fr) 320px; gap:24px; align-items:start; }
.galaxy-space { height:clamp(560px,calc(100dvh - 244px),820px); overflow:visible; }
.galaxy-detail { max-height:none; overflow:visible; height:auto; margin:8px 0 0; padding:22px; }
.galaxy-detail h2 { font-size:26px; }
.galaxy-metrics { margin:20px 0 14px; }
.galaxy-detail-actions { margin-top:18px; }
.galaxy-class-list { margin-top:18px; gap:7px; }
.galaxy-class-list button { padding:5px 8px; font-size:11px; }
.galaxy-footer { padding:18px 0 8px; }
.galaxy-node span { font-size:12px; }
@media(max-width:1100px) {
  .galaxy-layout { grid-template-columns:minmax(0,1fr) 280px;gap:16px; }
  .sidebar { flex-basis:240px;width:240px; }
  .workspace-context .mini { display:none; }
  .toolbar .center { order:0;width:auto; }
}
@media(max-width:800px) {
  .view-nav { padding:0 16px;min-height:52px; }
  .view-tabs { gap:24px; }.view-tab { font-size:13px; }.view-description { display:none; }
  .layout { flex-direction:column;min-height:calc(100dvh - 200px); }
  .sidebar { display:none;width:100%;flex-basis:auto;padding:16px; }
  body.mobile-filters-open .sidebar { display:grid;grid-template-columns:1fr 1fr;gap:20px; }
  .main { min-height:0; }.workbench-heading { padding:18px 16px 12px; }.workbench-heading h2{font-size:20px}
  #btnFilters { display:inline-block; }.active-filters{padding:0 16px 12px}.toolbar{padding:10px 16px}
  .grid-wrap{padding:16px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pipe-head { padding:16px;gap:10px; }.pipe-body{padding:0 16px 16px}.pipe-title{width:100%}
  .galaxy-layout{grid-template-columns:1fr;gap:12px}.galaxy-space{height:650px}.galaxy-detail{max-height:none;margin:0}
  .galaxy-help{display:block;flex-basis:100%}.galaxy-footer{gap:12px}.galaxy-controls{flex-wrap:wrap}
}

/* ================= v3 · 标签到图片的连续浏览 ================= */
.galaxy-pick-hint { font-size:12px; color:#d8c59f; margin-top:12px; line-height:1.7; }
.galaxy-pick-hint span { color:var(--text-dim);font-size:11px; }
.galaxy-class-list button[aria-pressed=true] { background:#483a27;color:#ffe0a5;border-color:#d6b475; }
.galaxy-class-list button[aria-pressed=true] small { color:#ffe0a5; }
.galaxy-node.category[aria-pressed=true] span {background:#ead4ad;color:#292314;}
.galaxy-node.category:disabled { opacity:.5;cursor:not-allowed; }
.has-tag-results .galaxy-space {height:340px;}
.has-tag-results .galaxy-detail {padding:16px 18px;}
.has-tag-results .galaxy-detail .galaxy-metrics,
.has-tag-results .galaxy-detail .galaxy-progress,
.has-tag-results .galaxy-detail .galaxy-meta,
.has-tag-results .galaxy-detail .galaxy-route,
.has-tag-results .galaxy-detail .galaxy-sub,
.has-tag-results .galaxy-detail .galaxy-detail-actions {display:none;}
.has-tag-results .galaxy-detail h2{font-size:21px;margin:4px 0;}
.has-tag-results .galaxy-class-list{margin-top:10px;gap:6px;}
.has-tag-results .galaxy-class-list button{padding:4px 7px;}
.has-tag-results .galaxy-pick-hint{margin-top:6px;}
.has-tag-results .galaxy-footer{padding:10px 0 0;}
.tag-results {padding:22px 24px 30px;background:#0c141f;border-top:1px solid #364333;animation:tag-reveal .25s ease-out;}
.tag-results-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.tag-results-heading h2{font-size:19px;font-weight:600;margin:4px 0 0;}
.tag-results-heading .workbench-kicker{color:#bdad8c;}
.tag-selection-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;}
#tagSelectedChips{display:flex;gap:7px;flex-wrap:wrap;}
#tagSelectedChips .filter-chip{background:#342e23;border-color:#756343;color:#ead4ad;}
.tag-results-status{font-size:12px;color:#a5b8cd;margin:16px 0 12px;min-height:19px;}
.tag-image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;}
.tag-image-card{display:block;width:100%;text-align:left;padding:0;border:1px solid #2e3e53;border-radius:10px;overflow:hidden;background:#172332;transition:border-color .15s,transform .15s;}
.tag-image-card:hover{border-color:#b7a079;transform:translateY(-2px);}
.tag-thumb{aspect-ratio:4/3;position:relative;background:#1d2c3e;}
.tag-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.tag-thumb>span{position:absolute;top:9px;right:9px;background:#0b121dcc;padding:3px 7px;border-radius:6px;font-size:10px;}
.tag-image-meta{padding:11px;}
.tag-image-meta strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:500;}
.tag-image-meta>span{display:block;color:#e2cba1;font-size:11px;margin-top:6px;}
.tag-results-pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px;}
@keyframes tag-reveal{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1100px){.tag-image-grid{grid-template-columns:repeat(auto-fill,minmax(165px,1fr));}}
@media(max-width:800px){
 .has-tag-results .galaxy-space{height:560px;}.has-tag-results .galaxy-detail{padding:16px;}
 .tag-results{padding:18px 16px;}.tag-results-heading{align-items:flex-start;flex-direction:column;gap:10px;}
 .tag-image-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}.tag-results-heading h2{font-size:18px;}
}
@media(prefers-reduced-motion:reduce){.tag-results{animation:none}.tag-image-card{transition:none}}
/* Navigation stays below all modal dialogs, including after document scrolling. */
.view-nav{z-index:40}
.galaxy-space{isolation:isolate}

/* 第二轮 · 显示方式与标签关系独立，切换视图保留筛选。 */
.galaxy-view-switch{display:flex;padding:3px;gap:3px;border:1px solid var(--border);border-radius:8px;background:#0b1420;}
.galaxy-view-switch button{padding:6px 12px;background:transparent;color:var(--text-dim);border:0;border-radius:5px;font-size:12px;white-space:nowrap;}
.galaxy-view-switch button[aria-pressed=true]{background:#25413e;color:#9be6d5;}
.galaxy-filter-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 24px;border-bottom:1px solid var(--border);}
.galaxy-filter-bar label,.class-match-label{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-dim);}
.galaxy-filter-bar select,.class-match-label select{background:var(--panel2);color:var(--text);border:1px solid var(--border);border-radius:6px;color-scheme:dark;width:auto;padding:5px 8px;font-size:12px;}
.class-match-label{margin-bottom:10px;}
#galaxyOtherFilters{color:#d6bd92;overflow-wrap:anywhere;}
@media(max-width:800px){.galaxy-filter-bar{padding:12px 16px;gap:10px;}.galaxy-filter-bar>span:first-child{width:100%;}.galaxy-view-switch{max-width:100%;}}

@media(min-width:801px){.galaxy-space{height:clamp(520px,calc(100dvh - 322px),820px);}.has-tag-results .galaxy-space{height:340px;}}

/* v6: saved filters and category image counts. */
.saved-filter-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 24px;border-bottom:1px solid var(--border);background:var(--panel);}
.saved-filter-bar input{width:150px;padding:6px 9px;}.saved-filter-bar select{max-width:220px;padding:6px;background:var(--panel2);color:var(--text);border:1px solid var(--border);border-radius:6px;color-scheme:dark;}
.galaxy-class-search{display:block;margin-top:12px;}.galaxy-class-search input{width:100%;padding:6px 9px;}.galaxy-class-search>span{display:block;font-size:10px;color:var(--text-dim);margin-top:5px;}
.galaxy-class-count{font-size:10px;opacity:.8;margin-left:6px;}
.galaxy-class-list button[hidden]{display:none!important;}
@media(min-width:801px){.galaxy-space{height:clamp(520px,calc(100dvh - 376px),820px);}.has-tag-results .galaxy-space{height:350px;}}
@media(max-width:800px){.saved-filter-bar{padding:10px 16px;gap:8px;}.saved-filter-bar>.mini{width:100%;}.saved-filter-bar select{max-width:195px;}}

/* v6.1: status filter shared by the graph result and workspace. */
.galaxy-status-filter{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.galaxy-status-filter .seg{width:auto;}
.galaxy-status-filter .seg button{padding:6px 10px;white-space:nowrap;}
@media(max-width:800px){.galaxy-status-filter{width:100%;flex-wrap:wrap;}.galaxy-status-filter .seg{flex:1;}}

/* v6.3: keep the current output overview distinct from filtered image results. */
.overview-output{font-weight:600;margin:4px 0 7px;overflow-wrap:anywhere;}
.overview-scope{line-height:1.6;margin-bottom:12px;color:var(--text-dim);}
.overview-distribution{width:100%;border-collapse:collapse;margin-top:8px;font-size:11px;}
.overview-distribution th,.overview-distribution td{text-align:left;padding:5px 3px;border-bottom:1px solid var(--border);font-weight:400;}
.overview-distribution td{white-space:nowrap;}.stat-distribution>p{margin-top:8px;line-height:1.6;}