.scenes { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.scenes .opt { flex-direction: row; justify-content: flex-start; text-align: left; gap: 12px; padding: 14px; }
.scenes .opt .ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; background: var(--accent-soft); border: 1px solid var(--border); }
.scenes .opt .ic svg { width: 20px; height: 20px; color: var(--accent-1); }
.scenes .opt .tx { display: flex; flex-direction: column; gap: 2px; }
.editor-stage { height: calc(100vh - 250px); min-height: 420px; max-height: 820px; touch-action: none; margin-top: 12px; cursor: none; }
.editor-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.editor-stage.pan { cursor: grab; } .editor-stage.panning { cursor: grabbing; }
.compare-layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 10px; z-index: 3; background: inherit; }
.compare-layer .compare { max-width: 100%; max-height: 100%; }
.zoom-val { font-size: 12.5px; color: var(--text-2); min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; }
.seg button { display: inline-flex; align-items: center; gap: 6px; }
.seg button svg { width: 16px; height: 16px; }
.btn [data-icon] svg, .seg [data-icon] svg { display: block; }
.brush-preview { height: 86px; border-radius: 12px; border: 1px solid var(--border); display: grid; place-items: center; background: repeating-conic-gradient(var(--checker-a) 0 25%, var(--checker-b) 0 50%) 0 0/14px 14px; overflow: hidden; }
.brush-preview span { border-radius: 50%; background: rgba(220,192,143, .6); box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 0 18px rgba(220,192,143,.6); transition: width .1s, height .1s; }
.stage-hint { margin-top: 10px; }
@media (max-width: 960px) {
  .editor-stage { height: 52vh; min-height: 300px; }
  .mobile-bar .mb-brush { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
  .mobile-bar #dlBtnM { padding: 0 12px; }
}
@media (max-width: 600px) {
  .toolbar { gap: 6px; }
  .toolbar .icon-btn { height: 36px; min-width: 36px; padding: 0 8px; }
  .toolbar .sep { display: none; }
  .seg button .t { display: none; }
  .seg button { padding: 6px 10px; }
  .zoom-val, #zoomInBtn, #zoomOutBtn { display: none; }
  .editor-stage { height: 48vh; min-height: 280px; margin-top: 10px; }
  .stage-card { padding: 12px; }
  .scenes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scenes .opt { padding: 10px; gap: 10px; }
  .scenes .opt .ic { width: 32px; height: 32px; }
}