/* 布局：和工作台同一套外观（浅灰底、白卡片、系统中文字体）。上面传文件，中间按版本和分组排的设计图墙，下面点开一张看标注 */
:root {
  --bg: var(--ui-bg-secondary);
  --surface: var(--ui-bg);
  --fill: var(--ui-fill-2);
  --fill-soft: var(--ui-fill-3);
  --sep: var(--ui-separator);
  --label: var(--ui-text-primary);
  --label-2: var(--ui-text-secondary);
  --label-3: var(--ui-text-secondary);
  --accent: var(--ui-accent);
  --accent-text: var(--ui-selection-text);
  --accent-soft: var(--ui-selection-bg);
  --green: var(--ui-success); --green-soft: var(--ui-palette-green-bg);
  --orange: var(--ui-warning); --orange-soft: var(--ui-palette-orange-bg);
  --red: var(--ui-danger); --red-soft: var(--ui-palette-pink-bg);
  --measure: var(--ui-measure-pink);
  --hover: var(--ui-measure-pink);
  --changed: var(--ui-warning);
  --board-ground: var(--ui-bg-secondary);
  --shadow: var(--ui-shadow-1);
  --sans: var(--ui-font);
  --mono: var(--ui-font-code);
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  background: var(--bg); color: var(--label); font: var(--ui-font-weight-body) var(--ui-font-size-body)/var(--ui-line-height-body) var(--ui-font);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 24px 56px;
}
main { max-width: 1280px; margin-inline: auto; display: grid; gap: 28px; }
main > * { min-width: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
/* 只给真正获得焦点的控件画框；不给外面的 label 画，免得弹窗里整行被蓝框圈住 */
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 包在 .ui-input / .ui-search / .ui-select 里的控件由外框显示焦点，这里不再加第二圈 */
.ui-input:focus-visible, .ui-search input:focus-visible, .ui-select select:focus-visible { outline: none; }
h1 { font-size: var(--ui-font-size-display); line-height: var(--ui-line-height-display); margin: 0; font-weight: var(--ui-font-weight-display); letter-spacing: -.01em; text-wrap: balance; }
h2 { font-size: var(--ui-font-size-title); margin: 0; font-weight: var(--ui-font-weight-title); text-wrap: balance; }
h3 { margin: 0; }
p { margin: 0; }
.muted { color: var(--label-3); }
.small { font-size: var(--ui-font-size-callout); }
.num { font-variant-numeric: tabular-nums; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; }
.head .sub { color: var(--label-3); font-size: var(--ui-font-size-headline); }
.sample-note { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--orange-soft); color: var(--orange); font-size: var(--ui-font-size-callout); font-weight: 500; }

.sec { display: grid; gap: 12px; }
.sec-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.sec-title span { color: var(--label-3); font-size: var(--ui-font-size-callout); }
.card { background: var(--surface); border-radius: 14px; box-shadow: var(--shadow); }

.ways { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.way { padding: 14px 16px; display: grid; gap: 6px; align-content: start; }
.way-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.way-name { font-weight: 600; font-size: var(--ui-font-size-headline); }
.way-how { font-size: var(--ui-font-size-callout); color: var(--label-2); }
.way-gets { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--ui-font-size-caption); color: var(--label-3); }
.got { color: var(--green); } .miss { color: var(--label-3); text-decoration: line-through; }
.pill { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: var(--ui-font-size-caption); font-weight: 500; white-space: nowrap; }
.pill.green { background: var(--green-soft); color: var(--green); }
.pill.orange { background: var(--orange-soft); color: var(--orange); }
.pill.gray { background: var(--fill); color: var(--label-2); }
.pill.blue { background: var(--accent-soft); color: var(--accent-text); }
.pill.red { background: var(--red-soft); color: var(--red); }
.pill.purple { background: var(--ui-palette-purple-bg); color: var(--ui-palette-purple-fg); }

.drop { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; align-items: center; padding: 18px; border: 1.5px dashed var(--sep); border-radius: 14px; background: var(--surface); }
.drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop-text b { font-weight: 600; }
.drop-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; }
.btn { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 14px; border-radius: 999px; background: var(--fill); font-weight: 500; font-size: var(--ui-font-size-body); white-space: nowrap; }
.btn:hover { background: var(--fill-soft); }
.btn.primary { background: var(--accent); color: var(--ui-bg); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.plain { background: none; color: var(--accent-text); padding-inline: 6px; }
.btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); }
.select { min-height: 34px; padding: 4px 28px 4px 12px; border-radius: 999px; border: 0; background: var(--fill); color: var(--label); font: var(--ui-font-weight-body-strong) var(--ui-font-size-body) var(--sans); }
.jobs { grid-column: 1 / -1; display: grid; gap: 6px; }
.job { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: var(--ui-font-size-callout); padding: 8px 10px; border-radius: 10px; background: var(--fill-soft); }
.job .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: blink 1s infinite; }
.job.done .dot { background: var(--green); animation: none; }
.job.fail .dot { background: var(--red); animation: none; }
.job.warning .dot { background: var(--ui-warning); animation: none; }
.job-warnings { grid-column: 1 / -1; color: var(--ui-text-secondary); overflow-wrap: anywhere; }
.job-warnings ul { padding-left: var(--ui-space-24); }
.job-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-state { color: var(--label-3); font-variant-numeric: tabular-nums; text-align: right; }
.job.fail .job-state { color: var(--red); }
@keyframes blink { 50% { opacity: .3; } }

.wall-card { display: grid; }
.wall-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; border-bottom: 1px solid var(--sep); }
.wall-head .task { color: var(--accent-text); font-weight: 500; }
.search { min-height: 32px; padding: 4px 12px; border-radius: 999px; border: 0; background: var(--fill); color: var(--label); font: var(--ui-font-size-body) var(--sans); width: min(220px, 100%); margin-left: auto; }
.group { border-bottom: 1px solid var(--sep); }
.group:last-child { border-bottom: 0; }
.group-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 16px 0; width: 100%; text-align: left; }
.group-head h3 { font-size: var(--ui-font-size-headline); font-weight: 600; }
.group-head .chev { transition: transform .15s; color: var(--label-3); }
.group[data-closed="true"] .chev { transform: rotate(-90deg); }
.group[data-closed="true"] .wall { display: none; }
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px 12px; padding: 12px 16px 16px; }
.art { display: grid; gap: 6px; text-align: left; border-radius: 12px; padding: 8px; align-content: start; min-width: 0; }
.art:hover { background: var(--fill-soft); }
.art[aria-current="true"] { background: var(--accent-soft); }
.thumb { position: relative; justify-self: center; width: 135px; height: 220px; border-radius: 10px; overflow: hidden; background: var(--board-ground); box-shadow: 0 0 0 1px var(--sep); display: grid; place-items: start center; }
.thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.thumb.wide img { object-fit: contain; object-position: center; }
.art-name { font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; overflow-wrap: anywhere; font-size: var(--ui-font-size-callout); }
.art-meta { font-size: var(--ui-font-size-caption); color: var(--label-3); display: flex; flex-wrap: wrap; gap: 2px 8px; }
.empty { padding: 28px 16px; text-align: center; color: var(--label-3); }

.inspect { display: grid; grid-template-columns: minmax(0, 1fr) 360px; min-height: 0; }
.stage { min-width: 0; padding: 14px 16px 20px; display: grid; gap: 10px; align-content: start; background: var(--board-ground); border-radius: 14px 0 0 14px; }
.stage-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.stage-bar .title { font-weight: 600; margin-right: auto; overflow-wrap: anywhere; }
.seg { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--fill); }
.seg button { padding: 3px 10px; border-radius: 7px; font-size: var(--ui-font-size-callout); color: var(--label-2); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--label); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.board-wrap { overflow: auto; max-height: 78vh; display: flex; justify-content: center; align-items: flex-start; padding: 6px 4px; }
.board { position: relative; flex: none; background: #FFFFFF; box-shadow: 0 2px 16px rgba(0,0,0,.12); cursor: default; user-select: none; }
.board.adding { cursor: crosshair; }
.board > img.full { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.layer { position: absolute; overflow: hidden; white-space: nowrap; }
.overlay { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.pin { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50% 50% 50% 4px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.3); pointer-events: auto; transform: rotate(-45deg); }
.pin span { transform: rotate(45deg); }
.pin.done { background: #8E8E93; }
.pin[aria-pressed="true"] { outline: 3px solid #FFFFFF; }
.hint { font-size: 12px; color: var(--label-3); }

.panel { min-width: 0; border-left: 1px solid var(--sep); display: grid; grid-template-rows: auto minmax(0, 1fr); }
.tabs { display: flex; gap: 2px; padding: 10px 12px 0; border-bottom: 1px solid var(--sep); overflow-x: auto; }
.tabs button { padding: 8px 10px; border-bottom: 2px solid transparent; color: var(--label-2); font-weight: 500; white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--label); border-bottom-color: var(--accent); }
.tabbody { padding: 14px 16px 18px; display: grid; gap: 14px; align-content: start; max-height: 82vh; overflow-y: auto; }
.kv { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px 10px; align-items: center; font-size: 13px; margin: 0; }
.kv dt { color: var(--label-3); margin: 0; }
.kv dd { margin: 0; font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; overflow-wrap: anywhere; }
.kv dd .text { font-family: var(--sans); font-size: 13px; }
.swatch { width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); flex: none; }
.layer-name { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; overflow-wrap: anywhere; }
.layer-path { font-size: 12px; color: var(--label-3); overflow-wrap: anywhere; }
.box { border-radius: 10px; background: var(--fill-soft); padding: 10px 12px; font-size: 13px; color: var(--label-2); }
pre.code { margin: 0; padding: 12px; border-radius: 10px; background: var(--fill-soft); font: 12px/1.65 var(--mono); overflow-x: auto; white-space: pre; color: var(--label); }
.code-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.slices { display: grid; gap: 2px; }
.slice { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--sep); text-align: left; width: 100%; }
.slice:last-child { border-bottom: 0; }
.slice-icon { width: 40px; height: 40px; border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--sep); background-color: var(--fill-soft); background-repeat: no-repeat; }
.slice-sizes { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.slice-sizes span { padding: 2px 7px; border-radius: 6px; background: var(--fill); font-size: 12px; color: var(--label-2); }
.comments { display: grid; gap: 10px; }
.cmt { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 10px; border-radius: 10px; text-align: left; }
.cmt:hover { background: var(--fill-soft); }
.cmt[aria-pressed="true"] { background: var(--accent-soft); }
.cmt .no { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.cmt.done .no { background: #8E8E93; }
.cmt-who { font-size: 12px; color: var(--label-3); }
.cmt-who b { color: var(--label); font-weight: 600; }
.at { color: var(--accent-text); font-weight: 500; }
textarea { width: 100%; min-height: 70px; resize: vertical; border: 1px solid var(--sep); border-radius: 10px; padding: 8px 10px; font: 14px/1.5 var(--sans); background: var(--surface); color: var(--label); }
.changes { display: grid; gap: 6px; }
.change { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 8px 10px; border-radius: 10px; background: var(--orange-soft); font-size: 13px; text-align: left; }
.change b { font-weight: 600; overflow-wrap: anywhere; }
.change .vals { font-family: var(--mono); font-size: 12px; color: var(--label-2); grid-column: 1 / -1; overflow-wrap: anywhere; }

.notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.note { padding: 14px 16px; display: grid; gap: 6px; align-content: start; }
.note h3 { font-size: 15px; }
.note li { font-size: 13px; color: var(--label-2); }
.note ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; }

/* 标注：分段、渐变色条、图层树 */
.spec-sec { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--sep); }
.spec-sec > b { font-size: 13px; }
.grad-bar { height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.stop-row { display: flex; align-items: center; gap: 8px; font: 12.5px var(--mono); }
.run { display: grid; gap: 2px; padding: 6px 8px; border-radius: 8px; background: var(--fill-soft); font-size: 12.5px; }
.tree { display: grid; gap: 0; font-size: 13px; }
.tree-row { display: flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 6px; border-radius: 6px; text-align: left; width: 100%; white-space: nowrap; }
.tree-row:hover { background: var(--fill-soft); }
.tree-row[aria-current="true"] { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.tree-row .ic { flex: none; width: 18px; height: 18px; border-radius: 4px; display: grid; place-items: center; font-size: 10px; font-weight: 700; background: var(--fill); color: var(--label-2); }
.tree-row .nm { overflow: hidden; text-overflow: ellipsis; }
.tree-row .tp { margin-left: auto; color: var(--label-3); font-size: 11px; }

/* 快捷键：清单、提示、平移时的手形、点数值复制 */
.board-wrap.panning, .board-wrap.panning .board { cursor: grab; }
.board-wrap.dragging, .board-wrap.dragging .board { cursor: grabbing; }
.cp { cursor: copy; border-radius: 4px; padding: 0 2px; margin: 0 -2px; }
.cp:hover { background: var(--accent-soft); color: var(--accent-text); }
.fmt { padding: 0 6px; border-radius: 6px; background: var(--fill); font-size: 11px; color: var(--label-2); }
.stale-build-banner { position: fixed; top: max(12px, env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 95; display: flex; align-items: center; gap: var(--ui-space-12); padding: var(--ui-space-8) var(--ui-space-8) var(--ui-space-8) var(--ui-space-16); border: var(--ui-border-0); border-radius: var(--ui-radius-8); background: var(--ui-bg); color: var(--ui-text-primary); font-size: var(--ui-font-size-callout); box-shadow: var(--ui-shadow-3); }
.toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 90; padding: var(--ui-space-8) var(--ui-space-16); border: var(--ui-border-0); border-radius: var(--ui-radius-8); background: var(--ui-bg); color: var(--ui-text-primary); font-size: var(--ui-font-size-callout); box-shadow: var(--ui-shadow-3); }
.kbd-panel { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 80; width: min(420px, calc(100vw - 32px)); max-height: min(640px, calc(100vh - 32px)); overflow: auto; background: var(--surface); border-radius: var(--ui-radius-12); box-shadow: var(--ui-shadow-3); padding: var(--ui-space-16); display: grid; gap: var(--ui-space-12); }
.kbd-panel h3 { font-size: var(--ui-font-size-headline); display: flex; align-items: center; justify-content: space-between; }
.kbd-panel h4 { margin: var(--ui-space-4) 0 0; font-size: var(--ui-font-size-caption); color: var(--label-3); font-weight: var(--ui-font-weight-body-strong); }
.kbd-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--ui-space-12); align-items: center; font-size: var(--ui-font-size-callout); padding: var(--ui-space-4) 0; }
.kbd-row .lh { font-size: var(--ui-font-size-label); color: var(--accent-text); margin-left: var(--ui-space-4); }
kbd { display: inline-block; min-width: 22px; padding: 1px var(--ui-space-4); border-radius: var(--ui-radius-6); background: var(--fill); border-bottom: 2px solid var(--sep); font: var(--ui-font-weight-label) var(--ui-font-size-caption) var(--ui-font); color: var(--label); text-align: center; }
.kbd-fab { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 70; min-height: 36px; padding: 6px var(--ui-space-12); border-radius: var(--ui-radius-8); background: var(--surface); box-shadow: var(--ui-shadow-2); font-size: var(--ui-font-size-callout); font-weight: var(--ui-font-weight-body-strong); }

@media (max-width: 900px) {
  .inspect { grid-template-columns: minmax(0, 1fr); }
  .stage { border-radius: 14px 14px 0 0; }
  .panel { border-left: 0; border-top: 1px solid var(--sep); }
}
@media (max-width: 560px) {
  .drop { grid-template-columns: minmax(0, 1fr); }
  .drop-actions { justify-content: flex-start; }
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px 12px 14px; }
  .thumb { width: 100%; max-width: 100%; height: auto; aspect-ratio: 135 / 220; }
  .search { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .job .dot { animation: none; } }

/* 全屏查看：图层、画布、属性三栏 */
#inspect-section { position: fixed; inset: 0; z-index: 50; background: var(--surface); }
#inspect-section > .sec-title { display: none; }
#inspect-section > .inspect { height: 100dvh; border-radius: 0; grid-template-columns: 240px minmax(0, 1fr) 340px; }
.layers-sidebar { min-width: 0; overflow: auto; border-right: 1px solid var(--sep); background: var(--surface); }
.layers-head { position: sticky; top: 0; z-index: 1; padding: 16px; border-bottom: 1px solid var(--sep); background: var(--surface); }
#layer-tree { padding: 12px; }
#layer-tree .tree { overflow: auto; }
#inspect-section .stage { border-radius: 0; grid-template-rows: auto auto minmax(0, 1fr); height: 100dvh; }
#inspect-section .board-wrap { max-height: none; height: 100%; }
#inspect-section .tabbody { max-height: none; }
@media (max-width: 900px) {
  #inspect-section > .inspect { grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: minmax(0, 1fr) auto; }
  #inspect-section .layers-sidebar { grid-column: 1 / -1; grid-row: 2; max-height: 25vh; border-right: 0; border-top: 1px solid var(--sep); }
  #inspect-section .stage { grid-row: 1; height: auto; min-height: 0; }
  #inspect-section .panel { grid-row: 1; border-top: 0; border-left: 1px solid var(--sep); }
}
@media (max-width: 600px) {
  #inspect-section > .inspect { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(200px, 1fr) minmax(120px, 35vh) auto; }
  #inspect-section .stage { grid-row: 1; padding: 8px; }
  #inspect-section .panel { grid-row: 2; border-left: 0; border-top: 1px solid var(--sep); }
  #inspect-section .layers-sidebar { grid-row: 3; max-height: 18vh; }
  #inspect-section .layers-head { padding: 6px 12px; }
  #layer-tree { padding: 4px 12px; }
}

/* 浅色窗口、工具栏和三栏查看器。 */
body { font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
.btn, .select, select, input { border-radius: var(--ui-radius-8); }
.btn { min-height: 30px; padding: var(--ui-space-4) var(--ui-space-12); border: var(--ui-border-0); background: var(--ui-bg); box-shadow: var(--ui-shadow-1); font-size: var(--ui-font-size-callout); }
.btn:hover { background: var(--ui-bg-secondary); }
.btn.primary { background: var(--ui-accent); color: var(--ui-bg); border-color: var(--ui-accent); }
.btn.plain { border-color: transparent; box-shadow: none; }
.select { min-height: 30px; border: var(--ui-border-0); background: var(--ui-bg); font-size: var(--ui-font-size-callout); }
.kv dd, .stop-row, .change .vals, kbd { font-family: var(--sans); font-variant-numeric: tabular-nums; }
kbd { background: var(--ui-bg); border: var(--ui-border-0); border-bottom-width: 2px; font-size: var(--ui-font-size-label); }
#inspect-section { display: block; }
#inspect-section > .inspect { display: grid; grid-template-columns: 256px minmax(0, 1fr) 336px; grid-template-rows: var(--ui-toolbar-height) minmax(0, 1fr); overflow: hidden; }
#inspect-section .stage-bar { grid-column: 1 / -1; grid-row: 1; min-width: 0; flex-wrap: nowrap; overflow-x: auto; padding: 0 var(--ui-space-32); gap: 8px; border-bottom: var(--ui-border-0); background: var(--ui-bg); }
#inspect-section .stage-bar > * { flex-shrink: 0; }
#inspect-section .stage-bar .title { flex: 1 0 130px; min-width: 130px; font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#inspect-section .stage-bar label { color: #6E6E73; font-size: 11.5px; }
#inspect-section .stage-bar :is(#prototype, #share, #compare, #add-pin) { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 48px; min-height: 48px; padding: 3px 5px; border: 0; border-radius: 9px; box-shadow: none; background: transparent; color: #6E6E73; font-size: 10.5px; }
#inspect-section .stage-bar :is(#prototype, #share, #compare, #add-pin)::before { content: ''; width: 18px; height: 18px; background: currentColor; mask-position: center; mask-size: contain; mask-repeat: no-repeat; }
#prototype::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round' d='M7 4v16l13-8z'/%3E%3C/svg%3E"); }
#share::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M12 15V3m-4 4 4-4 4 4M6 10H4v10h16V10h-2'/%3E%3C/svg%3E"); }
#compare::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M4 4h7v16H4zM13 4h7v16h-7z'/%3E%3C/svg%3E"); }
#add-pin::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M4 5h16v11H9l-5 4zM8 9h8M8 12h5'/%3E%3C/svg%3E"); }
#inspect-section .stage-bar :is(#prototype, #share, #compare, #add-pin):hover,
#inspect-section .stage-bar :is(#prototype, #compare, #add-pin)[aria-pressed="true"] { background: rgba(0,122,255,.1); color: #007AFF; }
#unit-controls { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
#unit-controls label { display: inline-flex; align-items: center; gap: 5px; }
#unit-controls :is(select,input) { min-height: 28px; border: 1px solid rgba(0,0,0,.14); padding: 4px 7px; background: #fff; color: var(--label); font: 500 13px var(--sans); }
#inspect-section .layers-sidebar { grid-column: 1; grid-row: 2; min-height: 0; background: var(--ui-bg-secondary); }
.layers-head { padding: 12px 10px 6px; border-bottom: 0; background: var(--ui-bg-secondary); }
.sidebar-tabs, .tabs { display: flex; gap: 2px; padding: 2px; border: 0; border-radius: 8px; background: rgba(0,0,0,.065); }
.sidebar-tabs button, .tabs button { flex: 1 0 auto; min-height: 25px; padding: 3px 8px; border: 0; border-radius: 6px; color: #6E6E73; font: 500 12.5px var(--sans); white-space: nowrap; }
.sidebar-tabs button[aria-pressed="true"], .tabs button[aria-selected="true"] { background: #fff; color: #1D1D1F; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
#layer-tree { padding: 8px 10px 20px; }
#layer-tree > p { padding: 0 6px 8px; font-size: 11.5px; }
.tree-row { min-height: 32px; margin-bottom: 4px; border-radius: 8px; font-size: 13.5px; font-weight: 500; }
.tree-row .ic { width: 22px; height: 22px; border-radius: 6px; background: #007AFF; color: #fff; }
.tree-row:nth-child(6n + 2) .ic { background: #FF2D55; }
.tree-row:nth-child(6n + 3) .ic { background: #AF52DE; }
.tree-row:nth-child(6n + 4) .ic { background: #FF9500; }
.tree-row:nth-child(6n + 5) .ic { background: #30B0C7; }
.tree-row:nth-child(6n) .ic { background: #34C759; }
.tree-row[aria-current="true"] { background: #007AFF; color: #fff; }
.tree-row[aria-current="true"] .tp { color: rgba(255,255,255,.8); }
#inspect-section .stage { position: relative; grid-column: 2; grid-row: 2; min-width: 0; min-height: 0; height: auto; padding: 0; display: block; background-color: var(--ui-bg-secondary); background-image: radial-gradient(rgba(0,0,0,.09) 1px,transparent 1px); background-size: 16px 16px; }
#inspect-section .board-wrap { height: 100%; max-height: none; padding: 44px 20px 72px; }
#inspect-section .board { box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 12px 40px rgba(0,0,0,.14); }
#inspect-section .hint { position: absolute; z-index: 2; bottom: 14px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 7px 14px; border-radius: var(--ui-radius-12); background: var(--ui-bg); box-shadow: var(--ui-shadow-3); font-size: 12px; text-align: center; pointer-events: none; }
#inspect-section .panel { grid-column: 3; grid-row: 2; min-height: 0; border-left: 1px solid var(--sep); background: #F5F5F7; }
#inspect-section .tabs { margin: 12px 16px 0; overflow-x: auto; }
#inspect-section .tabbody { max-height: none; padding: 14px 12px 24px; gap: 12px; }
.layer-name { padding: 0 4px; font-size: 18px; font-weight: 700; letter-spacing: -.3px; }
.layer-name .pill { padding: 2px 7px; border-radius: 6px; background: rgba(255,149,0,.14); color: #A95A00; font-size: 11px; font-weight: 600; }
.layer-path { padding: 0 4px; font-size: 11.5px; }
.tabbody > .kv, .spec-sec { display: grid; gap: 8px; padding: 10px 12px 12px; border: 0; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.tabbody > .kv { grid-template-columns: 64px minmax(0,1fr); }
.tabbody > .kv::before { content: '位置和大小'; grid-column: 1 / -1; display: flex; align-items: center; min-height: 22px; padding-left: 30px; background: #007AFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='1.7' d='M4 9V4h5m6 0h5v5M4 15v5h5m6 0h5v-5'/%3E%3C/svg%3E") 4px center/14px 14px no-repeat; background-size: 22px 22px, 14px 14px; color: #1D1D1F; font-size: 13.5px; font-weight: 600; }
/* 用独立伪元素承载彩色图标，避免整行着色。 */
.tabbody > .kv::before { background-color: transparent; background-image: linear-gradient(#007AFF,#007AFF), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='2' d='M4 9V4h5m6 0h5v5M4 15v5h5m6 0h5v-5'/%3E%3C/svg%3E"); background-position: left center, 4px center; background-size: 22px 22px, 14px 14px; background-repeat: no-repeat; }
.spec-sec > b, .measure-title, .code-head > b { display: flex; align-items: center; gap: 8px; min-height: 22px; font-size: 13.5px; font-weight: 600; }
.spec-sec > b::before, .measure-title::before, .code-head > b::before { content: ''; flex: none; width: 22px; height: 22px; border-radius: 6px; background: #FF9500 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M5 6h14M12 6v12M9 18h6'/%3E%3C/svg%3E") center/14px 14px no-repeat; }
.measure-title::before { background-color: #007AFF; }
.spec-sec:nth-of-type(2n) > b::before { background-color: #AF52DE; }
.code-head > b::before { background-color: #5856D6; }
.kv { gap: 8px 10px; }
.kv dt { color: #6E6E73; font-size: 13px; }
.kv dd { color: #1D1D1F; font: 600 13px var(--sans); font-variant-numeric: tabular-nums; }
.measure-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 10px 12px 12px; border-radius: 12px; background: #fff; }
.measure-title { grid-column: 1 / -1; }
.measure-cell { min-width: 0; padding: 8px; border-radius: 8px; background: #F5F5F7; }
.measure-cell .cp { font-size: 15px; font-weight: 600; }
.measure-unit { margin-left: 3px; color: #6E6E73; font-size: 11.5px; font-weight: 400; }
.cp { position: relative; border: 1px solid transparent; border-radius: 5px; color: inherit; font: inherit; }
.cp.copied { border-color: #007AFF; background: rgba(0,122,255,.1); color: #007AFF; }
.cp.copied::after { content: '已复制'; position: absolute; z-index: 1; top: -15px; right: 0; color: #007AFF; font: 500 10px var(--sans); white-space: nowrap; }
.code-head { padding: 10px 12px 0; border-radius: 12px 12px 0 0; background: #fff; }
pre.code { font-family: var(--mono); }
.overlay text { font-family: var(--sans); font-variant-numeric: tabular-nums; font-size: 11.5px; font-weight: 700; }
.slice-outlines > rect { fill: rgba(52,199,89,.08); stroke: #34C759; }
.slice-outlines g rect { fill: #34C759; stroke: none; }
.slice-outlines text { fill: #fff; stroke: none; font: 600 10.5px var(--sans); }
@media (max-width: 900px) {
  #inspect-section > .inspect { grid-template-columns: minmax(0,1fr) 280px; grid-template-rows: var(--ui-toolbar-height) minmax(0,1fr) minmax(70px,22vh); }
  #inspect-section .stage { grid-column: 1; grid-row: 2; }
  #inspect-section .panel { grid-column: 2; grid-row: 2; }
  #inspect-section .layers-sidebar { grid-column: 1 / -1; grid-row: 3; max-height: none; border-right: 0; border-top: 1px solid var(--sep); }
}
@media (max-width: 600px) {
  #inspect-section > .inspect { grid-template-columns: minmax(0,1fr); grid-template-rows: var(--ui-toolbar-height) minmax(180px,1fr) minmax(120px,33vh) minmax(50px,15vh); }
  #inspect-section .stage { grid-column: 1; grid-row: 2; }
  #inspect-section .panel { grid-column: 1; grid-row: 3; border-left: 0; border-top: 1px solid var(--sep); }
  #inspect-section .layers-sidebar { grid-column: 1; grid-row: 4; }
  #inspect-section .board-wrap { padding: 20px 12px 56px; }
  #inspect-section .hint { font-size: 11px; }
  #inspect-section .layers-head { padding: 6px 10px; }
  #layer-tree { padding: 4px 10px; }
}
.sidebar-group { margin: 0 0 12px; }
.sidebar-group-head { display: flex; align-items: center; gap: 9px; width: 100%; padding: 14px 8px 10px; text-align: left; font-size: 16px; font-weight: 700; }
.sidebar-group-head[aria-expanded="false"] { padding-top: 12px; font-size: 15px; font-weight: 600; }
.sidebar-group-head::before { content: ''; flex: none; width: 24px; height: 24px; border-radius: 6px; background: #007AFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M3 6h7l2 2h9v10H3z'/%3E%3C/svg%3E") center/16px 16px no-repeat; }
.sidebar-group:nth-of-type(6n + 2) .sidebar-group-head::before { background-color: #FF2D55; }
.sidebar-group:nth-of-type(6n + 3) .sidebar-group-head::before { background-color: #AF52DE; }
.sidebar-group:nth-of-type(6n + 4) .sidebar-group-head::before { background-color: #FF9500; }
.sidebar-group:nth-of-type(6n + 5) .sidebar-group-head::before { background-color: #30B0C7; }
.sidebar-group:nth-of-type(6n) .sidebar-group-head::before { background-color: #34C759; }
.sidebar-board { display: grid; grid-template-columns: 30px minmax(0,1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; width: 100%; min-height: 60px; margin: 0 0 4px; padding: 4px 8px; border-radius: 10px; text-align: left; }
.sidebar-board:hover { background: rgba(0,0,0,.05); }
.sidebar-board[aria-current="true"] { color: #fff; background: #007AFF; box-shadow: 0 1px 3px rgba(0,122,255,.35); }
.sidebar-board-thumb { grid-column: 1; grid-row: 1 / 3; width: 30px; height: 52px; object-fit: cover; object-position: top; border-radius: 5px; background: #fff; }
.sidebar-board-title { grid-column: 2; align-self: end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 500; }
.sidebar-board-meta { grid-column: 2; align-self: start; color: #6E6E73; font-size: 11.5px; }
.sidebar-board[aria-current="true"] .sidebar-board-meta { color: rgba(255,255,255,.8); }
.sidebar-board-thumb { display: block; overflow: hidden; }
.sidebar-board-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.tabbody > .kv::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='2' d='M4 9V4h5m6 0h5v5M4 15v5h5m6 0h5v-5'/%3E%3C/svg%3E"), linear-gradient(#007AFF,#007AFF); background-position: 4px center, left center; background-size: 14px 14px, 22px 22px; }
@media (max-width: 600px) { #inspect-section .board-wrap { padding-inline: 6px; } }
.sidebar-board > span:not(.sidebar-board-thumb) { grid-column: 2; grid-row: 1 / 3; display: grid; min-width: 0; gap: 2px; }
.sidebar-board-title, .sidebar-board-meta { display: block; }
.measure-card { padding: 10px 12px 12px; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.measure-grid { margin-top: 8px; padding: 0; background: transparent; }
.measure-cell { display: grid; gap: 3px; align-content: center; text-align: left; }
.measure-cell > span { color: #6E6E73; font-size: 11px; font-weight: 500; }
.measure-cell > strong { color: #1D1D1F; font-size: 15px; font-weight: 600; }
.measure-cell.copied > strong { color: #007AFF; }
.measure-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' d='M4 9V4h5m6 0h5v5M4 15v5h5m6 0h5v-5'/%3E%3C/svg%3E"); }
.measure-cell { border-radius: 8px; }
@media (max-width: 600px) { #inspect-section .hint { width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
.spec-sec[data-section="文字"] > b::before { background-color: #FF9500; }
.spec-sec[data-section^="填充"] > b::before,
.spec-sec[data-section="描边"] > b::before,
.spec-sec[data-section="颜色"] > b::before { background-color: #AF52DE; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='1.8' stroke-linejoin='round' d='M12 3s-6 7-6 11a6 6 0 0 0 12 0c0-4-6-11-6-11z'/%3E%3C/svg%3E"); }
.sidebar-group[data-group="未分组"] .sidebar-group-head::before { background-color: #8E8E93; }
.sidebar-board-title, .sidebar-board-meta { grid-column: auto; }
.sidebar-group-head { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tabbody > .kv::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Crect width='22' height='22' rx='6' fill='%23007AFF'/%3E%3Cpath fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' d='M6 9V6h3m4 0h3v3M6 13v3h3m4 0h3v-3'/%3E%3C/svg%3E"); background-position: left center; background-size: 22px 22px; }
/* 成员、分享和令牌统一放在权限管理区。 */
#account .account-members-open, #account .account-admin-open { display: none; }

/* 快捷键入口避开右下角的画布缩放条。 */
body:has(> main > #project-topbar) > .kbd-fab { left: 16px; right: auto; }
@media (max-width: 368px) {
  html:not([data-embed="1"]) body:not(.team-home-open):has(> main > #inspect-section[hidden]) > .kbd-fab {
    bottom: calc(max(var(--ui-space-8), env(safe-area-inset-bottom, 0px)) + 48px);
  }
  html:not([data-embed="1"]) body:not(.team-home-open):has(> main > #inspect-section[hidden]):has(> main #organizer:not([hidden]) .org-minimap:not([hidden]), > main #remote-organizer:not([hidden]) .org-minimap:not([hidden])) > .kbd-fab {
    bottom: calc(max(var(--ui-space-8), env(safe-area-inset-bottom, 0px)) + 262px);
  }
}

/* 项目页：工具栏、全屏地图与导入进度。 */
body:has(> main > #project-topbar) { margin: 0; padding: 0; height: 100dvh; overflow: hidden; }
main:has(> #project-topbar) { width: 100%; height: 100%; max-width: none; margin: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 0; }
.project-topbar { position: relative; z-index: 20; grid-row: 1; display: flex; align-items: center; gap: var(--ui-space-8); min-height: var(--ui-toolbar-height); padding: 0 var(--ui-space-32); border-bottom: var(--ui-border-0); background: var(--ui-bg); }
.project-topbar svg { display: block; flex: none; }
.project-icon-button { flex: none; }
.project-identity { display: flex; align-items: center; gap: var(--ui-space-4); min-width: 0; }
.project-mark { display: grid; place-items: center; flex: none; width: 32px; height: 32px; margin-right: var(--ui-space-4); border-radius: var(--ui-radius-8); background: var(--ui-palette-indigo-bg); color: var(--ui-palette-indigo-fg); }
.project-name { overflow: hidden; max-width: 192px; padding: var(--ui-space-4); border-radius: var(--ui-radius-6); color: var(--ui-text-primary); font: var(--ui-font-weight-headline) var(--ui-font-size-headline)/var(--ui-line-height-headline) var(--ui-font); text-overflow: ellipsis; white-space: nowrap; }
.project-name:hover { background: var(--ui-fill-3); }
.project-name-chevron { display: inline-flex; flex: none; color: var(--ui-text-tertiary); pointer-events: none; }
.project-name-chevron svg { width: 12px; height: 12px; }
.project-version { display: inline-flex; align-items: center; gap: var(--ui-space-4); }
.project-version-label { color: var(--ui-text-secondary); font: var(--ui-font-weight-label) var(--ui-font-size-label)/var(--ui-line-height-label) var(--ui-font); white-space: nowrap; }
.project-version select { max-width: 128px; height: 32px; padding: 0 var(--ui-space-8); border: var(--ui-border-0); border-radius: var(--ui-radius-8); background: var(--ui-bg); color: var(--ui-text-primary); font: var(--ui-font-weight-callout) var(--ui-font-size-callout)/var(--ui-line-height-callout) var(--ui-font); }
.project-views { flex: none; margin-left: auto; }
.project-views button { white-space: nowrap; }
.project-tools { display: flex; flex: none; align-items: center; gap: var(--ui-space-4); padding: 0 var(--ui-space-8); border-left: var(--ui-border-0); border-right: var(--ui-border-0); }
.project-tools .project-icon-button[aria-pressed="true"] { background: var(--ui-selection-bg); color: var(--ui-selection-text); }
.project-tools .project-icon-button:disabled { opacity: .5; cursor: not-allowed; }
.project-tools .project-icon-button svg { width: 20px; height: 20px; }
.project-actions { display: flex; align-items: center; gap: var(--ui-space-8); margin-left: auto; }
/* 顶栏工具：上图标、下文字，和标注页一致（用户 2026-11-10 定，示意图 docs/界面/顶栏和切图-示意.html） */
.project-title { display: grid; min-width: 0; }
.project-name-line { display: flex; align-items: center; min-width: 0; }
.project-topbar .project-name { min-width: 0; max-width: 240px; padding: 0 var(--ui-space-4); line-height: 20px; }
.project-topbar .project-version { gap: var(--ui-space-4); padding-left: var(--ui-space-4); }
.project-topbar .project-version-label { color: var(--ui-text-tertiary); }
.project-topbar .project-version select { height: 20px; max-width: 200px; padding: 0 var(--ui-space-4); border: 0; background: transparent; color: var(--ui-text-secondary); font: var(--ui-font-weight-caption) var(--ui-font-size-caption)/var(--ui-line-height-caption) var(--ui-font); cursor: pointer; }
.project-topbar .project-version select:hover { background: var(--ui-fill-3); }
.project-topbar .project-tool { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: auto; min-width: 48px; height: 48px; min-height: 48px; padding: var(--ui-space-4); border: 0; border-radius: var(--ui-radius-8); background: transparent; box-shadow: none; color: var(--ui-text-secondary); font: var(--ui-font-weight-label) var(--ui-font-size-label)/var(--ui-line-height-label) var(--ui-font); white-space: nowrap; }
.project-topbar .project-tool:hover:not(:disabled) { background: var(--ui-fill-3); color: var(--ui-text-primary); }
.project-topbar .project-tool[aria-pressed="true"], .project-topbar .project-tool[aria-expanded="true"] { background: var(--ui-selection-bg); color: var(--ui-selection-text); }
.project-topbar .project-tool svg { width: 20px; height: 20px; }
.project-tool-label { display: block; }
.project-topbar { min-height: 60px; }
/* 顶栏整理（用户 2026-11-10 定，示意图 docs/界面/顶栏整理-示意.html）：左“项目和版本”，中“编辑工具”，右“查看和分享” */
.project-topbar .project-mark, .project-topbar #copy-project-link, .project-topbar #workbench-online-controls { display: none !important; }
.project-topbar .project-version { position: relative; }
.project-topbar .project-version .project-version-label { display: none; }
.project-topbar .project-version-text { display: inline-flex; align-items: center; gap: 2px; padding: 0 var(--ui-space-4); border-radius: var(--ui-radius-6); color: var(--ui-text-secondary); font: var(--ui-font-weight-caption) var(--ui-font-size-caption)/20px var(--ui-font); white-space: nowrap; }
.project-topbar .project-version-text::after { content: ''; width: 8px; height: 8px; margin-left: 4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .7; }
.project-topbar .project-version:hover .project-version-text { background: var(--ui-fill-3); }
.project-topbar .project-version select { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; opacity: 0; cursor: pointer; }
.project-topbar .project-version:focus-within .project-version-text { box-shadow: 0 0 0 3px var(--ui-selection-bg); }
.project-topbar .project-tools { margin-left: var(--ui-space-8); }
/* 搜索：平时只有“搜索”按钮，点开后在顶栏下面弹出输入框 */
.project-topbar .project-search { display: none; }
.project-topbar[data-search-open] .project-search { display: flex; position: absolute; z-index: 40; top: calc(100% + var(--ui-space-8)); right: var(--ui-space-16); width: min(360px, calc(100vw - 32px)); background: var(--ui-bg); box-shadow: var(--ui-shadow-3); }
.project-more { position: relative; flex: none; }
.project-more-menu, .project-help { position: fixed; z-index: 40; box-sizing: border-box; width: min(280px, calc(100vw - 32px)); }
.project-more-menu { width: min(160px, calc(100vw - 32px)); }
.project-more-menu .project-overflow-item { display: none; }
.project-more-menu[hidden], .project-help[hidden] { display: none; }
.project-help { padding: var(--ui-space-16); border: var(--ui-border-0); border-radius: var(--ui-radius-12); background: var(--ui-bg); box-shadow: var(--ui-shadow-3); color: var(--ui-text-primary); font: var(--ui-font-weight-body) var(--ui-font-size-body)/var(--ui-line-height-body) var(--ui-font); }
.project-help-heading { display: flex; align-items: center; justify-content: space-between; }
.project-help h2 { margin: 0; font: var(--ui-font-weight-headline) var(--ui-font-size-headline)/var(--ui-line-height-headline) var(--ui-font); }
.project-help ul { margin: var(--ui-space-12) 0; padding-left: var(--ui-space-24); }
.project-help li + li { margin-top: var(--ui-space-4); }
.project-help a { color: var(--ui-accent); }
.project-search { width: 224px; }
.project-search input { font: var(--ui-font-weight-callout) var(--ui-font-size-callout)/var(--ui-line-height-callout) var(--ui-font); }
.project-button { flex: none; }
.project-copy-link { flex: none; }
#workbench-online-controls { display: none; }
html[data-embed="app"] #workbench-online-controls { display: inline-flex; }
html[data-embed="app"] .project-account,
html[data-embed="app"] [data-workbench-hide],
html[data-embed="app"] #online label:has([data-field="team"]),
html[data-embed="app"] #online [data-action="team-create"] { display: none !important; }
html[data-embed="app"], html[data-embed="app"] body { width: 100%; height: 100%; overflow: hidden; }
.fixed-route-error { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; gap: var(--ui-space-16); padding: var(--ui-space-24); background: var(--ui-bg); color: var(--ui-text-primary); text-align: center; }
html[data-fixed-route] body > main, html[data-fixed-route] body > .kbd-fab, html[data-fixed-route] body > .kbd-panel { visibility: hidden; }
.fixed-route-error[hidden] { display: none; }
.project-share-wrap { position: relative; display: inline-flex; }
.project-share-wrap:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; border-radius: var(--ui-radius-8); }
.project-share-wrap button:disabled { pointer-events: none; }
.project-share-reason { position: absolute; z-index: 40; top: calc(100% + var(--ui-space-8)); right: 0; width: max-content; max-width: min(264px, 80vw); padding: var(--ui-space-8) var(--ui-space-12); border-radius: var(--ui-radius-8); background: var(--ui-bg); color: var(--ui-text-primary); box-shadow: var(--ui-shadow-3); font: var(--ui-font-weight-caption) var(--ui-font-size-caption)/var(--ui-line-height-caption) var(--ui-font); visibility: hidden; }
.project-share-wrap:hover .project-share-reason, .project-share-wrap:focus-within .project-share-reason { visibility: visible; }
.project-info-dialog { padding: 0; border: 0; border-radius: var(--ui-radius-16); background: transparent; }
.project-info-dialog::backdrop { background: var(--ui-fill-1); }
.permission-review-status { margin: 0; padding: var(--ui-space-24); border-radius: var(--ui-radius-16); background: var(--ui-bg); color: var(--ui-text-secondary); }
.permission-extra { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; padding: var(--ui-space-24); border-radius: var(--ui-radius-16); background: var(--ui-bg); }
.permission-extra-header { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-16); }
.permission-extra-header h2 { margin: 0; }
.permission-extra [hidden] { display: none !important; }
.project-picker { width: min(320px, calc(100vw - 32px)); padding: var(--ui-space-16); border: var(--ui-border-0); border-radius: var(--ui-radius-16); background: var(--ui-bg); box-shadow: var(--ui-shadow-3); }
.project-picker h2 { margin: 0 0 var(--ui-space-12); font: var(--ui-font-weight-title) var(--ui-font-size-title)/var(--ui-line-height-title) var(--ui-font); }
.project-picker-heading { margin: var(--ui-space-12) var(--ui-space-4) var(--ui-space-4); color: var(--ui-text-secondary); font: var(--ui-font-weight-caption) var(--ui-font-size-caption)/var(--ui-line-height-caption) var(--ui-font); }
.project-picker-list { display: grid; max-height: 180px; overflow: auto; }
.project-picker-list button { overflow: hidden; padding: var(--ui-space-8) var(--ui-space-12); border: 0; border-radius: var(--ui-radius-6); background: transparent; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.project-picker-list button:hover, .project-picker-list button[aria-current="page"] { background: var(--ui-selection-bg); color: var(--ui-selection-text); }
.project-picker-close { margin-top: var(--ui-space-12); padding: var(--ui-space-8) var(--ui-space-12); border: 0; border-radius: var(--ui-radius-8); background: var(--ui-fill-2); }
.project-account { position: relative; flex: none; }
.project-account > summary { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--ui-radius-8); background: var(--ui-palette-purple-bg); color: var(--ui-palette-purple-fg); cursor: pointer; list-style: none; }
.project-account > summary::-webkit-details-marker { display: none; }
.project-account > summary:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.project-account-menu { position: absolute; top: 40px; right: 0; z-index: 30; display: grid; gap: var(--ui-space-12); width: min(360px, calc(100vw - 32px)); max-height: calc(100dvh - 96px); overflow: auto; padding: var(--ui-space-16); border: var(--ui-border-0); border-radius: var(--ui-radius-12); background: var(--ui-bg); box-shadow: var(--ui-shadow-3); }
.mode-controls { display: flex; flex-wrap: wrap; gap: var(--ui-space-8); }
#wall-section { grid-row: 2; display: block; min-width: 0; min-height: 0; overflow: hidden; background-color: var(--ui-bg-secondary); background-image: radial-gradient(var(--ui-separator) 1px, transparent 1px); background-size: var(--ui-canvas-grid-size) var(--ui-canvas-grid-size); }
main:has(> #inspect-section:not([hidden])) > #wall-section, body.team-home-open #wall-section { visibility: hidden; pointer-events: none; }
body.team-home-open #project-topbar { visibility: hidden; pointer-events: none; }
#organizer, #remote-organizer { width: 100%; height: 100%; }
/* 画布读取中、读不到时的提示：居中一张小卡片，读取中带转圈（用户 2026-11-10：原来字太小不好看） */
.remote-canvas-status { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ui-space-12); width: 100%; height: 100%; margin: 0; color: var(--ui-text-secondary); font: var(--ui-font-weight-headline) var(--ui-font-size-headline)/var(--ui-line-height-headline) var(--ui-font); text-align: center; }
.remote-canvas-status::before { content: ''; width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--ui-selection-bg); border-top-color: var(--ui-accent); animation: remote-canvas-spin .9s linear infinite; }
.remote-canvas-status:not([data-loading])::before { content: none; }
@keyframes remote-canvas-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .remote-canvas-status::before { animation: none; } }
.project-online { position: fixed; z-index: 18; top: 68px; right: 16px; width: min(720px, calc(100vw - 32px)); max-height: calc(100dvh - 84px); overflow: auto; pointer-events: none; }
.project-online > :not([hidden]) { pointer-events: auto; }
#import-section { position: fixed; z-index: 45; right: 16px; bottom: 68px; width: min(340px, calc(100vw - 32px)); pointer-events: none; }
#import-section #drop { display: block; padding: 0; border: 0; background: transparent; }
#import-section #drop.over::before { position: fixed; z-index: -1; inset: 64px 16px 16px; display: grid; place-items: center; border: 2px dashed var(--ui-accent); border-radius: var(--ui-radius-16); background: var(--ui-selection-bg); color: var(--ui-selection-text); content: '松开后导入设计稿'; font: var(--ui-font-weight-title) var(--ui-font-size-title)/var(--ui-line-height-title) var(--ui-font); }
#import-section .jobs { max-height: min(45dvh, 360px); overflow: auto; padding: var(--ui-space-12); border: var(--ui-border-0); border-radius: var(--ui-radius-12); background: var(--ui-bg); box-shadow: var(--ui-shadow-3); pointer-events: auto; }
#import-section .job { background: var(--ui-fill-3); }
@media (max-width: 1280px) {
  .project-search { width: 150px; }
}
@media (max-width: 1120px) {
  .project-topbar { flex-wrap: wrap; padding: 8px 12px; }
  .project-identity { flex: 1 1 auto; }
  .project-views { order: 2; margin-left: auto; }
  .project-tools { order: 3; }
  .project-actions { order: 4; flex: 1 1 auto; justify-content: flex-end; }
  .project-search { flex: 1 1 120px; width: auto; max-width: 240px; }
}
@media (max-width: 480px) {
  .project-topbar { gap: 6px; }
  .project-name { max-width: 120px; }
  .project-views { margin-left: 0; }
  .project-views button { padding-inline: 7px; }
  .project-version-label { display: none; }
  .project-tools { padding-inline: 4px; }
  .project-tools .project-icon-button { width: 30px; }
  .project-actions { justify-content: flex-start; gap: var(--ui-space-4); }
  .project-search { min-width: 100px; }
  .project-button { padding-inline: 8px; }
  .project-online { top: 150px; }
}
@media (max-width: 368px) { .project-actions { flex-wrap: wrap; min-width: 0; } }
@media (max-width: 1151px) { .project-name { max-width: 120px; } }
/* 窗口窄时文字收起，只剩图标；指针放上去仍有说明 */
@media (max-width: 1360px) {
  .project-topbar { padding-inline: var(--ui-space-16); }
  .project-topbar .project-search { width: 150px; }
  .project-topbar .project-tool { min-width: 44px; }
}
@media (max-width: 1200px) {
  .project-topbar .project-tool { min-width: 32px; height: 32px; min-height: 32px; padding: 0; width: 32px; }
  .project-topbar .project-tool .project-tool-label { display: none; }
}
@media (min-width: 769px) and (max-width: 1280px) {
  html[data-embed="app"] .project-name { min-width: 120px; max-width: 192px; }
  html[data-embed="app"] .project-search { width: 112px; }
  html[data-embed="app"] #project-link-card, html[data-embed="app"] #project-preview { display: none; }
  html[data-embed="app"] .project-more-menu [data-overflow-target="project-link-card"],
  html[data-embed="app"] .project-more-menu [data-overflow-target="project-preview"] { display: flex; }
}